Christoph’s Blog

Rants, discoveries and my tireless search for perfect Linux tools

ExtJS - impressive for the user - painful for the programmer

with 20 comments

When following my blog you may have learned one thing about me: I spend half of my spare time trying out every single piece of software because I fear I could miss a tool that would make my life a tad easier. It’s not really surprising that this way I wasted more time in my life than any tool could help me save. On the other hand I know a whole lot of tools and can usually instantly recommend something thus making me appear like a professional liar to many people. :) A helpful side-effect is that I can critisize tools and pieces of software more thorougly if knowing them better. And you may make fun of me for trying my current (workflow web-site) application with three different Javascript frameworks. Most of the time I spent fighting against ExtJS. No, seriously, I tried to work with it. I try not to deny working with new tools just because I’m not used to them. And ExtJS is seriously different from most other Javascript frameworks (with YUI apparently being the closest). I don’t want to bore you too much but these are the pros and cons that finally made me go back to jQuery and rather create a new plugin instead of relying on ExtJS. These arguments are very subjective of course.

Pro ExtJS:

  • Nice widgets. They have just everything. ExtJS is like a superset of the widgets of all available Javascript frameworks. And so far I couldn’t find any obvious bugs. Be it menus, status bars or grids. It’s just impressive. Take a look at the ExtJS-based pastebin and you’ll likely say “Wow”. It’s great from a user’s perspective. When I saw it the first time I had to show it to everybody who couldn’t get away fast enough. It’s like a proof-of-concept of what’s possible in the web browser.
  • Good API documentation. If you need to look up something you’ll probably find it.

Con ExtJS:

  • Applications do not degrade gracefully. Turn off Javascript and you are left with a few naked lines on your screen screaming “eeeeek” and disappearing in shame. I try to make my applications work without Javascript (web 1.0 style) and just spice it up with Javascript to support the users and save them time.
  • The CSS. It’s nearly thousand definitions which are giving you no idea which is used for what purpose. You just can’t seriously customize it. No theming. Their style is “eat or die”.
  • The HTML. Okay, the generated HTML works. But it’s huge. Many tags get so many CSS styles assigned that you don’t understand what’s going on. DIVs are nested so deeply that you’ll need a minute at least to find a certain widget in Firebug. If you are fast.
  • ExtJS works in pixels. You don’t say “give me a textarea with 60×5 chars to enter” but “give me a textarea that is 300 pixels wide and 80 pixels high”. I rather try to avoid working with pixels. Isn’t the point of HTML to render properly on every screen? Try a Layout in a Panel (rendered in a DIV). You’ll have to specify the height which is either too high or too low. Try a Layout in a Viewport and you are all set - it’s exactly filling the browser window. But you won’t be able to change anything in it or use it in the context or your existing application. If you want ExtJS you’ll have to virtually surrender to its way to render things.
  • The license. When ExtJS started to use the GPL3 everybody complained. At first I wondered why. After all 50% of what I do is open-source anyway. I just forgot about the other 50% where I either create web applications for my employer or for my own customers. I obviously don’t want to publish my own source code - especially not under the GPL. (At first I wondered why all the trolls were so upset about the viral nature of the GPL. But with the time I understood that’s really viral and often a problem. The GPL may be okay for applications. But it’s definitely the wrong choice for libraries - like ExtJS.) In the context of applications for my employer it’s all internal/intranet applications. So I’m not distributing the application and don’t need to pay for a license or publish the code. (Even though the ExtJS web site tries to confuse their readers regarding the “internal usage” and claims you need a license to do so.) Of course the makers of ExtJS can publish the library under whatever license they want. And it’s definitely high quality so they deserve to get paid for it. But their GPL restriction may really be a no-go for many projects that are evaluating different Javascript applications. If you like to hear my proposal: publish ExtJS under a permissive license (MIT or BSD) and just sell support. Many companies earn money that way. And it would make people worry less about using it and rather have them using it.
  • The web-based support forum. Now that I went back to jQuery I value their simple mailing list so much. Web forums (although pretty widespread) are a PITA. Their advantage is that you can easily seperate different topics on a single site. If you tried the same with mailing lists you’d have to offer a dozen mailing lists. But on the downside you have just 20% value (with 80% being HTML, rankings, polls, blinking signatures and “me too” postings). I really wish we would all go back to using the usenet in a proper way - subscribe to a group and participate without subscribing or clicking your way through a web forum like a crazed monkey. And I believe that the friendliness in the jQuery community is much better than the arrogance of ExtJS users.
  • Lack of proper examples. The API documentation is pretty complete (I rarely found something in an example that wasn’t found in the official docs). But often the classes and objects are derived from other objects. So you have to click your way through hoping to find where something is documented. In addition the documentation hardly has any examples. You can’t learn from the docs. You’ll have to understand most of it already and just it to look something up. It doesn’t give you an idea of the concepts behind a certain class or object. You’ll have to look at the example applications (which are documented pretty well) to learn from it. And even then it’s a lot of guesswork.
  • No customization. I can hardly imagine how I should use ExtJS on a customer web site. Show me a web site and I’ll tell you if it’s done with ExtJS or not. ExtJS is probably good for applications where you really need all the widgets - like a internal management or workflow application. But you will hardly find a good way to make the widgets look any different than in the examples. It’s sink or swim. If you have to follow a corporate identity then you are pretty much screwed.
  • 90% client-side coding. I still love Pylons (the Python WSGI MVC web framework). I have a good programming language. A good templating language. A nice online debugger. But with ExtJS I initialise the application in the browser and just interact with my backend using JSON. Which means that most of the complex logic that I use to display things on the web must be done in Javascript. This is error-prone and the user can see exactly what I’m doing. I overheard developers worrying on how to load Javascript code on-the-fly so that every user just sees the widgets that are necessary. Seriously - such code belongs in the backend. You’ll have to do the data validation in the backend anyway. (Although I saw some example of ExtJS applications where all the security validation was done in - easily tampered - Javascript.) Try the login tutorial. You’ll see that logging you in means forwarding you to another page. No session cookies. No making sure that AJAX/XHR requests don’t come back with a 401 (Authentication needed) error. Just the kind of security you’ll expect from an average PHP application. AJAX is a security risk anyway and you should use it carefully to avoid cross-site scripting problems. Did you know that passing JSON arrays is potentially insecure? ExtJS often expects JSON data as arrays (or in XML). ExtJS is virtually in invitation for hackers.
  • Verbosity. To do simple things you’ll find yourself writing large amounts of Javascript. Of course a grid or layout has a lot of possible options that you can pass. But nothing beats jQuery’s simplicity of $('#div1').load('/something').
  • Debugging. Although there is a debug version of the library I could hardly ever figure out what went wrong. My main debugging tool wasn’t Firebug. It was Mercurial. Because I checked in every single working change I had and diff’ed my changes in case anything didn’t work any more. Programming on trial and error isn’t really my favorite style.
  • Size. The library is 500 KB in size. While people may argue that you load that once and then keep it cached it’s still 500 KB. Imagine you have that on your start page. I wouldn’t worry about that size on an intranet application where everybody is on 100 or 1000 Mbps. But on the web?

You probably won’t need long to count my pros and cons. Please don’t let me make your decision on whether to use ExtJS or not. Just consider the above criticism if you consider using ExtJS. Bah, enough with the politically correct talking. See you on #jquery. ;)

P.S.: Yahoo’s YUI has similar widgets like ExtJS. It’s just also very verbose. But at least they are flexible enough to be used easier and you can skin them.
P.P.S.: I have to admit that the jQuery UI widgets are still a tad buggy. If you seriously need widgets then consider the YUI.

Written by Christoph Haas

October 22nd, 2008 at 9:04 pm

20 Responses to 'ExtJS - impressive for the user - painful for the programmer'

Subscribe to comments with RSS or TrackBack to 'ExtJS - impressive for the user - painful for the programmer'.

  1. Seriusly, you should try Mootools.

    iElectric

    24 Oct 08 at 12:30 am

  2. I agree completely. Im trying to write a web based finance software, but I quite wanted a nice grid, which extjs provides.

    But even getting a couple of basic UI elements working properly has been like pulling teeth.
    Finally I did get extjs working as I wanted, but the grid performance turned out to be pretty dreadful once you get quite a few rows (nothing excessive mind).
    Its a real shame, because visually its stunning.

    A few other things I hate about extjs, is that to do it properly you really have to write your whole application in it, and the learning curve is almost vertical.

    I found it very difficult to output HTML from PHP and then tie it together with bits of extjs. Debugging is a nightmare too because you often get some obscure message from deep within the extjs core.

    So thanks to your post, I decided to try jQuery about 5 hours ago. Ive found it so intuitive, and easy to code with. Im not sure why I never looked at it before, maybe I assumed it was Java because its from IBM.

    So I decided I dont need a fancy grid anymore, Ill just write some usable DHTML table without all the bloat that extjs has. That was only 3 hours ago, and Ive already made more progress with jQuery and PHP than I did in nearly 4 days with extjs, so Im very happy I found this blog

    Thanks a bunch :))

    Carpii

    23 Nov 08 at 1:53 pm

  3. I would fully agree with you that ExtJS can be a bit of a struggle and that it’s really only suited for web “applications” and not web sites. However, you should be aware that you can also use jQuery along side of ExtJS. That takes some of the pain away, but not much ;)

    Thanks for sharing your thoughts!

    Joshua

    24 Nov 08 at 4:08 pm

  4. Pff!

    It takes some OO js ability to use Ext, that’s all. There are 80, yes, EIGHTY example pages which illustrate almost every technique you are likely to need in the first few months of your development.

    The API documentation contains LOADS of class summary information, and code snippets, and DETAILED method description. Did you not find out how to click the margin to expand method descriptions?

    Pixels? Why would you ever need to use them? Ext’s layout managers take care of this for you. You never size a text area, you ANCHOR it, and it resizes with the container. FLUID LAYOUT..

    No customization? Just extend the nearest Ext class to get what you want. Usually Panel. Then add member functions. Piece of cake. If you are prepared to learn OO javascript.

    Verbose? What, you mean “$” does’t do EVERYTHING? Typical geek talk. 90% of the time should be spent THINKING not typing. Who cares whether you type Ext.DomQuery.select(”a.my-class”), or some obscure, overloaded function name which does 20 things? Code READABILITY is more important. After all, we minify our scripts before sending them live don’t we? DON’T WE?

    Debugging? Piece of cake. Don’t want to use Firebug? That’s your problem. And it IS a problem.

    It just gets my goat when I see people wailing like this without having applied any serious brain cell activity.

    webengineer

    5 Dec 08 at 2:05 pm

  5. @webengineer: I wished your comment would be less insulting. That would have made it more credible. I encountered the same style on web forums or the IRC channel and it’s not appearing very mature to me. If I had to judge a JS framework by their community I’d end up with jQuery quickly anyway.

    Well, I do actually use Firebug - every day. But problems with ExtJS programming don’t show up as proper backtraces and error messages like in real programming languages. Sometimes it just doesn’t work the way you intended or it fails with some obscure error message. ExtJS follows a unique paradigm that is totally different from more lightweight Javascript frameworks and of course from traditional web server (WSGI/CGI or PHP) programming. And if you ask me ExtJS is a dirty proof-of-concept hack that provides beautiful UIs for end users while bending Javascript to dimensions it was never meant to be used for. Developing whole applications in Javascript isn’t a very comfortable way. And I especially try to use more developer-friendly frameworks and programming languages and use Javascript to spice up things. A little. ExtJS is rather the opposite. It takes your soul. It makes you need a several-days-workshop to get started.

    The documentation is very detailed. But many examples were meant for an outdated version. Many tutorials are incorrect or even dangerous. Once you understand the basics and know which panel is used for what purpose it probably becomes a matter of looking up methods and attributes. But starting out from scratch leaves you pretty helpless. The only way to learn it seems to be looking at the examples.

    I second that readability counts. But I don’t think that $(’#foo’).hide() is especially hard to read.

    Believe it or not but I didn’t just bash it because I was frustrated after 5 minutes and too stupid/lazy to spend time with the docs. I seriously tried a new project with ExtJS. And I’d consider myself an experienced programmer. (Who laughed there? Step forward. ;)

    Christoph Haas

    5 Dec 08 at 5:57 pm

  6. Real programming languages?

    ExtJs is not a programming language.

    We are still talking about perfectly normal Javascript. And stack traces work just fine because I use them all the time when I break on an error, and then go back to find out who initially set a bad value.

    I find people forgetting that it’s just plain old HTML and javascript when they use Ext because it look so good.

    All it is is a few styled DIVs.

    So $ means select, that’s fine. That’s what it always means then?

    webengineer

    8 Dec 08 at 6:08 pm

  7. @webengineer: Yes, I understand that ExtJS is not a programming language. But that means it has a few drawbacks compared to e.g. Python. Unfortunately I didn’t save the error messages I received so I currently can’t tell but even with the help of FireBug I couldn’t really make any sense of it. But it had the flavor of “T is not a Z in a fuzzyfoo object context” while I actually had a typo in an attribute name while invoking a panel. Something like that.

    ExtJS is just using Javascript, HTML and style sheets - admitted. But it uses a dozen nested layers of DIVs (no problem for the browser but not nice for the poor web developer chasing bugs) with several of many hundred styles defined in the central stylesheet with names that only make sense for the ExtJS devs themselves. If you are not making mistakes and don’t need to look at the resulting code - fine. But for me it wasn’t sufficient to try and play with the ExtJS code and hope that it does what I expected.

    I don’t mind working ExtJS code. It’s beautiful and featureful for the user. But as a developer who has seen many different programming paradigms I have to say that it doesn’t really stick to me.

    Btw, in jQuery context the ‘$’ is just the handle for jQuery itself. I was a little surprised that ‘$’ is even a valid Javascript object name. So it’s used for everything you do with jQuery. Selecting objects, DOM manipulation, attaching event handlers and running actions. It’s really just the same as “Ext”.

    I believe that the main differences are that jQuery is used to spice up web sites while ExtJS is used to write complete web applications. For people who prefer to stay with the framework they are used to they can use jQuery. But if you want to harvest the powers of ExtJS then you need to say goodbye to your old way of working and surrender to it. For people who love to work that way it’s surely great.

    Christoph Haas

    8 Dec 08 at 8:18 pm

  8. I have been developing a real web app/web site using Ext for the last 5 months. I started with YUI, but ran into major deficiencies in their layout algorithms. I was able switch to Ext within a week, and solved my layout problems with ease.

    Ext does not twist Javascript. It embraces Javascript and prototypal inheritance. Most people are not familiar with prototypal inheritance, but once you get the hang of it (as Douglas Crockfield of Yahoo did), it feels very natural.

    Ext’s widget set is large. To use it, you need to spend time reading the source code. The examples and the documentation are not really enough.

    I have not tried to customize the widget CSS yet, but find customizing the widget behavior to be very straightforward.

    The Ext forum members are very responsive to questions, even from newbies.

    I use the Ext Grid with hundreds of rows of data. Performance is ok in Firefox, and outstanding in Chrome. I suspect that IE 8 performance will be excellent too.

    Derrick Burns

    15 Dec 08 at 6:28 am

  9. “90% client-side coding”

    I mentioned this in another comment, but this is not necessarily true. I’ve started creating nearly “blank” js files filled with empty container objects, and then passing in json metadata objects (in my case I use Coldfusion CFC’s) that I can use to build/configure all the forms/grids. It’s good for me since I’m dealing with a lot of different permissions levels (and I don’t want to manage all my permissions in javascript, obviously).

    As far as error messages, I can only say that after you get over the (admittedly daunting) initial difficulty gradient, it becomes a lot easier to recognize your errors. Also, I discovered some setting that, if you had an error, mousing over the error in Firebug would bring up a tooltip containing the entire function that produced the error — incredibly useful and easy to debug and learn about the underlying ExtJS code.

    I will also echo Derrick and say that Chrome is indeed a good match for ExtJS.

    JGMartin

    16 Dec 08 at 9:54 pm

  10. I’ve decided to use ExtJs but it does take a fair amount of commitment, i’ve never been a fan of JS as a language but after a few shaky months/weeks i feel i have a better grasp of it. and i find it quite easy now to customise components and make reusable widgets.
    i do think its better suited to whole web applications but i often use it for simple grid listings, which take all the hard work out of displaying data.

    Keith

    14 Jan 09 at 1:38 pm

  11. I try to work with ExtJS last 4 months (forced…) after
    working with YUI. And I want to say:

    1) layouts are disaster. Not only I am forced to add
    some margins where naturally must be reasonable defaults, the methods to do this are widget and layout
    dependent. And must be in pixels. Plus I hit at least
    one bug every day (normally known for ages and called
    “feature”…), so my code is full of fixes (called extentions…) from the forum.
    The result dimensions are always in pixels, and there
    are too often calculated wrong.

    2) error processing for JSON is different for different widgets. I have already 4 functions to do near the same thing. The same about near all concepts - there are no common solutions for common tasks.

    3) now, when I can compare, I spend near 10 times more
    time compare to YUI for the same result.

    I wish I could stay with YUI…

    az

    15 Jan 09 at 7:01 pm

  12. You can have fluid layouts that shrink and grow with the browser window, i dont set any widths on my grids or panels.

    Keith

    23 Jan 09 at 5:33 pm

  13. Nice post, but I dont think you have embraced ExtJs. What do I mean? ExtJs is a “framework” and like marriage you get stuck to it, and you gotta find its quirks until you master it. Once you master it, you’ll provide the “wow” factor many people want in their “web applications” not “web sites”.

    Personally I am happy with ExtJs for “web applications” and managers go “wow” and “why can’t we produce things like this more often?” (Because you are using .NET controls I say )

    alexandern

    29 Jan 09 at 4:24 pm

  14. New to extjs and in complete agreement with the examples part. They have a whole set of examples and documentation but I simply cant find how to write a simple page. Absolutely no info of how the stuff really works!!!!

    Prameela

    10 Feb 09 at 12:45 pm

  15. I’m not a new and not an old user of ExtJS. I think, if anyone said that the “Ext-concept” don’t crosses his thinks, that does because ExtJS not a simple framework, or library what the webdevelopers use commonly likes prototype or jQuery. ExtJS uses the concept of RAD’ed programming languages, it’s has all but 80% of _components_, not really objects/classes only that are use others, and not really plugins which patches only the original class/object. To use ExtJS well, you need to think in components, not in objects/classes only AND you need to think in objects/classes very well certeainly. ExtJS more likes about Delphi in it’s concept. If this concept is far away from you, that is not the concept’s problem, but it’s a problem of websystems, which are far away by 5-7 years from any RAD’ed desktop language in technics and developer tools. We writes 2009, but webdevelopment is in the past century in developer tools and concepts, and therefore developer knowledge. And that’s all we sucking every day.

    prometheus

    25 Feb 09 at 12:01 am

  16. @prometheus: Thanks for your thoughts. I admit that it’s probably not very useful to compare ExtJS with YUI, Prototype or jQuery. Web development is really way behind and full of dirty tricks. (It sucks so badly when CSS “gurus” talk about how cool their non-table designs are with a dozen tricks and workarounds for a dozen browser versions. That’s no way to do serious work.) Honestly I haven’t written any serious GUI application yet (Gtk, Qt, whatever). So we agree that ExtJS isn’t a library to spice up your web site but a framework that completely locks you in. But it was meant to work like that and it’s okay for me. It’s just not the kind of tool that I’d want to use. :)

    Christoph Haas

    25 Feb 09 at 10:01 am

  17. I’ve been workin with ExtJS during the last year.
    All that it takes is time to learn, which i’m not surprised with any JS UI framework (take Dojo for example) , and a bit of reactivity as a developer.
    Use all the tools you’ve got in your hands, and you’ll be able to develop something great with Ext.
    I hate Python.

    Mathieu Clerte

    8 Apr 09 at 12:51 pm

  18. I could not agree more about ExtJS.

    The license issue is a killer argument against using it in commercial applications and the amount of workarounds needed to get basic things (such as a reasonable databinding) working is incredible.

    We are slowly but steadily moving our applications away from ExtJS to smartclient (http://www.smartclient.com), and in the long run we will go even further and drop all this handcrafted JavaScript madness in favour of SmartGWT, which seems to be the best alternative right now.

    thesel

    14 Apr 09 at 6:36 pm

  19. I totally disagree with you man, I’m the CIO of a small company and i discovered ExtJS a couple of months ago, I wont lie, its been difficult to learn Extjs but we managed to create an app within 1 month (2 weeks of research and 2 weeks of development) it is a snippet administrator for my company and works like a charm, we showed the app to a customer and they bought it right away, you need to work harder (no offence), ExtJS is the next best thing and it is rated by gartner as “promising” along with adobe products (Air, flex).

    =)

    sosamv

    3 Jun 09 at 6:47 am

  20. @sosamv: I believe that if you spend enough time and are happy with the GUI programming approach (widgets, events, …) of ExtJS it might be useful. But you totally lost me when you quoted Gartner because that’s by far the biggest ballony company I’ve ever seen. They wouldn’t know how to make a pizza but pretend to have information on what software, company or whatever is good or bad. :)

    Christoph Haas

    4 Jun 09 at 9:45 am

Leave a Reply

Spam protection by WP Captcha-Free