There are a few JavaScript frameworks/toolsets out there, such as:
It certainly seems that jQuery is ascendant in terms of mindshare at the moment. For example, Microsoft (ASP.NET MVC) and Nokia will use it [9]. I also found this performance comparison of Dojo, jQuery, MooTools and Prototype [10] (Edit: Updated Comparison [11]), which looks highly favourable to Dojo and jQuery.
Now my previous experience with JavaScript has been the old school HTML + JavaScript most of us have done and RIA [12] frameworks like Google Web Toolkit [13] ("GWT") and Ext-GWT [14], which were a fairly low-stress entry into the Ajax world for someone from a Java background, such as myself.
But, after all this, I find myself leaning towards the more PHP + Ajax type solution, which just seems that much more lightweight.
So I've been looking into jQuery and I really like its use of commands, the use of fluent interfaces and method chaining [15], its cross-browser CSS selector superset, the fact that it's lightweight and extensible, the brevity of the syntax, unobtrusive JavaScript [16] and the plug-in framework. Now obviously many of these aren't unique to jQuery but on the basis that some things are greater than their sum of parts, it just seems that it all fits together and works well.
So jQuery seems to have a lot going for it and it looks to the frontrunner for what I choose to concentrate on. Is there anything else I should be aware of or any particular reasons not to choose it or to choose something else?
EDIT: I just wanted to add this trend comparison of JavaScript frameworks [17].
jQuery
for..in
isn't even called looping, it is enumerating over the keys. - Chetan Sastry
Being a Dojo developer I would recommend Dojo. While my choice is not surprising, I became a Dojo developer because I found following things, which are done better than in other JavaScript frameworks:
If all you want is to write one-liners and add simple progressive enhancements to existing web applications, you can do it with pretty much any framework, or even with a pure JavaScript. But as soon as your web application becomes bigger or more complex, good packaging, good support for your favorite methodologies, good building blocks, and the ability to make your own building blocks become more and more important. That's why I settled on Dojo, and never looked back.
jQuery
side I am not blaming other javascript framework since they have their own strength but designing framework like this is is not easy and the developer must be super brilliant. So it seems to be unacceptable to have null/undefined error on the widget demo. Not to mention about bug report but for new comers/beginner to view the demo + documentation is crucial. It should be tested properly before releasing/publishing a demo. The widget loading also slow. I will prefer using Ext Js + jQuery for UI while supporting jQuery UI to be more matured. - CallMeLaNN
tooltip
< not aligned properly. popup TimeTextBox
have inconsistence border or size. Slider
have slow response with mouse drag. the rest i can't remember where the null/undefined error. - CallMeLaNN
With the exception of Dojo/YUI most of these are libraries, not frameworks. Frameworks involve a little more (architecture + development tools).
JavaScriptMVC (http://javascriptmvc.com) is a great choice for organizing and developing a large scale JS application.
The architecture design very well thought out. There are 4 things you will ever do with JavaScript:
JMVC splits these into the Model, View, Controller pattern.
First, and probably the most important advantage, is the Controller. Controllers use event delegation, so instead of attaching events, you simply create rules for your page. They also use the name of the Controller to limit the scope of what the controller works on. This makes your code deterministic, meaning if you see an event happen in a '#todos' element you know there has to be a todos controller.
$.Controller('Todos',{
'click' : function(el, ev){ ... },
'.delete mouseover': function(el, ev){ ...}
'.drag draginit' : function(el, ev, drag){ ...}
})
Next comes the model. JMVC provides a powerful Class and basic model that lets you quickly organize Ajax functionality (#2) and wrap the data with domain specific functionality (#3). When complete, you can use models from your controller like:
Todo.findAll({after: new Date()}, myCallbackFunction);
Finally, once your todos come back, you have to display them (#4). This is where you use JMVC's view.
'.show click' : function(el, ev){
Todo.findAll({after: new Date()}, this.callback('list'));
},
list : function(todos){
$('#todos').html( this.view(todos));
}
In 'views/todos/list.ejs'
<% for(var i =0; i < this.length; i++){ %>
<label><%= this[i].description %></label>
<%}%>
JMVC provides a lot more than architecture. It helps you in ever part of the development cycle with:
I would say that the main question to ask is:
Are you doing small scale website additions or large single page web applications?
Any of the libraries are good for the former, but for the latter I would choose dojo every time. The reason being:
but most importantly
the fact you have a single source for the toolkit and widgets that are on a defined release schedule with a published roadmap and a large number of people working to make each release happen. This is invaluable for large scale development. I would hate to be in the position of using toolkit X for xhr and dom manipulation, but toolkit Y for some widgets and toolkit Z for other widgets. Trying to get compatibility and synchronized releases would be a non starter. Find out how many people support and maintain your toolkit of choice and work through the scenario of what you would do if the maintainers left to do something else..
One thing is nobody seems to have mentioned that you can use more then one library, the MochiKit library in particular, since in terms of name spacing I think it is very well designed. I guess the MochiKit library isn't very popular it is a shame because I think it is hands down the most well designed as a JavaScript library. http://mochikit.com/
I prefer the YUI of all the things mentioned though because not only is it a well designed JavaScript library that doesn't interfere with your code because everything is in YAHOO or wrapped in an anonymous function, but also it has a very clear focus to the library and it fits in with the philosophy of MVC.
Since this question is a bit old, I thought I'd point out that there are new kids in town to consider:
Not as new, but previously unmentioned in this thread:
A follow-up on Eugene's answer: In addition to the massive infrastructure it provides, Dojo 1.6 is also the first (and only) popular JavaScript Library that can be successfully used with the Closure Compiler's Advanced mode, with all the size, performance and obfuscation benefits attached to it -- other than Google's own Closure Library, that is.
In other words, a program using Dojo can be 100% obfuscated -- even the library itself.
Compiled code has exactly the same behavior as plain-text code, except that it is much smaller (average 25% over minifiers), runs much faster (especially on mobile devices), and almost impossible to reverse-engineer, even after passing through a beautifier, because the entire code base (including the library) is obfuscated.
Code that is only "minified" (e.g. YUI compressor, Uglify) can be easily reverse-engineered after passing through a beautifier.
I'm using YUI for a few of their controls (DataTable, Paginator, TabView, Autocomplete, etc.) since they work out of the box with very little coding. But for most everything else I rely on jQuery for it's simplicity.
I'm hoping in the future jQuery will have an equivalent set of controls so I can stick to a single framework.
If you are doing anything really JavaScript-heavy, like a single-page site I would say Dojo [1], because of its great architecture, templates, widget-system and built in widgets for pretty much everything. Otherwise, if you need a more lightweight style, I would say jQuery :)
[1] http://en.wikipedia.org/wiki/Dojo_ToolkitFor a lasting, high quality, bulletproof (or as close as possible) product, you need to be able to do unit and integration tests. jQuery, Dojo, MooTools, and YUI have testing capabilities; not sure about the others. jQuery's testing toolkit is like giving crayons to a painter; sure they can use it, but it doesn't quite do the job. I haven't used Dojo or MooTools testing so I can't really comment on that. YUI's testing toolkit is very nice and I have been using it for a couple of months now.
I have been using jQuery for years now and find that when your project gets to a certain size, code management and resolving bugs gets pretty hard and have been looking for a new tool. Yahoo has done an excellent job and created a solid testing toolkit. It doesn't pollute the global namespace and its results can be read by JUnit and Selenium. Also, the syntax is very friendly to any xUnit user.
As for widgets and the like, YUI does a good job, but Dojo and MooTools both have extensive plugins and widget support from large communities. Dojo integrates extremely well with the DOM, but MooTools and YUI are strong there too.
All in all, I think Dojo, MooTools and YUI are great frameworks, the way you like to code will determine what you use. I'll stay with YUI for now.
In my experience, everytime I saw that first of all Javascript provides a kind of freedom which makes possibile to do everything you want, in every way you want, and that is not the best at all.
I say this as a preface because I think that jQuery is powerful and cool, but let developers to do things in a "quick and dirty" way. My tiny poreface was about this, generally developers makes dirty dirty things in javascript, which tends to became dirty a lot, difficult to mantain and last but not least, difficult to understand!
I used ExtJs and I really love it because it helps to do things in a better way, more structurated, well designed and based on good principles, OOP too, Fine OOP.
I our project when we abandoned ExtJs to go to jQuery we loose all the good designed scripts, easy to read and to understand, and we earned just "quick and dirty" things!
So at the end I can say:
p.s.
The fact that Microsoft adopted jQuery it's not well as it could seems about using or not jQuery ;-)
I have to add something for consideration.
Prototype's API documentation rocks. http://prototypejs.org/api
jQuery's documentation sucks, frankly. I mean, just compare those! http://docs.jquery.com/Main_Page
Also, Script.aculo.us is a known value. I can't say it's technically the best, since all frameworks have something comparable, but who on earth cares about "technically the best"? You don't. I don't, either.
Another option is SproutCore [1].
Right now it seems that they might still be too young (e.g. underdeveloped widget/plugin libraries, lacking documentation) to seriously compete with the big players, but I've never used them. It looks like a MVC framework with some potential.
It seems they got a nice visual style (Apple used them), though I wonder how easy it is to skin/brand. (One of the worst things about Ext is how you can easily identify any Ext app in about half a second).
[1] http://en.wikipedia.org/wiki/SproutCoreBefore starting new GUI for our new project arrival, I made some research.
Here are my findings (remove spaces from "http: // "; bcoz stackoverflow is preventing me to do so :)): Prototype framework favorable links:
http://en.wikipedia.org/wiki/List_of_Ajax_frameworks
http://www.javabeat.net/articles/12-comparison-of-ajax-frameworks-prototype-gwt-dwr-and-1.html
http://www.devx.com/AJAXRoundup/Article/33209
Dojo framework favorable links:
http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparison
jQuery framework favorable links:
http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised
Test speed of different RIA frameworks:
http://mootools.net/slickspeed/#
More comparasions:
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
http://jqueryvsmootools.com/#conclusion
Out of all these findings I started using SmartClient 5. Initially we faced some issues but as SmartClient matures I find it interesting in many terms: 1. APIs doc help and examples 2. Flexible controls 3. Forum
Today I am working on SmartClient 8 and few on my GUIs are in production running successfully. Actually the great help with SmartClient is that you find every thing at one place. No need to dug many other sites that is hard to do for any other open source RIA framework.
So my choice is no doubt SmartClient.
Thanks Shailendra (shaILU)
A great ExtJS alternative: Qooxdoo [1]. It's very advanced, feature-rich, portable and performs like the best. The documentation is certainly no show stopper.
Quoted from their website:
[1] http://qooxdoo.orgqooxdoo is a comprehensive and innovative framework for creating rich internet applications (RIAs). Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications. No HTML, CSS nor DOM knowledge is needed.
It includes a platform-independent development tool chain, a state-of-the-art GUI toolkit and an advanced client-server communication layer. It is open source under an LGPL/EPL dual license
Everybody talks about various JavaScript libraries and how cool one is vs. the other. How many developers really think about the bottomline impactfor their clients/employers????
In our analysis, we found that if you were to build a typical browser-based, serious business application using any of the frameworks/libraries mentioned above, you are likely to have an army of developers developing things in mostly inconsistent manner unless you have an army of code-reviewers/architects who understand how to achieve good modeling in JavaScript-based applications.
And even if you used best of what is available today, it is likely to be outdated in a matter of months if not weeks because landscape is changing so fast. Why is everyone getting so excited about coding JavaScript code to design some cool looking ui, but not even asking where are IDEs that once existed 15/20 years ago?? Does anyone even know/understand what I am talking about? Why are we coding same solutions again and again, instead of drag and drop IDE and the productivity that can be achieved with it?
At end of the day, what matters to the business is a quality, usable business solution that can deliver a lasting solution for years (not months or quarters!)
Finally, coming to the point, after thorough research we settled on General Interface (http://www.generalinterface.org) - originally from Tibco and now donated to the Dojo foundation. It is not the most ideal solution for creating s3xy Ui, but provides pretty good options for creating a meaningful business application.
If you haven't looked at it yet, building little more than s3xy websites, and have a capability to understand the business perspective (along with technical maturity_), then do explore this! You might be pleasantly surprised.
JQuery + SmartClient
I believe SmartClient officially supports comingling with JQuery on the same page. ( http://forums.smartclient.com/showthread.php?t=3578&highlight=jquery [1])
So use JQuery for basic stuff, and insert heavy-hitting application-like widgets via SmartClient.
[1] http://forums.smartclient.com/showthread.php?t=3578&highlight=jqueryI definitely recommend the use of both jQuery for all the reasons listed above, and YUI for the out of the box elements.
You can't go wrong using those!
Of course I am sure some other frameworks (Dojo, Prototyp,... ) are good too.
After it's all a matter of taste and of efficiency.
I use jQuery because there exists a goos integration into my standard web framework struts2 and it is easy to extend.
See http://code.google.com/p/struts2-jquery
The trends comparison has a typo. Here is updated link to trends [1] for last 12 months.
Interesting post and question. I'm open to different libraries but tend to use jQuery because:
I am new to DOJO and so far I hate it. I had a hard time to find a good forum. I went to http://o.dojotoolkit.org/forum but it's obsolete. Searched on Google for hours and haven't found a good one. Could anyone point me to the right DOJO forum?
We are using Spring Faces which uses DOJO as its back end. Therefor we want to use DOJO for the rest of our normal Javascript tasks. However, if it's difficult to find support and documents for DOJO, we will have to switch to jQuery.
Thanks,
Fantabk
Ultimately, it will depend on your project's requirements, your team, your testing methods, and your audience.
jQuery was my first library, and I learned a lot about the language from reading that source code. But, when working on mobile apps, I don't bother with jQuery since most of the weight is resolving cross-browser issues. If your team needs modules and unit tests in namespaces (yadda, yadda, yadda) you may want to look at YUI or ExtJS/Sencha.
The team has to learn it too. jQuery has a lot of good docs and community support. ExtJS is powerful, but heavily relies on object literals with tons of options to control behaviour--something foreign to some programmers.
Regardless, try to pick one library per project.
IMO , jquery is pretty good at what it does, that is, providing a better and easier way to write common js tasks. To build up something more complex (single page apps), check out knockout.js and backbone.js, very small libraries which can sit on top of jquery and help you make awesome apps.
I don't have experience with backbone, but am currently working on a decently sized app with knockout.js. KO follow MVVM pattern, I really don't care much about it but love the fact that I can have all my crud data in a CRUDModel which interacts with a RESTFUL Interface server-side and all other complex business logic in reusable Models which extend the CRUDModel and can handle many-many, one-one and one-many relations.
Also, you can have bindings applied to several View-Models at the same time, each with a different root-element, and that gives you a LOT of flexibility with your app
I have recently started using GQuery (jQuery port for GWT) and it seems to be the best thing that happened to me after Krispy Kreme doughnuts :)
I am a java developer so there is a bias for this framework. The other reason why I recommend it is for the performance. Check out the GQuery vs jQuery performance comparison at http://letusdemo.appspot.com/ I uploaded a demo by Ray Cromwell.
I have to agree with another post, re: a user-friendly fast visual IDE. It'd be really, really great to have a decent JavaScript debugger built in as well.
Also, how about a JavaScript framework with strongly typed variables and real OO structures? That would surely make the transition to JavaScript development a lot less painful for some of us used to a more, shall we say, rigorous programming environment.
I would recommend to look at dhtmlx component library [1], if you need a set of ready UI widgets. It's quite easy to get using the components and the documentation is fairly good.
[1] http://dhtmlx.com/