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 . I also found this performance comparison of Dojo, jQuery, MooTools and Prototype (Edit: Updated Comparison ), 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 frameworks like Google Web Toolkit ("GWT") and Ext-GWT , 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 , its cross-browser CSS selector superset, the fact that it's lightweight and extensible, the brevity of the syntax, unobtrusive JavaScript 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 .
Source: Tips4all, CCNA FINAL EXAM
jQuery
ReplyDeleteFast
Well documented
Easy to use
Chaining
Unlike Prototype it doesn't extend an object if you didn't specifically ask for it (try looping an array in Prototype)
easy-to-use Ajax (I love the $.ajaxSetup() function)
Nice event handlers
CSS selectors
filtering your selection
did I mention chaining?
Small (only 30 KB)
Nice little built-in effects.
Plugins
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:
ReplyDeleteOOP (and other paradigms) done right.
Widget infrastructure done right.
Modules done right with all necessary goodies:
Lazy loading of modules dynamically.
Possibility to extract only necessary modules and build a custom one-file profile.
Asynchronous loading of modules if desired.
Simple integration with CDNs for heavy-duty web applications.
Sheer breadth of available modules in DojoX including graphics, charting, grids, and so on.
Ability to use it in non-browser environments.
Attention to details in widgets:
support for i18n (including LTR and RTL languages),
support for l10n (including standard date, currency, number formatting),
provisions for people with special needs (automatic high-contrast mode, keyboard-only support, and so on) — useful for regular users too, and mandatory for most government contracts.
Smart people in the community (last but not least) — as much as I love hand-holding for novices, at some point every developer becomes "seasoned" and needs much more than that.
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.
How about some love for Ext JS? (Or should I write, sencha?)
ReplyDeleteYUI for a complete, professional looking, enterprise oriented widget toolkit.
ReplyDeletePrototype if you are using http://script.aculo.us/ or like the Ruby way of doing things.
jQuery has gotten very popular and is most probably your best bet if you code in ASP.NET
You can't go wrong with either Dojo or MooTools
With the exception of Dojo/YUI most of these are libraries, not frameworks. Frameworks involve a little more (architecture + development tools).
ReplyDeleteJavaScriptMVC (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:
Respond to an event
Request Data / Manipulate Services (Ajax)
Add domain specific information to the ajax response.
Update the DOM
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:
Code generators
Integrated Browser, Selenium, and Rhino Testing
Documentation
Script compression
Error reporting
I would say that the main question to ask is:
ReplyDeleteAre 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:
its excellent widget system
its breadth of functionality
its build/minification system
its easy extensibility and robust OO design
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..
A new kid on the block: http://ukijs.org
ReplyDeleteIts strength is dealing with enormous lists. IE6+.
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.
ReplyDeletehttp://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:
ReplyDeleteBBC Glow
Google Closure Library
Not as new, but previously unmentioned in this thread:
Cappuccino
I use YUI because I think it is complete in functionality.
ReplyDeleteThe YUI 3.0 will be very like jQuery in its strengthness.
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.
ReplyDeletehttp://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t
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.
ReplyDeleteI'm hoping in the future jQuery will have an equivalent set of controls so I can stick to a single framework.
I think you might find jQuery is rapidly catching up on the plug-ins front.
ReplyDeleteI like jQuery simply because it's well documented! There's an excellent jQuery book: "Learning jQuery1.3" Chaffler/Swedberg.
ReplyDeleteFor 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.
ReplyDeleteI 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.
ReplyDeleteI 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:
If you want to make things well, clean, elegant and more.. the choise is ExtJs
If you want, or need to do things quick as possible then use jQuery
p.s.
The fact that Microsoft adopted jQuery it's not well as it could seems about using or not jQuery ;-)
If you are doing anything really JavaScript-heavy, like a single-page site I would say Dojo, 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 :)
ReplyDeletei know its late answer but bit worth for your question..
ReplyDeletehttp://mootools.net/slickspeed/
the link above tested the speed performance and finalized Dojo and next jQuery .
i have always go with jQuery but just for ur info and i wonder this speed test was done by mootool website :).
Thanxs,
Gobi.
Another option is SproutCore.
ReplyDeleteRight 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).
Before starting new GUI for our new project arrival, I made some research.
ReplyDeleteHere 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)
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????
ReplyDeleteIn 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.
I will choose JQuery, it is light weight ,easy to use, chaining method
ReplyDeletejQuery. Never let me down from the smallest projects to the largest.
ReplyDeleteTo learn Dojo go to dojocampus.org. It is the best place to see it in action and learn!
ReplyDeleteFor media type of websites, jQuery rules, for heavy RIA Ajax apps, the other framework offer a lot of out of the box widgets, however at a cost, and if you do little work you can accomplish the same with jQuery... plus if you are a guru JS developer, jQuery gives you more "row control" over what's going on on the page...
ReplyDeleteA great ExtJS alternative: Qooxdoo. It's very advanced, feature-rich, portable and performs like the best. The documentation is certainly no show stopper.
ReplyDeleteQuoted from their website:
qooxdoo 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
Kendo UI a new competitor from Telerik.
ReplyDeleteJQuery + SmartClient
ReplyDeleteI believe SmartClient officially supports comingling with JQuery on the same page.
(http://forums.smartclient.com/showthread.php?t=3578&highlight=jquery)
So use JQuery for basic stuff, and insert heavy-hitting application-like widgets via SmartClient.
I definitely recommend the use of both jQuery for all the reasons listed above,
ReplyDeleteand 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.