Comment appréhender l'écosystème React ?

⏲️ ~12 min de lecture

Publié le par Julien
ReactJS

Disclaimer : Le but de cet article n'est pas de vous présenter la méthode parfaite. Cependant, il s'adresse aux personnes qui ne savent plus où commencer tellement il y a de choses à voir.

Depuis que j'ai découvert React, j'en parle à qui je peux. Non pas parce que c'est à la mode, ou que je pense que React est la technologie qui va enfin durer dans le web. Mais parce que je pense que c'est une approche qui simplifie drastiquement le développement web, et que la communauté qui gravite autour est particulièrement dynamique et intéressante. Il y a des chances que cela fasse évoluer la façon dont vous concevez les applications web, y compris sur des anciennes technologies.

Je pense que si vous venez lire cet article, vous êtes déjà intéressés par React. Mais au cas où vous ne le seriez pas : React, c'est pour quoi faire ? Cet excellent article qui a été traduit pour vous sur notre blog parvient à résumer les avantages que cela peut vous apporter sans entrer dans les détails techniques.

D'un point de vue technique, React est une technologie qui transforme votre HTML en une fonction. En effet, le HTML n'existe plus mais est caché (virtualisé) grâce au javascript. Cela mériterait un voire plusieurs articles pour bien expliquer ces notions. Ce qu'il est pour l'instant est important de retenir, c'est que vous n'avez plus besoin de vous préoccuper des changements de vue dans l'application. Vous vous concentrez sur le code business de votre application, et React se charge de synchroniser l'affichage sur le navigateur.

Le plus difficile cependant est d'éviter la Javascript Fatigue : de savoir comment plonger dans l'écosystème sans se noyer.

La roadmap de votre apprentissage #

Vous voulez effectuer votre veille technologique, mais vous êtes un peu perdu. Le code que vous voyez dans tous les tutoriels ne vous semblent pas être écrit en JavaScript, et il y a plein d'outils à mettre en place pour sortir un Hello World. Au secours !

Je ne conseillerais pas de commencer par React, mais d'apprendre dans cet ordre :

  1. npm : Gère vos dépendances et de lancer des scripts pour automatiser les phases de votre projet
  2. ECMAScript6 : Le nouveau standard JavaScript pour écrire du code plus concis et plus robuste
  3. Bundlers : Transforme plusieurs fichiers en un seul pour l'incorporer directement dans votre navigateur.
  4. React : Enfin !

Pete Hunt aborde aussi le sujet, mais sous un angle différent. Pour lui, React est le point de départ. Pour moi, en commençant par des notions plus générales, vous améliorerez votre développement web de manière plus durable et vous vous forgerez des armes pour mieux comprendre les ressources qui tournent autour de React.

npm #

npm fait deux choses : gérer vos dépendances et lancer des scripts. @maxdow a fait une excellente série d'articles pour bien comprendre son fonctionnement. Cependant, en bref, voici une explication de ce que vous pouvez attendre de cet outil.

La gestion de dépendance #

La gestion de dépendance vous assure que les librairies que vous utilisez sont à jour. Si vous avez un background plus orienté back-end, c'est l'équivalent de composer pour PHP, maven pour Java, encore pip pour Python, ou encore Bundler pour Ruby. Côté front-end, vous aviez peut-être l'habitude de travailler avec bower. npm, c'est la même chose, mais c'est beaucoup plus suivi par la communauté React, et il gérera aussi toutes vos dépendances en node. Si vous n'êtes pas familiers avec bower ou un autre gestionnaire de dépendance, le plus simple est de se dire qu'il va s'occuper pour vous de télécharger vos librairies, les mettre à disposition et les mettre à jour tout seul pour éviter de se retrouver avec des outils dépassés. Pour ce faire, vous pouvez déclarer vos dépendances dans un fichier package.json. Il faut alors renseigner le nom des librairies ainsi que les numéros de version qui conviennent à votre projet. npm se chargera alors de les retrouver et de les installer pour vous.

Les scripts #

Le lanceur de script exécute les différentes tâches dont vous avez besoin dans votre projet : la compilation, le démarrage de l'application, etc. C'est aussi un excellent moyen d'unifier les projets en proposant des standards valables sur tous les projets. C'est l'équivalent des Makefile, de rake, etc. Quand vous récupérez un projet dans le Grand Internet, généralement vous aurez les commandes suivantes :

L'intérêt du lanceur de script réside surtout dans le fait que vous n'avez qu'à écrire des lignes de commandes pour automatiser l'utilisation de vos outils. En effet, la ligne de commande est en général la première interface qui est à disposition dans un outil car c'est ainsi que testent les développeurs. Cela ne vous rend pas dépendant de la création du plugin qui va bien pour votre task-runner préféré (Gulp, Grunt, etc.), même si certains ne sont pas d'accord.

Ne prenez pas peur #

En créant votre propre package.json (fichier de configuration de npm), vous apprendrez par vous même quels outils utiliser. Ne commencez pas un projet en vous disant que vous voulez avoir une suite d'outils parfaite. Faîtes à chaque fois le minimum vital pour avancer dans votre projet, puis incrémentez quand vous en ressentez le besoin.

Keith Cirkel présente dans cet article comment construire ses scripts pour qu'ils soient maintenables. Vous réaliserez que votre package.json se construit par étape et n'apparaît pas magiquement.

Un exemple minimal #

Sur ce dépôt, vous pouvez retrouver ce qui pour moi est la configuration minimale pour commencer avec React : Compilation ES6 + Bundling. Le but est toujours de pouvoir avoir quelque chose qui fonctionne puis de l'améliorer le jour où vous en avez vraiment besoin.

ECMAScript6 #

En investissant du temps sur ECMAScript6 (ES6), vous investissez sur tout votre JavaScript et non uniquement sur du React. C'est le (pas si) nouveau standard JavaScript qui sera implémenté dans un futur proche par tous les navigateurs. Ce sera donc valable pour tout code JS, et le jour où vous aurez à implémenter autre chose que du React, vous pourrez tout de même l'écrire en ES6.

Quelles priorités pour ES6 ? #

La ressource qui fait référence est celle de 2ality et notamment le livre dédié. Cependant, si la quantité d'information vous impressionne, vous pouvez aussi aller jeter un oeil sur le site de Babel qui est beaucoup plus sommaire. Pour les francophiles, il existe pas mal d'articles sur le sujet sur Putain de code !. Afin d'éviter d'avoir trop à ingurgiter d'un coup, je vous conseille :

  1. d'avoir une idée générale des fonctionnalités qui existent
  2. de prendre en main les indispensables :
  3. de prendre en main les moins indispensables :

Il existe d'autres éléments tout aussi intéressants telles que les blocks, les generators, les templates literals, les Map, ou autres fonctionnalités qui ont été ajoutées. L'idée est de savoir qu'elles existent pour être capable de les apprendre quand vous en aurez besoin : pas avant.

Pour apprendre par la pratique, vous pouvez aller sur Learn Harmony, qui vous montre les features tout en vous permettant de les éditer en live, ou sur ES6 Katas, qui propose des exercices sous forme de TDD.

Babel #

Afin de faire du ES6 dès aujourd'hui, il faut le compiler, ou le transpiler (si on veut faire genre on s'y connaît). Pour cela il y a notamment Babel qui va transformer pour vous le code en ES5 (version qui est supportée par tous les navigateurs modernes). Il peut aller plus loin que de l'ES6 et a tendance à proposer des solutions via un système de plugin pour les propositions qui sont parfois encore en draft.

Heureusement, il y a le système de preset qui regroupe les plugins et configurations, afin de ne pas avoir à tout gérer soit même. Notamment, pour ES6 il y a babel-preset-es2015 et pour React il y a babel-preset-react.

Voici la commande pour installer toutes ces dépendances avec npm :

npm install --save-dev babel-cli babel-preset-es2015 babel-preset-react

Ensuite, la commande magique qui va compiler un fichier source.js en un fichier output.js qui est en ES5 et qui est du React lisible par le navigateur (sans JSX), est :

babel source.js -o output.js --presets es2015,react

Bundlers #

Le bundler condense tout le code de votre application pour n'avoir qu'un seul fichier javascript à importer dans votre page HTML. L'intérêt majeur c'est que vous n'êtes plus contraints d'avoir un fichier obèse quand vous codez du JavaScript, où il est impossible de retrouver votre fonction. Vous pouvez faire des modules (fichiers isolés), y faire référence dans un autre fichier et tout de même être capable de les utiliser dans le navigateur sans ajouter une balise <script> à chaque fois que vous ajoutez un fichier.

Les deux outils majeurs sur le marché sont Browserify et Webpack. Le premier se contente de bundler, tandis que l'autre a tendance à faire le café en plus. Préférant avoir des outils n'ayant qu'une seule responsabilité, j'utilise Browserify.

Pour être plus performant, vous pouvez directement compiler le code ES6 au cours du bundling grâce au plugin babelify.

Ajoutez donc dans un premier temps les dépendances avec npm :

npm install --save-dev browserify babelify watchify babel-preset-es2015 babel-preset-2016

Ensuite, la nouvelle commande magique, qui va compiler un fichier source.js en un fichier output.js qui est en ES5, qui est du React lisible par le navigateur (sans JSX) et qui contient tous les modules et sous-modules nécessaires au fichier source.js, est :

browserify source.js -o output.js -t [ babelify --presets [ es2015 react ] ]

Vous pouvez ensuite importer directement votre fichier output.js dans votre code html comme vous l'auriez fait avant de mettre en place cette stack d'outils.

React #

Pas trop tôt !

Maintenant que vous avez plein de nouvelles connaissances qui vous sont déjà utiles dans tous vos autres projets, vous pouvez mettre les pieds dans le plat. C'est finalement la partie où je vais vous être le moins utile.

Le tutoriel officiel de React est vraiment une très bonne ressource. Il est d'ailleurs en ES5 pour ne pas dépayser ceux n'ayant pas encore fait le pas. Pour les plus frileux en anglais, rassurez vous, il est largement fourni en exemple de code, ce qui devrait normalement faciliter le processus. Les notions importantes sont les Components que l'on peut déclarer avec des classes ou des fonctions, les properties, le state et le JSX. Ce dernier n'est par contre que du sucre syntaxique pour avoir l'impression d'écrire du HTML : vous pouvez vous en passer. Un bon premier exercice pour faire du React serait de transformer le résultat du tutoriel officiel en ES6. Vous pouvez trouver comment faire encore une fois sur la documentation officielle.

Cependant, le plus agréable pour vous sera certainement de commencer un projet et de chercher vos réponses au fur et à mesure que les problèmes surviennent. Si vous n'êtes pas inspirés, vous pouvez partir sur des katas (petits exercices de programmation) et essayer de les adapter au web. Surtout que en prenant les choses dans l'ordre, vous pourrez :

  1. Pratiquer de l'ES6 dans un premier temps pour la partie algorithmique
  2. Implémenter une interface un peu plus cool que du console.log

Pour la suite, que faire ? #

Une fois que vous avez un peu plus de maîtrise sur le sujet, vous pouvez commencer à regarder ce qui gravite autour. Vous pouvez commencer où bon vous semble selon vos besoins. Cependant, l'ordre affiché vous fera gagner en compétence dans des domaines qui vous serviront aussi en dehors de React.

Ce n'est pas une liste exhaustive, l'écosystème étant trop riche pour prétendre tout mentionner.

Le but est de toute façon de prendre les problèmes un par un. Ne cherchez pas à tout connaître sur le bout des doigts. Il faut se contenter de connaître vaguement les solutions qui existent pour pouvoir ensuite les approfondir le jour où vous tombez face à ces problèmes.

Cet article vous a plu ? Sachez que nous recrutons !

← Accueil