Alors comme ça vous voulez développer des apps avec ReactJS ?

le

Ca commence à bien faire, je vois et j’entend partout des discours complètement délirant sur la facilité d’accès de React et de ses concepts, et sur sa courbe d’apprentissage presque horizontale.

Et ben le délire collectif, ça suffit.  Il est temps de rétablir la vérité.

C’est tellement simple qu’on ne peut pas faire plus compliqué

Si, sur le papier, c’est effectivement super simple d’avoir un Hello World dans un H1, toute la hype autour de cette « facilité d’accès » me rappelle étrangement celle qu’on a connu à la sortie d’AngularJS, il y a un million d’années. Mais oui, souvenez-vous de l’effet wahou lorsque vous avez découvert que c’était super simple de binder un model.

Vous tapiez « prout » ou « pouet » dans un input, et la valeur du champ était automatiquement bind à un span ! Ca avait l’air tellement alléchant. Tout le monde a trouvé ça absolument génial à l’époque, moi le premier.

Et puis vous découvriez les directives, le cycle digest, et vous vous sentiez un peu trahis.

Avec React, c’est sûr, c’est très simple de rendre une page statique en utilisant JSX (et même sans JSX, en fait). C’est du javascript, on a l’impression qu’on a tout compris, c’est trop génial. Nous voilà bercé par une douce lueur, la vérité ultime, on sait tout, on voit tout.

Mais ôtez-moi d’un doute, vous en écrivez beaucoup, des apps React qui n’affiche que du contenu statique ? Vraiment ?

Une liste non exhaustive mais réaliste

Alors pour éclairer un peu plus la lanterne des nouveaux venus dans l’univers React, voici une liste relativement exhaustive de ce à quoi vous allez être confronté un jour ou l’autre.

Ne cherchez pas, vous n’y couperez pas.

Et comme on est samedi, et que mes gosses attendent après moi pour sortir dépenser un million d’euros chez Cultura, même pas en rêve je mettrai les urls !

React

  • ReactJS
  • React Router
  • Flow
  • PropTypes
  • StoryBook
  • Reactotron
  • Devtools
  • Patterns React (HOC, Render props, Presentational component, Containers…)
  • Formsy

Redux

  • Redux
  • React Router Redux
  • Reselect
  • Redux Saga
  • Normalizr
  • Redux Thunk
  • Immutable
  • Redux Persist
  • Redux Form
  • Devtools

Tests

  • Jest
  • Enzyme
  • Jest Snapshots
  • Cypress
  • Selenium
  • Nightwatch

Mais aussi…

  • ESNext
  • Babel
  • Webpack
  • npm
  • yarn
  • Programmation fonctionnelle
  • Async / Await
  • Generators
  • Axios
  • Fetch
  • Mobx (pour au moins comprendre pourquoi c’est une très bonne alternative à Redux dans certains cas)

Vous êtes encore là ?

Je ne parle pas des connaissances de base autour de la maitrise d’outils comme la console Chrome / Canary, ni des différents concepts qui régissent la structure d’un projet React, et encore moins de nouveaux concepts qui fleurissent tous les jours, notamment de nouveaux patterns comme Fragments, Portails, Error Boundaries, la nouvelle API pour le context

Donc oui, React et son éco-système, c’est juste fantastique.

Mais non, ce n’est pas aussi simple qu’on voudrait vous le faire croire. Ca demande beaucoup d’investissement en temps, beaucoup de noeuds dans le cerveau parfois pour comprendre certains concepts, et pas mal de gymnastique mentale pour accepter le fait que les patterns que vous utilisez ne seront sans doute plus d’actualité dans quelques temps (mais ça, tout bon dev JS y est habitué)

So what ?

A mon sens, c’est impossible d’apprendre chacun de ces points sans entrer dans un projet réel. La seule façon d’apprendre et de maitriser tous les concepts dans l’éco-système React, c’est d’avoir la chance d’être dans un projet, entouré d’une équipe avec laquelle on va pouvoir débattre, creuser, itérer.

Mais si vous voulez quand même vous lancer, ou si vous n’avez pas la chance de trouver un job en rapport avec vos désirs, je vous recommande quand même de ne pas essayer d’assimiler tous ces concepts en même temps.

Vous avez besoin de React et de Redux pour débuter, mais pas nécessairement de React Router.

C’est difficile de faire de la TDD avec React, donc vous pourrez très bien écrire vos tests unitaires / d’intégration / fonctionnels ultérieurement.

Utiliser Flow, c’est intéressant, mais pour commencer, les PropTypes sont déjà très bien.

Comprendre qu’on ne doit pas muter le state, c’est indispensable, mais un spread operator ou un Object.assign suffisent avant de vouloir se cogner la tête contre un mur en utilisant Immutable.

Rajoutez progressivement de la complexité, mais pas avant d’avoir saisi de bout en bout ce que vous avez déjà implémenté.

Et si vous ne savez pas, demander à Dan.

Lui, il sait.

 

 

Un commentaire Ajoutez le votre

  1. Pierre dit :

    Hahaha ça fait du bien de trouver quelqu’un qui le reconnait enfin !

    Etant dev web depuis un an sur une stack Rails/React/RN, ça m’a fait sourire de me rappeler comment j’en ait chié au début (même si je m’arrache bien les cheveux encore maintenant parfois :s )

    En vrai, je pense que le monde du développement est bourré de personnes qui veulent à tout prix vendre des technos. Et du coup oui, forcément, le « grand public » à une image très édulcorée de la réalité d’un développement React et de tous les challenges qui viennent avec. .

    En tout cas ça fait plaisir de voir qu’on est pas seul à trouver l’écosystème React très
    (trop ?) complexe.
    Après, ça reste encore un des meilleurs outils sur le marché (jusqu’à preuve du contraire), rien que pour le fait de pouvoir cibler les mobiles avec RN.
    Maintenant, React commence déjà tout doucement à être remis en question par Vue ou même Blazor de $soft qui à l’air ma foi très prometteur ! Mais bon, je diverge..

    Sinon, j’ai bien rit aussi en voyant la tête de ce bon vieux Dan haha

    Bref,
    Merci pour ton article,
    Et peut être à la prochaine !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *