Angular 12, quelles nouveautés ?

Angular 12, la toute dernière version du célèbre framework web basé sur TypeScript de Google, vient d’être publiée le 12 mai. L’équipe d’Angular a annoncé avoir travaillé d’arrache-pied au service de la communauté dans de nombreux domaines. Cette mise à jour est en effet le résultat de plus de 10 versions bêta. Le framework JavaScript se veut plus performant, avec un changement total du mode de compilation, et de multiples fonctionnalités et correctifs. Découvrez les principales nouveautés d’Angular 12 dans cet article.

Une nouvelle approche « Ivy Everywhere »

Une compilation plus rapide et simple

Ivy est le nom donné au pipeline de compilation et de rendu de nouvelle génération d’Angular. Il a été introduit dès la version 6 (en bêta), mais aujourd’hui il doit permettre de ne plus dépendre de l’ancien compilateur View Engine.

Selon les équipes d’Angular, Ivy est « plus petit, plus simple et plus rapide ». D’après Google, l’utilisation du nouveau compilateur peut réduire la taille des bundles de 40 %. En effet, Ivy repose sur le principe de localité c’est-à-dire qu’un seul fichier est compilé à la fois. De plus, il se base sur le tree shaking. Ce terme est bien connu en JavaScript pour la suppression du code mort. Pour le nouveau compilateur, il s’agit d’inclure exclusivement les parties d’Angular nécessaires pour faire fonctionner l’application.

Enfin Ivy offre une compilation AOT ( Ahead of Time ou “en avance”) qui permet de convertir du code Angular HTML et TypeScript en JavaScript pendant la phase de construction. Cette traduction intervient donc avant que le navigateur exécute le script. Il télécharge finalement une version précompilée de l'application, ce qui offre un rendu beaucoup plus rapide.

Un débogage facilité 

Ivi ne traite ainsi qu’un composant et son modèle, sans s’occuper des dépendances lors de la génération de la sortie. Le processus de compilation est une nouvelle fois plus rapide et le débogage est simplifié.

D’autant plus que ce compilateur expose de nombreuses fonctionnalités sur l’objet global ng. Lors d’exécution en mode debug, les développeurs peuvent faire appel à des méthodes, accéder aux instances et mettre à jour l’état des différents composants.
Enfin, en cas d’erreur Ivi permet d’obtenir une stack trace (trace de pile) plus détaillée avec des liens précis vers les parties de code défectueuses.

Suite au déploiement de ce nouveau compilateur, son prédécesseur View Engine devrait être supprimé dès la sortie d’Angular 13. Une maintenance assure le fonctionnement des bibliothèques actuelles basées sur View Engine, mais leurs auteurs sont incités à débuter la transition vers Ivy.

Des nouveautés attendues par les développeurs Angular

Les ajouts de la communauté dans Angular 12

Angular 12 comprend de nombreuses fonctionnalités réclamées depuis longtemps par les développeurs. Certaines d’entre elles ont d’ailleurs été ajoutées par la communauté comme : 

• la prise en compte des attributs min et max dans les reactives forms ;

• l'introduction d’une option « context » pour configurer les intercepteurs dans le client http ;

• une meilleure utilisation de NgZone afin d’éviter les remontées d’avertissement d’erreurs de navigation non nécessaires ;

•  la modification du token d’injection APP_INITIALIZER pour qu’il fonctionne avec les observables.

Des solutions alternatives à Protactor 

Protactor est un framework de tests end-to-end (E2E ou en français de bout en bout ) développé par Angular et AngularJS. Il fonctionne comme un intégrateur de solutions qui combinent des technologies comme Selenium, WebPilot, Jasmine, etc.

Son objectif n’est pas seulement de tester les applications, mais aussi de permettre l’écriture de tests de régression automatisés. 

Cependant, Protractor a été créée par Angular en 2013. À l’époque, les API WebDriver n’étaient pas encore standards et les tests E2E étaient complexes à mettre en place. La multitude des fonctions de rappel (ou callback) dans JavaScript rendait particulièrement difficiles la gestion et l’écriture des opérations asynchrones. Protactor solutionnait alors ce problème en coordonnant la planification et l’exécution des commandes opérant sur une file d’attente grâce à l’objet appelé ControlFlow.

Mais depuis les normes et les outils JavaScript ont évolué et Protactor a moins d’intérêt. À partir de ES2017 (le standard sur lequel se base JavaScript), l’introduction de async/await a facilité la gestion des promises ( des objets qui représentent la complétion ou l’échec d’une opération asynchrone).

Le problème est que async/await est fondamentalement incompatible avec Control Flow. De plus, la majorité des fonctionnalités de Protactor ne marchent que dans AngularJS. Avec la suppression de Control Flow, le framework de tests perd grandement son intérêt pour la communauté Angular.

Les équipes travaillant sur Angular 12 ont donc décidé de ne plus inclure Protactor dans les nouveaux projets. Ils proposent à la place des solutions alternatives intégrables dans l’Angular CLI comme :

• Cypress ;

• WebdriverIO ;

• TestCafe.

Les améliorations de style d’Angular 12

Cette nouvelle version du framework JavaScript comporte aussi de nombreuses évolutions au niveau de la syntaxe et des fonctionnalités.

L’opérateur de coalescence des nuls 

Angular 12 reprend (enfin) la syntaxe présente dans TypeScript depuis la version 3.7. Le « null coalescing operator » permet  de définir une valeur par défaut au cas où une variable serait null ou undefined.

Auparavant en Angular il aurait fallu taper quelque chose comme : 

let x = test ! == null && test! == undefined? toto : true;

Désormais, la syntaxe est grandement simplifiée :

 let x = test ?? true;

Une prise en charge de Sass pour les styles en ligne

Angular prenait en charge Sass (le langage dynamique de génération de feuilles de style) depuis très longtemps, mais il n’était utilisable que dans des feuilles de style externes. Avec Angular 12, il est désormais possible d’exploiter Sass avec des styles de composants en ligne. Cet emploi de Sass sur les single size component permet de créer tous les composants dans un seul fichier comme c’est déjà le cas dans React JS.

Pour activer cette fonctionnalité, il suffit d’ajouter une instruction dans les applications existantes :

“inlineStyleLanguage” : “scss”

La prise en charge de WebPack 5

Angular 11 avait introduit un support expérimental pour WebPack 5. Avec la nouvelle version cet ajout passe en production et permet de profiter de toutes les améliorations du bundler au niveau : 

• des  performances du build grâce à la mise en cache persistante ;

• de la taille du bundle avec un meilleur tree Shaking et une génération améliorée du code ;

• de la compatibilité avec la plateforme Web du nettoyage des structures internes

L’intégration de TypeScript 4.2

La prise en charge de TypeScript 4.2 dans la CLI d’Angular 12 permet d’introduire toutes ses nouvelles fonctionnalités comme :

• une préservation plus intelligente pour les alias de type ;

• des contrôles plus stricts pour l’opérateur In ;

• des améliorations dans les vérifications de fonctions non appelées ;

• une meilleure gestion des tuples.

Toutes ces évolutions et innovations s’accompagnent de documentations, de guides et de tutoriels enrichis.

La mise à jour vers Angular 12 se fait très simplement en ligne de commande :

 ng update @angular/core@12 @angular/cli@12

Angular fournit également un guide complet pour les mises à jour sur : https://update.angular.io/

Avez-vous installé et testé Angular 12 ? Que pensez-vous des évolutions et nouvelles fonctionnalités du framework JavaScript ? N’hésitez pas à nous faire part de vos retours d’expérience sur la partie du forum consacrée aux langages IT.

Sources et liens utiles :

Liste complète des nouveautés d’Angular 12 (GitHub) : https://github.com/angular/angular/blob/master/CHANGELOG.md