What is the best lightweight javascript framework?

Question

I'm looking for a lightweight javascript framework whose primary purpose is to abstract out browser differences. I are primarily using it to create new UI elements, and I don't need much other than something that gives me a platform independent language and DOM. Thanks in advance.

Answer 1

I'm a big fan of the Yahoo! User Interface (YUI) Library. It has a good set of DOM manipulation stuff, and a pretty solid widget framework. Plus, you can mix and match what you want to be using.

Answer 2

Personally, when I was doing client-side work, I fell in love with JQuery, which has a 15k version. There's a slight learning curve, but it's very very slick.

Answer 3

Try DOMAssistant, It's only 7kb gzipped, is really fast and has unicode support.

Answer 4

I Use JQuery - it is simple and small, and best of all: Very easy :)

Answer 5

You can pack any js to make it more lightweight, so the question might come down to which do you prefer? I go for prototype - there is a version available called protopacked which I think comes in at about 20kb.

Answer 6

I prefer JQuery. It has good documentation also.JQuery

Answer 7

I'd recommend MooTools :-)

var theDiv = new Element('div', {
    'id': 'theDiv',
    'styles': {
        'backgroundColor': '#BF1942',
        'color': '#fff'
    }
}).toggleClass('someClass').inject($('someSibling', 'after');

I really like the readability of its code.

Answer 8

Mootools is pretty hot. It's getting a bit bigger these days (base is 60K) so that might be out of your reach.

But if you're really just after basic DOM, JQuery would probably be ideal.

Answer 9

Also see question What JavaScript library would you choose for a new project and why?

It seems that jQuery has been growing the most recently. (See this presentation, slide 4)

Answer 10

I also like jQuery because of the powerful selector function "$" and want to provide a link to an alternative documentation: Visual jQuery

Answer 11

I use prototype pretty extensively. The default package is 28kb, whereas JQuery is 90ish*.

http://www.prototypejs.org

*uncompressed

Answer 12

There are 3 JS libraries that I currently use: Prototype, jQuery and MooTools. Prototype and jQuery are the most widely used. jQuery and MooTools are the most lightweight.

MooTools has a nice feature on their site that allows you to build a custom compressed .js file with only the modules you need, making the lightest, depending on what you're doing. jQuery has a much higher fan base, and better support because of it.

Of the 3, I'd recommend jQuery, but it's probably not a bad idea to take a look at all the options available.

Answer 13

I've rolled my own for years, but when playing with others stay far far away from dojo + jquery. I have nothing but good stuff to say about a combination of mootools (best js ani I've seen) + the gui or yui kits

Answer 14

I agree with JQuery as the light, extensible, powerful option. My company is currently using Extjs, which is massive and way more complex for what we are doing. Extjs is great if you need to make a quick site with no designers involved (it comes with all the graphics and styles for creating anything you need) but it's about 6MB and ends up making simple tasks more cumbersome :)

If I could do it all over, which may happen, I'd use JQuery.

Answer 15

Jquery hands down....

plus it's popular so you know it will be around

Web developer trends

Answer 16

midori is a lightweight JavaScript framework (only 45K uncompressed). It supports most CSS2 and CSS3 selectors to access DOM elements, and does not require you to learn an entirely new API. On top of the standard DOM, event and Ajax functionality, it also supports basic visual effects, drag and drop, pop-up menus and auto complete among other things.

Answer 17

jQuery is very good.

What would be very cool is if we could add our framework to a list of frameworks that are being suggested here and allow others to vote on the one that they like best or use - i.e. a dynamic poll/survey.

Answer 18

I agree with Akselsson: DOMAssistant seems to be precisely what you asked for -- lightweight DOM interaction framework to abstract away browser differences. Test it for yourself...

Answer 19

Another vote for jquery here. Fast, light, and the more you learn it, the faster and more concise your code will be.

Answer 20

Here is a comparison chart that I used to help evaluate some of the various libraries out there.

Javascript Framework

It is by no means lists every feature of every library, but gives you a good overview to narrow down your choices to what frameworks you should dig further into to see if it meets your needs.

Answer 21

jQuery is very slick and very easy to learn. I have used Moo in the past for some basic DOM manipulation. It's got less of a footprint but less functionality. The best choice for you definitely depends on your requirements.

Answer 22

mooTools is my favorite as well. Their interface allows you to take as much or as little as you like, so if you would like to add more tricks to your tool bag down the line, it's pretty easy to do so.

Answer 23

The base YUI code -- yahoo-dom-event.js -- is 31KB and works very nicely. You get all sorts of nice event handling & DOM manipulation, and it's very easy to then add on the more complex -- and heavier -- stuff if and when you need it.

Answer 24

Just a suggestion, but I would look for a framework that has the features you desire and not worry too much about the size, within reason. Most modern frameworks like PrototypeJS or JQuery are not that big and have minimized versions (spaces removed, etc). Additionally, you should have your site configured for caching of these libraries. The only time a user will need to download the library is on the first visit, or any visit after they have cleared their browser cache.

When naming the library file(s), make sure to use a unique file name. For example, name your library based on the version of the library. When you need to upgrade to a new version of the library, just reference the new file name (version) from the relevant pages. This will allow you to cache these files without a short-term expiration date.

There are a lot of other caching techniques you might use to get around library file size and improve performance. I would recommend "High Performance Web Sites", ISBN: 0596529309. While all the information in the book can be found online the book does a nice job of collecting the information you need in one place, and glues the various concepts together (I have not financial interest in this book).

Answer 25

I like jQuery because it is lightweight but extremely powerful.

There is also excellent documentation and tutorials to get you started.

Answer 26

Whatever you choose, consider letting Google host it for you:

http://code.google.com/apis/ajaxlibs/

Answer 27

This question is really a duplicate of this question (I think). My answer on that question was as follows (and applies here as well):

You will get a million answers here. The short one is: there are several, not a single one. They are all different in some ways and similar in others, and, in general, none of them are poor choices. The main frameworks that I would recommend are (in alphabetical order so as not to show any bias):

* Dojo
* jQuery
* MooTools
* Prototype (with Scriptaculous)
* YUI
* MochiKit

Each of these have different styles, different communities, and different focuses. Which one you should choose is mostly a matter of matching these frameworks' style with your own. Spend some time with the tutorials and demos of each and pick the one that makes the most sense for you.

As a disclaimer, I'll point out that I'm a developer for MooTools, and wrote a book on how to use it. I wouldn't say that MooTools is better than any of these other frameworks; only different.

Answer 28

I tried prototype and scriptaculous first but then switched to jquery and there is no looking back. If you want nice user interface then YUI is good, but jQuery is simple one in my opinion.

Answer 29

YUI is too big and complex for my tastes. I used to be a Prototype fanboi, but it's lost its luster to me as I've come to use jQuery in new projects. What I like about jQuery is the consistent mental model: find something, act on it.

I liked jQuery enough that I built a Dashboard widget for offline access to the docs: jQuery Reference Widget

Answer 30

jquery is your best option if you are doing small enhancements, since it's the most widely used framework, and you'll get plenty of feedback from other users. However, am not a jquery user myself because I already develop RIAs using Ext JS. Because of that, I use Ext-core (a subset of Ext JS) because the framework has better OO design, and it provides the same basic functionality as jquery (event handling, DOM manipulation, ajax)

http://www.extjs.com/products/core/

I've never used prototype because they augment Object.prototype which causes bugs in our code.