“Rapid” application development with Ext JS

 

Presentation to ADUG

21st Dec 2009

 

By Glenn Lawrence

of AIMTEC P/L

 

Email: Glenn(AT)aimtec.com.au

 

Contents

 

“Rapid” application development with Ext JS.. 1

What is Ext?. 2

What is it used for?. 3

What does it do?. 4

Platforms. 5

Deployment. 6

Commercial model and licensing. 7

Documentation. 8

What do I need to have to develop in Ext?. 9

Demo. 10

 

What is Ext?

Ext JS, or simply “Ext” is a JavaScript library for cross-browser web development that is written and supported by US company Ext LLC.

The Ext website is: http://www.extjs.com

The current Ext version is 3.1 released 17th December 2009.

This talk and demo is based on version 3.0

 

 

 

What is it used for?

1.       A programming library to enhance the JavaScript language – data conversions, formatting etc

2.     Providing simplified DOM manipulation with cross-browser support being transparent to the web developer.

3.     Adding Ext “widgets” and AJAX functions to existing sites or traditional Web 1.0 web pages

4.     Developing rich “Web 2.0” apps that approach desktop apps in terms of user experience

 

What does it do?

  1. Offers many Javascript helper functions for things like formatting, conversions, iterating and OO subclassing
  2. Provides a powerful abstraction of the DOM through Ext.Element
  3. Simplifies AJAX interaction
  4. Provides local data storage widgets and the ability to link them to the server, as well as linking them to data-aware UI widgets using the “observer” pattern.
  5. Lots of powerful UI widgets, from simple pop-ups though to complex data grids – see examples on the Ext web site.
  6. UI container model including sophisticated layout managers – see examples on the Ext web site.

 

 

 

Platforms

  1. All major browsers including Firefox 1.5+, Opera 9+, Safari 3+, IE 6+
  2. Adobe Air (for desktop deployment)
  3. Can also use other frameworks as a “base” – including YUI, Prototype and jQuery

 

 

Deployment

  1. Complete library takes about 500kb to deploy, which is significant for browser-based apps, but becoming less so all the time.
  2. Can be reduced to around 80k by removing unwanted widgets. Ext provide a free tool call JSBuilder for customizing the deployable.
  3. Download time can be speeded up by configuring your production web server to GZip the deployed js and css files

 

 

Commercial model and licensing

  1. Open source with dual licensing – GPL and commercial
  2. Free to use with similarly licensed (GPL) open source projects
  3. Commercial license required to use the full library for any other projects – approx $300(US) per developer
  4. The cut down “Ext Core” product is under the “MIT” open source license so is free to use commercially
  5. License is perpetual but only covers the current major release, including point releases
  6. Free support is available through a very active forum
  7. Paid for “premium” support is available from around $300(US) up to $5k per year

 

 

Documentation

  1. Very good “reference” docs that are auto-generated from source code comments (like Javadoc) presented in a simple to use web-based UI.
  2. Some very good tutorials, examples and FAQ on the Ext web site
  3. Some good books are now out – e.g. “Ext JS In Action” by Jay Garcia and “Ext JS 3.0 Cookbook” by Jorge Ramon

 

What do I need to develop in Ext?

1.       A basic understanding of HTTP concepts like cookies, headers, post/get etc

2.     A basic understand of AJAX concepts like XMLHttpRequest and JSON

3.     A reasonable knowledge of HTML and CSS and the “Document Object Model” or DOM.  While not essential, the more you understand the DOM, the more you will understand how Ext works.

4.     A pretty good knowledge of JavaScript. I recommend the talks by Douglas Crockford at http://developer.yahoo.com/yui/theater/

5.     A good JavaScript-aware editor or IDE – e.g. NetBeans, Eclipse, Aptana

6.     A local web server test environment, supporting the server-side technologies you are working with (e.g. Delphi, Java – whatever)

7.     Firefox and Firebug

8.     Fiddler 2.0 and/or Firefox add-on Tamper-Data are also useful for monitoring all HTTP traffic – not just AJAX requests

Demo

  1. A web front-end to the Cumulus “Digital Asset Management” system demonstrating:
    1. Display of large data sets of records including images and text using the Ext Dataview and Datastore components.
    2. Animated “callout” displays for additional data using the Ext ToolTip component, also demonstrating DOM event handling such as mouse enter/exit.
    3. Animated show/hide of various windows and widgets
    4. Interaction between UI and data elements using the Ext “Observable” component event management system.
    5. Ext menus, including right-click context menus.
    6. Ext form and form field components, with content of data fields retained between sessions using the inbuilt Ext state management.
    7. Complex application layout using the Ext container widgets.
    8. Pop-up “windows”
    9. Drag and drop of records between different widgets using the inbuilt Ext DD components.