Actualités
Ici on vous propose un irrévérencieux
condensé de brèves d'intérêt variable,
sur des sujets qui nous tiennent à cœur.

ActualitésTech news

Angular 16 ça arrive très vite avec plein de nouveautés !

Publié le 18 avril 2023

Angular 16 Miniature

Angular 16 est une version majeure avec de nombreuses nouvelles fonctionnalités et modifications. Il s'agit d'un début de renaissance pour Angular. Dans cet article nous allons examiner les principales améliorations et fonctionnalités de cette version 16 qui apporte beaucoup de nouveautés enrichissantes.

Chez Web-atrio nous avons déjà des projets Angular 16 en cours de développement ou en cours de migration via la Release Candidate v16.0.0-rc.1

Cet article parle des nouveautés notables et non des experimental features qui sont aussi très nombreuses dans cette nouvelle version.

Sommaire :

  1. La fin de Angular Compatibility Compiler

  2. @Input et paramètres dynamiques depuis le Router

  3. @Input Required

  4. Signaux

  5. Conclusion

La fin de Angular Compatibility Compiler

Avec la version 9 d'Angular, le moteur de vue a été remplacé par Ivy. Pour prendre en charge les bibliothèques qui reposaient encore sur l'ancien moteur de vue, Angular Compatibility Compiler (ngcc) a été introduit. Avec la version 16, ngcc a été retiré ainsi que tous les autres codes liés au moteur de vue. Par conséquent, la taille du bundle Angular devrait diminuer et les bibliothèques Angular View Engine ne peuvent plus être utilisées dans la version 16+.

Cela marque le passage définitif au nouveau moteur de rendu le Ivy Renderer. Ce passage va permettre à l'équipe de Angular de continuer à apporter des améliorations conséquentes sur les capacités de rendu et les fonctionnalités de Ivy. L'arrivée de Ivy avait déjà grandement amélioré les capacités de déboggage du compilateur et la lisibilité des erreurs. La compilation AOT et HotReload sont beaucoup plus rapides depuis le passage à Ivy. Nous espérons que l'équipe Angular va continuer sur cette lancée !

@Input et paramètres dynamiques depuis le Router

Le décorateur @Input permettant de faire passer des paramètres à un composant obtient une nouvelle fonctionnalité, le passage de paramètres directement par le Router. Précédemment, pour récupérer un paramètre de la route dans notre composant, il fallait invoquer le router. Pour cela, il existe plusieurs façons via l'injection du Router dans le constructor ou via l'Injector de Angular comme dans les exemples ci dessous :

Maintenant, il est possible de déclarer des @Input dans notre composant permettant de, s' ils ne sont pas déclarés dans l'appel du composant, récupérer les informations directement via l'url, exemple :

Le passage de paramètre via l'Input supporte les paramètres qui peuvent arriver depuis les services suivants :

  • Router data

  • Resolved router data

  • Params

  • QueryParams

@Input Required

Le titre de cette section porte bien son nom, il s'agit de pouvoir rendre obligatoire la saisie de certains paramètres dans un Input à la manière des paramètres d'une fonction ou d'un formulaire. Il existe de nombreux cas d'utilisation où notre composant ne peut pas avoir de valeur par défaut même si c'est une très bonne pratique à mettre en place. Pour contourner ça, il fallait lever des erreurs javascript. Désormais, Angular ajoute cette fonctionnalité permettant de rendre cette gestion plus simple et plus claire pour le compilateur et les développeurs :

Les Signaux dans Angular 16

Les signaux, c'est un nouveau chapitre de l'histoire d'Angular. Cette fonctionnalité vise à simplifier le développement réactif et à remplacer RxJS dans la plupart des cas d'utilisations. Angular va devenir capable de détecter les changements à une granularité beaucoup plus fine et rechargera donc une partie beaucoup moins conséquente du DOM que précédemment. Les performances pour les grosses applications vont être drastiquement améliorées dans le cas du rendu et de la détection de changement.

La programmation réactive est un concept un peu obscur pour beaucoup de développeurs, les Promises, Observable etc. ne sont pas évident à appréhender. Avec le concept de Signal (qui arrivera en version 17), les développeurs n'ont pas à se soucier des problèmes liés aux performances qui peuvent résulter du code non optimal qu'ils écrivent. Des concepts tels que le changeDetectionStrategy, le cycle de vie onChanges et même le pipe dans une certaine mesure deviendront inutiles. Il sera plus difficile pour les développeurs de commettre des erreurs qui pourraient nuire aux performances de leur application.

Cela va grandement simplifier l'apprentissage d'une des parties les plus difficiles d'Angular qui est la gestion des performances à grande échelle. Cela va également simplifier le code afin d'éviter des problèmes de logique d'implémentation qui déclenchaient l'erreur suivante :

ExpressionChangedAfterItHasBeenCheckedError

Sur de grosses applications, il était parfois complexe de comprendre la source de ce problème voir même d'y remédier sans revoir complètement la logique d'implémentation du composant.

Comment va fonctionner un signal ?

Le plus simple est de commencer par un exemple et ensuite nous détaillerons le fonctionnement :

Dans l'exemple ci-dessus, chaque fois que l’on clique sur le bouton, deux propriétés changent : le nom du Pokémon et son Type. Et si on clique deux fois, Angular va détecter 4 changements au total : 2 changements sur les 2 propriétés précédentes. Il va donc rendre 4 fois la fonction getPokemon(), sans utilisation des signaux de Angular.

La nouvelle méthode de mise à jour Signal corrige justement ce problème. Si on clique 2 fois sur le bouton, il va détecter que les valeurs n'ont pas changé la deuxième fois. Angular va appliquer les changements en même temps pour n'en faire qu'un.

Cela va également appliquer la détection de changement à tous les éléments dit "computed".

Prenons l'exemple d'une propriété calculée via une fonction. Pour mettre à jour cette propriété, il faudrait exécuter une nouvelle fois la fonction. Avec Signal c'est automatique.

Exemple sans les Signaux :

Exemple avec les Signaux :

On peut voir que dans l'exemple ci-dessus, c'est beaucoup plus parlant et cela simplifie grandement le code. Il était courant d'avoir des getter et setter pour automatiser des mises à jour conséquentes sur plusieurs éléments d'un seul coup. Désormais, avec les Signaux, Angular sera capable de détecter qu'un élément dans une fonction a changé et qu'il faut exécuter de nouveau la mise à jour de cette fonction ! Le détail autour des nouveaux Signaux sera dévoilé et pleinement exploité avec Angular 17 mais Angular 16 apporte déjà le support de ces éléments.

Conclusion

Les fonctionnalités ajoutées permettent aux Inputs d'Angular de rendre les composants encore plus autonomes. Cela va dans la lignée des composants standalone dévoilés dans Angular 14 permettant de rendre un composant complètement agnostic de son module et de le builder à l'unité. L'arrivée des Signaux va permettre d'entrer dans une nouvelle aire de programmation plus réactive et plus intuitive, plus simple et plus rapide pour Angular. Ce framework était déjà très avant-gardiste avec le double data binding ou Two Way Databinding. Ce concept permet de détecter les mises à jour de la vue ou du composant automatiquement et de mettre à jour les propriétés.

Les Signaux vont rendre le développement d'applications réactives à forte expérience utilisateur beaucoup plus simple. Un réel avantage à l'heure où les UI évoluent sans cesse pour se démarquer !

William Krieg
William Krieg

Passionné par le développement et l'univers du Web. J'utilise aujourd'hui mes compétences chez Web-atrio, une entreprise unique et innovante en tant que Responsable Technique mais pas que ...