Premier aperçu d'AngularJS 2.0

Au détour de plusieurs conférences, notamment la très réussie ngConf 2014, l’équipe de développement d’AngularJS a évoqué le sujet d’AngularJS 2.0. Pas plus tard que cette nuit alors que j’allais publier cet article, un article de blog est apparu sur le blog officiel introduisant Angular 2.

Outre ce nouvel article, beaucoup d’éléments de la conception d’Angular 2 sont publics. Tous les drafts de design des différents composants ainsi que les comptes rendus de réunions hebdomadaires de l’équipe de développement. Il est donc possible, en creusant un peu, d’avoir un bon aperçu de ce qui se prépare.

Les bases

AngularJS 2.0 sera une refonte totale d’AngularJS. Chaque fonctionnalité du framework est prise à part, analysée, comparée à l’état de l’art des frameworks existants puis redesignée et enfin recodée. À ma connaissance, aucun code ne sera repris de la branche 1.x.
La nouvelle branche 1.3, fraîchement annoncée n’est pas une ébauche de la version 2.0. Elle porte sur des évolutions apportées sur la branche 1.x.
La branche 2.0 est actuellement en cours de conception et de développement actif. Certains modules sont déjà testables, mais il n’y a pas de version “alpha” d’Angular 2.0, certains composants centraux du frameworks n’ont même pas été commencés. Il n’y a pas de repository GitHub pour la branche 2.0 à proprement parler, mais plusieurs repositories présents sur le compte GitHub d’Angular sont des futurs modules de la version 2.0. C’est par exemple le cas de di.js, watchtower.js ou encore templating.
Les ressources intéressantes qui sont accessibles sur Google Docs sont les suivantes :

• Angular 2.0 Weekly Meeting Notes
• Angular 2.0 Progress Tracker

Bien sûr, cet article a pour vocation de vous éviter d’avoir à lire tout ça !

Fausses pistes : Polymer & Angular.dart

Quelques fausses rumeurs sont venues obscurcir le discours au sujet d’AngularJS 2.0. Je vais essayer ici de rétablir la vérité.
Tout d’abord, à propos de Polymer. Les deux projets sont des projets de framework Web JavaScript initiés par Google. Pour autant ce sont deux projets distincts qui n’ont pas vocations à fusionner d’aucune façon. Certains concepts sont et resteront incompatibles. Notamment, le design “tout composant” de Polymer alors qu’Angular, même s’il prévoit un rapprochement vers les Web Components, ne prévoit pas cette même approche.
Maintenant, ce qui a été vraiment dit, c’est qu’il sera possible d’utiliser des Web Components, que certains aspects des directives seront fusionnées avec les concepts de Web Components et que l’équipe d’Angular ne s’interdit pas de récupérer certains polyfills créé par Polymer pour utiliser ces Web Components.
Concernant Angular.dart maintenant. Angular.dart est un projet parallèle à Angular et consiste à une refonte complète des concepts sur la base du langage Dart. Les projets Angular.js et Angular.dart n’ont pas de dépendances directes l’un avec l’autre et aucun des deux ne doit, à terme, remplacer l’autre.
Tout comme pour Polymer, il y a un mais. Angular.dart est un projet qui est pris très au sérieux. Le code JS n’est pas seulement adapté à Dart mais c’est tout le framework qui est repensé. De plus, la tâche n’est réalisée par personne d’autre que Miško Hevery lui-même, le créateur d’Angular. Inévitablement en écrivant Angular.dart, quelques années après le démarrage d’AngularJS, certains modules ont été réécrit de façon bien plus évoluées. Ainsi, certaines fonctionnalités d’Angular 2.0 s’avèrent être des adaptations en JavaScript de nouveautés apparus pendant les développements d’Angular.dart.

ECMAScript 6 Harmony, Traceur Compiler

La première chose qu’il faut comprendre pour aborder Angular 2.0 c’est qu’il a été décidé de le développer avec ECMAScript 6, nom de code Harmony, la prochaine version du standard du JavaScript.
C’est forcément assez déroutant lorsque l’on veut aborder les sources la première fois, mais on finit par y prendre goût, car il y a tout de même de nombreuses choses intéressantes dans ES6.
A ceux qui sont à deux doigts d’abandonner la lecture de cet article pensant que “ça ne marchera pas dans mon navigateur avant 10 ans”, Angular 2 fonctionnera bien sûr dans tous les navigateurs “modernes”, ce qui devrait correspondre, d’ici la sortie de cette nouvelle version à Chrome, Firefox et IE11+ environ. ainsi qu’un focus important sur la compatibilité avec les navigateurs mobiles.
Pour faire fonctionner le code ES6 dans les navigateurs, AngularJS 2.0 va s’appuyer sur le compilateur Traceur développé également par Google. Ce compilateur où plus précisément “transpilateur” permet de transformer du code écrit suivant l’état actuel des spécifications d’ES6 et le transforme en code compatible avec ECMAScript 5 ce qui est la spécification actuellement supportée par les navigateurs. Il est tout à fait envisageable aujourd’hui de coder avec ES6 et d’avoir des outils de recompilation automatique. Il sera également possible de coder en JavaScript “standard” même si la syntax sera plus verbeuse qu’avec ES6.
Une particularité dans le code ES6 d’Angular 2.0 est d’avoir fait le pari d’utiliser les annotations dont la proposition pour faire partie d’ES6 est encore en suspens. Ces annotations sont centrales pour la future implémentation de l’injection de dépendance et il est assez probable que cette proposition soit acceptée. Il a tout de même été nécessaire, de la part de l’équipe de développement d’AngularJS, d’ajouter la gestion des annotations dans Traceur.
Un dernier mot sur Traceur. C’est un projet très intéressant à part entière. Avoir la possibilité de tester voir développer dès aujourd’hui selon les futurs standards est très intéressant. Cela apporte notamment la possibilité de découvrir ES6 par le code plutôt qu’en lisant des pages et des pages de propositions théoriques sur le Wiki Harmony. Pour autant, je me vois dans l’obligation de vous prévenir que s’il est plutôt stable, il manque gravement de documentations.

Conclusion

Voici les bases de lecture de posées pour aborder AngularJS 2.0. Il y a déjà bien plus à en dire, de nombreux projets sont en cours :

• Injection de dépendances : di.js
• Nouvelle version de la détection des changements : watchtower.js
• Le futur des directives : templating
• $http, $resources, cache, stockage client : Persistance
• Et encore d’autres : zone.js, diary.js, “projects“, benchmarks…

Je détaillerai plusieurs de ces nouveaux modules dans de prochains articles.