jQuery & Ext JS

ubiquitousstrumpetMobile - Wireless

Dec 10, 2013 (3 years and 7 months ago)

83 views

As two of the most popular JavaScript frameworks, Ext JS and jQuery are often evaluated against each other by front-end
development teams. Most teams quickly find that jQuery and Ext JS are not simple substitutes. They have vastly different
levels of sophistication and target application projects.
jQuery
A cross-browser DOM and CSS manipulation library that manipulates existing page markup to add dynamic behavior
and animation. It has a functional syntax that is easily learned by non-programmers. The entire jQuery library comprises
approximately 200 functions and selectors.
Ext JS
Also includes DOM and CSS manipulation capabilities but it is primarily used as a complete application framework. It has an
object-oriented structure and is easily learned by programmers familiar with object concepts. Ext JS includes functionality for
complex application development. It includes several thousand object methods, properties, events and configuration options.
Its main features are:

A component lifecycle that handles object creation, rendering and
destruction as well as state management

Clean and clear object architecture with extensibility mechanisms

A layout system that nests components correctly and adjusts
layout appropriately for multiple window sizes and resize events

Rich data management including proper mechanisms for handling
“on Ready” events on a per component basis

Data bindings that allow multiple UI elements to be updated when
the data bound to those elements (or components) are updated

A powerful variable-driven templating system that allows easy
HTML customizations without explicit programming

A rich theming system that allows consistent, variable-driven
styling across components

A Model/View/Controller architecture for organizing interactions
between UI components and data models

A vast and comprehensive collection of pre-built user interface
widgets including trees, grids, panels, buttons, menus and more.
jQuery is often used in web-site development to add behavior to pages served from a content management system. jQuery
itself is rarely used to build page markup, and users of a typical web-site that uses jQuery often navigate to new content by
fetching a new page. The jQueryUI library is a small collection of themable pre-built interface widgets that can add basic UI
prebuilt widgets to a page.
Ext JS is primarily used to create “single page apps”. In these applications, a user requests a single page at the start of their
session. As the user interacts with the application, Ext JS dynamically updates and rebuilds the UI to display new content and
data, with no additional page requests.
Benefits of Object Oriented JavaScript
Many Ext JS benefits flow directly from its use of Object Oriented mechanisms to provide encapsulation and abstraction.
With Ext JS, JavaScript object internals are encapsulated within a closure. As a result, private method and property names
in use within these objects will not conflict with public methods and properties of other objects in a project. Behavior is
also abstracted, which means that object and component internals can be refactored extensively without breaking the API
jQuery & Ext JS
A comparison of JavaScript frameworks
dependencies of the rest of a project. (In contrast, jQuery
includes a “.noConflict()” function that must be called when
including plugins, in order to detect namespace collisions.)
Ext JS also has the other productivity benefits of object
oriented programming: for example a new method added to
a class is automatically available for use by sub-classes.
The disadvantage of the Ext JS programming model is that
object oriented syntax can be verbose. For simple tasks, the
functional syntax of jQuery is often faster to type and easier
to read.
Comparison of Feature Functionality
Although they use different programming models, Ext JS and jQuery both include basic capabilities for DOM and CSS
manipulation as well as AJAX calls. (Sencha also makes this functionality available separately from Ext JS via the Ext Core
library.) jQuery functionality is mapped to its Ext JS equivalent below.
Capability
jQuery Function Groups
Ext JS Class
DOM node selection
DOM tree, numeric, text, visibility, attribute, child, forms,
form state…
DOMQuery
Attribute Querying and Manipulation
Attribute, Class, HTML, Text, Value…
Ext.Element
Content Manipulation
Append, Prepend, Replace, Delete, Copy…
Ext.DomHelper
CSS Positioning
Position, height, width
Ext.Element
Animations
Selectors, Slides, Fades, CSS Properties
Ext.Fx
DOM Events & Handlers
Page load, hover, toggle, normal DOM events
Ext.Element
AJAX actions and events
Get, Load, Post, callbacks
Ext.Data, Ext.EventObject
Utility functions
Browser detection, array operations, string trim
Ext.Array, Ext, String,
Data collections
General data caching
Templates
(No jQuery functionality)
Ext.Template
Function manipulation
(No jQuery functionality)
Function Global Object
As shown, all the DOM/CSS manipulation capabilities of jQuery are available within Ext JS. Ext JS also offers templating and
function management as part of Ext Core.
“Anyone considering ‘building a large
application with jQuery’ is considering
building a large application with jQuery
and a host of other tools. They’d better
know what they’re doing… they’ll be
lucky if it doesn’t back them into

a corner.”
Rebecca Murphey,
JavaScript application consultant
The Ext JS Stack vs the jQuery/jQueryUI Stack
jQuery fundamentally operates on sets of DOM elements and CSS
classes, whereas Ext JS operates on Components. Ext JS components
encapsulate the browser specific HTML, CSS and JavaScript that make
up a UI control, such as a grid, or a tree or a menu. Ext JS components
look and behave the same in every browser from IE6 to Chrome 10, even
though the rendered CSS and HTML for each browser may be vastly
different. In addition to markup encapsulation, Ext JS Components also
have standard lifecycle and state management events and triggers.
As shown below, the complete Ext JS stack offers a rich framework for creating complex applications that goes far beyond
jQuery and jQuery UI capabilities.
Ext JS UI Widgets
Grid, tree, menu, tabs, list, button, window, slider, charts,
accordion, forms, dataview, toolbars and more…
jQuery UI Widgets
Accordion, button, autocomplete, datepicker, dialog,
progressbar, slider, tabs
Extensible Theming system
Themeroller Tool (no IE6 support)
Integrated Drag & Drop System
Draggable, Droppable Functions
Layout & Nesting System (20 Layout Types)

Component Lifecycle Manager

MVC Application Architecture

Data Stores, Proxies, and Binding

Ext Core
jQuery
1700 Seaport Boulevard

Suite 120

Redwood City, CA 94063

1 888 736 2421

www.sencha.com

@senchainc
Sencha makes application frameworks that equip developers to create, deploy,
and optimize compelling experiences using web-standard technologies. The
company’s flagship products, Ext JS and Sencha Touch, are a cross-browser
JavaScript frameworks which produce rich internet applications for desktop and
mobile devices. More than one million developers worldwide—representing more
than 150,000 companies—use the Sencha family of products to build amazing
applications every day.
Developers should appreciate
the well-thought-out design and
implementation of Ext JS. Its
object-oriented design patterns
influence the relationship and
interactions between objects.
IBM Developerworks