Which HTML 5 framework for my app?

Comparison of frameworks using only HTML, JavaScript and CSS, to build applications.

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 are compatible with mobile phones and are supported by Android, iOS, Firefox OS, Windows Phone, and others... They may then be complemented with Cordova on the backend to access sensors such as the accelerometer. Or PhoneGap, or Intel's XDK.

A study made a benchmark on five frameworks supporting data binding. The result is that Angular is the fastest, followed by Knockout, React, Mithril, Vue.js. Ember is the slowest. However, the order of difficulty of use is different.

Logo reactAngular.js (by Google/Frozen)

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. Another advantage is that 70% of Google applications use Angular, one expects it to be reliable.
Among the drawbacks, insufficient documentation, features added daily as in PHP without a whole vision and sometimes incompatible, but this could be fixed in the version 2.
Angular 2.0 uses the TypeScript programming language, which is compiled to JavaScript.
The framework sees its support ended on December 31, 2021. It will continue to work but without new versions in the future.

Logo reactReact.js (by Facebook)

Another alternative to Angular (but they may be used together), React was developed by Facebook to create the graphical interface of Web applications which often reuse the same components. It uses JSX, a derivative of XML to describe the interface elements. The framework builds an internal representation of DOM, Virtual DOM, that allows updates faster and even avoids the use of data binding. It can be used in conjunction with other frameworks such as Backbone.

Unlike other frameworks in this list, it is based on the principle of "reactive programming", in which sequential assignment is replaced by a definition of mathematical type, so when a = b + c, the value of "a" depends on that of "b" and "c" even after the definition and after further changes of value for b and c. This allows to describe interactions more intuitively. But reactive programming here is rudimentary and falls back to use JavaScript events.
So the interest of React is mostly in the virtual DOM, because we do the same thing as in pure JS was a longer and more complicated code.

Starting from version 16.8 the framework introduces the Hook, a state declaration which facilitates interaction with server data.

Among the users of React are Netflix, Uber, AirBnb, etc...

Vue.jsVue.js

Another alternative to JQuery, React, Angular, which has the advantage of simplicity. We can already use it in production after a few hours of learning. It has a template system but can also use JSX like React. Is compatible with Flux and like React has a virtual DOM. Faster than React, simpler than Angular or Ember.
Will be the chosen framework if you want to start faster and an easier maintenance, a faster app, while Angular and React offer more features. It is described by the authors themselves as a tool to solve common and simple problems, but is not enough by itself for others.

Backbone.jsBackbone.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.

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.

Polymer.js (replaced by Lit)

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.

FOAM (By Google)

"Features Oriented Active Modeller" is Google's answer to Facebook React. This is a JavaScript reactive framework with model, view, controller. It can generate code in any programming language. The data model is the basis of the application made with Foam.

WinJS from Microsoft

A framework that can be used with Cordova, Angular, etc ... Provides data binding and many features. Works with keyboard, mouse, touch screen. The application can run locally on Windows 10 or online.

Overture.js from Fastmail

The JS Framework that is used by Fastmail was proprietary but became an open source project in December 2014. It allows to build any sort of web application. The fluidity of Fastmail shows the speed of the framework. It is a descendant of SproutCore as Ember.
MIT license.

Popcorn.js

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

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.

React Canvas

Using Canvas as a display surface for text and widgets, this framework eliminates the use of DOM and accelerates applications. This is best suited for graphic applications, however.

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.

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.

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.

More libraries

Games engines for HTML 5

Games engines for HTML 5

Tools for HTML 5

Tools for HTML 5