Angular JS 2

Angular JS 2

Angular JS 2

Courant mai 2015, la team d’Angular a étiqueté la version 2.0.0-alpha.27 (version du 09/12/2015 : alpha.50) en version dite de « Developer Preview ».


Tour d'horizon

Au travers d’Angular 2, Google cherche à faire table rase du passé, en remettant à plat de nombreux concepts présents dans Angular 1.
Cette stratégie a été motivée par 4 principes fondateurs :

  • Augmenter les performances : l’un des plus grands reproches qui ait été fait à Angular sont ses lacunes en termes de performance. Pour palier ce problème, les développeurs d’Angular ont décidé de se reposer davantage sur les briques natives du navigateur, comme par exemple, les prometteurs WebComponents ;
  • Améliorer la productivité : en affichant une syntaxe expressive basée sur la syntaxe de ES2015/TypeScript (annotations, import, types, …), plutôt que sur des surcouches, Angular 2 rompt avec une longue tradition de frameworks à boilerplate ;
  • S’adapter au mobile : la conception modulaire du framework permet de réduire considérablement son empreinte mémoire sur les terminaux mobiles. Par ailleurs, il s’intègre avec les composants de « material design », ce qui permet la création d’applications dites « responsive » et multi-plateformes (téléphone, tablettes, ordinateur de bureau) ;
  • Embrasser les nouveaux standards du Web… en se basant sur des technologies telles que le ShadowDom, Observables et autres nouveautés apportées par ES2015. Angular 2 s’intègre par ailleurs parfaitement bien avec les composants construits via d’autres bibliothèques (Polymer, X-Tag, etc.).

Rupture avec l'existant

Des « directives » aux « scopes », en passant par le « two-way data binding », Angular 2 n’en garde que les stigmates. Google nous offre ici un tout nouveau framework qui ne tient de son prédécesseur que le nom.

Voici une liste non exhaustive des concepts qui disparaissent :

  • « Two-way data binding » : la création de cycle dans le graphe de détection des changements impliquait de nombreux problèmes de performance et de compréhension ;
  • « Controllers » : désormais, les contrôleurs font partie intégrante du contexte this des composants ;
  • « Scope / RootScope » : l’ensemble des « scopes » sont maintenant liés au contexte this des composants ;
  • « Watch / Observe / Apply / Digest » : la détection des changements est effectuée par Zone.Js ;
  • « .module / .directive / .factory » : les dépendances sont injectées à partir d’annotations « Spring-like » et les imports sont effectués selon la syntaxe ES2015.

De nombreuses directives deviennent obsolètes (exemple : ng-hide, ng-show, etc.), mais certaines ont survécu au grand nettoyage. On retrouvera donc avec plaisir nos habituels if et for, bien que parfois renommés.

Migration

Un gros mot ? Si on s’en tient à l’idée qu’une migration est entièrement automatisable, alors oui une telle migration n’est pas envisageable pour passer d’Angular 1 à Angular 2.

Anticipation
Néanmoins, il est envisageable d’anticiper un passage de l’un à l’autre. Voici nos conseils :

En lieu et place des controllers, implémentez des components : il est en effet possible de basculer vos .directive() en .component() (présent dans Angular 1.5);
Supprimez les références à $scope, ces derniers disparaissent. Attachez vos variables au this pour les rendre accessibles dans vos templates et utilisez l’attribut controllerAs des directives ;
Privilégiez les services : en sortant un maximum de logique métier vers les services, vous gagnerez un temps non négligeable lors de la migration de vos directives ;
Enfin… intégrez TypeScript à votre base de code !


Cohabitation
Une piste de migration pour les grosses applications : ajoutez Angular 2 à vos dépendances et migrez progressivement vos composants à mesure que vous devez leur apporter des modifications / améliorations.

Pour conclure

Angular 2, bien que toujours au stade du développement, est un framework prometteur. Certes, il sacrifie toute velléité de migration sans douleur sur l’autel de l’innovation, mais le jeu en vaut réellement la chandelle. Il apporte avec lui son lot de nouveautés, en se délestant de tout l’héritage de son aïeul, Angular Premier du Nom. A tel point que l’on est en droit de se demander pourquoi Angular s’appelle toujours Angular !


Cette actualité a été postée avec les tags angular js, javascript, web

Catégories

Articles récents

Tags

android Android angular angular-cli angular-cli azure stack C# cloud dot net ios IOS javascript material mobile rxjs typescript Visual-Studio web windows mobile Xamarin .Net angular angular js asp mvc azure javascript material xaramin