I have joined Anti-IF Campaign

Retour d'expérience sur React


Retour d'expérience sur React

Par Stéphane LABBE
@asicfr


Préambule / Disclamer : 

Ce retour d’expérience s'appuie sur des notes prises tout au long de grands projets publiques et des interviews auprès des équipes de dev. Il n'aborde pas uniquement React mais plus généralement des outils / frameworks que nous utilisons sur ces différentes applications. Il y aura surement des évidences et il manquera surement des éléments, donc n'hésitez pas à réagir / compléter.

React ça donne quoi alors ?

Le développement d'une application React implique l'utilisation intensive et exclusive du javascript. Il est donc il est essentiel de former l'équipe au langage, à ses nouveautés (ES6, ES7 ...). La courbe d'apprentissage de React est abrupte mais rapide, les différentes équipes sont devenues rapidement opérationnelles.
Contrairement à d'autres outils / framework, React est très stable d'une version à l'autre ce qui favorise les migrations.
Les performances "par défaut" sont vraiment satisfaisantes mais en cas de soucis, il existe plein de possibilités pour améliorer les choses : PureComponent, recompose, reselect ...
React / Redux ne cadrent pas vraiment le code / l'architecture, à vous de suivre / définir les bonnes pratiques, donc mettez en place très rapidement un guide de développement.
Si pour conserver un existant, vous devez intégrer un plugin jquery par exemple, c'est réalisable dans React, même si je ne le conseille pas.
React est plus adapté au pattern Single Page Application et plus à l'aide en tant que maître du front. En cas contraire, il deviendra complexe d'assurer le rendu serveur, la compatibilité SEO ...

Best practices React 

 Quelques règles qui peuvent vous faciliter la vie :
- Un composant = un fichier.
- Donnez la priorité aux stateless components, de simples fonctions pures (sans effet de bord, sans altération des données en entrée)
- Un composant container de haut niveau pour chaque page "principale"
- Ne connectez que ces composants container à Redux à l'aide d'un fichier à part.
- N'oubliez pas d'utiliser displayName dans les composants pour simplifier le debug
- Donnez la pleine puissance de React en utilisant ES6 / ES7 (destructuring, arrow function, spread ...)
- Choisissez une structure des répertoires orientée fonctionnel.
- Choisissez bien le nom de vos composants et de vos variables, c'est hyper important pour la lisibilité et la compréhension du code.
- Utilisez les outils adaptés et mettez en place des séances dédiées pour que chacun puisse se les s’approprier:
- Outils par défaut de Chrome (debugger, point d'arrêt conditionnel, profilage, timeline rendering ...)
- les devtools react et redux
- Surveillez attentivement la console de votre navigateur : React vous aide en indiquant des warning et des erreurs identifiant les soucis de votre code.
- Dans le code React, n'utilisez pas de getElementById ou ce genre de chose, privilégiez plutôt les « ref ».
- Il vous faudra trouver un chemin médian pour limiter la profondeur des composants tout en limitant le nombre de ligne d'un composant. Une solution peut être de faire descendre les composants et non pas les données !!!
- Pas de développement sans tests unitaires
- Faites tout votre possible pour que le build automatique termine toujours en succès
- Ne testez pas le rendu React en lui-même, testez plutôt le comportement suivant les cas d'usage, les traitements critiques
- Tester aussi l'application sur l'environnement cible sans oublier de couvrir tous les navigateurs que vous devez supporter, et oui même IE.
- Dernier conseil, utilisez plutôt jest.spyOn et ainsi éviter de restaurer les versions originelles à la main.


La qualité du code

Pour faciliter ce point, je vous conseille de n'avoir qu'un seul ide par techno (même s'il existe des outils pour créer des config. transverses comme editorconfig) et de partager la configuration de cet ide en l'intégrant aux sources du projet par exemple.
Sur tous ces projets, Eslint était installé dans Vscode et lancé lors du packaging, ce qui pousse chacun à corriger rapidement les soucis. L'habitude se prend vraiment très vite et à l'aide de l'auto-fix et d'une bonne liste de règles (eslint-config-airbnb, plugin:react/recommended), on a un code très homogène et on ne laisse pas les problèmes s'accumuler
Utilisez les prop-types et default props afin de fiabiliser les composants.
Avec ou sans point-virgule ?
Avec ou sans commentaire ?
Space ou tabs ?
A chacun ses habitudes mais il va falloir faire un choix définitif dès le début du projet.
Les devs. ont souvent le réflexe de l'utiliser les points virgules, ne les en dissuadez pas et cela peut vous éviter des problèmes entre Eslint et l'auto-fix.
Pour les commentaires, un peu de jsdoc n'a jamais tué personne et cela peut permettre d’utiliser facilement une fonction sans devoir ouvrir son fichier source.

L'environnement de développement pour React

Un projet React moderne, met en œuvre beaucoup d'outils : npm, babel, webpack et j'en passe.
Attention à bien maîtriser chacun de ces outils, leurs responsabilités, leurs fichiers de configuration ...
Sur webpack plus précisément :
- C’est un outil super puissant, une doc qui s'améliore mais une configuration souvent complexe.
- Ce sera malgré tout un élément central quand vous aurez à optimiser vos bundles.
- Il existe différentes stratégies combinables de packaging (loadable vs chunk).
- Pensez à créer une US pour aborder ce point et prévoyez large
- Webpack 4 fraichement sorti doit simplifier tout ça, à tester

Sur npm :
- Yarn ou npm ? npm souffre encore de certains problèmes, mais ça marche quand même.
- En tout cas, utilisez la version de npm la plus récente > 5 !!!
- Pour votre projet, installer toutes les dépendances en local, pas en global, cela évitera les conflits / les problèmes si vous avez plusieurs projets avec des versions différentes de certaines dépendances.
- Faites en sorte que chaque dev. aient la même version de node et npm que celles en prod !!
- Si vous avez besoin de plusieurs versions de npm en même temps, utilisez nvm ou npx
- Fixez précisément les versions de vos dépendances !!!
- Le fichier package-lock.json fait partie des sources, il doit être commité aussi !!!

Les revues de code

Avec un grand nombre de développeurs débutants, il est impossible de mettre en place des revues systématiques.
Est-ce vraiment ce que l'on souhaite d'ailleurs ?
Evitez les revues faites à postériori, trop technique et trop peu métier, sans dialogue avec le développeur.
Ce genre de revue n'a que peu d'intérêt.
Je vous conseille de multiplier les interviews, les séances de pair-programming voir Mob programming sur des sujets critiques.

"Le style n'est rien, mais rien n'est sans le style."

Pour les projets auxquels j'ai pu participer, l'intégration Html / la création des styles CSS a été confiée à une équipe dédiée.
Les feuilles de style étaient externalisées et des gabarits des différents cas ont été mis au point.
C'est une stratégie ultra efficace, cela enlève de la pression et facilite le travail des dev. React.
Attention, cette stratégie peut poser des problèmes sur le découpage des US (une seule ? plusieurs ? sur des sprints différents ? ...).

Immutable state only

Qui dit SPA, dit gestion de l'état de l'application (quel page en cours, les données de l'utilisateur ...).
Cet état doit être immutable ce qui permet d'éviter les mauvaises pratiques, augmenter les performances, éviter des effets de bords ...
Beaucoup de solutions existent immutablejs, seemless-immutable, middleware redux ... à vous de choisir en fonction de vos contraintes.
En tout cas, mettez en place la solution choisie dès le début du projet.


Hoc vs Render-props

On peut vraiment aller très loin en découpant et séparant les comportements.
Cela permettra de réutiliser ces comportements, de séparer les responsabilités, d'améliorer la maintenabilité, la stabilité de l'ensemble.
Dans cette optique, les Hoc et Render-props sont les armes ultimes.
Mais ça peut aussi couter cher, il faut se donner une limite et savoir rester raisonnable.
Je vous conseille de privilégier l'utilisation de Render-props :
- Ce sont des composants comme les autres.
- Il n'y a moins de risque de collision sur les props.

Quelle stack ?

Comme dit plus haut React ce n'est qu'une librairie.
Il vous faudra donc constituer une stack complète permettant de respecter les exigences du projet.
Mais chacun des outils que vous sélectionnerez vivent leur propre vie (react-router, redux, webpack, etc.) et réussir à constituer une stack à jour est une mission difficile.
Si on vous demande sur SSR et du code splitting (chargement dynamique des ressources javascript pour l'écran courant), prévoyez du temps pour le choix et la mise au point.

Et la sécurité dans tout ca

Par défaut React échappe toutes les valeurs incorporées dans JSX avant de les rendre.
Tout est converti en chaîne avant d'être rendu. Cela permet d'éviter les attaques XSS (cross-site-scripting).
React fourni néanmoins une api "dangerouslySetInnerHTML" contournant cette protection en injectant directement du code html "externe".
‎Utilisez le moins possible cette api ou assurer vous à l'aide d'autres outils que le Html que vous souhaitez injecter est sûr.

Conclusion

React, bien que verbeux, permet de développer efficacement des projets de grande ampleur.
Les différentes équipes avec lesquelles j’ai pu travailler ont apprécié cette technologie.
Les points faibles résident dans :
- la complexité à définir et maintenir une stack stable
- le cadre trop laxiste imposé par les outils

Aucun commentaire:

Enregistrer un commentaire