Since the advent of “Web 2.0”, Javascript libraries have grown like wildfire. Often, it’s not entirely evident as to why you should pick one over the other. Are you creating a custom design and want a highly stylized and bespoke interface, or are you going for functionality that’s plug and play? Answering these questions are key in deciding what exactly which framework you want to go with. Inside this article I’m going to focus on some of the leading Javascript libraries (at least for right now) and give some insights as to what you should pick for your project.First, let’s introduce the Javascript libraries I’ll be talking about here – JQuery, ExtJS, Dojo Toolkit and Knockout. These are all extremely popular Javascript libraries and each serves a different purpose (mostly).
Licensing
Before I dive into the various libraries – one of the primary concerns you SHOULD have is what license a particular library uses. If you don’t know much about licensing or feel that it’s beneath you, maybe you should listen to our podcast on the differences between various licenses and how they apply to the open source community.
JQuery (MIT License)
If you’ve been programming on the web for any period of time, then you’ve heard of JQuery. This is pretty much the de facto JS library on the web nowadays, and for good reason. JQuery brings a ton of functionality out of the box, including fantastic DOM querying functionality, cross browser DOM manipulation and AJAX functionality. If you’re writing a custom website and this website is not necessarily data-intensive, JQuery is probably as far as you need to go. What do I mean data-intensive? I’m basically talking about querying from a database and outputting to a page on your site. If your site focuses primarily on loading and saving information from a database, there are other libraries that may be more suited to your needs, as we’ll find out shortly.
On top of all the built in functionality of JQuery, there is also no shortage of 3rd party plugins that have been written to extend JQuery even further. Anything from UI plugins for tabbed views, grids, calendars, etc. Seriously, if you want on the biggest platform that exists, JQuery is it, however, just because it’s the biggest, it doesn’t mean it’s the best – it really depends on your situation.
ExtJS (GNU GPLv3 or Commercial License) and Dojo Toolkit (MIT or AFL License)
I’m grouping these two libraries together because they will serve the same purpose for most people. If you’re working on an application (as opposed to a website) that focuses on getting and displaying data and creating interfaces that are very widget oriented, then you absolutely must look into either ExtJS or Dojo. The one major thing to keep in mind when working with either of these libraries is that you are fairly limited in what you want your application to look like. Both have a very “Windows” type look to them that pretty much dictates the overall look of your application. It is true that you can customize the color schemes and slightly modify the overall look, but basically you’re going to have an application that looks the same as all other ExtJS or Dojo applications.
The key thing here is though that both these libraries focus on providing useful, reusable widgets. ExtJS is probably best known for their incredible window and grid components, and just superb documentation. Dojo Toolkit also has a great set of widgets but to me, their documentation is not on par with ExtJS. It’s not that the documentation that exists for Dojo isn’t good, it’s more that it’s just not as organized and well thought out as ExtJS’s. Also, I feel that ExtJS’s widgets, in some cases, are a little more mature than those available in Dojo. For instance, the ExtJS grid is just fantastic to work with while to get near that same amount of functionality in Dojo you’ll be looking to use either the DGrid (3rd party component) or GridX (also another 3rd party component), and still I feel that ExtJS’s still has an edge on both.
So then why would you ever pick Dojo over ExtJS? Simply put, licensing. While licensing is not in the scope of this article, the primary reason one would choose Dojo over ExtJS is their extremely open licensing – you can choose to use Dojo under the MIT or the AFL (academic free license)…so what in the world does that mean?! Essentially you’re free to use Dojo Toolkit however you’d like to and you don’t have to make your own source code available to anyone else. On the ExtJS front, you’ll either be utilizing the GNU GPLv3 license, which essentially is a copy-left license…again, what in the world is copy left?! Essentially if you opt to use the “free” version of ExtJS (GPLv3), then you are supposed to provide the source code for your application when you deploy it. The interesting part is there’s a lot of grey area as to what you actually have to provide in terms of your own source code so it’s worth noting that if you don’t want to worry about potentially giving away your application code, then you’ll need to opt to buy the commercial license, which at the time of this writing appears to be $329 per developer without any type of support.
One last thing to clarify – I’ve been working with ExtJS for years, and I’ve got several months worth of Dojo under my belt, and I must say, while I don’t feel that Dojo is as polished in terms of some of the widgets, there are definitely some features of the Dojo Toolkit that I feel are much easier to implement than are the ExtJS counterpart – things like creating templated custom widgets.
So again, if you’re looking to create an application – typically something more geared to internal departments in an administrative type of site, then both ExtJS and Dojo are fantastic choices.
Knockout (MIT license)
In fairness, I’ve not actually programmed with Knockout JS yet, but here’s what I can tell you from looking at their documentation and some of their tutorials – this appears to be the perfect mix between those who love JQuery but have the need for data driven solutions. For instance, let’s say that you’re looking to create a site with a very custom look and feel and you don’t want the standard widgetized look of either ExtJS or Dojo, then this might be your cup of tea. Basically with Knockout you create your look, and then via Javascript you create bindings/mappings to data and events and through the use of templates you can have an interface that automatically changes when your data does. So, let’s say someone types in a search on a Knockout page, you do an AJAX request to the server to get some results, when that data gets back, assuming you’ve linked everything up properly, your display will automatically update without you have to write your own DOM manipulations. Knockout focuses on binding data changes and events to create an interface that comes alive with minimal DOM hacking on your part. If you were building a bespoke application for paying customers to use, I could definitely see picking a library such as Knockout to provide that custom look and feel with the data interactivity that is typically needed with web applications.
Closing
Hopefully this has given you an idea of what these popular libraries have to offer. The only thing I’d like to offer in addition is to be aware of the licensing that these or any libraries use. If you’re creating some super-duper proprietary application and you choose a license that indicates you’re going to have to open source your own code, you could lose out huge in the end. Just because something is open source doesn’t mean it’s “free”. It’s much better to investigate these things up front than find out the hard way. In the end, look at what you’re trying to create and determine what’s going to be the best for you. If you want to focus on data and don’t want to have to think about designing a look and feel to an interface, then ExtJS or Dojo. If you’re looking to just enhance an existing website and you want to be able to quickly access and manipulate existing things on the page, the JQuery is a fantastic route to take, and one that is adopted by a ton of sites on the Internet. If you want to develop a highly customized look and feel but you need some data interactions and don’t want to get in the mud with DOM manipulation, give Knockout JS a try.
While it’s frustrating that these libraries are popping up all over the place, it sure beats the pants off trying to write all these things on your own. I remember the days of having to code your own DOM inserts such as adding new rows and having to do it differently for varying browsers. Now, you have more options than you probably want to dig through! 🙂
