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.

Angular.js (Google)

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, une meilleure documentation.

• Angular.js. Il est utilisé par plusieurs sites de Google dont DoubleClick.
• Egghead.io. Des tutoriels pour Angular sous forme de vidéos, utiles pour les débutants.
• Angular UI. Des widgets pour Angular tels que Calendrier, Carte géographique...
• Dangle. Il est possible de combiner Angular avec D3 pour créer des graphes. C'est sans doute un des moyens les plus facile de traduire des données en graphiques. Voir image à droite.

Ember.js, Backbone.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.

• Emberjs.com. Requiert jQuery et un ensemble de widgets pour l'interface utilisateur, comme par exemple Bootstrap.
• Backbone.js. Requiert soit jQuery, soit Zepto.

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.

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.

• Polymer.js.
• X-tags. Projet similaire de Mozilla, qui dispose déjà d'un dépôt de composants prêts à utiliser.
• Web Components. Spec.

Popcorn.js

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.

• Popcorn.js.

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.

• Pdf.js.

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.

• Kaltura, video open source.

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.

• Processing.js.

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.

• Two.js.
• Paper.js. Licence MIT.
• Pixi.js. Outil similaire.

Autres librairies

• HTML5 Media. Ajoute le support des balises video et audio à tous les navigateurs.
• Si l'on veut présenter en temps réel un graphique pour afficher l'évolution de quelque chose comme l'utilisation du processeur par exemple, la librairie Smoothie est prête à inclure dans la page. Le code est très simple et rapide. Le pourcentage d'utilisation CPU n'est pas en fait un bon exemple car l'outil utiliser lui-même une quantité de puissance! Il fait Explorer Canvas pour IE.
• Kendo UI. Bibliothèque complète pour construire des interfaces graphiques au look professionnel, basée sur jQuery, HTML 5 et CSS 3.
• Enyo. Un framework d'interface utilisateur pour le bureau ou les mobiles. (Voir le dossier mobiles).