React est un excellent outil pour mettre en oeuvre des sites web interactifs simples. Mais dans quelle mesure est-il applicable aux projets frontaux complexes ? Est-ce que cela fonctionne aussi bien dans ce contexte ? Dans cet article, nous allons examiner certains des problemes que vous pouvez rencontrer lors de l'utilisation de React pendant le developpement web.
1. Points cles de l'analyse
Avant d'entrer dans le detail, voici les quatre problemes principaux identifies avec React dans les projets complexes :
- Les composants React sont difficiles a reutiliser dans des projets web complexes
- L'algorithme du DOM virtuel de React est lent et imprecis
- Les modeles HTML de React ne sont ni complets ni puissants
- React necessite une programmation asynchrone complexe lors de la communication avec le serveur
Pour beaucoup, le framework React semble plus simple et plus convivial qu'AngularJS. L'une de ses fonctions les plus utiles est la liaison de donnees qui permet d'associer des sources de donnees a des elements de pages web. Si vous experimentez TodoMVC, vous constaterez qu'une application dans le cadre Binding.scala ne contient que 154 lignes de code, contre 488 lignes dans React. Pour approfondir vos connaissances en JavaScript, consultez nos 10 conseils pour apprendre le JavaScript.
2. Probleme 1 : composants difficiles a reutiliser
L'unite minimale de reutilisation dans React est le composant (React.Component). Il est plus leger que le controleur et la vue dans AngularJS. Tout ce qu'un developpeur web doit faire, c'est mettre en oeuvre une fonction de rendu qui traduit les proprietes (props) et l'etat du composant en elements HTML.
Ce composant leger est tres utile pour creer des pages web simples. Toutefois, lorsque la communication entre les composants est necessaire, le passage de fonctions de rappel (callbacks) est inevitable. En particulier pour les pages web aux structures complexes, des dizaines de composants interdependants doivent etre utilises, ou les rappels sont transmis de parent a enfant, de couche en couche.
La seule consequence de la mise en oeuvre des frameworks React dans ce type de projets web complexes et interactifs est que le code deviendra trop encombre et difficile a maintenir. Cette cascade de callbacks rend le debogage particulierement penible et le refactoring risque.
3. Probleme 2 : le DOM virtuel est lent et imprecis
L'algorithme de rendu dans React utilise le DOM virtuel. Le developpeur doit fournir une fonction de rendu qui cree un DOM virtuel en utilisant les proprietes et l'etat du composant. React construit ensuite le DOM reel sur la base de ce DOM virtuel.
Lorsque l'etat change, React appelle a nouveau la fonction de rendu et construit un nouveau DOM virtuel. Il analyse ensuite les differences entre l'ancienne et la nouvelle version du DOM virtuel et les applique au DOM reel. Ce procede presente deux inconvenients majeurs :
- Gaspillage de ressources : independamment de ce qui a change dans l'etat, les fonctions de rendu generent toujours un nouveau DOM virtuel complet. Si la fonction de rendu est complexe, les ressources informatiques sont gaspillees.
- Comparaison imprecise : la comparaison de deux versions du DOM est lente et source d'erreurs. Par exemple, si vous voulez inserer un element li au debut de ul, React supposera a tort que vous avez modifie tous les composants li.
Les developpeurs web sont obliges d'utiliser la propriete key, ainsi que les methodes shouldComponentUpdate et componentWillUpdate, pour aider le framework a deviner correctement les changements survenus.
4. Probleme 3 : templates HTML incomplets et limites
React prend en charge JSX pour le developpement de modeles HTML. En theorie, les developpeurs frontaux peuvent transformer du HTML statique en page web dynamique en copiant simplement le HTML dans des fichiers JSX et en ajoutant un peu de code supplementaire.
Malheureusement, le support HTML de React est incomplet. Le developpeur doit remplacer manuellement class par className et for par htmlFor. La syntaxe des styles en ligne doit passer de CSS a JSON. De plus, React fournit un mecanisme propTypes pour verifier la validite des donnees, mais ce mecanisme ne trouve les erreurs qu'au moment de l'execution, et non au moment de la compilation.
React est egalement incapable de trouver les erreurs dans les noms. Par exemple, si vous ecrivez onclick au lieu de onClick, il n'y aura pas de message d'erreur, mais le programme se plantera. Pour mieux comprendre les langages qui sous-tendent ces frameworks, consultez notre article sur les langages de programmation les plus demandes.
5. Probleme 4 : programmation asynchrone complexe
Considerez le travail de React avec le serveur en termes de schema Modele-Vue-Vue-Modele. Un developpeur web doit mettre en oeuvre une couche d'acces a la base de donnees (Model), un etat en tant que ViewModel et une fonction de rendu en tant que View.
Le modele donne acces a l'API dorsale et definit l'etat (ViewModel) a l'aide de promesses (Promise et fetch API). Au cours de ce processus, les programmeurs frontaux doivent developper une procedure asynchrone composee d'un tableau de fermetures. Le code d'une telle procedure devient inevitablement confus et source d'erreurs.
Meme si vous faites tres attention a garder la trace de toutes sortes d'evenements asynchrones, le processus de debogage et de maintenance d'un tel programme devient extremement difficile. C'est un defi particulier pour les equipes qui travaillent sur des projets de grande envergure. Pour des ressources supplementaires sur le developpement web, consultez codeyourweb.org.
6. Les alternatives a React pour les projets complexes
Binding.scala semble similaire a React a certains egards, mais le mecanisme sous-jacent est completement different. Il est plus simple et plus polyvalent, offrant une flexibilite et une puissance superieures pour les projets complexes.
D'autres alternatives meritent egalement d'etre considerees :
- Vue.js : offre une courbe d'apprentissage plus douce et une gestion d'etat plus intuitive
- Svelte : compile le code a la construction, eliminant le besoin d'un DOM virtuel
- Angular : framework complet avec des outils integres pour les projets d'entreprise
- SolidJS : performances exceptionnelles avec une reactivite fine sans DOM virtuel
7. Conclusion
En plus des quatre aspects mentionnes ci-dessus, il y a egalement le probleme de la gestion de l'etat dans React. Si vous utilisez une bibliotheque tierce comme Redux pour gerer l'etat, la structure de l'application devient encore plus confuse et le nombre de couches augmente.
React reste un outil puissant pour de nombreux cas d'utilisation, mais il est important de connaitre ses limites avant de l'adopter pour un projet complexe. Le choix du framework doit se faire en fonction des besoins specifiques du projet, de la taille de l'equipe et des contraintes techniques.
