Psst! C’est pourquoi ReasonReact est le meilleur moyen d’écrire React

Utilisez-vous React pour créer des interfaces utilisateur? Et bien moi aussi. Et maintenant, vous comprendrez pourquoi vous devriez écrire vos applications React à l’aide de ReasonML.

React est un moyen plutôt sympa d'écrire des interfaces utilisateur. Mais pourrions-nous le rendre encore plus frais? Mieux?

Pour l'améliorer, nous devons d'abord identifier ses problèmes. Alors, quel est le problème principal de React en tant que bibliothèque JavaScript?

React n’a pas été initialement développé pour JavaScript

Si vous examinez de plus près React, vous constaterez que certains de ses principes fondamentaux sont étrangers à JavaScript. Parlons de l’immuabilité, des principes de programmation fonctionnelle et du système de types en particulier.

L’immuabilité est l’un des principes fondamentaux de React. Vous ne souhaitez pas modifier vos accessoires ou votre état, car vous risqueriez d’avoir des conséquences imprévisibles. En JavaScript, l’immuabilité n’est pas prête à l’emploi. Nous maintenons nos structures de données immuables par convention, ou nous utilisons des bibliothèques telles que immuableJS pour y parvenir.

React est basé sur les principes de la programmation fonctionnelle car ses applications sont des compositions de fonctions. Bien que JavaScript présente certaines de ces fonctionnalités, telles que des fonctions de première classe, il ne s’agit pas d’un langage de programmation fonctionnel. Lorsque nous voulons écrire du code déclaratif intéressant, nous devons utiliser des bibliothèques externes telles que Lodash / fp ou Ramda.

Alors, qu’en est-il du système de types? Dans React, nous avons eu PropTypes. Nous les avons utilisés pour imiter les types en JavaScript car il ne s’agit pas d’un langage à typage statique. Pour tirer parti du typage statique avancé, nous devons à nouveau utiliser des dépendances externes, telles que Flow et TypeScript.

Réaction et comparaison JavaScript

Comme vous pouvez le constater, JavaScript n’est pas compatible avec les principes fondamentaux de React.

Existe-t-il un autre langage de programmation plus compatible avec React que JavaScript?

Heureusement, nous avons ReasonML.

En Reason, nous obtenons l'immuabilité hors de la boîte. Comme il est basé sur OCaml, le langage de programmation fonctionnel, nous avons également intégré de telles fonctionnalités dans le langage lui-même. Reason nous fournit également un système de types fort.

Comparaison des réactions, JavaScript et Reason

La raison est compatible avec les principes fondamentaux de React.

Raison

Ce n’est pas une nouvelle langue. C’est une syntaxe et une chaîne d’outils alternative à JavaScript pour OCaml, un langage de programmation fonctionnel utilisé depuis plus de 20 ans. Reason a été créé par les développeurs Facebook qui utilisaient déjà OCaml dans leurs projets (Flow, Infer).

Reason, avec sa syntaxe C-like, rend OCaml accessible aux personnes issues de langages courants tels que JavaScript ou Java. Il vous fournit une meilleure documentation (par rapport à OCaml) et une communauté croissante autour de lui. De plus, cela facilite l'intégration avec votre base de code JavaScript existante.

OCaml sert de langage de support pour Reason. Reason a la même sémantique qu'OCaml - seule la syntaxe est différente. Cela signifie que vous pouvez écrire OCaml à l’aide de la syntaxe de type JavaScript de Reason. De ce fait, vous pouvez tirer parti des superbes fonctionnalités d’OCaml, telles que son système de types fort et sa correspondance de motifs.

Voyons un exemple de la syntaxe de Reason.

laisser fizzbuzz = (i) =>
  commutateur (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
pour (i en 1 à 100) {
  Js.log (fizzbuzz (i))
};

Bien que nous utilisions le filtrage par motif dans cet exemple, il reste assez similaire à JavaScript, non?

Cependant, le seul langage utilisable par les navigateurs reste JavaScript, ce qui signifie que nous devons le compiler.

BuckleScript

Une des fonctionnalités puissantes de Reason est le compilateur BuckleScript, qui prend votre code Reason et le compile en JavaScript lisible et performant avec une grande élimination du code mort. Vous apprécierez la lisibilité si vous travaillez dans une équipe où tout le monde n'est pas familiarisé avec Reason, car ils pourront toujours lire le code JavaScript compilé.

La similarité avec JavaScript est si étroite qu’une partie du code de Reason n’a pas du tout besoin d’être modifiée par le compilateur. Ainsi, vous pouvez profiter des avantages du langage statiquement typé sans aucune modification du code.

ajoutons = (a, b) => a + b;
ajouter (6, 9);

Ce code est valide dans Reason et JavaScript.

BuckleScript est livré avec quatre bibliothèques: la bibliothèque standard appelée Belt (la bibliothèque standard OCaml est insuffisante) et les liaisons à JavaScript, Node.js et, API DOM.

BuckleScript étant basé sur le compilateur OCaml, vous obtiendrez une compilation extrêmement rapide, beaucoup plus rapide que Babel et plusieurs fois plus rapide que TypeScript.

Compilons notre algorithme FizzBuzz écrit dans Reason to JavaScript.

La compilation du code de Reason en JavaScript via BuckleScript

Comme vous pouvez le constater, le code JavaScript résultant est assez lisible. Il semble que cela ait été écrit par un développeur JavaScript.

Non seulement Reason est compilé en JavaScript, mais également en natif et en bytecode. Ainsi, vous pouvez écrire une seule application en utilisant la syntaxe Reason et pouvoir l’exécuter dans le navigateur sur les téléphones MacOS, Android et iOS. Il existe un jeu Gravitron de Jared Forsyth qui est écrit dans Reason et qui peut être exécuté sur toutes les plates-formes que je viens de mentionner.

JavaScript interop

BuckleScript nous fournit également une interopérabilité de JavaScript. Non seulement vous pouvez coller votre code JavaScript de travail dans votre base de code Reason, mais votre code Reason peut également interagir avec celui-ci en JavaScript. Cela signifie que vous pouvez facilement intégrer du code Reason à votre base de code JavaScript existante. De plus, vous pouvez utiliser tous les packages JavaScript de l'écosystème NPM dans votre code Reason. Par exemple, vous pouvez combiner Flow, TypeScript et Reason dans un même projet.

Cependant, ce n’est pas si simple. Pour utiliser des bibliothèques JavaScript ou du code dans Reason, vous devez d'abord le transférer dans Reason via les liaisons Reason. En d’autres termes, vous avez besoin de types pour votre code JavaScript non typé afin de pouvoir tirer parti du système de frappe puissant de Reason.

Chaque fois que vous devez utiliser une bibliothèque JavaScript dans votre code Reason, vérifiez si la bibliothèque a déjà été portée sur Reason en parcourant la base de données Reason Package Index (Redex). C’est un site Web qui regroupe différentes bibliothèques et outils écrits dans des bibliothèques Reason et JavaScript avec des liaisons Reason. Si vous y avez trouvé votre bibliothèque, vous pouvez simplement l'installer en tant que dépendance et l'utiliser dans votre application Reason.

Toutefois, si vous ne trouvez pas votre bibliothèque, vous devrez écrire les liaisons Reason vous-même. Si vous ne faites que commencer avec Reason, gardez à l’esprit que l’écriture de liaisons n’est pas une chose à laquelle vous voulez commencer, car c’est l’une des tâches les plus difficiles de l’écosystème de Reason.

Heureusement, j’écris juste un article sur la rédaction de liaisons Reason, alors restez à l’écoute!

Lorsque vous avez besoin de certaines fonctionnalités d’une bibliothèque JavaScript, vous n’avez pas besoin d’écrire les liaisons Reason pour une bibliothèque dans son ensemble. Vous ne pouvez le faire que pour les fonctions ou les composants que vous devez utiliser.

ReasonReact

Cet article concerne l’écriture de React in Reason, que vous pouvez effectuer grâce à la bibliothèque ReasonReact.

Vous pensez peut-être «Je ne sais toujours pas pourquoi je devrais utiliser React in Reason».

Nous avons déjà mentionné la raison principale de le faire - Reason est plus compatible avec React que JavaScript. Pourquoi est-ce plus compatible? Parce que React a été développé pour Reason, ou plus précisément pour OCaml.

Road to ReasonReact

Le premier prototype de React a été développé par Facebook et écrit en Standard Meta Language (StandardML), cousin d’OCaml. Ensuite, il a été déplacé vers OCaml. React a également été transcrit en JavaScript.

C’est parce que tout le Web utilisait JavaScript et qu’il n’était probablement pas intelligent de dire: «Nous allons maintenant créer une interface utilisateur dans OCaml». Et cela a fonctionné - React in JavaScript a été largement adopté.

Nous nous sommes donc habitués à réagir en tant que bibliothèque JavaScript. Réagissez avec d'autres bibliothèques et langages - Elm, Redux, Recompose, Ramda et PureScript - a rendu populaire la programmation fonctionnelle en JavaScript. Et avec l'essor de Flow et de TypeScript, le typage statique est également devenu populaire. En conséquence, le paradigme de la programmation fonctionnelle avec des types statiques est devenu courant dans le monde du front-end.

En 2016, Bloomberg a développé BuckleScript, le compilateur qui transforme OCaml en JavaScript, à code source ouvert. Cela leur a permis d'écrire du code sécurisé sur le front-end en utilisant le système de types fort d'OCaml. Ils ont pris le compilateur OCaml optimisé et extrêmement rapide et ont échangé son code générant du back-end en un code JavaScript.

La popularité de la programmation fonctionnelle associée à la sortie de BuckleScript a créé le climat idéal pour permettre à Facebook de revenir à l’idée originale de React, initialement écrite en langage ML.

ReasonReact

Ils ont pris la sémantique OCaml et la syntaxe JavaScript pour créer Reason. Ils ont également créé le wrapper Reason autour de React - bibliothèque ReasonReact - avec des fonctionnalités supplémentaires telles que l’encapsulation des principes Redux dans des composants avec état. Ce faisant, ils ont rendu React à ses racines originales.

Le pouvoir de réagir dans la raison

Lorsque React est entré dans JavaScript, nous avons ajusté JavaScript pour répondre aux besoins de React en introduisant diverses bibliothèques et outils. Cela signifiait également plus de dépendances pour nos projets. Sans oublier que ces bibliothèques sont encore en développement et que des changements de dernière génération sont introduits régulièrement. Vous devez donc maintenir ces dépendances avec soin dans vos projets.

Cela a ajouté une autre couche de complexité au développement JavaScript.

Votre application React typique aura au moins ces dépendances:

  • typage statique - Flow / TypeScript
  • immutabilité - immuableJS
  • routage - ReactRouter
  • mise en forme - plus joli
  • linteuses - ESLint
  • fonction d'assistance - Ramda / Lodash

Voyons maintenant que JavaScript réagit pour ReasonReact.

Avons-nous encore besoin de toutes ces dépendances?

  • typage statique - intégré
  • immutabilité - intégrée
  • routage - intégré
  • mise en forme - intégrée
  • linting - intégré
  • fonctions d'assistance - intégrées

Vous pouvez en apprendre plus sur ces fonctionnalités intégrées dans mon autre article.

Dans l’application ReasonReact, vous n’avez pas besoin de ces dépendances, ni de nombreuses autres, car de nombreuses fonctionnalités essentielles facilitant votre développement sont déjà incluses dans le langage lui-même. Ainsi, la maintenance de vos colis deviendra plus facile et votre complexité ne s’accroît pas avec le temps.

C'est grâce à l'OCaml, qui a plus de 20 ans. C’est un langage mûr avec tous ses principes fondamentaux en place et stable.

Emballer

Au début, les créateurs de Reason avaient deux options. Prendre JavaScript et l'améliorer en quelque sorte. En faisant cela, ils auraient également besoin de faire face à ses fardeaux historiques.

Cependant, ils ont emprunté un chemin différent. Ils ont pris OCaml comme un langage mûri offrant d'excellentes performances et l'ont modifié pour qu'il ressemble à JavaScript.

React est également basé sur les principes d’OCaml. C’est pourquoi vous obtiendrez une bien meilleure expérience de développeur lorsque vous l’utiliserez avec Reason. React in Reason représente un moyen plus sûr de créer des composants React, car le système de type fort vous aide et vous n'avez pas à traiter la plupart des problèmes liés à JavaScript (hérités).

Et après?

Si vous venez du monde de JavaScript, il vous sera plus facile de démarrer avec Reason, en raison de la similarité de sa syntaxe avec JavaScript. Si vous avez programmé dans React, ce sera encore plus simple car vous pouvez utiliser toutes vos connaissances de React car ReasonReact utilise le même modèle mental que React et un processus très similaire. Cela signifie que vous n’avez pas besoin de recommencer à zéro. Vous apprendrez la raison à mesure que vous vous développez.

La meilleure façon de commencer à utiliser Reason dans vos projets est de le faire progressivement. J'ai déjà mentionné que vous pouvez utiliser le code Reason et l'utiliser en JavaScript, et inversement. Vous pouvez faire la même chose avec ReasonReact. Vous prenez votre composant ReasonReact et vous l'utilisez dans votre application React JavaScript, et inversement.

Cette approche progressive a été choisie par les développeurs Facebook qui utilisent abondamment Reason dans le développement de l'application Facebook Messenger.

Si vous souhaitez créer une application utilisant React in Reason et apprendre les bases de Reason de manière pratique, consultez mon autre article dans lequel nous construirons un jeu de Tic Tac Toe ensemble.

Si vous avez des questions, des critiques, des observations ou des conseils d'amélioration, n'hésitez pas à écrire un commentaire ci-dessous ou à me joindre via Twitter ou mon blog.