HTML 5 Frameworks

Frameworks using only HTML with Canvas, JavaScript, allow to build portable applications and games.

They allow to avoid paid services like the AppStore and to produce applications and games for all the computers and phones. Disney bought in March 2011 the Finnish company Rocket Pack for producing such multi-platform games, proof that it sees a great future in HTML 5.

These frameworks as shown Ave Engine are compatible with mobile phones and are supported by Android, IOS, WebOS, Windows Phone 7, and others...

Angular.js (Google)

While others have chosen to describe the interface in JavaScript and HTML code generation, this framework the contrary, describes the application entirely in HTML.
It extends HTML for Web applications to a more complete markup language, with new attributes. This is a template system, in fact, it is inspired by Web Components to do this.
This is an alternative to Ember, Backbone or Spine, thus a way to bind data to the user interface and as Ember, CanJS it can do it in two-ways.
The advantages of Angular over Ember is on module support both in HTML or JavaScript, debugging aid, and a better documentation.

• Angular.js. It is used by several Google' sites including DoubleClick.
• Egghead.io. Tutorials for Angular on the form of videos, useful for beginners.
• Angular UI. Widgets for Angular such as Calendar, Google Maps...
• An experience. Using Angular on a mobile application.
• Dangle. Angular may be combined with D3 to create graphs. This is probably one of the easiest way to translate data into graphics. See image on the right.

Backbone.js

The Backbone.UI framework adds to Backbone widgets to design the interface of an application. The look is as simplistic than the code is simple, but you can improve it through CSS. In fact these components are redundant for many to HTML tags, such as buttons, maybe to facilitate data binding.

• Backbone.js. Requires either jQuery of Zepto.

Ember.js

Ember is a MVC (Model View Controller) JavaScript framework for HTML apps. The site lacks documentation but you can find one elsewhere. There is a lot of similar frameworks, including CanJS et Backbone which is better documented and has more extensions, but some interesting features missing. Both can work with Node.js but Backbone is more relevant to that purpose.

• Emberjs.com. Requires jQuery and and set of widgets for the UI, such as Bootstrap for example.
• Introduction to Ember.
• First app with Ember.

Polymer.js

New framework proposed by Google, to solve the problem of the complexity of Web applications. This vague objective leads to better modularity and encapsulation of application components. The object orientation moved to application level. You should also be able to write the minimum code to make the application.
This so-called components here are new tags with interaction or data-binding preset. It goes beyond Angular, another project from Google, adding new attributes to HTML with automatic databinding, because Polymer is based on a new backend.
It is the practical application of Web Components principle, the classic combination of JavaScript with HTML tags to create elements of the application, is replaced by a set of predefined components. For example, instead of JavaScript added to a textarea to create an editor, we include a predefined editor component based on the backend provided by Polymer.

• Polymer.js.
• X-tags. Similar project from Mozilla, which already has a repository of ready to use components.
• Web Components. Spec.

Popcorn.js

Video functions in JavaScript to add actions to the <video> tag. Developed by Mozilla, the API manages the synchronization between the sequence of video and user action. Including the ability to move around the content.

• Popcorn.js.

Processing.js

Works with the visual graphic language with the same name, on top of Canvas to make animations and produce graphics online.
The code in processing language is converted to JavaScript and uses a runtime to be included in the page. There is no particular advantage in syntax of processing, only graphics functions.

• Processing.js.

Pdf.js

A PDF document can be viewed in HTML 5 and in particular using Canvas for graphics. It can be used as a plugin on Firefox, but the ultimate goal is to make a PDF reader built into the browser.

• Pdf.js.

Kaltura

Video library that is used by Wikimedia, and even by Adobe to make a universal player loading Flash Player when no codec is available. Several tools are available to download.

• Kaltura, open source video.

Two.js, Paper.js

Library of 2D functions with animation. It can serve as a replacement to animated gif, providing it is made of simple images, with the advantage of the vector, and so small files to include. And an alternative to Flash too, this is the impression we have in seeing the demos!

Paper.js is also a vectorial drawing framework, it allows to create business animations in Canvas. It is based on a scripting tool for Illustrator.

• Two.js.
• Paperjs.org. MIT license.
• Pixi.js. Similar tool.

More libraries

• HTML5 Media. Add support to video and audio tags to all browsers.
• If you want to present a real-time graph to show the evolution of something like CPU usage, for example, the Smoothie library is ready to be included in the page. The code is very simple and fast. CPU usage is not a good example actually as the tool uses itself of lot of CPU! Explorer Canvas is required for IE.
• Kendo UI. Complete library for building professional-looking GUIs based on jQuery, HTML 5 and CSS 3.
• Enyo. A framework of user interface for Desktop or mobiles. (See the mobile section)