Migration progressive de Twig vers React avec Symfony UX et Redux

Dans les jours difficiles où l’on constate qu’on ne se remet plus d’un séminaire bien arrosé en une nuit, ou que l’on va manquer de place sur le frigo du bureau pour accrocher le prochain faire part de naissance, il peut-être bon de se consoler en se rappelant que nos outils vieillissent plus vite que nous.

Dans l’intérêt de notre client qui souhaite homogénéiser ses stacks front, et de nos développeurs et développeuses usées d’être privées de framework moderne, nous avons lancé une migration de jQuery vers React sur un projet vieux de 7 ans.

La migration devant se faire sur le long terme, l’option de partir directement sur une SPA (Single Page Application) a vite été écartée : elle ne cohabiterait pas bien avec le front legacy, les va-et-vient entre l’ancien et le nouveau front occasionnerait une perte d’état et l’obligation de rerender intégralement l’application.

Symfony avec sa suite Symfony UX propose la possibilité d’intégrer facilement des composants React au sein d’une page Twig. Cela nous permet d’avancer plus librement sur la migration en faisant cohabiter sur une même page du Twig/jQuery et du React, et en gardant la même infrastructure.

Penchons-nous un peu sur cette solution :
Derrière Symfony UX se cache Stimulus. C’est grâce à lui que nous allons déclencher le rendu de nos composants React au sein de nos pages twig.

Voici comment est présenté ce framework sur sa documentation officielle :

Stimulus est un framework JavaScript aux ambitions modestes. Contrairement à d'autres frameworks frontaux, Stimulus est conçu pour améliorer le HTML statique ou rendu par le serveur - le "HTML que vous avez déjà" - en connectant des objets JavaScript à des éléments de la page à l'aide de simples annotations.

Stimulus n’a pas initialement été prévu pour fonctionner avec React. En parcourant un peu sa documentation, on peut même percevoir un certain dédain envers les frameworks javascript dominant. On peut par exemple y lire :

“Si vous êtes satisfait de la complexité et des efforts nécessaires pour maintenir une application dans le maelström de, disons, React + Redux, alors Turbo + Stimulus ne vous intéressera pas.”

À vrai dire si, je suis très intéressé. Et la manière dont Stimulus a été détourné pour faciliter l’usage de sa bête noire m’amuse beaucoup !

Sans rentrer dans les détails, Symfony UX se sert de Stimulus pour déclencher des rendus React sur des éléments du DOM préalablement choisis. Cela vient avec quelques contraintes :

• On peut appeler de cette manière plusieurs composants React dans une même page. Mais ils agiront comme des mini-apps distinctes, à chaque fois un “runtime” React est relancé.
• Il est possible de l’utiliser conjointement avec Turbo pour se rapprocher encore plus du feeling d’une SPA en évitant de recharger complètement les pages lors de navigations. Mais les composants React seront tout de même détruits puis rerender, ce qui engendre un clignotement et une perte des états locaux.
  

Il s’avère qu’il existe une solution simple à ces deux problèmes. La voyez-vous venir ?

         …Redux !!

En effet, ce n’est pas un cas qu’on rencontre souvent quand on l’utilise avec une SPA, mais un store Redux peut-être connecté à plusieurs applications React vivant sur la même page, sans manipulation spécifique.

Il va aussi permettre aux composants de retrouver leur état lors d’un rerender lié à une navigation ajax : le store redux ne se détruit pas quand une application React est démontée.

La boucle est bouclée, le maelstrom est lancé. Avec l’ajout de Redux, les principales limitations que nous avions identifiées sur une migration via Symfony UX React sont effacées, et nous sommes partis là-dessus.

Il y a un point que nous n’avons pas pu résoudre, celui du clignotement des composants React lors d’une navigation. C’était pour nous un inconvénient acceptable au regard de tous les avantages que nous gagnons à migrer de cette manière. D’autant qu’il est possible de le limiter avec l’utilisation de turbo frames.

Nous sommes jusqu’à présent très satisfait du confort et de la liberté apportés par cette approche. Lorsque la migration sera bien avancée, nous aurons le choix de passer sur une SPA facilement si nous le souhaitons.

Merci Stimulus !