Par M.Chorbi - TheExpert Angular chez SQUAD
La conférence ngEurope est l’une des plus grandes conférences européennes consacrées à Angular. L’édition 2016 s’est déroulée à Paris du 25 au 26 Octobre et avait pour but de présenter les nouveautés d’Angular 2 ! Les speakers étaient de marque : la Core Team d’Angular chez Google et des experts Angular, Typescript, Ionic, etc.
SQUAD a eu l’occasion d’assister à ces deux jours de conférence et nous vous proposons, dans cet article, un retour sur les différents sujets présentés.
Angular 2 – Quelles sont les nouveautés ?
La Keynote d’Angular 2 était la première présentation de cette édition 2016, présentée par le créateur d’Angular Miško Hevery.
Après le succès qu’a connu la première version AngularJs 1.x, la Core Team a voulu proposer une nouvelle version plus robuste, optimisée, complète et multi-devices. D’où leur choix, ou plutôt une nécessité, de réécrire le framework et de repartir de zéro.
Ainsi différents axes ont été améliorés dans Angular 2 :
- Proposer un framework destiné aux multi-devices: que ce soit des applications mobiles (hybride avec Ionic ou native), du web en Desktop ou même des applications Desktop, Angular 2 peut être utilisé.
- Organiser le code par modules / composants.
- Améliorer la performance sur plusieurs aspects :
- Diminuer le délai d’affichage (Rendering) qui est devenu 5 fois plus rapide grâce au redesign du framework.
- Réduire la taille des applications Angular avec l’introduction du Ahead-of-Time Compilation (AoT) et du lazy-loading (loader que ce dont on a besoin).
- Améliorer l’aspect de rapidité au niveau de la génération du code et de la détection des changements : erreurs remontées lors de la compilation grâce à l’utilisation de TypeScript (code entièrement typé), messages d’erreur plus lisibles, ajout des états/hooks pour contrôler la détection des changements …
- Réduire le coût mémoire grâce à l’AoT, l’optimisation de la détection des changements, l’utilisation des webworkers …
On voit ci-dessus que la Ahead-of-Time Compilation revient plusieurs fois et a contribué dans l’amélioration des plusieurs aspects de performance d’Angular 2.
En quoi consiste t-elle exactement ?
C’est une nouvelle étape de build qui pourra être exécuté en amont. Elle permet d’ailleurs de compiler et de parser notre code Angular 2, d’inclure les dépendances et tous les templates, fichiers css et enfin de générer le code qui sera envoyé au browser.
Avec cette compilation offline, la taille du code généré et envoyé au browser a été réduite significativement et il n’y a plus besoin d’envoyer le compiler et le parser au browser, tout est fait en amont.
Pour finir, Miško Hevery a assuré que l’optimisation d’Angular continuera : il y a toujours des possibilités d’améliorations.
RxJS et les observables
Un autre sujet présenté lors de cette conférence est le RxJS, le Reactive Programming avec Angular 2 et les Observables.
Que sont les Observables ? On pourra les assimiler aux Promises (qu’on connait déjà) avec la gestion asynchrone des données. Les Observables sont des flux d’événements avec un état de succès retournant des valeurs, un état d’erreur et un état de fin. Pour se faire, il suffit de souscrire à cet événement et recevoir ainsi les informations dès leur disponibilité. A l’inverse des promises, ils ne sont pas à usage unique, ils continueront d’écouter jusqu’à l’arrivée d’un événement de fin.
Avec Angular 2, les Observables sont utilisés dans plusieurs Reactive APIs comme Forms, http, Async pipe, Router …
Un exemple qui illustre l’utilisation des Observables est le Typeahead.
Figure 1: Exemple Typeahead avec Observables
Pour le typeahead, à chaque détection de changement de valeur, un appel est fait pour récupérer les résultats qui seront retournés à l’utilisateur dès leur disponibilité grâce au subscribe.
Aussi, avec la méthode switchMap, si une nouvelle valeur est détectée avant le retour des résultats d’un appel précédent, ce dernier est annulé et un nouvel appel est fait avec la dernière valeur. Ce qui n’est pas proposé par les Promises.
Angular Router
Avec Angular 2, une nouvelle version du Router a été introduite : Angular Router. Comme pour ui-Router, il permet de gérer les différents états de l’application.
Angular Router supporte le lazy-loading : loader que ce qu’il nous faut. Il utilise les Observables.
ngAnimate
Animations définies dans des composants et basées sur des états. Elles utilisent la Web-Animations API au lieu de se baser sur le CSS. Cela les rend ainsi indépendantes du DOM.
En ce moment, la Web-Animations API n’est supportée que par Chrome et Firefox, par conséquent, la même chose s’applique pour ngAnimate.
La sécurité
Sujet incontournable de nos jours ! La présentation a mis le doigt sur la faille XSS, faille qui peut être considérée comme le maillon faible d’une application, même si des protocoles de sécurité et de chiffrement sont mis en place.
L’équipe Angular s’y intéresse depuis toujours et propose dès la première version un code « Sanitized » : tout code dangereux comme <script> sera ignoré.
Ainsi, par défaut, Angular 2 est protégé des failles XSS avec tous les bindings qui sont « sanitized ». Ils ont proposé des méthodes pour contourner ces mesures de sécurité, afin de pouvoir inclure un script ou un URL volontairement dans l’application. Il est recommandé d’appeler ces méthodes de contournement le plus proche possible de la source et de sa validation, afin de garantir sa sécurité au fil du temps.
Migration vers Angular2
Avec le redesign apporté dans cette version d’Angular, il est impossible de faire juste une upgrade de version avec quelques modifications. Une migration d’Angular 1.x vers Angular 2 demande plus de temps et a un coût considérable.
Pour faciliter les choses, l’équipe Angular a proposé un module ngUpgrade qui permet de faire cohabiter dans la même application du code Angular 1.x et du code Angular 2. Ceci est possible grâce aux systèmes d’upgarde et de downgrade des services et composants.
Ainsi, pas besoin de changer tout le code en Angular 2 : les deux versions peuvent cohabiter ensemble au sein de la même application et la migration pourra se faire par étape.
Angular 2 a donc été enrichi et nous pouvons déceler plusieurs axes d’amélioration. En effet, l’équipe Angular a redesigné le framework afin de proposer plusieurs fonctionnalités et rendre Angular 2 une plateforme où différents modules peuvent être inclus et utilisés.
Qu’en est-il des Widgets & Outils ?
Angular CLI
C’est un outil très puissant permettant la création et la configuration d’un projet Angular 2 très rapidement. Exemple : 2 lignes de commande et votre exemple HelloWorld est prêt !
Plus besoin de passer des heures à configurer le projet et son environnement, Angular CLI s’en occupe.
Augury
C’est un DevTool pour Angular 2 ajouté comme extension à Chrome. Augury propose plusieurs fonctionnalités :
- Debbugging
- Visualisation de la relation entre components
- Information sur les components
- Visualisation de la hiérarchie des dépendances
- Structure du Router
- Et plein d’autres fonctionnalités !
Angular UI Bootstrap
Déjà proposé pour Angular 1.x, la nouvelle version d’Angular UI Bootstrap a été réécrit en Angular 2afin de profiter des différents avantages du framework comme AoT Compilation. Organisé par composant, le code des widgets Bootstrap est maintenant facile à lire et à comprendre.
Tous les widgets sont testables et maintenables.
Universal
C’est un outil permettant de faire du Server-Side Rendering des applications Angular 2. Universal peut être utilisé pour tout ce qui relève du SEO (Search Engine Optimisation), du Link preview -comme ce qui est fait sur Facebook au moment de partage d’un lien, ou tout simplement pour améliorer le temps du First Page Rendering.
Conclusion
En définitive, Angular 2 est plus qu’un simple framework. C’est devenu une plateforme entière avec plusieurs outils, widgets proposés et est adapté aux multi-devices.
ngEurope était aussi l’occasion de voir des exemples de projets qui ont été développés avec Angular 2 et d’autres frameworks (Ionic, Cordova …) : une application mobile hybride présentée par ING Bank, un site web Desktop pour jouer une partition musicale présenté par Tero Parviainen ou une application cross-platform présentée par Christian Weyer & Thorsten Hans.
La Core Team d’Angular cherche toujours à continuer l’optimisation et l’amélioration d’Angular et à proposer des nouveautés. A suivre dans les prochaines versions… Reste à voir si un redesign est à nouveau envisageable.
Pour en savoir plus, voici les liens vers les vidéos et présentations ngEurope 2016 partagées :
- Channel Youtube – ngEurope
- Présentations et liens GitHub
