JS library advice
I know, when it comes to choosing the right JavaScript library for your web project it can get very religious. Anyway what I would like to know from you guys is which JavaScript library you would recommend for building a quite complex enterprise content management system.
In detail: Some of you might know that I work at Hyperwave as UI specialist. Our products are quite sophisticated, technology wise. However the user experience is more Web 1.0 like and therefore needs to be improved: more dynamic, drag and drop, light weight etc. You know, all those funky nice things everybody is currently talking about :)
Which library?
Our current home brewn library is technically mature but lacks the mentioned features. So my approach would be to make use of other libraries such as Prototype, Dojo etc. I’ve already done some research (my current favorite is Prototype) however I’m not quite convinced yet. So could you give my any advice? These are the aspects I’m most interested in:
- which libraries do you use?
- why did you choose them?
- what are the most important aspects of a library when using it for huge web applications?
- should I use Prototype?
- why shouldn’t I use Prototype?
Thanks. Your advice is much appreciated.
51 comments so far
Skip to comment form
trovster January 09, 2007 at 04:15 AM
I personally have just started using jQuery. It’s fairly lightweight, has a great active community, and has a lot of extensions/plugins to do a range of different things. There are drag’n’drop and UI plugins, which add to the lightweight extensible nature of the library.
I had used some pre-built plugins which required Prototype, but I felt they were quite large and a big burden. I decided to use jQuery because the syntax is similar to plain JavaScript which I know quite well, so migration was simple.
Hope that helps.
paul January 09, 2007 at 04:40 AM
Tim January 09, 2007 at 05:06 AM
Well the pros for jQuery is it’s IE 5.5 compatibility, which is very rare among current JS libraries. It is my choice for every project at the agency, cause most projects still go back to IE 5.5 compatibility-wise. Also jQuery has nearly everythin you need, when it comes to client-side programming. I don’t really know about the AJAX support though.
As a rather personal choice I’d recommend mootools, since it is the most lightweight and plugable library that I know of. I use it in nearly every of my personal/business projects, and it has never let me down (be aware: Compatible down to IE6). It has lately dropped it’s Prototype requirement, which makes it even more attractive. It has drag n drop, AJAX, Dom-selection and lots of other things included.
I personally cannot recommend Prototype. It is far to complex in my eyes. A huge pile of code, which one will hardly use in it’s whole. Also it is quite big, when it comes to file-size.
But after all, just a personal oppinion!
Milian Wolff January 09, 2007 at 05:44 AM
which libraries do you use?
jQuery only – it’s so unbelievable powerful and lightweight at the same time – I can suggest without hesitation!
why did you choose them?
Active development, lightweight, plugins, … it just does what ever I want it to du!
what are the most important aspects of a library when using it for huge web applications?
Lightweightness again – this saves money. The lib should be able to do whatever I want it to do and be extensible.
should I use Prototype?
no
why shouldn’t I use Prototype?
‘cause it’s freaking bloated
Sebastian Gräßl January 09, 2007 at 07:14 AM
I think Prototype is the best choice.
I combination with scriptaculous it is a very flexible framework.
Rob January 09, 2007 at 07:17 AM
I definitely cast my vote for jQuery.
anne January 09, 2007 at 08:57 AM
http://mootools.net/
not sure if it fits for any needs you may think of because i am not too experienced regarding js frameworks..
kb January 09, 2007 at 10:24 AM
dojo has a nice packaging system and they just release some code so you can have offline sites. Kinda cool.
prototype really sux when you want to start integrating other libraries. that kind of pain can only be felt first hand 80% of the way in on a big project.
Dimitry January 09, 2007 at 01:09 PM
I personally use Yahoo UI libraries and Im surprised nobody has mentioned them yet.
At the end of the day it’s personal preference. Most of them have very similar features and if not, they wouldn’t be hard to imitate. I like YUI for its constant development, for its speed, debugging power (incl. their own debugging widget) and many more reasons.
I haven’t tried any other libraries than mootools though, but do check it out before making your decision.
Webstandard-Team January 09, 2007 at 06:21 PM
I prefer jQuery too. The best choice to seperate JavaScript and (X)HTML code.
Adam Stacoviak January 09, 2007 at 06:24 PM
John Resig’s jQuery takes the cake…
jQuery is great for designers…it’s expressive.
For example (Thanks!): $('#nav_main').find('li:last').addClass('last');
There is a great community behind jQuery as well, and tons of decent plugins that you can tap into. It’s really taking off, and even more so with designers because of how easy jQuery makes it for those that are not that familiar with JavaScript or specifically DOM Scripting to just get in there and do some pretty decent stuff.
Good resources for jQuery (just to name a few):
Tristan Juricek January 09, 2007 at 06:36 PM
At work, I’ve been exploring similar things. I’ve been using dojo, largely because there was a FilteringTable widget that was exactly what I wanted. Dojo tends to have so-so quality, however. For example, I have yet to employ more than 1-2 complex widgets on a page that works under most modern browsers. So, I would hesitate before including dojo in my project.
Otherwise, the dojo community is fantastic, and it is a wonderful code base for reference. I put YUI in this boat: not really what I want to use, but fantastic to have a copy of.
José Carlos January 09, 2007 at 08:48 PM
I prefer jQuery too. Not only it’s lightweight, but it also has a huge number of plugins to go with. Fantastic!
Richie January 09, 2007 at 09:40 PM
I use and recommend prototype + scriptaculous. I think it´s easier to find tutorials, wp-plugins, classes, and other stuff ready to use (until now). Also, is highly flexible.
Piotr Lewandowski January 10, 2007 at 12:49 AM
jQuery of course… and sometimes mootools which is AFAIR prototype.js based…
Jonathan Snook January 10, 2007 at 01:46 AM
Choosing a library will depend heavily on what you’re trying to accomplish with it.
Jquery and Mootools are great options for quick animations, effects, DOM manipulations like expand/collapse stuff. If you’re putting together a web site and want to add in a sprig of interactivity then either of these are good ways to go. They’re compact and easy to use. My personal feeling is that Jquery is more mature and better tested. It’s simply been around longer than mootools.
Prototype is an amazing beast but much of it is geared towards applications, working with datasets, string templates, and of course, DOM manipulation. Scriptaculous and Rico run off of Prototype and give you some decent pre-built components. Scriptaculous is great for 90% of the effects you’ll need to pull off but a pain for the other 10%.
YUI is hard to classify. First, you can tell that this is built by a corporation that understands what’s involved. It’s the only one of any of the libraries I’ve mentioned that doesn’t try to use $(). Jquery tries to be smart and reroutes any existing $ function into an internal one but that seems pointless if any of your code is expecting $ to return specific methods. So, YUI is very unobtrusive. But I find it also takes a heavily function-oriented approach to things instead of something like Jquery that uses chainable methods in a really cool way. YUI has thought through the interaction models required in complex systems like drag and drop that many of the other libraries haven’t.
Dojo seems heavily focused on widget building. If you need out-of-the-box widgets, Dojo might certainly be the way to go.
Finally, often times, it’s the add-ons that make the difference. Jquery has a ton of people contributing some cool stuff like Thickbox and Interface. YUI has YUI.ext. Prototype has Scriptaculous.
So, here’s my summary:
Web sites: use Jquery
Web applications: Prototype/Scriptaculous
Web applications but with more custom enterprise stuff: YUI/YUI.ext
Out-of-the-box Interface widgets: Dojo
(there’s certainly some interlap and of course, you could pull off anything with any of the libraries if you wanted to… this is just my pigeon-holing.)
Steve Williams January 10, 2007 at 02:28 AM
The DOJO site was enough to put me off within minutes. I know they need to showcase their work, but making the whole site some javascript nightmare… I couldn’t bookmark or paste the actual page I was reading to a friend on IM and that gave me cause to question their judgement and hence the professionalism of their library.
I’m still a relative newbie to javascript, but find prototype and moo a reasonable combination for what I typically need to accomplish.
Wolfgang January 10, 2007 at 02:36 AM
Thanks for your input – we will definitely need something flexible and modular since it’s a quite complex client-side web application respectively application framework. Maybe I should take another look at YUI :)
Patrick Teng January 10, 2007 at 03:01 AM
At Msgme, I choose to go with the Dojo when I first started development of our advanced front end. I think I chose Dojo because I was lacking the skills necessary at the time to make the widgets and components that was needed for the interface.
The main gotcha with Dojo is the eventual code size of the library. Even with a custom compiled library, you’ll see code sizes of 200k-300ks. It’s okay for a web application, but the other devs have been complaining.
But with that said, the people at Dojo are working a linker, that would strip out any unnecessary code, which I think would greatly reduce the code size of any custom compiled library file. Because although any dojo library should be custom compiled, it still adds a lot of extra code that the widget/function might have, but you don’t call in your own application. Nonetheless, it is still a very good library. And the documentation is getting better and better everyday, better than some of the other libraries out there.infomaniac January 10, 2007 at 04:51 AM
We use Dojo for our projects.
IMHO, the possibilities that Dojo offers are absolutely great and it’s got an enormous amount of functionality out of the box and you can customize everything. (e.g. we customized the drag’n’drop stuff to use additional custom parameters…)
The downside, though, is that the documentation is nearly inexistent and if there is documentation, it’s very limited and not really useful.
The second problem is also, that when they have a new release available, I wouldn’t bet on that everything working with the previous release will be working with the new release… so at least that’s my experience.
Have fun!
Sadhana January 10, 2007 at 12:28 PM
I don’t use much JavaScript, but for personal projects, I found jQuery to be excellent.
Regarding YUI, you might find Jack Slocum’s implementation of Wordpress commenting with YUI interesting/inspiring.
Mislav January 10, 2007 at 11:00 PM
Snook summed it up very nicely in a comment above. Use YUI for complex UI that needs to be incredibly robust, otherwise use Prototype. jQuery is neat but just doesn’t cut it here.
Nate Cavanaugh January 11, 2007 at 04:46 PM
I have to agree and disagree with Snookie up above :)
jQuery, IMO, is the best option for websites, web apps AND enterprise stuff.
I used to be a Prototype junkie, but I have since converted to the church of jQuery, and for the following reasons:
Speed
jQuery is not only fast in and of itself, but it is written to make development fast as well. That’s something that YUI and Dojo fail at.
Seriously, who wants to type YAHOO.util.event.on() just to attach an event?
Community and Documentation
Community is something Prototype just does NOT have, nor does it really have any decent documentation.
jQuery’s community is so alive and energetic that bugs are spotted sooner, fixed sooner, and things happen rapidly.
jQuery is the epitome of open source software.
Enterprise ready
I used to believe that jQuery was like Prototype Lite, but alas, I was incredibly surprised when I began using it. Drupal is using it, now at work, where I work on a J2EE enterprise portal/cms, we are now porting everything over.
Clean, readable code
Prototype probably leads the pack in legible, beautiful code, but jQuery is just as pretty, in a different way.
Because of it’s intuitive chaining, it can take a second to fully take advantage of it.
The beauty of it is that people can quickly follow along with your code.
Developer friendliness
jQuery has the BEST lead developer around. Bar none. John is incredibly involved, and treats jQuery as if it’s his side business.
He has been attacked and vilified by quite a few, and I have not yet met a developer like him. He’s always positive, and always looking to push the Javascript community further as a whole.
Compatibility
jQuery is namespaced, like YUI is, but without the esoteric naming. The $() function is just a shortcut to the jQuery object, but you can easily rename the shortcut to whatever you want, and not break anything.
Plugins
Yes, it’s just Javascript, but having a clean, easy to use and formalized API works wonders.
Just look on del.icio.us for jQuery. There is constantly plugins being added.
I have gone from a jQuery hater, to an unabashed jQuery lover. John has truly bridged the gap between presentation and behaviour, while keeping them neatly decoupled.
Or, better said:
If you could have a library that did everything the rest of them do, but did it with 15-20K, when the others did it with 60-90k, who would you go with?
jQuery is not just for “effects” (neither is mootools for that matter), it just makes it easy to do them.
jQuery has array/hash iterating, built in ajax (beautiful ajax too), effects, looping, etc etc.
Just check out http://visualjquery.com/
Marko Mihelcic January 14, 2007 at 01:36 AM
Yeah I would use Prototype. Nuff said :)
Matt Powell January 14, 2007 at 11:54 AM
Thanks for hosting this little discussion :) As a result, I’ve switched from fifty lines of Prototype/Script.aculo.us code to an equivalent 12-line JQuery version and found several bugs in the process…
Kjell Bublitz January 15, 2007 at 07:34 AM
- Which libraries do you use?
– Why did you choose them?I use prototype with script.aculo.us and behaviour.js for graceful degration
Easy to understand, nice to read and work with. Lots of cool addons and flexible. Also script.aculo.us worked from day one as promised and introduced me to prototype. I tried several ones but most lacked of simple documentation or looked way too bloated. – What are the most important aspects of a library when using it for huge web applications? Flexibility, compactness and wide browser support – Should I use Prototype?
As Snook said, it depends on what you are up to. I used prototype for everything to date and i can’t say that i’ve regretted it. If you know the prototype-way of “how to do stuff” you might even fell in love with it, as i did. But i am not a designer and as being said, prototype is more for manipulation and data operations. But with scriptaculous again, its an good allround package. The upcoming version comes with css morphing, which will open alot of interresting possibilities for interface scripting. – Why shouldn’t I use Prototype?
This is where worlds collide. Some people really hate prototype, moo-people bash the filesize and others say it is limited to some extents or has design flaws. And even more say that the project is not maintained well enough.
But all these points won’t make go away from prototype, simply because i am too happy with it. I tried YUI once and have to admit that it is too complicated, plus the code readability is awful.. who wants 100 times YAHOO in his code? seriously..
:)
michael January 16, 2007 at 07:37 PM
what about mootools?
andy January 16, 2007 at 11:01 PM
I work with Prototype+Script.aculo.us, but Qooxdoo might be worth to at least take a look at since IBM switched from Dojo to qooxdoo for der Rich Ajax Platform (RAP).
Adam Patterson January 20, 2007 at 07:33 AM
scriptaculous seams to be verry cool
http://script.aculo.us/
have a look
Modo January 21, 2007 at 08:02 AM
“who wants 100 times YAHOO in his code? seriously…”
This is pointless. You can create your own tiny names in the beginning of your app, pointing to YAHOO names.
Pierre January 21, 2007 at 08:00 PM
I prefer YUI! and YUI-ext. But prototype & script.aculo.us are fine, also.
Sigurd January 21, 2007 at 09:50 PM
Chousing JS library for me all depends on the task.
If I need something fast and useful I use prototype.
If I need rapid layout development and nice interface I use YUI+YUI.Ext.
Adn finaly if I need great amont of features I use DOJO.
Afterall i think that YUI/YUI.ext is my choise..
Tom January 22, 2007 at 02:33 PM
There are a TON of libraries (see my blog and the links icon at the top for a directory with a bunch of links including js libraries) but…the thing is, most of them are very very very similar.
Here’s my point. It (almost) doesn’t matter much which library you use. Most of these libraries can be built to exclude certain functions that you won’t need and/or be compressed. This reduces the load time and kinda levels the playing field if you will.
The way you get your answer is by mapping out your needs and then finding a package that will meet those needs while being as lightweight as possible and compatible to an extent. One must realize when using javascript and flash and even css/html…that there will be a % of people who can’t view your site. Take for example the tinyMCE editor. It’s probably the best out there, but Safari doesn’t like it.
That’s it. Not really much need to ask opinions because well, we all have our favorites =) But there isn’t any one library that will be the right fit for every project.
My favs? jQuery, moo tools, YUI, and I feel Dojo is overlooked…though I don’t really use it, I think it’s good.
Tobie Langel January 22, 2007 at 08:15 PM
I nearly switched from Prototype to jQuery about 6 months ago and had expressed some of my considerations on choosing a library back then. Instead of switching I helped writing Prototype’s documentation. There wasn’t a lot of rationale in making that decision at the time, except that there were a couple of really nice guys involved in the library.
Retrospectively, I think I stayed with Prototype because I just loved it!
There are many factors involved in choosing a library, but in the end, I think it all boils down to the guts, which is probably why all those discussions involving libraries are so passionate.
And actually, when you take into consideration the time you are going to spend coding, going with the library for which you feel that little extra something doesn’t seem like such a bad idea. You’ll probably be a lot happier working and therefore a lot more efficient.
Regarding the existing libraries, I would tend to agree with Snook (i.e. jQuery and Motools are more orientated at enhancing websites, Dojo, Prototype and YUI at building web apps). However, most of these libraries cover relatively similar grounds (or have existing add-ons that cover the gaps), and implementing a missing feature in one of them probably wouldn’t take you that much time. Furthermore, since their licenses are very liberal, you could easily rip off a needed feature in one of them to complement another.
Wolfgang January 23, 2007 at 06:28 PM
Thank you for your input – while looking at the different libraries I stumbled upon a forum thread (I think it was somewhere in the mootools forum), stating that there are differences between “libraries” and “frameworks” – libraries are built using framework. For example: Prototype is the framework, Scriptaculous a library.
With that in mind I should have formulated the title of this posting: “JS framework advice” :) Anyway, I also wanted to inform you about the status quo: based on our requirements we probably either choose Prototype or Mootools. Any recommendations?
Tobie Langel January 23, 2007 at 07:09 PM
There’s a lot of forward momentum in Prototype right now with the release of v. 1.5 and the new website/blog/api (disclosure).
Despite the comment I posted earlier, I still think a pinch of rationale can sometimes be welcomed. In that aspect, numbers speak for themselves (and that’s before v. 1.5 and the api docs… but also before Mootools was launched). What this means to you:
I really don’t know Mootools, so there is no way I can trustfully compare the two frameworks together. I’ve heard great things about it, but did not really have the chance to dig deeper.
Anyway, best of luck with your project which ever way you choose to go.
Tobie
P.S. Your email notification for new comments is a great feature by the way – keeps the discussion alive.
Tobie Langel January 23, 2007 at 07:12 PM
… but my carefully formated list items not being displayed as a list isn’t ;-)
dysko January 23, 2007 at 11:01 PM
mootools is great lib… it’s my choice
Sadhana January 23, 2007 at 11:14 PM
mootools.
Tom January 24, 2007 at 06:00 AM
I love mootools. I’m a big fan.
Yes, many of the libraries are based off larger frameworks. Prototype is the most famous/popular (I think) and has been around forever. BUT that doesn’t mean you need to stick with it. It’s quite easy to implement any of these libraries. Many of them are very well documented so you shouldn’t have a tough time. If you aren’t familiar with javascript, it’s not a big deal.
I don’t know exactly what your needs are but the best suggestion I can make is just try a few. You have it narrowed down now, try mootools and if you don’t like it, try something with prototype. jQuery is extremely powerful and just go to their site and look at all the demos, I find that list of demos and addons VERY useful actually. My blog uses jQuery.
Luke Williams January 27, 2007 at 01:13 AM
My personal choice is using Prototype and script.aculo.us: Prototype provides all the necessary short cuts in a clear manner, which doesn’t deviate much from the normal Javascript functions and syntax, which I feel that jQuery does.
Anyway, let us know what you choose!
Michael Hollauf January 30, 2007 at 10:51 AM
Hi Wolfgang,
As you know we’re using Prototype + scriptaculous in all our projects, and we know it fairly well. However, if I now started a new big project from scratch, I would probably opt for YUI as it has the most complete set of features and widgets, very good browser support and a strong development team behind it.
I think that the scriptaculous people have been resting on their laurels a bit too long and YUI has caught up big time. You should really take a good look at it, I know I will ;-)
Mo® January 30, 2007 at 04:21 PM
I’m a Senior Engineer working on a medium sized webapp that uses AJAX and some other minor transformations. We went with YUI after evaluating what was out there. The exact reasons for a YUI victory escape me a the moment, but I can say that I am very happy with YUI. Decent documentation/examples. Not intrusive at all. Good cross-browser support. We use overlib for our hover effects though.
Gilles vd Hoven February 01, 2007 at 12:19 AM
jQuery, I’ve worked with prototype 1.3 and 1.4 and the lack of documentation and size of the lib converted me to jQuery. Not long after i downloaded jQuery, i took the chance to become one of the many, many contributors. I’ve been a jQuery enthousiast for almost 1 year now.
Cody Lindley February 01, 2007 at 01:33 AM
I would like it if someone here could explain to me why what jQuery is lacking for Web App. Dev.. As I see it, it has just enough to help, but no to much that it gets in your way, or adds additional complexities to the code.
I’m just looking for an objective opinion, that lists the downfalls of jQuery compared to the so called libraries that are targeted at Web App. Dev.. In my opinion, it all comes down to what you are trying to do regardless of if you are building a Web App. or a Web page. jQuery has never been lacking in the application department in my work. But, it seem there are those that are drawing the lines between web page libraries and application libraries. This is just silly in my opinion, jQuery and Prototype are more similar than they are different.
Cassio February 04, 2007 at 11:49 AM
I use Mootools. It beggined as an effects library for Prototype, but evolved to a fully functional framework. It is mature and very compact, and trully object-oriented.
Paul Armstrong February 04, 2007 at 02:55 PM
I definitely prefer Yahoo UI at the moment because it is what I learned most of my Javascript knowledge with. There also seems to be a lot more possibilities (dare I say “endless”?) with YUI over some alternatives.
I used YUI for a very large site that was pretty intense, had a lot of different functionality that needed to be written and be as modular as possible. YUI just works very well to write object-oriented JS.
YUI also has a smaller footprint than others, though it isn’t the smallest.
Jacob Fike February 09, 2007 at 06:44 AM
Personally, I have used Prototype quite a bit, but I also used the YUI library for a while. I have to say that both are good at what they do, but I find prototype to be easier to use. While YUI does have some more advanced features like dialogs and such, it doesn’t have the nice new stuff in prototype 1.5 like each(), next(), up(), down(), etc. which I find extremely useful.
Thanks to some of the comments on this thread, I have decided to look into mootools as it sounds like it could, at the very least, be a useful addition to prototype, filling in holes or adding new features.
hausburger February 13, 2007 at 10:32 PM
i started with prototype+script.aculo.us in 2004, but last year i fell in love with Qjuery. It’s smart and easy – it’s CSS-Like.
Tyler February 15, 2007 at 06:07 AM
My company runs all of its time, contract, and client tracking off of a system that I developed, that uses Prototype. The greatest thing about this is that once I included the file, I never had to go mess with it at all. I just include it, and I can use it without ever having to worry about how its going to handle a certain request, or how slow a given function is. I recommend it.
jd February 23, 2007 at 06:15 AM
If you are concerned about bloat. You can always use zlib (server side to compress your js library)
Also a compressed Prototype (1.4-1.5) is at the Prototype Google Group page:
http://groups.google.com/group/prototype-core/browse_thread/thread/2a611d702c4deadb
Its within 1.9kbs of the compress jQuery.