JavaScript frameworks

Up to my eyeballs in work as usual, but I just had to blog about this...

Recently I've been involved in lots of front-end work and have obviously encountered lots of javascript frameworks.

So far, only one framework has impressed me – jQuery. But let's find out about the others first...

Prototype

This is probably one of the worst frameworks out there. Not only is it bloaty but it commits the cardinal sin of putting all sorts of cruft on all my JS objects.

Unfortunately, Prototype is at the very heart of Confluence - remove it and chunks of Confluence functionality suddenly stop working as do several of the more advanced plugins.

I know Prototype has been around for a fair while, but it's implementation is conceptually wrong. You can't just go around adding methods to core "primary citizen" JS objects! Wrong, wrong, wrong!

Suddenly, you find yourself iterating through arrays or objects and having to deal with all kinds of unwanted things appearing. So then every iteration needs to have a list of "crap that prototype added" to remove from the list. Nasty.

Confluence is particularly problematic in this respect because it appears to contain two copies of Prototype! The first seems to be pulled in via script.aculo.us and the second is a "customised" version in labels-javascript. Really nasty!

Including protoype in your web app is like using a sledgehammer on a watermelon. Overkill and very messy.

Script.aculo.us

URL: script.aculo.us

I liked this library for quite a long time. It adds some nice effects to your web pages and that's why most people use it.

But, there are some issues. First and foremost, it requires the terrible prototype library. So now your apps are all bloated and virally infected by conceptually misguided ideas.

The second issue, at least in my experience, is that it seems to give rise to memory leaks. Whenever I've worked with script.aculo.us I've always had to tread really carefully to avoid such issues.

That being said, I find their UI control library to be very reliable. But that's really not enough of a reason for me to infect my web pages with Prototype.

Dojo, Dijit, Dojox

URL: dojotoolkit.org

Hrm. Ok, there are some good things and bad things about this toolkit.

The thing I like most is dojox - the incubator for all the latest crazy ideas. Having this separate incubator where each idea gets its own project seems really nice to me. It certainly helps promote the incubator projects which would otherwise just be hidden away in the background.

Next, dijit - Dojo's widget library. To be honest, I find the widgets uninspiring and very buggy, and the authors agree.

Which brings us to dojo itself. Ah man, what can I say. HTML with custom attributes splattered all over the place. Don't get me wrong - there is some useful stuff in there, it's just too darn messy to use though.

ExtJS

URL: extjs.com

One day, this will be the JS toolkit, especially for web apps. It looks great, it's being developed at a very fast pace, but...

We've used it on a number of projects so far (including Theme Builder 3 and the Confluence Translation plugin) and have come to realise that it's just too "new" to be used in a production environment.

I think Dan Hardiker recently summed up the problem nicely: It shrank 90% of the work from 10 days in to 1 day. But the other 10% exploded from being 1 day to 22.

That's dangerous. If we'd taken a more conventional approach, we might of ended up with something that was more visually boring, but it would have been completed in 11 days. Ext makes some hugely complex things really, really simple. But it also makes some simple things hugely complex and you can't predict what those things are.

The ExtJS docs all appear to be marketing led - "look at this cool thing you can do with ExtJS". But when it comes to doing basic things you'll find yourself spending insane amounts of time wading through the source code (and there's lots of it) trying to find out what to do.

Keep your eye on this library - in a year or two it will be amazing, but for now don't use it on any time critical projects - there are nasty holes in the documentation and functionality.

jQuery

URL: jquery.com

I've been developing in ECMA based scripting (JavaScript and ActioScript) since the languages first appeared on the net. This library made me jump with joy. Literally. It's taken over a decade, but finally the Eureka! moment that JavaScript has been so desperately waiting for has happened.

First, the library is tiny (14kb packed!) and unobtrusive. It doesn't start infecting all your JS objects with garbage, it doesn't have any memory leaks that I'm aware of and it doesn't have 2834792387 separate JS files to include.

It's a library that you can use when you want to use it. All the other libraries force you down a path - to get the most from them you have to extensively use them not just in the places where you want to use them, but generally everywhere else.

jQuery is different. I can use it in my own code anywhere I want without hesitation. Just because I use it in one area within my code, doesn't mean I have to start converting vast swathes of other stuff over to using it.

jQuery encourages you to properly separate behaviour from content, just like CSS encourages you to separate design from content. I can't think of words to accurately convey just how important this is.

You start off with a basic interface built out of semantic HTML, then make it look nice with CSS, then make it play nice with jQuery. The concept - and implementation - are absolutely spot on.

The default library contains an astonishingly simple way to locate HTML elements and perform actions on them. If you love CSS, the chances are you'll love jQuery.

It's very simple to create your own plugins for jQuery - with just a few lines of code you can fully integrate your own functionality in to the framework and a quick look at their plugin library is testament to how easy it is to do.

jQuery is currently up to version 1.2.1 and it feels mature. Everything is rock solid stable. You can abuse it and it just comes back begging for more. That's something that's missing from all the other JS libraries I've tried.

Now, it should be noted that unlike most of the other libraries/toolkits, jQuery wasn't designed to create snazzy web app interfaces. While there are lots of UI plugins available for it, don't expect to be creating an online version of your desktop apps any time soon.

That being said, now the core jQuery functionality is well and truly perfected, their focus has shifted to the UI layer. It'll take another year or so for them to get it right, maybe longer, but expect amazing things from them!

Clients are pinging me on IM so gotta go. But one last word - start playing with jQuery! If you don't understand it then the chances are you don't understand front-end development