Traduction de l’article « Using React is a Business Decision, Not a Technology Choice » par Eric Baer chez formidable.com
Préambule:
React est devenu très populaire dans la communauté des développeurs et il y a un grand nombre d’articles qui vantent ses mérites techniques. Cependant, migrer vers (ou choisir) un nouveau framework demande forcément de vendre ses atouts à tout le monde dans la société, y compris les non-développeurs. Très peu sont les managers techniques ou managers produit à accepter une ré-écriture simplement pour utiliser la dernière technologie à la mode. Pire encore, beaucoup d’entreprises ont perdu beaucoup d’énergie à se mettre à jour sur les derniers outils JavaScript, ce qui a malheureusement contribué à faire régresser leurs projets « pour faire avancer le web ». Cet article ne tente pas de vous apprendre de nouvelles choses sur React. Il doit vous permettre de tenter les décideurs stratégiques; c’est un point de départ pour votre pitch pour essayer de vendre les fabuleuses possibilités de React pas seulement aux développeurs mais à tout le monde.
Résumé: React est une librairie pour construire des interfaces utilisateurs par composants. Il y a beaucoup d’autres outils comme Angular, Backbone, Knockout et Ember qui font des choses similaires mais en comparaison React est conçu pour résoudre des problèmes « business » plutôt que techniques. Vous trouverez ci-dessous les raisons pour lesquelles React est important et comment il peut bénéficier à toute entreprise d’ingénierie.
Réduire le risque
Stabilité — Facebook est fortement investi dans React (flux d’actualité, Instagram, Messenger, gestion des publicités, etc.) et dispose d’un grand nombre d’ingénieurs dédiés exclusivement au projet. Cet investissement massif n’est présent sur aucun autre framework concurrent. En complément des contributions de Facebook, il y a une gigantesque vague d’intérêt mondiale autour de React. Il y a actuellement 571 contributeurs au projet (en décembre 2015) ainsi qu’un calendrier de conférences et une cadence de livraison de mises à jour régulière.
React en Production (en): AirBnB, Asana, Atlassian, BBC, Chegg, CloudFlare, CNN.com, Codecademy, Coursera, Craftsy, Dailymotion, Dropbox, Expedia, Facebook, Feedly, Flipboard, HipChat, IMDb, Imgur, Instagram, Khan Academy, KISSmetrics, Mattermark, Minerva Project, Netflix, OkCupid, Rackspace, Rally Software, Ralph Lauren, Reddit, Redfin, Salesforce, Squarespace, The New York Times, Trunk Club, Twitter, Uber, University of Cincinnati, Venmo, WhatsApp, Wired, Wix, WordPress, Yahoo, Zendesk
Développement efficient
Mise en place progressive et facile — React peut être introduit dans des petites parties de pages existantes sans se soucier de l’existant ce qui permet aux développeurs de migrer à la vitesse de leur choix. Le poids de React est tellement léger (39.4kb gzipé pour React v0.14.0) qu’une migration progressive n’impactera nullement le poids de la page jusqu’à ce que les anciennes librairies soient inutiles et donc supprimées.
Performant par défaut — React utilise des modèles qui rendent très difficile d’écrire du code peu performant. De plus, dans la mesure où il élimine les interactions directes avec le DOM, il ne remplace pas seulement la manière de générer la vue (comme Angular / Backbone / Ember), mais aussi les dépendances comme jQuery, ce qui peut ainsi réduire la taille du code déployé.
Référencement — La prise en compte du SEO se fait par l’envoi d’une page complète calculée par le serveur directement au bot de recherche. React est aussi pensé pour le référencement, en calculant la page soit côté client soit côté serveur en utilisant NodeJS. D’autres outils permettant également le calcul côté serveur mais demandent un grand nombre de modifications instables et donc une contrainte forte en support et maintenance pour l’infogérance. React a le potentiel de simplifier les outils de développement et de réduire les coûts de maintenance.
Ré-utilisabilité du code accrue — React a la capacité unique de fournir des performances impressionnantes ainsi que de gérer intégralement le cycle de vie de rendu des composants. En intervenant sur la création, la composition et l’utilisation de composants isolés ré-utilisables plus simplement, les développeurs sont plus à même de gagner du temps en utilisant et créant des éléments communs. C’est aussi bien valable pour des éléments simples comme les boutons, que pour des éléments complexes comme du contenu dépliable.
Améliorer l’efficacité des développeurs
Réduit les effets de bord entre ressources concurrentes — React part du principe qu’HTML et JavaScript sont inévitablement liés et que les séparer n’a pas de logique autre que technique. Le concept peut être étendu aux CSS, ce qui retire les problèmes récurrents des espaces de nom, de portée et d’isolation des variables inhérents au développement CSS. Plus de détails : Radium (en) et React: CSS in js (en).
Détection plus rapide des erreurs — Facebook a fourni des outils spécifiques de développement intégrés au navigateur qui fournissent des détails sur les données et les composants utilisés pour générer un morceau d’interface. Voir cette conférence(en) pour plus d’informations.
Code facile à comprendre — Dans la plupart des outils actuels, les Modèles (qui représentent les données) et les Vues (qui affichent les données) sont liées pour produire ensemble des interfaces utilisateurs riches. Dans ce contexte une modifications sur une vue ou un modèle entraîne très souvent des modifications en cascade sur les autres vues qui dépendent des mêmes données. Dans une application d’une certaine taille, le graph de dépendances devient complexe et peut devenir difficile à modifier sans introduire des anomalies d’effets de bord. En React, les données circulent dans une seule direction, ce qui rend les vues plus compréhensibles. Ci-dessous, vous verrez des diagrammes représentant les deux types de flux.
Facilement testable — Un composant, dans le concept fondamental de React, prend en entrée des données et fourni en sortie une représentation du DOM sans effet de bord. Ces composants sont à la fois plus atomiques et testables, grâce au découplage des données et du rendu visuel.
Bénéfices organisationnels
Courbe d’apprentissage rapide — L’API de React est très petite. Combinée à sa syntaxe déclarative et sa subdivision en composants d’éléments d’interface, elle rend très rapide son apprentissage par les jeunes développeurs, spécialement ceux qui arrivent tout juste sur le marché du travail ou ceux qui ne sont pas familiers de l’environnement « front-end ».
Etudes de cas
Facebook Ads
« Il était très difficile d’opérer des changement sans causer des effets de bord ou des anomalies ailleurs dans l’application. Quand l’équipe l’a recodée en React, elle a détecté que leur taux de nouvelles anomalies avait drastiquement chuté. »
-Spencer Ahrens
« Quand une anomalie arrivait, il était bien plus simple de comprendre le problème et de faire un correctif précis ».
-Spencer Ahrens
Netflix
« React a dépassé nos attentes et nous a permis de construire de fabuleuses fondations sur lesquelles innover pour notre expérience Netflix ».
Hip Chat
« Le gain acquis en rapidité de développement….prouve que nous pouvons livrer de nouvelles fonctionnalités client plus rapidement avec plus de confiance sur cette plate-forme que sur n’importe quelle technologie native. »
Comments are closed, but trackbacks and pingbacks are open.