Frameworks d'applications HTML 5

Des frameworks utilisant seulement HTML avec Canvas, JavaScript et CSS pour réaliser des applications.

Ils permettent de se dispenser de services payants comme l'AppStore et de produire des applications et des jeux pour toutes les ordinateurs et mobiles.

Ces frameworks sont compatibles avec les mobiles et fonctionnent avec Android, iOS, Firefox OS, Windows Phone, et autres... On peut alors les compléter avec Cordova pour le backend afin d'accéder aux senseurs tels que l'accéléromètre. Ou PhoneGap, or le XDK d'Intel.

Angular

Angular.js (par Google)

Graphique avec Angular et D3

Alors que d'autres ont choisit de décrire l'interface en JavaScript et de générer le code HTML, ce framework au contraire, décrit l'application entièrement en HTML.
Elle étend le langage HTML pour des applications Web avec un langage à balises plus complet, de nouveaux attributs. C'est un système de template, en fait, il s'inspire de Web Components pour ce faire.
C'est une alternative à Ember, Backbone ou Spine, donc un moyen d'associer des données à l'interface utilisateur et comme Ember, CanJS, il permet de le faire de façon bidirectionnelle.
Les avantages d'Angular sur Ember sont le support des modules au niveau HTML ou JavaScript, l'aide au déboguage. Parmi les inconvénients, une documentation insuffisante, des fonctions ajoutées au jour le jour comme en PHP sans vision d'ensemble et quelquefois incompatibles.
Angular 2.0 utilise le langage de programmation TypeScript qui est compilé en JavaScript.

Backbone.js

Ember.js

Ember est un framework JavaScript MVC (Model View Controller) pour applications HTML. Le site manque un peu de documentation mais vous pouvez en trouver une sur ailleurs. Il y a un tas de frameworks similaire, incluant CanJS et Backbone qui est mieux documenté et dispose de plus d'extensions, mais à quelques fonctions intéressantes en moins.
Tous peuvent fonctionner avec Node.js mais Backbone est plus pertinent à cet égard.

Polymer.js

Nouveau framework proposé par Google, pour résoudre le problème de la complexité des applications Web. Cet objectif vague se traduit par une meilleur modularité et encapsulation des composants de l'application. L'orientation-objet revue au niveau applicatif. On devrait aussi pouvoir écrire le minimum de code pour réaliser l'application.
Ce que l'on appelle des composants ici, ce sont de nouvelles balises avec une interaction, un data-binding prédéfini. Cela va plus loin qu' Angular, autre projet venant de Google, qui ajoute de nouveaux attributs à HTML avec databinding automatique, car Polymer s'appuie sur un nouveau backend.
C'est l'application pratique du principe Web Components, l'association classique de JavaScript aux balises HTML pour créer des éléments de l'application, est remplacée par un ensemble de composants prédéfinis. Par exemple, au lieu d'ajouter du JavaScript à une textarea pour créer un éditeur, on inclut un composant éditeur prédéfini, basé sur le backend fourni par Polymer.

React.js (par Facebook)

Une autre alternative à Angular (mais ils peuvent être utilisés ensemble), React a été conçue par Facebook pour créer l'interface graphique de grandes applications Web qui réutilisent souvent les mêmes composants. Elle utilise JSX, un dérivé de XML pour décrire les éléments d'interface. Le framework construit une représentation interne du DOM, Virtual DOM, qui permet les mises à jour plus rapides et évite même le recours au data binding. Il peut s'utiliser en conjonction avec d'autres frameworks tels que Backbone.

Contrairement aux autres frameworks de cette liste, il est fondé sur le principe de "programmation réactive", dans laquelle l'assignement séquentiel est remplacé par les définitions de type mathématique où a = b + c, fait que la valeur de "a" dépend de celle de "b" et de "c" même après la définition et après changement de valeur ultérieure pour b et c. Cela permet de décrire des interactions de façon plus intuitive. Mais la programmation réactive ici est rudimentaire et se ramène à utiliser les évènements JavaScript.
Donc l'intérêt de React.js est surtout dans le DOM virtuel, car pour faire la même chose qu'en pur JS, on a un code plus long et plus compliqué.

Un framework similaire, qui apporte le data binding aux interfaces et qui à l'avantage de la légèreté:

FOAM (Par Google)

"Features Oriented Active Modeller" est la réponse de Google au React de Facebook. C'est un framework JavaScript réactif avec modèle, vue, controleur. Il peut générer du code dans tout langage de programmation. Le modèle de donnée est la base de l'application réalisée avec Foam.

Backbone.js

Le framework Backbone.UI ajoute à Backbone des composants graphiques pour décrire l'interface utilisateur d'une application. Le look est aussi simpliste que le code est simple, mais on peut l'embellir avec CSS. En fait ces composants sont pour beaucoup redondants avec les balises HTML , comme les boutons par exemple, peut être pour faciliter l'association avec les données.
Requiert jQuery, Underscore et Laconic.

Overture.js de Fastmail

Le Framework JS qui est utilisé par la messagerie Fastmail est un projet propriétaire devenu open source en décembre 2014. Il permet de réaliser tout application Web. La fluidité de Fastmail démontre la rapidité du framework. C'est un descendant de Sproutcore comme Ember.
Licence MIT.

Popcorn.js

API de fonctions vidéo en JavaScript pour ajouter un plus à la balise <video>. Developpé par Mozilla, cette API gère la synchronization entre le déroulement de la vidéo et l'action de l'utilisateur. Il permet notamment de se déplacer dans le contenu.

React Canvas

En utilisant Canvas comme surface d'affichage, pour le texte comme pour les widgets, ce framework supprime l'usage de DOM et accélère les applications. Cela convient mieux pour des applications graphiques toutefois.

Pdf.js

Un document PDF peut être affiché au format HTML 5 and utilisant notamment Canvas pour les graphiques. Il peut être utilisé comme plugin sur Firefox mais le but ultime serait d'en faire un lecteur PDF intégré au navigateur.

Kaltura

Bibliothèque vidéo qui est utilisée par Wikimedia, et même par Adobe pour réaliser un lecteur universel chargeant Flash Player quand aucun codec n'est disponible.
Plusieurs outils sont disponibles en téléchargement.

Processing.js

Fonctionne avec le langage graphique visuel du même nom, sur Canvas pour réaliser des animations et produire des graphismes en ligne.
Le code en langage processing est converti en JavaScript et utilise un runtime à inclure dans la page. Il n'y a pas d'avantage particulier dans la syntaxe de processing, seulement des fonctions graphiques.

Two.js

Bibliothèque de fonctions 2D avec animation. Cela peut servir de remplacement aux gif animés, tant qu'il s'agit d'images simples, avec l'avantage du vectoriel, dont une tailler de fichier réduite. Et aussi une alternative à Flash, c'est l'impression que l'on a en voyant les démos!

Paper.js est un autre framework de dessin vectoriel, il permet de réaliser des animations pour le travail bureau dans Canvas. Il est basé sur un outil de scripting à l'origine pour Illustrator.

WinJS

Sur le backend, la Windows Library for JavaScript est une boite à outil pour les applications HTML 5. Elle dispose de son playground pour un essai en direct. Compabible avec mobiles et Xbox.

Comparatif

Angular-Knockout-React-Mithril-Vuesjs-Ember. Ce site effectue en temps réel un test de vitesse sur 5 frameworks offrant le data binding. Le résultat correspond à l'ordre dans le titre: Angular est le plus rapide, Ember le plus lent. Mais l'ordre de difficulté de mise en oeuvre est différent.

Autres librairies