There seem to be a lot of choices now for DOM manipulation, Ajax and effects. Has anyone any experience of the different options and their pros and cons?
I'm throwing my hat in for jQuery. The syntax alone gives it a gold star in my book, but there is a wealth of plugins to enhance the core library.
We originally chose YUI for its completeness, documentation, robustness and maturity. But I was disappointed with the large number of dependent files and the bulk of the code required to do what we wanted (popup dialogs, Ajax form enhancements and so on).
I recently looked at jQuery and was absolutely thrilled with it. I like very small, compact scripts and jQuery uses chaining to provide a fluent means of doing multiple operations in a concise and easy to follow way.
It is also special because of its way of addressing target elements using XPath-like and/or CSS-like syntax.
My only niggle with it is the use of the $ alias for the jQuery object. This can conflict with Prototype and it just confuses the hell out of me because it looks like perverted PHP. So I use its real name for clearer code - jQuery() instead of $()
It's not just for designers; if you know a bit of JS, it's extraordinarily elegant and satisfying to use. It isn't nearly as well-documented as YUI but has a well-established community and loads of tutorials. I think either of them are sound choices for a new project.
voting up is never as effective as just mentioning the same thing again, so....
jQuery FTW!!!
Actually, after having used Prototype, then scriptaculous, then mootools, then YUI and finally jQuery - I can honestly say that my preference is strongly for jQuery. It has the most natural extension of the DOM, and it almost makes it like "querying" the DOM for your objects and then applying styles, behaviors or whatever to those elements. And the new UI stuff they have been kicking out is top notch as well.
Definitely jQuery.
I don't think it's necessarily the technically superior library in every regard, but has been gaining overwhelming popularity lately. Combine that with the fact that jQuery plugins are easy to create, and you have one of the most actively maturing frameworks available.
I started off with Prototype/Scriptaculous, but recently have moved onto jQuery, and have been really liking it so far - it's where my vote is placed.
It's not that Prototype/Scriptaculous are bad, but jQuery feels more concise, more consistent, and more stable (in some extreme situations I had a few weird issues with Prototype that were cleared up with point releases - I don't recall what they were off-hand).
From a technical standpoint, the key difference is that I believe Prototype actually modifies the .prototype of Javascript objects, augmenting and/or replacing the functionality of JavaScript's built-in objects (hence the name). In jQuery, if you want to use any of jQuery's functionality you have to acquire a jQuery object by running it through the $() function. The way Prototype works is generally not a problem, but I have run into problems when using some advanced ASP.NET AJAX controls in my past life, and it does make jQuery feel a little more like a finely tuned scalpel: only what's strictly necessary.
Also, regarding Flubba's problem with the $() notation - you can call jQuery.noConflict() and jQuery will return the $() function to whatever you were running before (i.e. Prototype), so it does play nicely with other JS frameworks if you'd like.
After reviewing the high level descriptions of Prototype, jQuery, and DOJO, I gave DOJO a shot for using in an application that has been around for 8+ years. The web portion of the project I tried it with is HTML/JavaScript generated from PL/SQL code.
The reason I went w/ DOJO first is that it looked like the DOJO API docs, online reference Book of DOJO, tutorials, and forums would be helpful in getting up to speed with using the library. I also liked the Dijit part of Dojo, seemed like the UI elements had a lot to offer. DojoX seemed like a good thing to, active development taking place on extending/evolving the library. And, supposedly, the releases/lineage are supposed to be managed well.
Pros:
-
Ease of AJAX implementation
-
Effects (Dijit)
Pros Elaborated:
-
What I've found so far is that doing AJAX calls in DOJO is simple and clean. The DOJO docs were helpful to quickly learn how to do AJAX w/ DOJO.
-
Dijit is the UI component part of DOJO. Lots of nice effects and intuitive methods to use on these components.
Cons:
-
Tuning
-
Understanding/troubleshooting "tricky" problems
-
Development works best in FF
Cons Elaborated:
-
After working w/ the library, I'm running into performance issues. My project team doesn't have control over server settings (this is the responsibility of a separate corporate group), so implementing some of the DOJO recommended tuning tips can be problemsome.
-
Besides tuning issues, I've also run into an issue w/ the posting of form data. Using the DOJO way of POST bugs out in my application, but using GET works fine. I posted to the DOJO forums, but didn't get any insight into whether this is likely a DOJO issue, or a possible issue w/ my application environment (mod PL/SQL..Apache Web Server...IE 6). When things get tricky, I don't know that there is enough info out there to troubleshoot and fix in a timely manner. And submitting form data shouldn't fall into the "tricky" category.
-
DOJO development is keyed towards developing in FF. Which is great if A) You can use FF as a development tool, and B) if your users use FF. Unfortunately, our users are locked into IE 6, and FF doesn't run in our environment.
Well, hope that helps a little bit. Didn't see anyone else mention DOJO, because they were probably smart enough to avoid it. :)
Consider using Ext JS JavaScript library if you want to achieve a desktop-like user experience.
JQuery for me to, used it on past 4 web projects and can't fail it, support for it is excellent and the community plugins have normally covered every task you could think of.
Oh and MS seems to quite like it so are addiing additional support for it (and a few other libraries) in Visual Studio
Several people have already said jQuery now, but I wanted to throw in there that another benefit of jQuery is that it is now fully funded by an open source company. This means that Paul Bakaus spends roughly 40hrs/wk just thinking about/working on jQuery (specifically the UI portion).
Since the day this was announced the impact has been overwhelmingly positive. The library as a whole seems to be moving forward at a very nice pace.
(For the record, for the past 16 months I have used jQuery on every project I have worked on).
jQuery:
- A very straightforward philosophy: find stuff (in the DOM) and do things (change content, events, styling+position)
- Find things (in the DOM) using a query language you already know: CSS!
- Almost all function calls in jQuery return the jQuery "object", allowing you to chain call after call on the same object (saves code space).
- Hundreds of actively maintained plugins, many of which are very useful.
- Active, intelligible and newbie friendly listserv.
- Will soon be distributed with ASP.NET Ajax Framework
If you want a library with a small footprint there's no other choice but MooTools in my books. MooTools is 60Kb compressed for the core. You can add extra features if you want, but you have flexibility in choosing exactly the features you want and nothing more from here and even have the code compressed for you.
MooTools is fast and powerful, but tiny at the same time. I highly recommend it for all websites that want their UI to have some extra punch that makes people Wow.
jQuery, if for no other reason that it seems to be the most popular choice. This is comforting (at least for me) since it means that the chance of someone else already having had my yet-to-manifest problem is far greater.
I'd say that it largely depends on what you're trying to accomplish in your project. As other people have already mentioned, if you want desktop-like behavior then Ext JS is a great library.
jQuery is obviously a popular choice which means that you're likely to have a strong community of support.
YUI is okay - I don't particulary like how things are namespaced and the amount of dependencies required to build something that's relatively simple.
For most of my projects, I love Prototype (and Scriptaculous when minor effects are needed). Honestly, though, I'm biased just because I have used it more than any other framework (and I've tried YUI and MooTools for the most part with a little bit of Ext JS). It makes certain things really easy, such as Ajax, and has some nice functions that make looping easy.
I like jQuery for the following benefits:
- Document.ready function: processes javascript after the DOM has been built; this can begin before all images are fully loaded
- Function chaining: most jQuery functions return a jQuery object, so related functions can be combined on the same line
- Easy to create plugins: just write a function and add it to the chain
- Seamless integration of CSS manipulation functions
- Wealth of available documentation and tutorials
- Growing number of available plugins
jQuery is awesome, small, and fun. YUI is a great library too. YUI has better widgets and documentation. jQuery is much nicer for DOM manipulation.
We've moved onto using Dojo, mainly because of the licencing and CLA requirement.
jQuery - it is lightweight (16KB), fast, functional, and most importantly (IMO), well documented.
I prefer JQuery for many of the reasons that people have listed in other responses...
But, keep in mind that your own needs and programming style might make another library more suitable. If you're building a larger project, it probably is worth evaluating all libraries that look good "on paper" yourself. Using each contender, build a small proof-of-concept app that covers some of the core functionality of your project. Hopefully this is enough to give you a feel for each library. Then, as you are working, keep your code modular enough that it isn't completely impossible to switch (or add) another library if you run into too many limitations.
I've used JQuery and loved it for basic JavaScript needs, but if you have a project that is going to require a full-fledge applicaiton UI/desktop application feel then ExtJs is the best hands down. The way I see it is JQuery is great for smaller JavaScript/AJAX needs and ExtJS is the only way to go for the bigger JavaScript needs.
I didn't realize that there was work being done on a jQuery library for Rails, jRails. It's definitely starting to look like jQuery is the framework of choice for most everyone.
Adobe Spry has some very nice effects, I use it for fading items in and out.
And now for something completely different: MochiKit. The website states "MochiKit makes JavaScript suck less" and it is true. I have been using and loving MochiKit for over 2 years now and wouldn't think of writing JavaScript without it.
I'll add my vote for jQuery for the simple reason that I've used most of the major libraries (jQuery, prototype, dojo, etc) and I've had the least problems with jQuery and felt the most productive in it. It just seems to be more consistent, well thought out, and featureful than the competitors.
That being said, I think it's worth exploring each of the major options just to familiarize yourself with the ins and outs and different capabilities of each library. I have worked on several projects where I have used a mix of 3 or four different libraries for different parts of the site. As others have mentioned you can use the noConflict() method to let jQuery co-exist with other libraries in the same page. I always immediately do "j = jQuery.noConflict()" at the top of all my pages as soon as I include jQuery, that way all of my code always uses "j" instead of "$" as the jQuery shortcut variable and then if I end up cutting/pasting code snippets from one project to another I don't have to go through and convert them all. Of course I do have to convert snippets from the web that people have written using the normal "$" shortcut variable, so I guess it depends on where you are most likely to be cutting/pasting from.
Of course, cutting/pasting is bad anyway, mmm kay?
I think it depends on the project. If you plan on manipulating groups of elements a lot, JQuery wins hands down. If you want a solid basis to build a JavaScript library on, Prototype is an excellent choice.
I have used Prototype, mooTools and jQuery. I use jQuery all the time and I can't imagine every switching back.
Looking back at my projects, I find myself mixing JQuery (for core functions) with YUI (for the nifty widgets).
As if you needed another vote... jQuery. An established, mature, well-documented library with an active community, hundreds of plugins, dedicated UI branch, lots of tutorials to get up-to-speed quickly. Jeff's using it here.
-- SEAN O
Adobe Spry from Adobe Labs, its still in prerelease (1.6.1) but it fully functional, easy to use, easy to begin, easy to understand, simply it return response from server as XML so you can manipulate it using many spry function.
also it provide nicely done effects that similar with scripta-cool-us :D, it has several widgets to try from accordion into tab panel.
really simple for beginner especially if you have Dreamweaver CS3 (or CS4 Beta).
I have worked with Prototype, Rico, YUI, Ext and Dojo libraries. In the latest project we used Ext quite heavily and it is a very nice library. There are several things you want to keep in mind when choosing a JavaScript library.
Make sure it provides name spacing. E.g. Mootools is a nice looking library but all of the objects are globally accessible which means it may clash with your own code or another library/tool that you may be using. For a small site or application this may not be an issue, but as complexity and the size of your site grows this will become a problem.
Performance is another big issue. Libraries like Dojo may look appealing at first but once you look at the way they are loading the files it's terrible. Dojo can load about 50 files using remote calls which is quite ridiculous. You want to minimize a number of JavaScript includes as it improves performance since the browser doesn't have to make too many multiple requests to the server.
Be careful about library modifying core objects. A lot of libraries nowadays add helpers like foreach to Array object or modify core classes in similar ways. This may lead to problems. E.g. Prototype modifies objects in such ways that it breaks for var a in somearray construct. All of a sudden you have extra fields on the object and your number of iterations in the loop is different. Depending on what you are trying to do this may or may not be an issue but it's something to watch out for.
I haven't programmed myself in jQuery but looking at the code that used the library I found the syntax very convenient. Ext has features of jQuery when it comes to events, DOM manipulation and Ajax but also has a great support for widgets.
In conclusion I would recommend looking at Ext and jQuery and see which one will suit your particular project.
jQuery is great, and is my personal recommendation. It has lovely syntax, fantastic documentation, is increasingly dominant and well-supported, is lightning fast, feels very "clean", largely keeps itself to itself, and the developers definitely know what they're doing. It's fantastic at what it does which is a a way of taking some of the heavier lifting out of common JavaScript tasks in a clean manner and no more and no less, and to try and help you use JavaScript rather than work around it. It focuses primarily on DOM manipulation (the query in the name), which is what you do the most, and a few of the most common essential general purpose functions thrown in. jQuery has really become the "de facto" JavaScript library. jQuery UI is also available for animation and widgets but isn't anything particularly special.
Dojo is a bit like jQuery gone ugly and fat - it's not bad as much as it feels largely redundant, even with the added general purpose functions it adds, but it's still worth a look. It keeps itself to itself, and has its own widget engine called Dijit which seems to be quite heavyweight compared to the others, but I don't know much about it.
Prototype was very much the first popular framework and is declining in popularity. Its core idea is to add all sorts of extra functions to elements via Object.prototype which, as it turns out, probably isn't the best idea in the world after-all. One of the other main ideas is to help people write classes, which is turns out is best left to the person writing JavaScript after-all. It's pretty ugly and feels unintuitive and old. There's also script.aculo.us which is all the animation and UI stuff.
MooTools is a bit of a mish-mash that's quite similar to Prototype with a few handy animation things built-in like tweening thrown in for good luck. I'm pretty sure they were the innovators of being modular enabling you to "roll your own" framework on the site choosing what bits it contained and didn't on the site.
Sproutcore and Cappucino win this year's cool award. They are designed to make desktop-like applications and let you avoid doing any CSS. The downside is that applications tend to be very slow and they encourage a certain "style" that is somewhat un-web-like. The latter works in its own language called Objective-J which is the freak cross between JavaScript and Objective-C.
I would not recommend Ext, but not for technical reasons. All I really know about it is that it's one of those "hey, avoid CSS, easily make pretty things" frameworks. However the licensing issue means that you need to pay hundreds of dollars if your code isn't wholly GPL licensed, and the developers have long deceived people into giving it attention as though it was a true "open source" project with ambiguous licensing terms. It's just dishonest and I'd simply refuse to give it any time because of that.
The other main ones are YUI, Qooxdoo and Adobe Spry. I don't really know much about them. YUI is well-established and seems general purpose with all sorts of random features built-in while keeping itself-to-itself and having quite long-winded syntax, Qooxdoo seems largely focused on making complex user interfaces and Adobe Spry seems to be all about XML-focused Ajax and with a few widgets thrown in for good measure.
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.
jQuery.
It takes almost no time at all to pick up because of its clean and simple syntax and allowed me to implement AJAX functionality with numerous JSON requests and nifty UI effects (drag something to drop container) with ASP.NET MVC very quickly.
Its UI portion is very well done.
Depends on what you wanna do. jQuery is really nice but DOJO comes with a bunch of beautiful and easy to use Widgets (for example for calendars).
DOJO can also understand Django's template language (I work in Django a lot) which makes displaying data dynamically on the website a pleasure. Their way to attach widgets also works really well with Django's forms module.
But DOJO is a little heavy. So if you want a lean system go for jQuery.
jQuery is in general the best javascript library out there - it's nearly a new language, and I mean that in a good way - the syntax is crazy cool, and makes so many shortcuts available to you that you end up spending about half the time writing something up through jQuery that you would've in straight javascript.
I tend to lean on jQuery for the selector stuff and YUI for the widgets and its events library. The YUI 3.0 evolution of CustomEvents looks even nicer...
I prefer a mix of ASP.NET AJAX and jQuery. jQuery does a great job of allowing you to traverse the DOM and do animations but asp.net ajax follows the prototype model, which allows you to define client side objects similar to the ones you would define server side.
And as a side note, if you are using ASP.NET with it, you'll get great integration support with the server side.
The one con with mixing frameworks is they all pass the 'this' object around, so when you are inside a jQuery method, it'll overwrite your asp.net ajax 'this'.
vote for Jquery, easy, straight forward, lots of plugins, and well documented
As every other question in life, the answer is: it depends.
If you want to hack together some minor JS, I would probably recommend jQuery.
If you want to build a serious gmail-esque RIA, Dojo might be worth a serious look.
I recomend you stay away from DOJO. It is bloated and full of bugs. Most of the widgets take ages to download from your site, they open a bazillion connections to your server. ExtJS is a good alternative to DOJO, JQuery has alot of plugins that acomplish similar things, but you need to know what you want and hunt them down. For lighter stuff JQuery and MochiKit are the best. My personal choice is MochiKit.
Another vote for jQuery.
My team evaluated the options with the following goals - small footprint, extensible, well supported, significant market share (indicates long life ahead), easy to use.
jQuery won the evaluation cleanly, there was no close second. Feedback in production use on the first projects has backed up those findings.
I think each of them has strength and weaknesses, take the best part from each for a specific task is the smart way.
for eaxample, though i love Jquery and i use it a lot, but to perform frequently ajax request based on timer i use prototype as it has built in, and tested on the battle ajax perodical adapter rather than creating extends function in jquery
I would advise against Dojo because the resize effects, at least in demos, are highly buggy, and their extensions/widgets are slow to load. While the DOM selection is blazing fast, there's also a first-shot delay in effects and actions, after which everything runs smoothly.
I personally recommend mooTools for its programming style, it's smoothness, and its reliability. I see many whine about the community and the lack of back version support, but by and large the arguments are just silly. The community has seen its share of trolls, and now has gone to community sites. The support for previous versions is irritating at times, but it isolated to certain functions and internal workings more than the whole package. And size is no issue when the javascript is cached anyway.
İ prefer YUI in my commercial and personal works. Because it isn't only a library it is also a development-school with a great documentation, api-doc, too many examples, brilliant articles and patterns.
It almost has all feautures which other libraries have. They are mostly implemented chain feauture into YUI3 (like in JQuery)
Btw i'm a big fan of Douglas Crockford :)
My personal choices (with order) : YUI, JQuery
Dojo
I have used Dojo on a few projects thus far and have been pleased with the results. I will say that the documentation is lacking in some areas, but if you are willing to dig through the source occasionally you can figure just about anything out.
The Dojo Grid widget has been a life saver. In addition, the other Dojo form widgets from the dijit.form package are trivial to use. This includes a date picker, currency text box, and a validation text box which allows you to validate input using a regexp.
Finally, Dojo has several convenience APIs for formatting dates, currencies, etc. Also, The xhrGet and xhrPost methods make integrating with web services a trivial task.
I will say that if you want good performance, you should create your own Dojo build (a trivial task). A custom Dojo build will allow you to include only the libraries that you use. In addition, it will compress and intern other javascript files for better performance.
jQuery and Mootools. jQuery has a lot of support and is being used by a lot of people which should ensure that its development lasts. I usually use this for clients that I really don't want to spend too much time :p
Mootools has a cute name. Kidding. I like it because it is OO and have used in a number of personal projects of mine :p
Dojo. The base is 26k, and much more than just a DOM traversal. It can do gradual degradable enhancements, but as soon as your app is ready for the more advanced stuff Dojo is here for you unlike many other frameworks that leave you on your own.
I would suggest base2. Some reasons:
- It's standards based, thus future proof.
- It has great documentation
It's maybe not the most popular library, but the code is rock solid.
Fork Javascript -- I've looked at those other libraries and they all seem to try to do "everything" with crazy $(x) syntaxes and things. Fork is lean & mean and you can just use bits & pieces.
jQuery. It's easy to learn, well documented and has a lot of nice plugins. I just can't imaging my life without jQuery.
I had a very brief look into this recently and found that jquery and prototype were pretty similar to all intense purposes. I didn't spend a great deal of time looking behind the scenes but in terms of their syntax and semantics and what they could be used for they were fairly similar. I personally, didn't like their semantics. One of the most experienced programmers I know reccomended mochikit and I see it hasn't been mentioned by anyone here - I hadn't heard of it either. As a programmer with a background in app languages as opposed to scripting languages I found it refreshing and pretty powerful.
Does anyone know of an opensource drag and drop ide (ala flash) that can be used with js libraries? Does anyone fancy having a go at making one if there isn't one already?
Mootools.
It is said by many that:
Mootools is the best overall, JQuery is the best for beginners, Dojo gives the most power, and Ext gives the best UI.
In my experience, Mootools has as much power as I have ever needed, makes for much much better code, and is easier and more consistent once you get to understand their conventions.
But they don't have nearly as good a hype machine as JQ. Most move from JQ to Moo - sort of like moving from a Honda to a Harley. Its no harder to ride, but you've gone up a step.
As Mootools more matures I'd expect some hype to come with it, which is the only thing Moo lacks.
If this is a seriously complex application, I would not use jQuery alone.
Instead, I would use a combination of Dojo and ExtJs. Dojo for package management and other client-side internals/architecture; and ExtJS for the presentation logic (widgets, animation, etc).
It has been my experience that jQuery is best suited for smaller projects, and other bells and whistles (not meant to be derogatory, but take it as you will), not full-blown RIA's (at least not on its own).
Easily I would say Ext. Although jQuery has a lot of useful features like method chaining, Ext has an awesome standardized UI Library. They also have easy to use closure support by implementing a createDelegate function. Overall, Ext gives you the ability to customize your package, so as you don't have to load every class, and at the same time easily gives you as much power as jQuery but with at least a little more standardization of DOM structure and class names.
jQuery = toolbox.. MooTools = toolbox with workbench, power tools, and pickup truck.
Short answer:
Are you trying to enhance the website with cool effects, ajax here and there and some other basic stuff? Then jQuery is the answer.
But if you're application like the front-end for a real time trading application, or something like Meebo.com, Facebook, or some other app with complicated JS, classes with inheritance, interfaces, mixins, etc., then Moo-Tools is the way to go.
Long answer: http://jqueryvsmootools.com/
Wait for first native implementation of XBL2 and jump on it, everything else is useless and will be killed after XBL2 happens in any major browser, so don't bind yourself deeply into any of popular libraries. Use them as temporary solution.
Dojo got attractive design from programming point of view, but after experiencing dojo grid I found:
1) annoying bugs: ItemFileWriteStore.onSet, grid.onStyleRow events were fired twice, first time with unusable parameters; onBeforeRow was fired twice, first time with unusable rowIndex and this.grid
2) inability to use browser Ctrl+F to find stuff inside grid cells (it works with pure html tables)
3) designing applications with dojo feels like going away from web towards WinForms or WPF, which defeats advantages of using web technology (js,CSS,DOM). Mixing DOM with dojo internal stuff makes it harder to find or address elements with CSS, jQuery or FireBug.
4) slow: dynamic fetching of empty cells for 200 rows grid made scrolling ugly slow, I would have more pleasant experience just with pure html table scrolling in a frame or something.
5) got latest version from dojo (jan 2010) (my previous version is from fall 2008) and it completely broke it on FireFox with strange error "v.hasHScrollbar is not a function", searched for it, found Ticket #9547, but that didn't help, so I had to return back to my previous dojo version.
6) dijit represents a hack of what XBL is supposed to do. I still don't get it why so many good programmers waste their time on simulating declarative programming in numerous libraries when all it takes is to properly implement it in Chrome and FireFox, which would force Microsoft to follow.
http://code.google.com/p/xbl is distraction from real value of XBL and only simulates less important XBL parts. The most important and extremely powerful part of XBL, which is ability to bind actions to nodes creation/destruction events and to declaratively merge node structures for dynamically created nodes, is still unsolved by any existing js library.
Adobe Spry 1- an outstanding product from a very strong company 2- easy to learn and use 3- good documentatiion 4- integrated with adobe dreamweaver 5- easy to customize 6- easy to use datasets based on XML and json