Quel framework HTML 5 pour mon application?

Comparaison des frameworks utilisant seulement HTML, 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.

Un benchmark sur 5 frameworks offrant le data binding donne le résultat suivant: Angular est le plus rapide, suivi de Knockout, React, Mithril, Vue.js. Ember est le plus lent. Mais l'ordre de difficulté de mise en oeuvre est différent.

Logo reactAngular.js (par Google/Gelé)

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. Un autre avantage est que 70% des applications de Google utilisent Angular, on attend donc qu'il soit fiable.
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, mais sans doute corrigé avec la version 2.
Angular 2.0 utilise soit le langage de programmation TypeScript, soit Dart, qui sont compilés en JavaScript.
Le framework voit son support terminé le 31 décembre 2021. Il continuera à fonctionner mais sans nouvelles version à l'avenir.

Logo reactReact.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é.

A partir de la version 16.8 le framework introduit le Hook, la déclaration d'état qui facilite l'interaction avec les données du serveur.

Parmi les utilisateurs de React: Netflix, Uber, AirBnB, etc...

Vue.jsVue.js

Autre framework, alternative à JQuery, React, Angular, qui a l'avantage de la simplicité. On peut déjà l'utiliser en production après quelques heures d'apprentissage. Il dispose d'un système de template mais peut aussi utiliser JSX comme React. Est compatible avec Flux et dispose comme React d'un DOM virtuel. Plus rapide que React, plus simple qu'Angular ou Ember.
On choisira se framework si l'on veut démarrer plus vite et une maintenance plus facile, une application plus rapide, tandis qu'Angular et React offrent plus de possibilités. Il est décrit par les auteurs eux-même comme un outil pour résoudre les problèmes courants et simples, mais ne suffit pas par lui-même pour les autres.

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

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 similaires, 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 (remplacé par Lit)

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.

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.

WinJS de Microsoft

Un framework qui peut être utilisé avec Cordova, Angular etc... Apporte le data binding et de nombreuses fonctionnalités. Fonctionne avec clavier, souris, écran tactile. L'application peut fonctionner localement sur Windows 10 ou en ligne.

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 toute application Web. La fluidité de Fastmail démontre la rapidité du framework. C'est un descendant de Sproutcore comme Ember.

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.

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.

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.

Autres librairies