Alors que la ng-conf 2024 bat son plein, profitons de ce moment pour passer en revue les annonces de l'année dernière. En 2023, l’accent a été mis sur la version 16 du framework et plus particulièrement sur l'une des nouveautés qu'elle apporte : l’introduction des signals. L’IA ainsi que les outils autour de l’écosystème Angular ont également été mis à l’honneur.
Keynote
La ng conf édition 2023 s’est ouverte comme il se doit sur une keynote générale. Présentée par Minko Gechev et Jeremy Elborn, elle s'est focalisée sur deux axes que le framework cherche à améliorer : l’amélioration des performances et l’expérience développeur.
Le duo est revenu sur l’un des points les plus importants lorsqu’on parle de performance dans l’écosystème Angular: le système de “change detection”. Un des principaux “problèmes” (si l’on peut réellement parler de problèmes) à l’heure actuelle est l’utilisation de zoneJS. Bien qu’efficace, il vérifie l’entièreté du “component tree" à chaque fois qu’un changement est détecté, ce qui fait que le cycle de détection de changement est lancé plus souvent que nécessaire en plus d’être appliqué à des composants qui n’ont subi aucune modification. L’introduction de la stratégie “OnPush” permet de s’affranchir en partie de ces problèmes en ne vérifiant qu’une partie (une branche) du “component tree”, mais cela n’est pas encore tout à fait satisfaisant. Il fallait donc trouver une nouvelle solution.
Plusieurs pistes ont été explorées (hooks ou encore optimisation du compilateur), mais c’est l’utilisation des signals qui a été retenue. Un signal agit comme un “wrapper” autour du modèle de données. Ce “wrapper” notifie le framework lorsque le signal est lu dans un template ou alors quand la valeur contenue dans ce signal est modifiée. C’est donc maintenant Angular, et non plus Zone.js, qui est directement notifié des changements, permettant ainsi de ne pas faire tourner le cycle de “change detection” sur le ou les composants concernés.
Est venu ensuite une série d’annonces relatives à la performance: amélioration de l’hydration pour les applications Angular SSR, possibilité de déployer des applications directement via Firebase ou encore la possibilité d’utiliser des edge workers via Cloudflare.
La seconde partie de la keynote s’est focalisée sur les différentes améliorations proposées pour améliorer l’expérience développeur :
- Les signals qui restent la grande nouveauté de cette année
- L’arrivée d’un nouveau schematics permettant de passer une application Angular non standalone en full standalone
- L’arrivée d’une option permettant de rendre les @Input obligatoires (ceci est détecté lors de la compilation)
- La composition de directives pour éviter de réécrire le même code
- La possibilité de retrouver les données venant du router dans des @Input côté composant
- Le control flow qui va apporter une nouvelle syntaxe plus simple au sein des templates
Présentation des signals
Première présentation juste après la keynote, Deborah Kurata se proposa de montrer par l’exemple comment utiliser les signals. Pour cela, elle expliqua et essaya de définir les différentes notions relatives aux signals. Pour résumer:
- Un signal = valeur + notification d’un changement
- Un computed = un signal read-only qui utilise la valeur d’un ou plusieurs autres signals pour déterminer sa propre valeur
- Un effect = fonction qui s’exécute lorsqu’un ou plusieurs autres signals sont modifiés
Une fois ces explications terminées, Deborah présenta une petite application permettant d’illustrer ces différentes notions.
Amélioration des processus autour d'une application Angular
Arriva ensuite une présentation d’Alex Okrushko sur les différents aspects que chaque équipe peut améliorer pour obtenir un meilleur processus global. Les points clefs à retenir sont :
- Améliorer la communication au sein de l’équipe par l’utilisation d’un unique canal de communication (éviter au maximum la multiplicité des canaux: emails, slack, etc.)
- Utilisation des feature flags pour livrer plus souvent et s’affranchir des features trop “grosses”
- Utilisation de trunk based development pour fluidifier la gestion des branches
- Utilisation d’un monorepo pour simplifier la partie CI/CD
- Imposer un “code style” au sein de l’équipe
- Définir des règles pour la création des Pull Requests
- Automatiser au maximum toutes les tâches pouvant l’être
Github AI et VS Code
Lors de cette présentation, John Papa présenta l’utilisation de Github Copilot au sein de VS Code. Il considère cet outil comme notre “pair programmer” personnel. Pour démontrer cela, il se proposa de montrer comment utiliser Copilot pour générer du code rapidement pour des tâches jugées rébarbatives (par exemple, générer une fonction qui trie une liste d’objets par propriétés). Puis, il poussa la présentation un peu plus loin en montrant comment grâce à Copilot, il est possible d’obtenir une explication écrite de ce que fait un morceau de code que nous ne comprendrions pas. Enfin, pour terminer il montra comment cet outil permet également de “refactorer” du code pour le rendre plus lisible, le tout en y ajoutant des commentaires générés par cet outil.
Les Signals par l'exemple
La dernière présentation avant la pause déjeuner traite à nouveau des signals. Emma Twersky et Alex Rickabaugh présentèrent à l’audience comment utiliser les signals dans le cadre d’une application permettant de générer une sorte de carte (type carte Pokémon) représentant un super-héros. L’idée était de gérer les différents éléments de cette carte avec l’aide des signals. Cette présentation fut un pas-à-pas de comment faire et à quoi penser lorsque l’on souhaite utiliser cette nouvelle fonctionnalité introduite par Angular 16. Ils conclurent leur présentation en expliquant que les signals, bien que loin d’être obligatoires, permettent d’avoir une granularité plus fine, de s’approprier la donnée (le framework sait où et quand elle est modifiée) et permettent de faire de la dérivation (via les computed).
Tokens OIDC au sein Angular
Suite à la pause déjeuner, Alisa Duncan se proposa de faire une très courte présentation d’environ cinq minutes sur l’utilisation des token OIDC dans une application Angular via l’utilisation des interceptors, le tout avec un petit exemple.
Des applications performantes
En guise d’avant-dernière présentation de cette première journée, Mike Harthington présenta au public des façons d’obtenir des applications plus performantes (dans le sens plus réactives pour les utilisateurs). Il proposa ainsi deux axes d’amélioration avec des exemples concrets présentés durant la présentation. Le premier point concerne l’utilisation des keyframes dans Angular qui permet d’obtenir des animations fluides et contrôlées. Arriva ensuite une présentation des web workers au sein d’Angular. Ces derniers sont très utiles lorsque l’on souhaite effectuer des calculs intensifs pour le CPU en background. En effet, les web worker tournent en arrière-plan et permettent d’effectuer ces calculs sans bloquer le reste de l’application.
La détection des changements
La dernière présentation de la journée se concentra sur les arcanes du système de détection des changements d’Angular. Cette présentation comporta pas mal de similarités avec la présentation faite de lors de la keynote, à savoir :
- La base, avec Zone.js, qui est utilisée pour détecter les changements puis lancer les actions nécessaires (avec vérification totale du component tree).
- L’introduction de OnPush qui, pour simplifier, permet de dire à Angular de vérifier tel ou tel composant seulement si celui-ci l’indique (et par la même occasion de ne vérifier qu’une partie - branche - du component tree).
- Finalement, et encore, les signals qui permettent de communiquer directement avec le framework et permettent ainsi la vérification et l’update uniquement du composant qui en a besoin.
Keynote de la communauté
La seconde journée de la ng conf 2023 s’ouvra sur une nouvelle keynote, cette fois présentée par l’ensemble des speakers de la communauté présents à l’événement. Nous avons pu assister à un enchaînement de présentations (sponsors ou personne travaillant autour de l’écosystème Angular) montrant les dernières nouveautés en rapport avec leur domaine. Un point d’honneur fût mis sur l’intégration des signals dans la plupart des outils/librairies gravitant autour d’Angular (IDEs avec Jetbrains, testing avec Cypress et Protractor/endbridge, framework avec Nx, etc.).
Nettoyage des anciennes applications
La présentation suivante porta sur les différentes stratégies à adopter pour garder les applications Angular à jour. En effet, d’après Stephen Fluin, garder une application à jour devrait faire partie du cycle de vie du projet au même titre que l’ajout de fonctionnalités ou encore la correction de bugs. De plus, les breaking changes d’une version majeure à l’autre d’Angular sont de plus en plus rares, ce qui facilite la montée de version.
La méthode la plus simple pour garder son application à jour reste bien évidemment l’update régulier d’une version majeure à la suivante en utilisant ng update (il est même conseillé d’utiliser npx pour s’assurer d’utiliser la dernière version). Pour les applications plus anciennes ou quand cela ne fonctionne pas, une solution un peu plus radicale est de créer une nouvelle application (toujours via angular cli/npx), puis de migrer les fichiers de l’ancienne application vers la nouvelle.
S'amuser avec les feature flags
Nous avons ensuite eu le droit à une présentation sur l’utilisation des feature flags dans le cadre d’une application Angular. Les feature flags permettent de contrôler le comportement et la visibilité de certaines fonctionnalités. Ainsi, il nous est possible de cacher ou désactiver certaines fonctionnalités pendant leur phase de développement (permettant ainsi un cycle de déploiement plus rapide) ou encore de faire de l’A/B testing en rendant certaines fonctionnalités disponibles seulement pour un sous-groupe d’utilisateurs.
Il existe plusieurs façons de gérer les feature flags dans Angular:
- Les services : un service contenant la valeur de nos features flags qui peut être utilisé là où on en a besoin
- Les guards : un guard permettant de gérer l’accès à une route selon la valeur du flag
- Les directives: une directive permettant de contrôler la visibilité de certaines parties de l’UI
Avec ce genre d’outil relativement simple à mettre en place, les feature flags peuvent être utilisé par le plus grand nombre au sein d’une application Angular.
Penser autrement et améliorer son application
Présentée par Dan Wahlin, cette présentation fût axée sur l’intégration des différents outils mis à la disposition des utilisateurs au sein d’une application Angular. Le postulat était que changer de contexte (passer d’une application à la boîte mail par exemple) peut rapidement faire perdre le fil à l’utilisateur. L’idée ici est donc d’utiliser l’ensemble des outils possibles pour incorporer le maximum d’informations directement au sein d’une application Angular. Nous avons donc eu une présentation d’une application utilisant divers outils classiques pour démontrer qu’il est possible d’inclure les informations utiles à l’utilisateur au même endroit.
La première partie de la présentation se focalisa sur l’intégration des APIs de Microsoft 365 pour pouvoir accéder aux emails de l’utilisateur: l’utilisateur n’a donc plus besoin de changer d’application, ni de chercher au sein de sa boîte mail pour retrouver l’information car celle-ci est directement disponible au sein de l’application.
Le second exemple illustré ici, fût l’intégration de la téléphonie au sein de l’application Angular, ce qui permet aux utilisateurs de passer leurs appels directement depuis cette dernière. En passant l’appel depuis notre application, l’utilisateur ne change pas de contexte et reste focaliser sur la tâche en cours.
Dernier point intéressant montré lors de cette présentation est l’utilisation de l’AI pour générer des emails. En effet, la génération d’emails peut être simplifiée et accélérée grâce à l’AI qui va assister l’utilisateur dans cette tâche. Ainsi, ce dernier peut se focaliser sur les actions importantes et non sur le travail rébarbatif.
Fin de la conférence
La seconde et dernière journée de la ng conf 2023 s’achèva sur une revue de l’ensemble des présentateurs de cette édition 2023 qui vont tous se réunir sur l’estrade pour répondre aux différentes questions du public.
Conclusion
Rythmée par des intervenants passionnés et passionnants, cette ng conf 2023 a été très intéressante. Parmi les sujets abordés, celui qui m’a le plus intéressé, et sans surprise celui qui a été le plus mentionné lors de cette conférence, est l’introduction des signaux. Bien que leur utilisation semble un peu restreinte dans le cadre de mon projet actuel, le peu d’utilisation que j’en ai faite a permis de simplifier le code (plus besoin du ChangeDetector dans une grande majorité des cas) et de le rendre plus lisible. Ce que j’attends particulièrement et qui devrait arriver prochainement est l’arrivée des composants Angular basés sur les signaux qui ne dépendent plus de Zone.js.
