Putain de code !
Blog participatif de la communauté dev

2 ans avec React, Babel, Webpack et cie

revolunet
revolunet • 2016/12/01

Depuis fin 2014, et un virage radical vers l'écosystème React, j'ai eu l'occasion de mener plusieurs projets (applis pros, mobiles/hybrides, sites web...) sur cette stack : React, Webpack, Babel, npm...

Ces deux années ont été très prolifiques dans la communauté JavaScript et React, le tooling est encore parfois exotique, mais il se stabilise et de gros progrès ont été faits sur la documentation.

Nous disposons maintenant d'un écosystème incroyablement riche et dynamique, et d'un paradigme "universel" pour construire les applications de demain, web ou natives.

React est la bibliothèque de facto pour ce type d'applications, mais on peut le remplacer assez facilement par une alternative comme Preact ou Inferno, donc toutes les connaissances acquises sur cette bibliothèque et son écosystème sont exploitables ailleurs dans la communauté JavaScript.

Voici un petit recap de cette stack magique :)

TL;DR;

React en lui-même est le plus simple à appréhender dans cette stack.

Son écosystème, riche et évolutif, l'est moins.

Babel/ES2015

Use next generation JavaScript, today.

La communauté JavaScript a massivement adopté le transpileur Babel, qui permet de coder en JavaScript version ES2015 ou supérieure puis de convertir en code compatible avec les navigateurs du marché.

Pour apprendre ES2015 et plus :

Vous pouvez très bien faire de l'ES2015 sans Babel, puisque les navigateurs modernes en supportent une grande partie, mais le support est inégal, d'où l'idée d'utiliser un transpileur comme Babel qui convertit en ES5.

Le format JSX, est devenu un standard qui peut simplifier le développement :

  • il permet de centraliser la présentation et la logique d'un composant au même endroit
  • d'utiliser une syntaxe XML-like plus rigoureuse, mais bénéfique
  • d'utiliser du JavaScript pur au lieu d'un pseudo-langage comme on trouve dans les moteurs de template habituels

Ça peut paraître déroutant au début mais ça rentre vite !

Plus d'infos sur JSX dans Introducing JSX sur la doc React.

npm

Quel que soit votre besoin, il y a sûrement déjà un module npm pour ça :)

Pour bien choisir vos packages, regardez l'activité du projet sur GitHub (commits, issues, tests, contributeurs...)

Moins de code c'est moins de bugs

Votre appli doit utiliser un maximum de code externe, qui est déjà validé, testé... séparément. Publiez un maximum de modules indépendants, en open source si possible, et utilisables hors-contexte (FIRST principle).

Ceci implique de suivre les corrections/évolutions des dits modules et d'utiliser le semantic versioning à bon escient.

NB: Dans sa lancée open-source, Facebook vient de publier une alternative au CLI npm : yarn plus rapide, fiable et sécurisé.

Webpack

Le saviez-vous ?

Webpack a coûté aux devs 2.312.533 heures en 2015. Par jour.

Un grand pouvoir implique de grandes responsabilités

Webpack est puissant, il remplace browserify ou vos multiples tâches grunt, gulp, blurp... qui géraient votre pipeline d'assets.

À partir du point d'entrée de votre application uniquement, par exemple index.js, il est capable de servir et bundler toutes les dépendances (code, images, CSS...) de votre projet automatiquement, grâce aux nombreux loaders.

Pour cela, les assets doivent être correctement déclarés dans le code :

// require some CSS
import styles from "./styles.css";
const ex1 = <div className={styles.title}>title</div>;

// require an image
import logo from "./logo.png";
const img = <img src={logo} />;

Et la célèbre config de webpack permet de tuner votre build à tous les niveaux.

Plus de détails sur Webpack sur les articles Putain de code ! dédiés.

CSS

Le saviez-vous ?

Le CSS est un sport de haut niveau.

CSS in 2016

Selon la complexité de vos designs, le CSS peut être ce qui prend le plus de temps, entre l'intégration, le responsive, et les animations.

Et la qualité et la modularité du CSS est essentielle pour la maintenabilité des applications.

Pour créer des composants réutilisables nous pouvons maintenant utiliser les CSS modules, qui ont l'avantage d'être du CSS classique, mais d'être scopés aux composants, et, accessibles depuis le JavaScript (plus de CSS global). Et le CSS in JS peut compléter/remplacer si besoin pour les cas les plus dynamiques.

A défaut, vous pouvez toujours utiliser du CSS global si vous respectez scrupuleusement les conventions BEM. Découvrez d'autres articles dédiés au CSS sur putaindecode.io.

Il existe plusieurs bibliothèques de composants UI assez fournies pour React :

Et voici un article recensant des librairies de composants React open-source.

React : Learn once, run everywhere

Plus qu'une bibliothèque ou un framework, React est un paradigme de programmation d'interfaces utilisateurs, qui permet d'adresser de nombreuses plateformes, avec toujours du code React "standard".

Théoriquement, une application codée en React est capable de produire n'importe quel output, par exemple du HTML pour le web, du natif avec react-native, du WebGL, du terminal, de la musique...

Et pour toutes ces targets, une convention générale s'applique :

ui = f(state)

À tout moment, à partir un state donné, une application ou un composant React est capable de se "render" correctement dans l'état désiré.

Le fonctionnement interne est donc plutôt straightforward, les composants se passent simplement des props (valeurs et callbacks) de parent à enfant, et certains composants peuvent avoir un state local qui, une fois modifié, déclenchera un re-render du composant et de ses descendants.

Les composants doivent être simples, focus, composables.

<Toolbar>
  <Icon name="success" onClick={onClickSuccess} />
  <Menu>
    <Icon name="warning" onClick={onClickWarning} />
    <Icon name="error" onClick={onClickError} />
  </Menu>
</Toolbar>

Au niveau performances, React ne fait pas de miracles malgré le virtual-dom;

À chaque fois qu'un composant reçoit de nouvelles props ou modifie son state, React appelle la méthode render de ce dernier ainsi que de ces descendants. Même s'il ne modifie pas le DOM, le fait de comparer les deux arbres retournés par render peut s'avérer coûteux si votre composant présente beaucoup de contenu. Heureusement, React permet aux développeurs d'intervenir avant le render et l'annuler s'il n'est pas nécessaire avec shouldComponentUpdate.

Plus d'articles sur React sur putain de code

Redux

React standard VS redux architecture (from css-tricks.com)

Pour les applications plus complexes, redux va gèrer l'état de l'application de manière globale et externe aux composants, standardiser les évènements (actions), gérer les re-renders, et permettre d'aller vers des interactions plus avancées.

Idéalement, tous vos composants sont dumbs et votre gestionnaire de state (par exemple redux) va gérer l'intelligence de l'application et les re-renders de manière découplée et optimisée.

Plus d'articles sur redux sur Putain de code ! : http://putaindecode.io/fr/tag/redux/

Tips

Storybook

Utiliser un outil comme storybook permet de travailler sur les composants hors-contexte, de pouvoir les visualiser dans différents états pendant que vous travaillez... et ainsi d'avoir une base saine de composants réutilisables.

Votre bibliothèque de composants peut même être un projet à part, que vous importerez dans vos différentes applications. Par exemple, Cloudflare publie séparément tous ses composants UI réutilisables.

Composition

Utilisez au maximum la composition de composants React pour garder des composants simples et réutilisables.

Plus de détails sur le pattern "higher order components"

nvm

Utilisez Node Version Manager aka nvm qui permet de gérer plusieurs environnements Node.js sur une même machine. Indispensable pour travailler sur plusieurs projets.

Learning curve

Concentrez-vous sur une techno/outil à la fois et n'utilisez pas ce dont vous n'avez pas encore besoin.

Make it work, make it right, make it fast.

Comment démarrer ?

Pour créer une application, le plus simple est d'utiliser create-react-app.

Si c'est pour créer un composant React que vous allez publier, alors nwb est plus adapté.

Pour créer un site web comme putaindecode.io vous pouvez utiliser un générateur de site statique comme phenomic.io.

Pourquoi c'est si complexe ?

Cette stack, qui peut paraître lourde en outillage, permet de créer des apps riches, performantes, testables, évolutives, multi-plateformes.

Une fois l'outillage en place et assimilé, la productivité est excellente (ES2015, npm, tests, developer experience, dev/build/deploy...).

Dans la plupart des cas, les boilerplates cités ci-dessus vous fournissent tout le nécessaire.

Must read and watch

Liens

Quelques pépites

Vous avez aimé cet article?
Le partager sur Twitter
← Articles
Ne rien rater
Sur les réseaux
Twitter
Facebook
Facebook
Apple Podcast
Soundcloud
Sur le chat
Discord