Fun and despair with ExtJS
Since I started playing with Javascript about a year ago I became aware of a pretty large number of Javascript libraries that offer additional functions or even widgets for a nicer user interface. I had started with prototype/script.aculo.us because it was included by Pylons. But when I found out that I’m not really bound to it I started looking around in my usual pointless search for “the perfect tool” ™. Finally I stranded with jQuery and I fell in love with it quickly. Give me results quickly and I’m willing to dig into the more subtle parts of something.
Sure, other people told me that jQuery is lame and Dojo is it or YUI (the Yahoo UI library) or even ExtJS. ExtJS? Yes, I looked at that before. Very impressive demos like the “Web Desktop”. I didn’t want to write anything like that though so I enjoyed it as a proof-of-concept and was done with it. But somehow one of my current projects requires a “grid” - that is a table that acts as a paginator (you get shown chunks of data and can navigate back and forth) but allows you to select rows and run actions. Perhaps I would also need a tree view. ExtJS supported all that so I dumped jQuery for a moment and created a (Mercurial) branch of my project to try out ExtJS.
There were instantly a few things I didn’t like. The whole Javascript was 500 KB large. Hardly something I could use on a production web site. Imagine a >500 KB start page. I also had to throw away my CSS for a moment and use their stylesheet - with 850 not-documented classes. Anyway - I surrendered to that and started playing with ExtJS. Strangely loading the page took 10 seconds in Firefox. After some research I found out that there was a bug in FireBug (a Firefox extension that web developers can hardly live without) with large Javascript files. Yes, 500 KB is large. Finally I found a hacked version of it that disabled a few features just to work better with ExtJS.
So finally my application loaded the Ext-all.js (the documented order and list of files I had to include was wrong) and could copy/paste a grid example into my application. One day later it worked. I had defined Stores, Proxies, ColumnModels, Actions, GridPanels and PagingToolbars and after 150 lines of Javascript I finally loaded JSON data from my web service (running on Pylons) and had the grid fill with it. I better hadn’t looked into the generated HTML - made me dizzy looking at all the nested DIVs and TABLEs. My Pylons code was just 5-10 lines though. It was an adventure of surfing through the API documentation of ExtJS that is complete but unusable to me. It defines all possible parameters and options but those are inherited from one another, some aren’t documented because they are “common” and you hardly get an impression on what they mean or how to use them. There were nice examples and everything they did was well documented. But that didn’t help me do more than that. Even doing server-side sorting of the JSON data meant firing up FireBug and watching the parameters - I had expected that to be documented somewhere.
Finally I decided not to work with ExtJS any more. If my application consists of 90-95% Javascript and 5-10% Python/Pylons then I’m not spending my time as intended. Using ExtJS basically means surrendering to it. Just use their library and style sheet and change as little as possible. 500 KB Javascript and 850 CSS styles are pure bloat. And while their license is basically the LGPL they have some weird additional clauses in their license like you can’t use their theme graphics and styles outside of the ExtJS context. I understand that a library of such a quality can’t be maintained by a handful of volunteers. So I see that they want to make money with it if others start making money with it. But somehow it was too much legal stuff for me. I prefer software that is just free. MIT or BSD. Or even GPL - I don’t mind. (Everytime you complain about the complicated licensing you are pointed to their license consultants to convince you.
).
It’s a great library. It has great widgets. It even creates HTML that is strictly valid in all browsers I could find. But I was not ready to surrender my application to ExtJS. I wanted a grid to support my application. Fortunately I didn’t have to reinvent the wheel because Matt Knight has recently published his Ingrid grid plugin for jQuery serving me well. And another (ridiculous) point for jQuery: it has mailing lists. ExtJS has a web forum. I hate web forums. Some people say mailing lists are archaic. But I can delete threads or blacklist people or reply properly in a text format. Morale: the flashiest isn’t always the best - neither for the user nor for the developer.
Are you aware that these 500k are cached on the client on subsequent calls? That actually means that you have a lot less traffic than generating UI-stuff on the server. It actually loads processing power off to the client quite nicely. I don´t think it´s a bad idea to do this.
Elmar
25 Feb 08 at 1:21 pm
The latest version (2.2) weighs in at around 150k (gzipped by the server).
JC
13 Aug 08 at 4:09 am
“but unusable to me. It defines all possible parameters and options but those are inherited from one another, some aren’t documented because they are “common””
That’s just rubbish. The inheritance level which each member is from is clearly labeled.
Plus, you can hide all inherited members. Just explore the API browsing UI a litle more. At the top left, there’s a button do hide all inherited member so that you can see just what is defined at the current class level.
If you want to cobble up an app from unsupported, ad-hoc code snippets from random places on the web, that’s up to you…
Animal
27 Oct 08 at 2:40 pm
(I wonder if people are ashamed of the things they say. Nicknames in blog comments? Anyway…)
@Animal: I have since worked on a real-life project using ExtJS. The article you commented on is a tad old already. The problem hasn’t changed that much though. You say that using “unsupported, ad-hoc code” is a bad idea. But the problem is that there is no real documentation besides the examples and the API documentation. Say I want to understand the purpose of each attribute used in a certain panel in an example. Then I often can’t find it quickly (if at all). This is an example I made up but it felt like “TabPanel is derived from GeneralPanel which is a subclass of LayoutThings which is derived from AllThings and FoobarThings which in turn…”. You can click your way through but in some cases it’s hard to find the actual documentation. ExtJS is too complicated to just throw a few cool demos at the users and have them look up everything else in the API docs. And if you make a mistake in the attributes you just get confusing errors in the Javascript console (no, in most cases I had the debug version lead to different but equaly confusing messages) and the applications stops working. It might be a general problem of UI frameworks. But then we need a good GUI builder or an IDE that lets us click the components together. Writing everything from scratch spending countless hours in the docs has - at least for me - been no joy.
Christoph Haas
27 Oct 08 at 3:22 pm