Angular 2 – Présentation

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 ».

Bonne nouvelle : les développeurs, c’est nous ! C’est donc l’occasion de faire ensemble un petit tour d’horizon de cette jeune – et non moins prometteuse – mouture de notre framework JS préféré.

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.).

Plus d’informations ici : https://angular.io/features.html.

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.

Sous le capot

TypeScript

Les développeurs d’Angular avaient dans un premier temps parié sur AtScript, surcouche à ES6 écrite par leurs soins.
Avec l’intégration des décorateurs à Traceur, transpileur de TypeScript, c’est finalement vers ce dernier que l’équipe s’est tournée.

Dois-je utiliser TypeScript ?

TypeScript n’est pas imposé, mais son usage est encouragé car il apporte de nombreuses facilités de développement, comme par exemple une autocomplétion très poussée, pour peu que vous utilisiez un IDE digne de ce nom. Par ailleurs, en imposant une syntaxe plus stricte et un typage statique, TypeScript rend le code plus lisible et maintenable.

Néanmoins, si le TypeScript ne vous dit rien, vous pouvez utiliser ES2015. Et si vous êtes vraiment courageux, il est même possible de coder ses propres composants Angular 2 avec du bon vieux EcmaScript 5.

Navigateurs supportés / Compatibilité

Tous les navigateurs modernes sont supportés. Angular 2 peut même tourner sur IE9, avec l’utilisation des polyfills. En revanche, il faut tirer un trait définitif sur les versions antérieures d’Internet Explorer.

Performances

Selon l’article de blog de Meteor et à titre de comparaison, Angular 2 affiche des performances de rendu jusqu’à dix fois supérieures à son prédécesseur :

Angular 2 coifferait ainsi au poteau l’ensemble de ses concurrents directs (React, …).

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.

Tests

Parce que tester, ça n’est surement pas douter !

Pour l’heure, l’environnement de tests d’Angular 2 est la brique la moins mature du framework :

Pour les tests unitaires, à l’instar d’Angular 1, les développeurs de chez Google préconisent un framework éprouvé, Jasmine. Pour l’instant, les tests sont lancés directement depuis le navigateur. L’intégration avec Karma est planifiée pour bientôt.

En ce qui concerne les tests bout-en-bout, la documentation prévoit des tests au niveau composant sans les interactions avec le DOM (ce qui n’était pas possible avec Angular 1), et des tests sur les composants directement dans le DOM. Pour les dernières mises à jour, c’est par ici.

Notre avis

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 !

Avantages :

• des performances améliorées
• une modularité accrue / du code plus expressif
• un respect des nouveaux standards du web

Inconvénients :

• migration compliquée de l’ancienne version vers la nouvelle
• les vieux navigateurs ne sont pas supportés

… et à l’heure actuelle :

• pas de version définitive / manque de stabilité
• pas encore prêt pour la production
• pas d’environnement de test E2E

A venir…

Dans un second article, en plus de la syntaxe, nous aborderons les aspects plus techniques du framework Angular 2 : composants, injection de dépendances, routage, et bien d’autres choses encore !

Le dernier article de la série, vous parle d’Angular 2 en Action.