News and Blog

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.

Documentation

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.

<html>
<head>
$(document).ready(function(){
  $("#testbutton").click(function(){
    $("#testbutton").hide();
  });
});
</head>
<body>
<button type="button" id="testbutton">Click me</button>
</body>
</html>

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. 

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

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.

Cost

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.

Verdict

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.

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

Abel Ureta-Vidal

About Abel Ureta-Vidal

With more than 12 years of bioinformatics experience and a scientific background in molecular biology and immune-virology (PhD from the Pasteur Institute, France), Abel first mastered bioinformatics tools and code in the early 90s whilst working on viral phylogenetic studies. After his PhD, he joined the effort at Genoscope (Evry, France), in ramping up the human genome project, putting in place the automatic gene annotation system for human chromosome 14. In 2001, Abel moved to the European Bioinformatics Institute (Cambridge, UK) where he led the Ensembl comparative genomics team until 2007. He founded Eagle shortly before graduating from the Cambridge Judge Business School MBA program in 2008.