Cette année, j'ai eu la chance et l'honneur de participer à la NG-DE, conférence spécialisée sur le framework Angular à Bonn, en Allemagne.

Voici mon compte rendu de ces deux jours de conférence.

Introduction

Moi, Benjamin Legrand, sur la scène de la NG-DE - Crédit photo: @Santosh Yadav sur twitter

* record scratches * * freeze frame * "Yep, that's me. You're probably wondering how I ended up in this situation."

C'est plutôt simple, j'ai proposé une conférence sur un sujet Angular, et j'ai été accepté.

J'ai proposé sur un coup de tête en me disant : "Sur un malentendu, ça peut passer". Le niveau et la spécificité des speakers étant assez élevés, je pensais vraiment que ça ne passerait pas. Et c'est passé !

En route !

Me voilà donc parti, par un mardi d'octobre à traverser la France, la Belgique et l'Allemagne pour arriver à Bonn, une petite ville universitaire à l'ouest de l'Allemagne, connue principalement pour être le lieu de naissance de Beethoven.

Statue de Beethoven à Bonn

En passant, je ne peux que m'émerveiller devant la qualité d'affichage des trains et des gares allemandes. La SNCF devrait s'en inspirer ! Par exemple, dans les trains ICE, un indicateur visuel donne non seulement la disponibilité d'une place, mais également sur quel tronçon du trajet celle-ci allait être occupée.

Afficheur de place disponible ou occupée dans un train ICE

La lisibilité des affichages a également touché mon petit cœur de dev front. Points bonus pour les écrans qui alternent les infos en anglais, en français, en néerlandais et en allemand.

Clair net et précis, un panneau d'affichage en gare de Cologne

La conférence

La NG-DE est une conférence sur 3 jours, dont un d'ateliers. Elle est organisée parallèlement à la conférence VueJS.de.
C'est un peu comme si on avait deux salons de l'auto en même temps, un spécialisé Peugeot, l'autre Citroën

Le lieu était assez impressionnant, une énorme salle au sein de l'hôtel Maritim de Bonn, avec une scène centrale et plein de petites tables, ambiance soirée de gala.

Les sujets Vue.js

Vu que je déteste être en retard, je suis arrivé avec un jour d'avance et j'ai donc pu assister, tout en fignolant mes slides, à quelques sujets Vue.js

• Devez vous créer votre propre librairie de composant UI ? : Question intemporelle et qui traverse les frameworks :)
• Scalable forms . par jpsohroeder, mainteneur de FormKit, Dynamic Forms avec Vue.js
• You are going to need a test for that Lara Newsom : un bon éventail des différents tests possible dans une application Vue.JS et quel type de test doit tester quel type de composants. Très bon rappel sur les différents types de tests, la séparation des responsabilités et mention spéciale pour l'utilisation de testing-library, une super librairie de tests multi-frameworks aussi disponible pour Angular, que je recommande chaudement.
• Composables : je n'ai pas tout compris, mon niveau en vue.js datant de ... la v1
• Psychology and cognitive stuff Un talk très intéréssant sur la manière dont on percoit les interfaces utilisateurs.

Les sujets Angular marquants

Une sélection personnelle des talks les plus intéressants que j'ai retenus de la conférence.

Jeudi 10 octobre

Keynote, Angular Momentum

Speaker: Emma Twersky

Un bon petit coup d'œil dans le rétroviseur depuis les débuts d'AngularJS jusqu'à aujourd'hui, les nouveautés du début des années 2020 et la "renaissance".
Notamment la réécriture complète du moteur de rendu interne d'Angular (de son petit nom "Ivy"). Réécriture qui a permis un bon coup de nettoyage de dette technique, et a débloqué pas mal de choses depuis, y compris les fonctionnalités récentes.

Utilisation d'Angular en interne chez Google: ouvrir un ticket au help-desk passe par une appli Angular, consulter et naviguer dans la base de code passe par une application Angular, ouvrir une pull-request (ou changelist chez eux) passe par une application Angular. En plus évidemment des applications "user-facing" telles que Google Analytics, Firebase ou Google Cloud Platform. Le dog-fooding est total.

Emma Twersky sur scène à la NG-DE - Crédit photo: @LX_T sur twitter

AI in the browser: Smarter Angular apps with WebGPU and WebNN

Speaker: Christian Liebel

Une belle démonstration des possibilités de reconnaissance vocales et de faire tourner un LLM en local dans un browser grâce à WebGPU.

Au-delà de ça, je ne suis pas forcément convaincu du temps gagné, ni des cas d'utilisations.

Step-up Your Authentication Security.

Speaker: Alisa Duncan

Talk un peu sponsorisé par OKTA (c'est le jeu), mais de très bons rappels et live-coding sur la manière de rajouter de l'authentification dans une application web.

Sur comment gérer les erreurs HTTP 401, comment intercepter les erreurs de droits d'accès ou la péremption de jetons.

Des indispensables de l'authentification / autorisation, présentés avec des implémentations concrètes en Angular.

Fake it til you mock it

Speaker: Younes Jaaidi

Younes, que j'ai déjà pu croiser dans plusieurs conférences en France, nous a présenté une explication sur les différents types de faux objets utilisés dans les tests unitaire ( Stub, dummy, fakes, mocks... ).

La moitié du talk était un mini sketch sous la forme d’une audition d'acteurs, avec Younes dans le rôle du directeur de casting, assez drôle et original.

Modern Angular Architectures with Lightweight Stores

Speaker: Manfred Steyer

Manfred est très impliqué dans l'éco-système Angular, notamment en maintenant pas mal de librairies (voir son GitHub), et sur pas mal de sujets comme les micro-frontends, et la fédération de module.

C'est vraiment le G.O.A.T qu'il pense être, l'entendre expliquer comment les "signals" allaient changer la gestion d'état avec Angular, et surtout, l'architecture de nos fronts était très agréable et intéressant.

Il nous montrait une manière plus légère de faire des fonctionnalités de store, en utilisant des "signals" plutôt que des Observables. Et surtout, des stores locaux aux composants plutôt que globaux.

Tout ça en suivant l'architecture "Domain Driven Design" et le pattern de librairies "ui", "domain" et "data".

Une approche très orientée mono-repo et gros projets, mais également applicable à des projets plus petits.

DIY: Let’s write a signal from scratch.

Speaker: Eliran Eliassy

Un Live coding de A à Z d'une implémentation de signal, la nouvelle primitive pour faire de la réactivité dans Angular.

L'exercice du live-coding ou de la démo est toujours un peu risqué, mais là, c'était rythmé, et didactique.

De la fonction signal(), du getter / setter de notre valeur, à la gestion des abonnements jusqu’aux effets. En 30 minutes chrono.

Ça montrait bien toute la simplicité et la puissance du concept.

The hidden challenges of run-time integrated microfrontends

Speaker : Cathrin Möller

Un talk très intéressant sur la fédération de modules, une technique qui permet de charger des petits bouts d'application dans vos applications angular, ces petits bouts venant d'un autre domaine.

Les challenges sont nombreux, notamment sur la gestion des dépendances, des versions angular, et des routes d'URL.

À retenir : éviter d'utiliser différentes versions d'Angular dans chaque micro-front. Et bien penser à son routage, à séparer les routes pour éviter les collisions, car même avec plusieurs micro-fronts, on n'a qu'une seule URL partagée entre chaque.

Cela apporte également des considérations d'architecture de code, notamment sur la séparation des responsabilités, et comment faire communiquer tout ça harmonieusement.

Going deep with change detection

Speaker: Enea Hahollari

Enea, qui est très actif sur le twitter Angular, souvent pour découvrir et partager de nouvelles fonctionnalités du framework avant même que la pull-request ne soit mergée, nous a fait un talk très technique sur les détails de l’implémentation de la détection de changement avec Angular

À la fois avec zone.js et les signals. Seul point négatif, un peu dur à suivre à cause des slides sans contrastes, mais hyper intéressant.

Enea sur scène qui présente la détection de changement, comme quoi, le contraste dans les slides, c'est important

Make your app loud: Web maudio in UI

Speaker: Vitalii Bobrov

Un sujet un peu à part, sur l'utilisation du son dans les applications web. Vitalii nous a montré comment utiliser le son pour améliorer l'expérience utilisateur, et rajouter des informations de "feedback" aux actions.

Une pratique peu répandue dans le web, j'ai en tête linkedin surtout qui a quelques actions qui provoquent des sons, mais c'est assez rare.

Vendredi 11 Octobre 2024

Partial Hydration, the art of sending the bare minimum over the wire

Speaker: Matthieu Riegler

Matthieu, qui fait partie de la core team Angular, nous a présenté toutes les nouveautés concernant l'hydratation partielle, une technique qui permet de ne renvoyer que le strict nécessaire pour le rendu initial d'une page, et de charger le reste en asynchrone.

AnalogJs: The Vite powered Angular meta-framework

Speaker: Robin Goetz

Robin, membre de la core-team d'AnalogJS, nous a présenté les fonctionnalités de ce meta-framework.

Connaissant le sujet (j'en ai parlé au DevFest Nantes), j'ai quand même appris des choses, notamment sur les fonctionnalités avancées de Nitro, la boite à outils "Serveur" utilisée par AnalogJS

From material 2 to 3

Speaker: Ankita Sood

Un talk intéressant, pour qui utilise Material, la librairie de composants de google pour angular, sur les changements de la v2 à la v3, comment migrer ses thèmes et pleins de petits conseils.

Horror stories from running angular universal in production.

Speaker: Benjamin Legrand

À mon tour, j'ai parlé des horreurs de rendu server en production, de toutes les fois où on a "cassé la prod", et comment éviter de le refaire.

Cut my tasks into pieces

Speaker: Julian Jandl

Comment optimiser les taches de rendu dans le navigateur, en parallélisant l'affichage de chaque composant au niveau du rendu fait par Angular.

Une approche intéressante, pour des besoins de perf avancée, j'ai beaucoup aimé les exemples à base d'utilisation du profiler (outils d'analyse de la performance de vos navigateurs).

Les bonnes idées de la conférence.

Autour des talks, j'ai beaucoup apprécié l'approche verte et écolo-responsable. Par exemple : les t-shirts étaient imprimés "à la demande", avec un petit stand où on pouvait choisir son design et sa taille, et le t-shirt était imprimé en direct. Pas de gâchis.

Les repas étaient non-seulement très bons, mais en plus végétariens (la nourriture la plus inclusive qui soit), et en quantité largement suffisante pour les gros mangeurs ou les carnistes frustrés.

Des "snacks" étaient à disposition tout au long de la journée, des viennoiseries le matin, puis un échantillon varié l'après-midi : des chips de fruits aux glaces au chocolat, en passant par plein de fruits frais, tout cela faisait vraiment ressentir le côté "luxueux" de la conférence.

Sur le format des talks, les sujets de 30 minutes sont vraiment agréables et mon opinion après avoir enchainé sur les deux jours, c'est que c'est le meilleur format possible pour une conférence.

45/50 minutes telles qu'on les fait en France, c'est trop long, on s'ennuie vite, si le speaker n'est pas bon, on décroche. 30 minutes, c'est court, on n'a pas le temps de s'ennuyer, tout en ayant le temps de rentrer dans le sujet.

La "track unique" (pas de conférence en parallèle) permet également d'enchainer 2 à 3 talks sans temps de pause, ni sans avoir à se déplacer, et ça change pas mal de chose sur le niveau de fatigue générale que ce genre d'évènements me procure d'habitude.

Comme à chaque conférence, je suis revenu avec mon petit lot de stickers

Conclusion

Cette conférence m'a personnellement beaucoup plu, pour une première expérience non-francophone, c'était vraiment top. Au delà d'êter complétement dans mon coeur de métier et mon framework préféré, je ne pensais pas qu'une conférence de niche sur un framework aussi spécifique que Angular pouvait rassembler autant de monde.

J'espère m'en être plutôt bien sorti avec mon talk, malgré mon accent Français à couper au couteau.

Les vidéos des talks devraient être disponibles dans quelques semaines, je mettrai à jour cet article avec les liens.

J'ai été ravi d'échanger avec des développeurs Angular de toute l'europe, même dans un anglais approximatif. Vivement un évènement similaire en France. (il existe la NG-DE, la NG-BE, ngPoland ou ngRoma, à quand un NG-FR ?)

Photo Bonus : Où est Charlie ?