Divers
31.03.2017

Connaissez-vous les dernières évolutions d'AngularJS 2 ?

Les dernières évolutions d'AngularJS 2 : le point avec Jérémy, consultant Margo
 

AngularJS est devenu le framework Javascript le plus populaire pour le développement d’applications web. Sorti en 2012, le framework a connu jusqu’à aujourd’hui plusieurs évolutions lui permettant de gagner en maturité et en performance. Aujourd’hui, AngularJS 2 n’a plus grand-chose à voir avec sa première version, et Google a décidé de faire des breaking-changes afin de remanier et repenser le framework. 

Angular s’oriente vers le FRP (functional reactive programming) 

Le FRP, qu'est-ce que c'est ?
        L’idée du FRP est d’avoir une application réactive, ce qui se traduit techniquement par la programmation asynchrone avec des streams de données. C’est également de programmer de manière fonctionnelle, en utilisant des fonctions pures, évitant les effets de bords, ce qui reste un des enjeux majeurs des applications Web d’aujourd’hui.

Pour s’orienter vers le FRP, Angular 2 s’appuie sur la librairie RxJS qui permet, grâce à une toolbox très fournie d’opérateurs fonctionnels, de pouvoir manipuler des streams de données (observables). En deux mots, cette librairie s’appuie sur le pattern Observer qui a pour objectif de construire une dépendance entre un observable et un observer, de sorte que chaque modification de l’observable soit notifiée à l’observer afin qu’il puisse mettre à jour son état.

Angular 2.0 utilise TypeScript 
TypeScript est un langage de programmation représentant un sur-ensemble du Javascript, supportant les normes Esmascript 6. Angular 2 étant basé sur une architecture orientée based-component, il est désormais possible de pouvoir utiliser des classes pour isoler la business-logic relative à un composant de notre application.

Angular 2.0 possède son propre CLI 
AngularJS 2 utilise des décorateurs, du typage fort (grâce à TypeScript) et les normes ES6.  Cependant, le coût de setup, de configuration et de maintenance d’une application Javascript moderne utilisant ces différents outils est conséquent. Pour pallier ce désavantage et pour que les développeurs gagnent en productivité, AngularJS a développé son propre CLI.
 
Dans la première version d’Angular, le processus de changement de détection utilisé s’appelle le dirty-checking. Il fonctionne via des cycles digest. Lors de chaque cycle digest, Angular va évaluer tous les watchs enregistrés, et si la valeur retournée par le watch a changé, la fonction associée sera déclenchée. L’idée est de garantir une consistance dans la synchronisation entre le modèle et la vue. Cependant, nous n’avions aucune garantie sur le fait qu’un nœud parent soit checké avant son enfant.
En Angular 2, le mécanisme a été simplifié. Un changement ne se propage qu’une seule fois, de façon unidirectionnelle, en commençant par la racine. En d’autres termes, lors d’un changement sur le modèle, le composant parent est toujours checké avant ses enfants.

Comment migrer un projet Angular 1.x vers Angular 2 ?

Pour une application conséquente, une migration totale n’est pas possible. L’utilisation du ng-upgrade est recommandée. L’idée est de faire coexister Angular 2 et Angular 1 dans la même application. Avec cette approche, il est possible d’upgrader des composants Angular 1.x vers Angular 2, mais également de downgrader des composants Angular 2 pour qu’ils fonctionnent avec Angular 1.x. On peut alors effectuer une migration progressive.
Les services sans dépendance sont des candidats parfaits pour entamer une migration vers Angular 2. On peut ensuite s’attaquer aux « leaf » components, avant de convertir les « root » components.