Quand on crée une application web complexe, nous sommes confrontés à une multitude de problématiques récurrentes qu'il nous faut résoudre de la manière la plus efficace possible. Et dans la majeure partie des cas, une solution existe déjà quelque part, que l'on peut utiliser sans avoir à « réinventer la roue », et qui va peut-être même aller plus loin que la réflexion qu'on a eu au départ.
Voici une petite liste de ces problématiques courantes que l'on peut rencontrer en développant une application en React.js, et des meilleures solutions existantes permettant de les résoudre, et de respecter le principe DRY. Toutes les libs citées ici sont gratuites et open-source, très bien maintenues par la communauté, et utilisent des bonnes pratiques React comme les hooks.
Les formulaires : Formik
Les formulaires sont sans doute parmis les choses les plus complexes et fastidieuses à gérer dans une UI. Si on ajoute à cela la gestion de la validation, de l'affichage des erreurs tout en gardant un code propre… ça devient vite un bazar sans nom. Heureusement, d'autres ont déjà rencontré ces soucis et on créée Formik (prononcez « Formica » ou « Formikey » 😄). Cet outil vous mettra à disposition tout ce qu'il faut pour gérer vos formulaires et rendre ça quasiment amusant.
(Bon ok… On en fait peut-être un peu trop mais c'est presque ça, promis !).
Internationalisation : I18next + React-I18next
Si votre application a besoin d'être traduite dans différentes langues, I18next et son paquet dédié à React, React-I18next, sont faits pour vous. Ils offrent tout ce qu'on peut attendre d'une lib d'i18n, à savoir la gestion des pluriels, l'interpolation de variables, le switching de langue à la volée et la gestion des fallbacks. Il existe d'autre alternatives (React-Intl pour ne citer que lui) mais d'expérience, I18next fait vraiment bien le travail et s'intègre parfaitement à React (hooks, etc.).
Site officiel de I18next | Site de la lib React liée
Routing : React Router (6 ?)
Pour celui-ci, peu de mystère, c'est un basique de l'écosystème React. Sa façon déclarative de spécifier les routes et ses hooks bien faits en font une valeur sûre. On se réjouit d'autant plus que la version 6, encore en bêta, promet d'apporter de nouvelles fonctionnalités très utiles :
- Le nouveau component
<Routes />, remplaçant à<Switch />qui définira un contexte de routing à tous ses enfants, les<Link />seront donc relatifs à celui-ci par exemple; - Un meilleur support des routings imbriqués;
- Une navigation prête à accueil les Suspenses (!!).
Framer Motion pour gérer les animations
Même si React-Spring fait vraiment bien le travail aussi et permettra peut-être même d'aller plus loin sur certaines animations très poussés, Framer Motion, pour sa simplicité d'utilisation et son côté hyper intuitif, est actuellement notre library de choix quand il s'agit de mettre en place des animations complexes qui ne pourraient pas être gérées via du CSS ou via React-Transition-Group.
Site officiel de Framer Motion
Le style : SASS Modules ou Styled Components
Ce sujet est tellement clivant que nous n'avons pas nous même d'avis arrêté sur la question. C'est pourquoi, quand il s'agit d'intégrer du style dans une application, on vous conseillera plutôt d'aller vers le paradigme qui vous parle le plus (CSS-in-JS, ou bien fichiers de style séparés).
Quoi qu'il en soit, qu'il s'agisse de l'un ou de l'autre, nous avons nos outils préférés: Pour le CSS-in-JS, on optera plutôt pour Styled-Components, même si force est de constater que les différences avec Emotion sont vraiment de plus en plus minces. Pour ce qui est du style séparé, chez Pulsanova on utilise SASS avec une utilisation intensive du « nouveau » concept de modules (`@use`, etc.) qui s'intègre bien avec la notion de composants auto-suffisants / isolés.
Site officiel de Styled-Components
Documentation SASS sur les modules
Day.js pour la gestion des dates
Si comme nous, jusqu'à il y a encore assez peu de temps vous utilisiez Moment.js comme outil de gestion des dates mais que vous cherchez une alternative vu que le projet a été mis en « maintenance-only », on ne saurait que trop vous conseiller de vous tourner vers Day.js pour avoir un remplaçant dont l'utilisation est quasi identique à celle de Moment, sans ses soucis d'optimisation (sa taille, ses dates mutables, son côté «usine à gaz», etc.).
Pour ce qui est de l'avenir, Temporal, le futur de la gestion des dates en natif, viendra sans doute mettre tout le monde d'accord. En attendant, celui-ci n'en est encore qu'au stade spécification et donc il faut encore attendre un peu pour pouvoir l'utiliser en prod !
React Icons pour les icônes
Les icônes sont incontournables dans quasiment toutes les applications actuelles. Quand il s'agit de faire un choix entre les différentes alternatives, gratuites ou payantes, police ou SVG, on se retrouve vite un peu perdus face à la multitude d'options. Même si on est pas complétement fan du nommage des components exportés par React-Icons, ce qu'il y a de bien avec cette lib c'est qu'elle vous évite d'avoir à choisir quel icon set vous allez installer, car elle en fournit plusieurs. Son autre gros avantage est qu'elle n'utilise pas de police d’icônes, mais uniquement des SVGs, ce qui réduit drastiquement la taille de vos bundles.
Dans un prochain post, on vous parlera d'autres libs qu'on a l'habitude d'utiliser chez Pulsanova, par exemple pour gérer le state global de nos applications, ou encore pour effectuer nos requêtes vers des API. Stay tuned!
En attendant, si vous nous contactez pour discuter de votre stack, on pourra vous conseiller sur ces choix cruciaux !