Contexte

Chakra est une bibliothèque de composants React, avec un focus particulier sur l’accessibilité.

Je l’utilise depuis 2022 pour Acupio, mon side project de gestion de clientèle pour acupuncteurs dont je vous ai déjà parlé ici.

Toutes les personnes suivies par un praticien s’affichaient sur une page, avec la possibilité de filtrer par nom/prénom. Toutes les personnes apparaissent sur la page quand aucun nom n’est saisi dans la recherche.

Je viens de dépasser les 500 patient·e·s suivis pour un des praticiens sur l’application … Le sujet commençait à devenir urgent ! J’ai découvert un composant de pagination Chakra très pratique pour gérer ça.

Problème : Il n’était utilisable que sur la version 3 du framework! Il devenait donc grand temps que je m’attaque à cette mise à jour.

Qu’introduit cette mise à jour vers Chakra v3 ?

Le guide de migration disponible est très exhaustif, on voit qu’énormément de changements ont été introduits.

  • Amélioration de la performance lors du render de composants React (grâce à une nouvelle gestion des styles)
  • Amélioration de l’inférence de types sur TypeScript
  • Polymorphisme : Utilisation du pattern asChild

Je ne vais parler dans cet article que des changements qui ont été le plus difficiles à suivre pour moi sur mon projet : la mise en place du Compound Pattern.

Changements de paradigme - Compound Pattern

Chakra v3 généralise l’utilisation du Compound Pattern pour la plupart des composants m’a forcé à revoir la structure de presque tous mes composants.

Il existe souvent des composants fortement couplés dans une application. Par exemple, un composant utilisable forcément au sein d’un composant : ce sont deux composants à part mais l’un va de pair avec un autre. Ce Compound pattern permet de créer des composants séparés mais fortement couplés.

J’utilisais des composants comme les Drawer, les Modal, des tableaux qui ont tous été impactés par ce changement de paradigme : il a fallu les revoir.

Git Diff sur un tableau Avant / après sur un tableau - Les Td deviennent des Table.Cell, les Tr deviennent des Table.Row

Face à cette petite montagne de refactoring, j’ai eu envie d’utiliser l’IA pour m’aider dans cette tâche un peu ingrate. N’était-ce pas une des cas d’usages qu’était censé faciliter l’IA ?

Sweet summer child GIF

Utiliser l’IA pour faire du refactoring

Mon rapport à l’IA est très… frileux.

En 2023, j’ai utilisé ChatGPT comme beaucoup de personnes, je me suis renseignée sur comment ça fonctionnait mais sans aller plus loin dans l’utilisation de l’IA au quotidien.

Refactoring with AI the wrong way : Jongler entre IDE et onglet navigateur Claude

J’ai d’abord commencé en tentant de copier-coller un de mes templates dans une conversation Claude en demandant de migrer ce composant vers Chakra 3. Les suggestions de Claude ne compilaient pas, ce qui est assez logique puisqu’il n’avait pas accès à l’intégralité de ma codebase.

J’en ai discuté au sein du Slack de la communauté Ladies of Code Paris et une de nos membres (coucou Sara !) me disait qu’il serait préférable de commencer par des composants plus petits qu’une page entière.

Ayant une approche Atomic Design sur le projet, c’était un conseil facilement applicable. Ça me permettait d’être plus en contrôle sur les changements introduits. Cela fonctionnait un peu mieux mais jongler entre mon navigateur (avec Claude) et mon IDE était frustrant. J’oubliais régulièrement de lui donner certains fichiers dont il avait besoin.

Utilisation d’agents Cursor pour faire du refactoring

Les agents rendent ces allers-retours obsolètes : l’agent met en place ce que l’on ce qu’on lui demande de faire via l’interface de discussion intégré à l’IDE, y compris sur le plan gratuit de Cursor.

J’avais notamment de vues qui faisait un filtre par date (sur différentes pages de l’application).

Composant Period Picker

Plutôt que de dupliquer cette gestion de date, j’ai décidé d’en faire un composant réutilisable en utilisant mon agent Cursor en lui donnant ce prompt.

J’aimerais que tu sortes ce filtre par date dans un composant qui se nommerait PeriodPicker. Place le dans le dossier components > organisms. Le composant PeriodPicker doit permettre de sélectionner une période donnée. Il doit être exploité dans les composants StatsScreen et UrssafDeclaration. Merci

L’avantage d’un agent, c’est de pouvoir review les fichiers, comme si c’était une PR faite par un·e autre collègue. La précision dans le prompt est importante, y aller de manière atomique évite de se lancer dans des changements trop compliqués et durs à débugger par la suite.

Durée d’une migration de Chakra 2 à Chakra 3

Cette migration s’est passée plus facilement que je ne le pensais. Je n’y ai mis que quelques jours là où je pensais en voyant la montagne y passer plusieurs semaines. J’hésitais même à changer de bibliothèque - quitte à y passer un temps aussi long.

Je n’ai utilisé des agents IA que sur la fin : je pense que j’aurais pu gagner du temps en les utilisant dès le début de ce projet (en commençant par les atoms du projet). Les agents IA sont très efficaces sur des tâches locales et bien définies que sur des refactorings globaux.

De nombreuses personnes dans la communauté ont arrêté d’utiliser Chakra en raison de cette montée de version de ce que je vois sur Reddit.

Bien préparer sa migration vers Chakra 3

La construction du projet en suivant les principes d’Atomic Design m’a encore une fois été très précieuse. J’ai pu commencer par les plus petites molécules en allant ensuite vers les écrans plus grands.

Cette migration m’aura pris au final quelques jours.

Si je devais conseiller une personne qui hésiterait à se lancer dans cette mise à jour

  • Voir dans le guide de migration quels sont les composants supprimés qu’il va potentiellement falloir migrer pour estimer la charge de travail
  • Faire ça à plusieurs si possible
  • Utiliser des agents pour faciliter le travail en commençant par de petits composants d’abord puis en visant plus haut.

Bonne chance :) Et au plaisir d’avoir vos retours sur l’expérience de refactoring avec des agents Cursor !