March 3, 2017

Ext JS vs JQuery - a quick comparison

In the Web 2.0 era, developers often hunt for a JavaScript toolkit/framework for their application to create dynamic web pages with ease. There are lots of them and it could take significant time, effort, research and experimentation to pick a suitable one for an application. Having limited experience with Ext JS and jQuery, I would like to provide some comparison from a developer's point of view. This is entirely my personal opinion and does not represent Eagle's preferred choice of product.

Getting started

Ext JS follows an object oriented paradigm which is complex, rigid and in some case unforgiving. It will appeal to experienced programmers but might involve a steep learning curve for a novice (particularly to create custom components). jQuery is known for simplicity and this would be a beginner's choice.


Ext JS wins in this area with excellent documentation which is very well maintained for every release. jQuery documentation is not very comprehensive in comparison but developers can easily get over this due to the large user base and excellent community support.

Coding style

To give a feel of how the code looks like, I would like to take an example of creating a button and hiding it when clicked. I would not get into styling aspects here.

jQuery is optimised for separating the structure (HTML), style (CSS) and behaviour (scripts) - Unobtrusive JavaScript. The code below has both the structure and behaviour parts of a page.

<button type="button" id="testbutton">Click me</button>

Looking at the above code, a button is created using standard HTML tag in the <body> section of the page and behaviour is taken out to the script block in the <head> section of the page.

Ext JS code is all self contained in the <script> tag of the head section. 

<script type="text/javascript">
    Ext.create('Ext.Button', {
      text: 'Click me',
      renderTo: Ext.getBody(),
        handler: function() {
  }; //end onReady
<body> </body>

As you can notice, there are no HTML elements in the body section of the page. But once the page is rendered, a closer look into the page elements will reveal how different HTML elements (<div> and <button> tags) are created automatically.

Heavy vs Light

jQuery core system is very light weight and very good for DOM manipulation. Ext JS is a heavy and very comprehensive framework with great controls over each UI component.

Look and feel

Ext JS provides a very application-like look and is great for a web transition to a user base who got used to their existing applications over many years. jQuery is good to create trendy, cool and very web 2.0 shiny interfaces.


jQuery comes with an MIT license and is free to use. However developers should be cautious when using plugins which could have different licensing terms. Ext JS being owned by a commercial organisation Sencha comes with a price.


I believe both of them are meant for different type of applications. For a very heavy application with lots of complex UIs, involving a big team of developers, Ext JS suits better. With the likes of object oriented style, MVC patterns etc. it facilitates programming and organizing web interface code like back-end code which is good for long-term maintenance. For a small application and very few team members, jQuery suits more because of the flexibility and quick turnaround time.

Topics: Big data technology, Bioinformatics, css coding, dynamic, ext js, extjs, html, html coding, javascript, jquery, mvc, Open source, toolkit, web page