Wednesday 1 August 2012

ExtJS - A Review


Around nine months ago, I was looking into a potential project for work. In it's simplest form, this project involved building a web application that would mostly be built using JavaScript and that worked on all the major browsers and in particular, it must be viewable on an iPad. So, I set about searching for a JavaScript framework that would support this.

Now I class myself as quite the geek and I like to think that I know of most of the major JavaScript frameworks. JQuery, Dojo, Prototype, etc. On top of that there's a few control libraries such as ComponentArt and Obout which I'm also quite familiar with. I looked into all of these but their functionality and look and feel didn't really jump out at me. I thought I'd do a bit of research and came across a framework that I'd never come across before... Sencha's ExtJS Framework. After spending the past couple of months working nearly exclusively with the framework, I thought it'd be a good idea to share my experience with you people so that if you're in a similar position to me, trying to decide whether or not to use an unfamiliar framework, you have a bit more extra information to go on.

It's worth mentioning that I'm in no way affiliated with Sencha so this is a completely independent review.

So, what do I look for in a good framework? Well, I think there's six categories to look at:
  1. Functionality - Unsurprisingly, a good framework needs to do what you need it to do. If it doesn't fit your requirements then there's no point in using it.
  2. Performance - There's not a whole lot of use in having a framework that does everything you need it to if it takes days to do it. How well does it perform?
  3. Ease of use - I would say I'm proficient in JavaScript. I'm certainly no expert. I expect a framework/library to be understandable and usable by someone with my level of understanding of the language. I do not want to have to take a two month extensive course in the inner workings of JavaScript in order to use the thing.
  4. Documentation - Any and every good framework/library needs to have good documentation. You don't want to be stepping through code to work out how to render something. It's much more effective to look up the documentation, have a quick read and then away you go.
  5. Extensibility - The chances are that at some point during your development cycle, you're going to need to add to the framework in order to achieve your desired functionality. How easy is this to do?
  6. Support - Sometimes you just can't work something out, is the support out there to help you through these difficult times?
So, how does the ExtJS framework compare in these categories?

Functionality

ExtJS has the most extensive functionality of any JavaScript framework I've ever come across. It has the ability to create some great user interfaces with some great special effects. Want pictures flying across the screen? No problem. Want something to fade in or out? Easy. And that's just for starters. It has a whole charting module: bar, line, graph, area, scatter, radar charts can all be created with minimal fuss. Along side that you've got grids which automatically support sorting, paging, editing and grouping.

Charts and graphs is only a small
piece of ExtJS functionality
ExtJS doesn't just do charting controls. It's has loads more to offer. Combo boxes which are a more enhanced version of the basic select HTML element are a selling point. There's also menu and toolbar controls which allow you to build user interfaces that will be familiar to your user. There are many more controls, just check out their examples here: http://www.sencha.com/products/extjs/examples/.

On top of all the controls, there's the functionality that the controls themselves bring to the table. Bar charts can just be rendered, or, you can animate them so they bounce in to position. Want to show a legend? No problem, that's in there too. Just about every time I've thought "I wonder if I can do x, y and z", I have a look and low and behold the framework supports it. It really is a very impressive framework.

Performance

With the amount of functionality that ExtJS does provide, performance is always going to be a talking point, especially when so much relies on manipulating the DOM which we all know can be slow. Now I've used ExtJS 4.0 extensively and I must say that the performance is very good. Like any programming library, there's way in which you can optimize your code so that you get the most out of it and I believe that if you do optimize then you'll be very impressed with its performance.

Performance of ExtJS4.0 is impressive!
There is a downside here though... ExtJS 4.1 was recently released and so I tried upgrading my project to use the new and "improved" library. After the upgrade, not only did certain controls just not work, the performance of my site seriously deteriorated. The whole reason for upgrading was to see if the new version improved performance, according to the promo by Sencha, it would do and although the 4.0 version wasn't exactly slow, if I could gain a bit more performance just by upgrading then it'd be stupid not too right? Well, I upgraded, spent a day fixing things that the new library broke and then spent another day optimizing the code and it was still slower than the 4.0 version. We're not talking about a few tenths of a second, we're talking  10's of seconds. At this point, I gave up and reverted back to the 4.0 version. Maybe it's possible to optimize it so it does run faster but with no real guarantee of that, I didn't feel I could justify spending the time in attempting it.

Ease of Use

ExtJS is exactly what I'd expect a good JavaScript framework to be in terms of ease of use. I simply picked it up and started to play around with it and soon got to grips with its functionality and how it can be used. Sencha provide loads of good examples ranging from the basic to the more advanced. All of their examples have their source code attached, you can simply look at the source code and work out what's going on. All of the objects and functions are logically named so the code is easy to follow. Put that together with a modern browsers JavaScript debugging capabilities and you can work out exactly how everything works and from there you can work out how to adjust the code to suit your needs.

If that isn't good enough, Sencha also provide well written tutorials on how to use the framework and how to deploy it, making it as simple as possible. If you want to check those out then have a look here.

Documentation
Documentation is a must for any framework
This is one area that ExtJS really does shine. The documentation for ExtJS really is excellent. Every method, property and configuration is well documented, just take a look here if you don't believe me. Not only do they provide documentation for the current version, they also have documentation for previous versions as well so you won't be looking at documentation that no longer applies!

You'd think this is one area that all frameworks would do well in, after all, documenting is just a case of writing down what everything does. You'd expect framework providers, especially ones that charge for use, would devote time to this area. However, you'll be surprised how poor the documentation is out there. jQuery is a framework that I've had a fair amount of experience with and they're pretty good with documentation, in contrast, I've also had a lot of experience with ComponentArt and they're documentation is absolutely shocking. I've wasted hours of my life trying to figure out how to use ComponentArt controls or trying to find out exactly what a certain property/method does because the documentation just simply doesn't tell you. Nine times out of ten, it's either non-existent or incomplete. You have no idea how much of a difference comprehensive documentation makes when you're trying to use a new framework.

Extensibility
Almost every time I've had to use a framework, it never quite works as I need it to so I end up modifying the source code or ideally, I build on top of the framework to add a bit of functionality to it. ExtJS recognises this and provide ways for you to override and extend objects. The framework heavily relies upon inheritance so extending and overriding controls is a very familiar concept for programmers that use object oriented concepts on a day to day basis.

Support
No matter how easy a framework is to use and no matter how good their documentation is I can guarantee at some point or the other you will come across a problem that you're struggling to solve. At this point you'll want to ask the wider world for a bit of help. Sencha have specific forums for this and for a fee you can access specific forums that are monitored by Sencha developers. ExtJS is fast becoming a widely used framework so, if you post a problem on a well known forum (say StackOverflow for example) then you'll be almost guaranteed a reply.

So... In Conclusion....

I think it's pretty fair to say that I'm a massive fan of the framework. This has blown frameworks that I have previously used out of the water. Some of the things I've managed to build in a day would have taken me months without the use of the framework. The documentation and general ease of use make developing applications with the framework a simple and effective task and because of the sheer quality of documentation, you feel your productivity increases just by using it. The thing I like the most... and this sounds kind of odd but, it just works. The quality of coding is very high. I've been using the framework on and off now for about nine months and I can count the number of problems I've come across on one hand and even then, I've been able to solve them with minimal effort.

It's not all good though, as I've stated previously, there is one big downside... upgrading and backwards compatibility. I upgraded from 4.0 to 4.1 and everything, and I do mean everything, broke. When I eventually got things working again the performance was so bad that I had to revert everything and stick with 4.0. I don't seem to be the only person that's had problems either. If you want to have a look for yourself, then you can check out the comments to Sencha's blog post about the 4.1 release here. Here's one comment that jumped out and me and summed up my frustration after a couple of days of trying to get things working after the upgrade:

"What a shocking release. An app that works without fault in 4.0.7 doesn't even show up properly in 4.1. We just got Sencha'd ... again!"

But that's the only fault I can find. If you're not worried about backwards compatibility and if the framework in its current state does what you need then I couldn't recommend it higher. It truly is a fantastic framework to work with. Just don't try upgrading.