DEV Community: Benjamin Legrand

NG BAGUETTE CONF 2025 : un compte-rendu

Benjamin Legrand — Tue, 27 May 2025 14:34:00 +0000

Le 24 mai 2025, onepoint hébergeait la première conférence 100% Angular de France.

La première dans tous les sens du terme, car autant nos voisins européens ont déjà leur conférence Angular nationale (les allemands ont la NG-DE, les belges ont la NG-BE, les polonais ont ngPoland, les italiens sont gâtés avec ngRome et ng-venice, et j'en passe...).

Par contre, en France, il n'existait pas ce genre d'évènement spécialisé en Angular, jusqu'à maintenant, c'était donc la grande première de la ng baguette conf 🥖

Organisée par l'équipe d'@Angular Devs France, cette journée de conférences fut l'occasion d'accueillir quelques pointures internationales de la communauté Angular, mais également des orateurs et oratrices français moins connues.

Les talks

Building Angular - The Perks of working a monorepo.

Speaker: Matthieu Riegler

Déjà actif au sein de l'écosystème Angular, Matthieu travaille désormais à 100% pour la core team Angular, il nous a présenté dans quel contexte était développé Angular chez Google.

Quelques chiffres impressionnants sur leur mono-repo principal, google3 : 3 MILLIARDS de lignes de code, plus de 4000 applications Angular.

Chose assez incroyable, il n'y a pas de versions différentes d'Angular au sein du monorepo, toutes les applications utilisent la dernière version du framework. La core-team est donc extrêmement responsabilisée en cas de changements cassant, et il ne faut que quelques heures au maximum pour que les problèmes soient remontés. Un excellent exemple de dog-fooding

On comprend mieux pourquoi certains changements en apparence simples (tels qu'arrêter d'utilise any dans certains types génériques), sont compliqués à faire passer, quand ils impliquent des changements manuels dans plus 4000 applications : c'est tout de suite un autre coût. Et pourquoi avec Angular la montée de version est complétement décorrélée de la migration (le fait d'utiliser les dernières fonctionnalités), et comment cette dernière est souvent automatisée grâce aux schematics.

Quelques nouveautés d'Angular 20 en guise de bonus / conclusion, notamment la "piste spéciale" dans les outils d'inspection de performance de Chrome...

Next-Level Angular SSR: Exploring Hydration Enhancements

Speaker: Soumaya Erradi

Des débuts d'Angular Universal, jusqu'à l'intégration récente dans son écosystème avec @angular/ssr en tant que module principal. Soumaya nous a fait un bon historique et tour d'horizon des fonctionnalités d'Angular permettant de faire du rendu serveur.

On a pu voir les nouveautés du framework concernant l'hydratation de composant, les différents types de rendus que nous permet Angular aujourd'hui, (SSR,SSG,CSG)

Pour avoir souffert sur des projets en rendu serveur, surtout de son incompréhension et sa mauvaise utilisation par les gens, j'ai été très content de voir un sujet remettre un peu à plat tout ça.

Quo Vadis State management ?

Speaker : Rainer Hahnekamp

Rainer nous a présenté un petit historique des librairies de gestion d'état en Angular. Et puis une présentation et démonstration de @ngrx/signals, de ses principes et de son API SignalStore.

Utilisant déjà la librairie quotidiennement (et déjà fervent convaincu), je n'ai pas appris grand-chose, mais c'était bien présenté, et ça en a convaincu d'autres :).

En bonus, à la fin, lancement d'une nouvelle librairie de test avec Younes Jaaidi : testronaut, un lanceur de tests basé sur playwright. (Younes était d'ailleurs Maître de Cérémonie durant toute la conférence, pas un boulot facile, et bien réussi)

Petit point négatif pour la maltraitance de clavier en direct, un scandale 😅, je fus choqué.

L'injection de dépendances : le trésor caché d'Angular

Speaker: Arthur Lannelucq

Arthur nous a présenté différents cas d'usage de l'injection de dépendance, une fonctionnalité primordiale du framework.

Devant plusieurs examples et applications concrètes: ce sont souvent les principes de base dont on oublie la puissance. Les cas d'usages étaient pertinents et bien expliqués.

Rien de neuf sur le fond, le concept n'est pas nouveau, mais ça fait du bien de le rappeler.

Comment tester l'accessibilité d'un site internet sur Angular ?

Speaker: Emmanuelle Aboaf

Au travers d'une session de live-coding, et d'utilisation à base de clavier et lecteurs d'écran, Emmanuelle nous a montré plusieurs problèmes d'accessibilité, et surtout comment les corriger.

Évidemment les cas problématiques les plus courants ont été abordés, absence d'indicateur de focus, contrastes de couleurs, lecture d'informations manquantes ou superflues par un lecteur d'écran etc...

Moi, ce que je retiens principalement, c'est "La souris est prohibée" dans un des slides :) (Et réellement, la plupart des problèmes les plus simples à corriger en accessibilité sont détectables en utilisant uniquement son clavier)

La démonstration était efficace et assez révélatrice de la facilité avec lequel on peut faire du code inaccessible. Vous pouvez retrouver les différents cas pratiques présentés par Emmanuelle sur son github

Rethinking Data Access: The New httpResource in Angular

Speaker: Manfred Steyer

Manfred nous a parlé de la nouvelle API d'Angular permettant de faire des appels HTTP : la méthode httpResource.

Cette fonction étant basée sur les signaux, elle permet de gérer les requêtes asynchrones sans passer par des rxMethods pour faire la conversion Observable ⇄ Signal.

À partir d'un exemple de niveau de Super Mario, nous avons pu voir comment repenser le graphe réactif de signal pour inclure des notions de ressources lentes à charger.

Un passage également par les fonctionnalités avancées, on a désormais une manière simple et "fonctionnelle" (dans le sens orienté fonction, pas dans le sens que ça ne fonctionnait pas avant).

Bref, la fonctionnalité est vraiment complète, et n'a rien à envier au client HTTP historique. Vous pouvez retrouver la plupart de ce dont Manfred nous a parlé dans son article sur le sujet

NDLA: J'étais persuadé qu'on allait toujours garder RxJS dans nos clients HTTP, j'avais tort, il est dorénavant possible de gérer la progression simplement, et c'est cool 😎 !

Instant Navigation in Angular Applications

Speaker: Christopher Holder

Christopher, après des rappels bons à prendre sur les métriques de performance ou encore les différences entre MPA et SPA, nous a présenté plusieurs techniques pour améliorer les performances des navigations entre pages.

Certaines basées sur une nouvelle API Expérimentale : les règles de spéculation, qui vont permettre de précharger des pages en fonctions de règles.

Un cas criant d'optimisation pré-maturée à mes yeux, à ne pas appliquer partout, mais bon à connaître au besoin.

Et tout est bon à prendre pour améliorer les performances, même si c'est uniquement la performance perçue.

Le github d'une des librairies abordées : ngx-speculative-link

Sous le capot : Un débugueur sous stéroïdes pour accélérer la résolution de bug

Seaker: Laura Pedenaud

Laura nous a présenté, une méthodologie de résolution de problèmes que l'on connaît tous et toutes : le débogage.

Après être rentré dans les entrailles d'un débugueur, comment interagir avec un débugueur en mode REPL, puis se connecter. L'exercice de la démo live n'est pas facile, et toujours très risqué, mais Laura s'en est plutôt bien sorti.

Le talk était intéressant, mais ne faites pas ça en production les enfants, utilisez des solutions d'observabilité plutôt que d'appeler directement l'API du débugueur :)

Bulletproof Unit Tests

Speaker: Cédric Exbrayat

Cédric, qui officie sur le blog ninja-squad et est contributeur de la team Angular, est venu nous parler de tests unitaires.

Et particulièrement de plusieurs techniques pour les améliorer. Éviter les detectChanges(), préférer autoDetectChanges une fois en début de suite, utiliser await fixtures.whenStable() etcetaera

Également une présentation du principe de "page object" et les quelques nouveautés sur le provideRouter() et le RouterTestingHarness qui nous permettent de simplifier les tests utilisant le Router.

Pleins de bons petits conseil pour terminer la journée.

Le lieu

Dans la belle ville de Nantes, onepoint est localisée en centre-ville, les locaux sont très classieux et spacieux.

Si vous souhaitez y organiser vos évènements, n'hésitez pas à contacter onepoint.live

NDLA: Je ne suis pas objectif, j'y travaille. Mais j'avais rarement vu le LivePoint, cette grande salle sous les toits, aussi plein à craquer, ça fait plaisir.

Conclusion

Pour une première édition, c'était une belle réussite, les orateurs et oratrices nous ont offert des talks de qualité.

La track unique et le format ni trop court, ni trop long (30 minutes) ont fait que je ne me suis pas ennuyé de la journée !

C'était un vrai plaisir d'échanger et de croiser des gens suivis en vrai plutôt que sur LinkedIn ou autres réseaux sociaux.

Merci à toute l'équipe organisatrice, aux bénévoles et aux speakers, c'était super.

Un évènement qui ne demande qu'à grandir. Vivement les futures éditions !

Sources des photos:

NG-DE 2024, un compte rendu.

Benjamin Legrand — Wed, 20 Nov 2024 13:00:00 +0000

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 ?