La réactivité et les signaux : démystifions la magie du frontend

[Barbapapazes]

Niveau: Avancé
Temps: 45 minutes

Description

Certaines choses dans l’univers resteront sans réponse, mais la réactivité et les signaux ne devraient pas en faire partie.

Depuis plusieurs années, la réactivité (et son concept clé : les signaux) s’est imposée sur toute la scène frontend. Que ce soit dans Vue.js, Angular, React, Svelte, Solid, Qwik, ou Preact, ces notions sont partout. Pourtant, malgré leur popularité, il est souvent difficile de comprendre ce qui se cache réellement derrière les signaux.

On entend parler de tracking, de proxies, d’états dérivés, et même d’effects, mais… de quoi parle-t-on vraiment ? Comment ces mécanismes permettent-ils à des valeurs d’"écouter" et de réagir aux changements d’autres ? Quelle est cette "sorcellerie" qui met à jour nos interfaces en temps réel, simplement en assignant une nouvelle valeur à une variable ?

Dans cette session, plonge dans le monde fascinant (et parfois mystérieux) de la réactivité et des signaux. Ensemble, nous décortiquerons une bibliothèque comme Alien Signals, pour démystifier ces concepts et enfin comprendre la mécanique qui se cache derrière cette "magie" du frontend.

Pitch

Bonjour 👋,
Cette intervention sera technique, et c’est volontaire.
Depuis l’émergence des premiers frameworks frontend, la réactivité s’est imposée comme une notion centrale, au même titre que les composants. Pourtant, cette notion reste mystérieuse et est rarement expliquée en profondeur. Souvent, on la survole, on la compare à Excel, mais on ne fournit pas les clés nécessaires pour vraiment comprendre comment une simple mise à jour d’une valeur peut entraîner l’actualisation d’un template.
À cela s’ajoute la notion de signaux, qui a suscité beaucoup d’intérêt ces dernières années. Si la réactivité était déjà complexe à saisir, les signaux sont souvent perçus comme une véritable boîte noire. On entend parler de tracking, de proxies, d’états dérivés et d’effects, mais rarement on explique comment un état dérivé ou un effect sait quels signaux écouter pour s’actualiser, ni comment ces signaux interagissent avec le rendu pour mettre à jour le DOM.
C’est dommage, car le sujet est aujourd’hui au cœur du développement frontend. Tous les frameworks modernes reposent sur la réactivité, la plupart ont adopté les signaux, et une proposition du TC39 vise même à standardiser leur utilisation.
Pour lever le voile sur ce mystère, voici le déroulé de cette présentation :
Introduction et contexte : Quelques slides présenteront les concepts clés, le contexte, et des définitions pour s’assurer que tout le monde parte sur les mêmes bases.
Exploration technique des signaux : À l’aide de l’excellente bibliothèque Alien Signals de Johnson Chu, nous décortiquerons le fonctionnement des signaux.
Pourquoi Alien Signals ?Elle est agnostique des frameworks frontend, ce qui la rend accessible à tous (les participants), quel que soit leur parcours et le frameworks qu’ils utilisent.
Minimaliste, elle se concentre sur le cœur des signaux tout en étant réaliste et fonctionnelle (son implémentation est renvoyée dans Vue.js pour améliorer cette dernière).
Application aux frameworks frontend : Une fois les concepts des signaux bien assimilés, nous verrons comment cette réactivité est utilisée pour mettre à jour le DOM.
Un exemple générique servira d’introduction avant de plonger dans Vue.js.
Vue.js est un choix pertinent car il offre une intégration simple, et l’arrivée de Vapor (avec la fin du VDOM dans ses composants Vapor) permet d’expliquer le fonctionnement des frameworks récents comme Qwik.
Grâce au playground de Vue.js, nous pourrons observer et comprendre le code généré en direct.
Cette session a pour objectif de démystifier la réactivité et les signaux, tout en offrant une compréhension approfondie de leur fonctionnement dans les frameworks modernes. Ça sera technique mais c’est ça qui rend cette conférence particulièrement intéressante.

Cette présentation va être donnée (ou a été donnée en fonction du moment où ce message est lu) à Devoxx France 2025 et Mixit 2025.