Home > Frameworks, IT, JavaScript > JavaScript UI framework comparison or Why I choose ExtJS & JQuery

JavaScript UI framework comparison or Why I choose ExtJS & JQuery

Recently we’ve spent several days trying to decide which UI JavaScript framework/library to use. Our company is developing a media website with funky design which has a very complex admin panel with lots of crammed together pages. We were going to rewrite the admin CP’s UI from scratch because of it’s slowness and were searching for a solution that would require as small as possible effort to build a functional/comfortable admin panel and require only minor UI customizations. Also the library we use should have made our life easier when doing stuff on the main funky site. Well we couldn’t find a solution which will satisfy both this requirements instead we decided to use ExtJS for the admin CP and JQuery for the main site. The reasons behind this choice are listed bellow:

Why ExtJS for the admin CP?

  • It’s faster than the other frameworks with complex UI elements  we tried
  • It’s look & feel is significantly better. Most of the UI elements have layout we’re not going to change at all for the admin CP. We don’t need a unique or beautiful design here we just need it to be acceptably good looking & comfortable. Ext provides this.
  • The code was easier to write/read using Ext
  • Was good documented and there were lots of tutorials written by the fans

Why JQuery for the main site?

  • It’s very light. It sucks when the user has to wait for a “Loading” after opening the page. JQuery is about 20 Kb in total so there’s nearly no performance difference at all.
  • It has lots of community built plug-ins for nearly anything. It’s true that JQuery lacks complex UI elements like ExtJS’s grid but we had no need for stuff like these on the website (the admin CP is another issue).
  • The UI elements/plugins JQuery provides are easily customizable/editable because of their small size(in most cases).

Bellow is the result of our “research” on the subject.

QooXdo

Pros Cons
  • OpenSource License
  • Good/Pretty UI Elements
  • Small community
  • Relatively New Project
We skipped this framework because it’s a bit too young. It doesn’t have a  solid community and support (it’s opensource). Also it didn’t provide some of the functionality of the grid which was a requirement for us.

ExtJS

Pros Cons
  • Is a very active project
  • Has great support forums (with lots of answers to the most common questions) and has a good/active support team.
  • The best collection of UI elements. These come with a ‘pixel-prefected’
    styles and are useable out of the box. Ideal if you’re going to write an admin CP.
  • Has one of the biggest communities
  • Good Documentation & examples
  • Good code quality/readability
  • Non Free License for commercial use
  • Support costs additional fee
  • A lot of JS code has to be loaded. Something around
    300-400Kb uncompressed JS. Most of ExtJS websites I’ve seen display a “Loading . . .” logo before the UI starts functioning.
  • No good error reporting solution. You spend hours debugging ExtJS code trying to find out what you did wrong.
One of the leading JS frameworks on the market. I’d like to note that there has been quite a discussion on the internet regarding ExtJS’s license changes (these guys have changed the license 3 times making it more restrictive with each change. Now it’s GPL for non commercial use). Some people even claim ExtJS being an illegal software. Anyway if you’re concerned check out ExtJS Licensing Policy and google for rest(ilegality issues & stuff) ;) I personally do not belive in validness of any of those claims.

Regarding the point about no good solution in the field of error reporting & related stuff. I’m working with ExtJS for several months already and it’s a common thing for me to spend hours debugging ExtJS code trying to find out which parameter I passed to the library was wrong or something like that. Basically if you don’t supply a required parameter or give an invalid value to something you usually won’t be getting an ‘invalid parameter, blah blah blah should be specified” error. What you’ll be getting is usually a “blah blah is not a function” from the depths of ExtJS. After that you may spend hours trying to find out what really is the cause. The only solution to this is probably the experience of working with ExtJS which will not come fast :)

Also don’t expect ExtJS to be fast. It’s slow but it’s faster that it’s opponents out there (at least at the time of my research I got this impression). It’s flexibility and the huge amount of customizable UI elements come at a cost – that’s it’s slowness & the time required to getting familiar with it.

I’ll also add some links form the ExtJS website you may find usefull.

ExtJS’s Customers List

ExtJS Tutorials

ExtJS Price List

Coder’s Eye – Why am i moving from jQuery to ExtJS

JQuery

Pros Cons
  • OpenSource License
  • Is very lightweight
  • Has very big community
  • Is very popular
  • Is ideal if you plan to add some AJAX/JS tweaking to an existing UI
  • Has quite an old history
  • Good documented
  • Easy to learn
  • Most of the functionality comes in plug-ins by various community supporters ( aka untrusted sources :) ) which are not as stable as you’d like them to be and usually do not provide any support
  • Lacks complex UI elements like ExtJS’s grid
  • Most of the plug-ins you’ll be using will require some tweaking from your part. They are not usually flexible enough to suite everyone’s needs.
A good lightweight UI framework. For more details see the beginning of the article ;)

jQuery related Links follow

Official website

jQuery plug-in catalogue ( but mainly you’ll be using Google in search of the plug-ins you want, this ‘list’ is not even close to being as good as Firefox’s or WordPress’s plug-in catalogue )

iQuery UI – a jQuery written & maintained library of UI elements for jQuery

Dojo

Pros Cons
  • OpenSource License
  • Supports a11y and i18n
  • Uses Canvas for FF and VML for IE making 3d graphics in browser portable between browsers
  • Old and solid project
  • Lacks good widget system. As far as I know Dojo is basicly a great JS framework but a so-so widget library
  • Requires UI tweaking. You can’t build all your UI using out of the box Dojo
    configuration/UI controls. You’ll have to ‘pixel-perfect’ the layout yourself.
  • Websites using Dojo are not W3Schools HTML compliant. So if you care about the HTML validity of your website this a con. Personally for me this does not matter as far as the UI looks cool and functions correctly.
This was the least researched framework. First of all what I didn’t like were the examples on their website. They look as if they need to be be tuned and pixel-perfected a lot before can be put to actual use. Also this proved some articles i found on the subject. Well honestly I’m a little surprised by the following chart showing that there are more dojo developer positions available.

Also you may want to check out the following pages:
Dojo vs Ext.js – How Dojo lost in front of other UI frameworks like Ext js
Dojo vs. ExtJs

Backbase

Pros Cons
  • Uses taglibs so you don’t have to code JS in many cases you did before.
  • You get a very clean UI generation code
  • Has UI elements for nearly anything that you may thinks of.
  • Free to use
  • Good Documentation & examples
  • Because of the taglib architecture and good implementation it’s very easy to find codding mistakes. Backbase warnes you on nearly everything you do wrong
  • Is hard to debug
  • Is slow. Slower than ExtJS
  • Your developers should be familiar not only with JS but also
    with XML’s advanced stuff like tag libs.
  • To extend functionality a good understanding of XML &
    TDL is a requirement.
  • Is hard to get Backbase used with an existing code therefore is better
    to use it in a project you’re starting from scratch.
  • Is very unique. I know of no other client-side UI framework
    like this.
  • Small community/few known(by us) usage examples
This is a HUUUGE framework/taglib which has nearly anything that you’ll want to implement. It’s very flexible and really heavy. We decided not use this mainly because of it’s speed and complexity. The framework provides some options for speed up but we didn’t test it.

In the end i’d like to add that everything i wrote is my subjective opinion. Feel free to discuss it and disagree :)

Related links:

Wikipedia JS framework comparison page

JS framework speed comparison charts ( ExtJS not included )

Last Updated on December 15, 2009 – Modified jQuery & ExtJs section

  1. jambu
    September 11th, 2009 at 18:28 | #1

    very helpful :)

  2. Bux
    December 15th, 2009 at 05:24 | #2

    Indeed a very nice comparison!
    Unfortunately some major frameworks like YUI, MooTools, Prototype are missing…

    Check http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks for some nice information.

  3. December 15th, 2009 at 06:07 | #3

    Bux, thank you. I’ll include that link in the article :)

  4. December 21st, 2009 at 06:02 | #4

    Thanks. This review/comparison was very helpful. I will begin using JQuery based upon your review. It was good to have your opinion regarding debugging issues.

  5. January 24th, 2010 at 19:22 | #5

    Nice comparison. Specially the pros and cons look neat. thanks
    I also tried doing a basic comparison between the various frameworks here ( http://technoticles.com/2010/01/15/javascript-framework-comparison/ ) but need to expand the article, with more inputs like the ones that you have in your article about Dojo and Backbase.

  6. Dave
    February 15th, 2010 at 05:33 | #6

    Nice write-up. You clearly put a lot of work into it. I especially liked the lists of pros/cons which summarized things quite nicely.

  7. Alex
    July 8th, 2010 at 04:08 | #8

    Very good comparison, thanks! You might also check dhtmlx ( http://dhtmlx.com ) , it’s quite a complete widgets library with good features and full docs. It’s GPL licensed like ExtJS.

  8. July 27th, 2010 at 05:26 | #9

    This was a very helpful article.

    As you stated, ExtJS is perfect for back-end apps and jQuery perfect for all that is lightweight and front-end. We use ExtJS with PHP Yii in a framework called Ext4Yii.

  9. Varaprasad
    November 15th, 2010 at 03:19 | #10

    Good Comparisons..i hope these are applicable for desktop websites..what about mobile websites..mobile web siltes?

    • November 15th, 2010 at 10:35 | #11

      honestly i don’t have any idea :)
      well jQuery should be quite OK on most mobile browsers. But jQueryUI and extJS will probably need some tweaks. actually extJS may even require a LOT of tweaks :D but I’m just guessing never tried these frameworks on mobile :)

  10. September 27th, 2011 at 11:40 | #12

    Nice article. In fact we are struggling to choose one framework for our application. After all discussions we are still unable to decide between ExtJs and jQuery. I think this will help.

    Thank you.

    Susant

  11. Brett Stahlman
    October 3rd, 2011 at 12:54 | #13

    You might want to re-evaluate performance with Ext JS 4.0. Layout performance is especially bad. In fairness, the Sencha dev team has promised big improvements in v4.1, whose release is (hopefully) imminent…

  12. December 1st, 2011 at 10:10 | #14

    for my opinion is i’m using ExtJS for application because of it’s heavy weight (699Kb or more) in size, but also i use for website like :
    http://www.indoquran.web.id
    you can feel it is heavy when loading for the first time, but not after that.
    and for jquery i use it for website because of it’s light weight (only 30Kb) javascript framework, i use it in :
    http://www.danalam.co.id
    you will not feel that you are loading a javascript framework.. :)

  1. January 14th, 2010 at 18:07 | #1
  2. January 15th, 2010 at 00:04 | #2
  3. February 14th, 2010 at 03:52 | #3
  4. May 8th, 2011 at 08:17 | #4