Blog

Mindshare

HTML5 Frameworks

written by

Choosing the right HTML5 framework can be a daunting task. Mobile compatibility, scalability, TV, embedded devices, browser, and extensibility are just a few things to consider. Start with jQuery and do your research. You CAN go wrong, so choose carefully. Let’s examine some of the choices.

jQuery — Possibly the most popular JavaScript library in use today, jQuery provides concise, elegant syntax for DOM element querying, traversal and modification; CSS manipulation; event handling; effects and animations; and Ajax. It also serves as an extensible host for a vast and growing array of third-party plugins.

jQuery UI — jQuery UI builds on jQuery to provide user interface behaviors (including drag and drop, resizing, selection and sorting); animations and transitions; advanced effects; and high-level, themeable user interface controls (e.g.: accordion, auto-complete, date picker, tabs, etc.).

jQuery Mobile — jQuery Mobile is a cross-platform, cross-device, cross-browser user interface framework with strong industry backing from tech titans such as Adobe, Mozilla, Nokia, and BlackBerry. Through progressive enhancement (using CSS3 and JavaScript) it enhances basic HTML content and form elements into a unified set of touch-optimized, accessible, platform agnostic, theme-able controls. Built on jQuery and jQuery UI, it adds Ajax-based page loading and navigation; touch and gestures events; mouse vs. touch event abstraction via virtual mouse events; and integrates well with PhoneGap. It supports all major desktop browsers and mobile browsers alike.

jQTouch — jQTouch is a jQuery plugin from Sencha Labs targeting mobile web development and offering native animations, navigation and history management, and user interface themes for mobile WebKit browsers such as the iPhone, Nexus One, and Palm Pre. While jQTouch is well documented and easy to use, development has all but stopped and initial sample applications show that it is a bit buggy and even the sample applications have some performance issues.

Sencha/Ext Core — Ext Core is a cross-browser JavaScript library with capabilities similar to jQuery, such as DOM element query, traversal and modification; event handling; animation and effects; and Ajax.

Sencha/Ext JS — Ext JS is a cross-browser JavaScript library which enables developers to use an MVC architecture when building their app while also providing some very helpful features and widgets that can accelerate development timelines. Ext JS enables apps to leverage features like infinite scrolling and widgets for high performance grids, trees and menus.

Sencha Touch — Sencha Touch, the mobile counterpart to Ext JS, is a web application framework intended for developing applications that look and feel like native applications on supported mobile devices. Its approach differs significantly from jQTouch and jQuery Mobile: instead of enhancing pre-existing HTML, it generates its own DOM, based on objects created in JavaScript. It provides an extensive library of custom user interface components, optimized for touch input; transition effects; touch and gesture events; application data interchange (AJAX, JSONP, YQL); data bindings; and offline storage. Like jQuery Mobile, Sencha Touch integrates well with PhoneGap.

KnockoutJS — Knockout simplifies the development of complex web application user interfaces by applying the Model-View-View Model pattern. It offers declarative bindings in the DOM; automatic wiring of these bindings to their backing view models; automatic UI refresh based on observable and dependent observable model properties; easy extensibility through custom bindings; and the ability to generate sophisticated nested UIs from templates dynamically based on model data. Knockout integrates with many popular web frameworks, supports all mainstream browsers, and allows developers to use their choice of template engines.

Backbone.js — Backbone.js is a prescriptive web application framework that defines a structure consisting of JavaScript-based models, collections, and views. It offers models with key-value binding and custom events; collections with a rich API of enumerable functions and change notifications; views with declarative event handling; history management via a client-side URL router built on the HTML5 History API; and an implicit API for client-server data interchange via RESTful JSON. It has minimal dependencies and optionally integrates with jQuery or Zepto. It has been used to power the new LinkedIn Mobile app, and an increasing number of web applications such as MetaLab’s Flow, FourSquare, Groupon Now!, Basecamp Mobile, the new Pandora website, TileMill, and more.

Angular — Angular is a web application framework similar to KnockoutJS. It provides declarative UI templates; two-way data binding; implements the MVC pattern; integrates with RESTful JSON services; and offers dependency injection. Developed by Google, its ambitious goal is to reimagine HTML markup as if it had been originally designed with dynamic applications in mind. Like KnockoutJS (and unlike Sencha Touch), it does not provide a library of user interface controls, but instead focuses on generating and updating HTML from templates driven by application data.

GWT — Google Web Toolkit (GWT) is a web development toolkit for developing and debugging complex web applications in Java and cross-compiling that code to JavaScript for deployment. Its stated goal is “…to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript.” Google has used GWT internally to develop their own products, including Google Wave and the new AdWords. GWT is particularly well suited for use with Google App Engine, Google’s cloud computing platform as a service (PaaS) for hosting web applications.

Node — Node.js is a command-line and server-side JavaScript runtime environment based on the Google V8 JavaScript engine. It is used for developing JavaScript based command-line applications (such as the Less.js and CoffeeScript compilers) and highly scalable network applications. Node.js allows developers to write server-side code using JavaScript and leverages that language’s event-driven nature to deliver efficient, low-latency, collaborative, concurrent applications while requiring fewer hardware resources. Node includes an extensive API including HTTP and file I/O operations and has spawned a large ecosystem of related JavaScript-based third-party utilities and libraries.

Move on to HTML5 for the Enterprise, Part 4: Mobile HTML5

 

(Contributing authors: John Yanarella, Senior Technical Architect, and Dustin Butler, Senior Technical Architect)