Développement d'applications React à l'aide de ReasonReact

Utilisez-vous React pour créer des interfaces utilisateur? L'auteur du matériel, dont nous publions la traduction, dit qu'il travaille également avec React. Ici, il veut expliquer pourquoi ReasonML mérite d'être écrit pour les applications React.



React est un très bon outil de développement d'interface. Pouvez-vous le rendre encore meilleur? Afin d'améliorer votre travail avec React, vous devez d'abord comprendre ses principaux problèmes. En particulier, un problème dont les origines résident dans le fait que React est une bibliothèque JavaScript.

React et JavaScript

Si vous regardez attentivement React, vous remarquerez que certains des principes sous-jacents à cette bibliothèque sont étrangers à JavaScript. En particulier, nous parlons d'immuabilité, des principes de programmation fonctionnelle et du système de types.

L'immunité est l'un des principes de base de React. Des mutations dans les propriétés des composants ou l'état d'une application sont hautement indésirables, car cela peut entraîner des conséquences imprévisibles. JavaScript n'a aucun mécanisme standard pour fournir l'immunité. Les structures de données sont rendues immuables soit en adhérant à certaines conventions, soit en utilisant des bibliothèques comme immutable-js .

La bibliothèque React est basée sur les principes de la programmation fonctionnelle, car les applications React sont des compositions de fonctions. Bien que JavaScript possède certaines fonctionnalités de programmation fonctionnelles, telles que des fonctions de première classe, ce n'est pas un langage de programmation fonctionnel. Si vous devez écrire un bon code déclaratif en JavaScript, vous devez recourir à des bibliothèques tierces comme Lodash / fp ou Ramda .

Quel est le problème avec le système de type? React a le concept de PropTypes . Il est utilisé pour simuler des types en JavaScript, car ce langage lui-même n'est pas typé statiquement. Afin de tirer parti de la saisie statique dans JS, encore une fois, vous devez recourir à des outils tiers tels que Flow et TypeScript .


Comparer React et JavaScript

Comme vous pouvez le voir, JavaScript n'est pas compatible avec les principes de base de React.

Existe-t-il un langage de programmation meilleur que JavaScript compatible avec React?
Vous pouvez donner une réponse positive à cette question. Cette langue est ReasonML .

La raison met en œuvre l'immuabilité. Puisqu'il est basé sur OCaml , un langage de programmation fonctionnel, les fonctionnalités correspondantes sont également intégrées à Reason. Ce langage possède également son propre système de type adapté à React.


Comparez React, JavaScript et Reason

Il s'avère que Reason est compatible avec les principes de base de React.

Raison

La raison n'est pas une nouvelle langue. Il s'agit d'une syntaxe alternative et d'une boîte à outils de type JavaScript pour OCaml, un langage de programmation fonctionnel qui existe depuis plus de 20 ans. Reason a été créé par des développeurs de Facebook qui utilisaient déjà OCaml dans leurs projets ( Flow , Infer ).


OCaml

La syntaxe de type C de Reason met OCaml à la disposition des programmeurs qui connaissent les langages courants comme JavaScript ou Java. Reason donne au développeur une meilleure documentation qu'OCaml, et une communauté de passionnés en constante croissance s'est formée autour de lui. De plus, ce qui est écrit dans Reason est facile à intégrer aux projets JS existants.


Raison

Le cœur de Reason est OCaml. Reason a la même sémantique que OCaml, seule la syntaxe est différente. Cela signifie que Reason permet d'écrire du code OCaml en utilisant une syntaxe de type JavaScript. En conséquence, le programmeur a des fonctionnalités OCaml aussi merveilleuses qu'un système de type strict et un mécanisme de correspondance de modèle.

Jetez un œil à l'extrait de code Reason pour vous familiariser avec sa syntaxe.

let fizzbuzz = (i) =>  switch (i mod 3, i mod 5) {  | (0, 0) => "FizzBuzz"  | (0, _) => "Fizz"  | (_, 0) => "Buzz"  | _ => string_of_int(i)  }; for (i in 1 to 100) {  Js.log(fizzbuzz(i)) }; 

Bien que ce modèle utilise un mécanisme de correspondance de modèle, il reste très similaire à JavaScript.

La seule langue qui fonctionne dans les navigateurs est JavaScript, donc, pour écrire pour les navigateurs dans n'importe quelle langue, nous devons le compiler en JavaScript.

BuckleScript

L'une des fonctionnalités les plus intéressantes de Reason peut être appelée le compilateur BuckleScript, qui prend le code écrit en Reason et le convertit en code JS lisible et productif, en plus de bien le supprimer des constructions inutilisées.


BuckleScript

La lisibilité des résultats de BuckleScript sera utile si vous travaillez dans une équipe où tout le monde ne connaît pas Reason. Ces personnes, au moins, pourront lire le code JS résultant.

Le code motif est parfois tellement similaire au code JS que le compilateur n'a pas du tout besoin de le convertir. Avec cet état de fait, vous pouvez profiter des avantages de la frappe statique de Reason et écrire du code qui semble être écrit en JavaScript.

Voici un exemple de code qui fonctionnera à la fois dans Reason et JavaScript:

 let add = (a, b) => a + b; add(6, 9); 

BuckleScript est livré avec quatre bibliothèques. Il s'agit d'une bibliothèque standard appelée Belt ( la bibliothèque standard OCaml ne suffit pas ici) et des liaisons pour JavaScript, Node.js et l'API DOM.

Étant donné que BuckleScript est basé sur le compilateur OCaml, la compilation est très rapide - beaucoup plus rapide que Babel et plusieurs fois plus rapide que TypeScript.

En utilisant BuckleScript, nous compilons le fragment de code Reason ci-dessus contenant la fonction fizzbuzz() en JavaScript.


Compilation du code motif en JavaScript à l'aide de BuckleScript

Comme vous pouvez le voir, le code JS s'est avéré assez lisible. Il semble que ce soit écrit par un homme.

Les programmes écrits en Reason sont compilés non seulement en JavaScript, mais aussi en code natif et en code octet. Par conséquent, par exemple, vous pouvez écrire une application sur Reason et l'exécuter dans un navigateur, sur MacOS, sur des smartphones fonctionnant sous Android et iOS. Il y a un jeu Gravitron écrit par Jared Forsyth sur Reason. Il peut être exécuté sur toutes les plates-formes ci-dessus.

Organisation de l'interaction avec JavaScript

BuckleScript permet d'organiser l' interaction de Reason et JavaScript. Cela signifie non seulement la possibilité d'utiliser du code JS fonctionnel dans la base de code Reason, mais également la possibilité d'interaction du code écrit en Reason avec ce code JavaScript. Par conséquent, le code écrit dans Reason est facile à intégrer dans les projets JS existants. De plus, dans le code Reason, vous pouvez utiliser des packages JavaScript de NPM. Par exemple, vous pouvez créer un projet qui partage Flow, TypeScript et Reason.

Cependant, tout n'est pas si simple. Pour utiliser du code JavaScript ou des bibliothèques dans Reason, vous devez d'abord les porter à l'aide des liaisons Reason. En d'autres termes, pour utiliser le système de type Reason strict, nous avons besoin de types de code JavaScript standard.

Si vous devez utiliser une bibliothèque JavaScript dans le code Reason, vous devez d'abord vous tourner vers l'index du package Reason ( Redex ) et savoir si cette bibliothèque a déjà été portée sur Reason. Le projet Redex est un catalogue de bibliothèques et d'outils écrits dans des bibliothèques Reason et JavaScript avec des liaisons Reason. Si vous avez réussi à trouver la bibliothèque nécessaire dans ce répertoire, vous pouvez l'installer en tant que dépendance et l'utiliser dans une application Reason.

Si vous ne trouvez pas la bibliothèque souhaitée, vous devrez écrire les classeurs vous-même. Si vous débutez avec Reason, gardez à l'esprit que l'écriture de classeurs n'est pas la tâche d'un débutant. C'est l'une des tâches les plus difficiles à résoudre pour ceux qui programment sur Reason. En fait, c'est un sujet pour un article séparé.

Si vous n'avez besoin que de certaines fonctionnalités limitées d'une bibliothèque JavaScript, vous n'avez pas besoin d'écrire des liaisons pour l'ensemble de cette bibliothèque. Cela ne peut être fait que pour les fonctions ou composants nécessaires.

ReasonReact

Au début de l'article, nous avons expliqué comment il est dédié au développement d'applications React à l'aide de Reason. Vous pouvez le faire grâce à la bibliothèque ReasonReact .

Peut-être que vous pensez maintenant: "Je ne comprends toujours pas pourquoi il est nécessaire d'écrire des applications React dans Reason." Cependant, nous avons déjà discuté de la raison principale de l'utilisation du bundle React and Reason, à savoir que React est mieux compatible avec Reason qu'avec JavaScript. Pourquoi en est-il ainsi? Le fait est que React a été créé sur la base de Reason, ou plutôt sur OCaml.

Chemin vers la raison

Le premier prototype React a été développé par Facebook et a été écrit dans le standard Meta Language ( StandardML ), dans un langage qui est un parent d'OCaml. React a ensuite été transféré vers OCaml, et React a également été porté sur JavaScript. Cela a été fait en raison du fait que tout le Web utilise JavaScript et il serait probablement déraisonnable de faire des déclarations comme: «Maintenant, nous allons écrire l'interface utilisateur sur OCaml». La traduction de React en JavaScript a porté ses fruits et a conduit à une large diffusion de cette bibliothèque.

En conséquence, tout le monde est habitué à percevoir React comme une bibliothèque JS. React, ainsi que d'autres bibliothèques et langages tels que Elm , Redux , Recompose , Ramda et PureScript , ont contribué à populariser le style fonctionnel de programmation en JavaScript. Et grâce à la diffusion de Flow et de TypeScript en JavaScript, la frappe statique est également devenue populaire. En conséquence, le paradigme de la programmation fonctionnelle utilisant des types statiques est devenu dominant dans le monde du développement frontal.

En 2006, Bloomberg a créé et transféré dans la catégorie des projets open source le compilateur BuckleScript, qui convertit OCaml en JavaScript. Cela leur a permis d'écrire du code frontal meilleur et plus sécurisé en utilisant le système de type OCaml strict. Ils ont pris le compilateur OCaml optimisé et très rapide et l'ont fait générer du code JavaScript.

La popularité de la programmation fonctionnelle et la sortie de BuckleScript ont créé le climat idéal qui a permis à Facebook de revenir à l'idée originale de React - une bibliothèque qui était à l'origine écrite en StandardML.


ReasonReact

Ils ont mélangé la sémantique OCaml avec la syntaxe JavaScript et créé Reason. En outre, ils ont créé un wrapper Reason pour React, présenté sous la forme d'une bibliothèque ReasonReact, qui a des fonctions supplémentaires, telles que l'encapsulation des principes Redux dans des composants avec état. Cela fait, ils ont ramené React à ses origines .

A propos des fonctionnalités de React dans Reason

Lorsque la bibliothèque React a été traduite en JavaScript, les capacités du langage ont été personnalisées en fonction des besoins de React en créant diverses bibliothèques et outils. Cette approche, en particulier, implique la nécessité d'un grand nombre de dépendances pour les projets. Nous ne dirons pas que de telles bibliothèques évoluent constamment et que des changements y surviennent régulièrement, rendant leurs nouvelles versions incompatibles avec les anciennes. En conséquence, le développeur doit être très sérieux et prudent quant à la maintenance des bibliothèques dont dépendent ses projets.

Cela ajoute une couche supplémentaire de complexité au développement JavaScript. Par exemple, une application React typique contient généralement au moins les dépendances visibles dans la figure suivante.


Dépendances typiques des applications React

Voici les tâches que ces dépendances résolvent:

• Typage statique - Flow / TypeScript.
• Immunité - ImmutableJS.
• Routage - ReactRouter.
• Formatage du code - plus joli.
• Linting - ESLint.
• Fonctions auxiliaires - Ramda / Lodash.

Nous allons maintenant utiliser, au lieu de React pour JavaScript, la bibliothèque ReasonReact. Avons-nous besoin, avec cette approche, de toutes ces dépendances?


Passer à ReasonReact

Après avoir analysé la même liste de tâches qui ont été précédemment résolues à l'aide d'outils supplémentaires, nous constatons que toutes peuvent être résolues à l'aide des outils ReasonReact intégrés. Vous pouvez en savoir plus à leur sujet ici .

Dans une application préparée par ReasonReact, toutes ces dépendances et bien d'autres ne sont pas nécessaires. Le fait est que bon nombre des fonctionnalités les plus importantes qui simplifient le développement sont déjà incluses dans le langage. Par conséquent, le travail avec les dépendances est simplifié et, à mesure que l'application grandit et se développe, ce travail ne devient pas compliqué.

Tout cela est possible grâce à l'utilisation du langage OCaml, qui a plus de 20 ans. Il s'agit d'un langage mature, dont les principes et mécanismes de base sont éprouvés et stables.

Et ensuite?

Si vous venez du monde JavaScript, il est facile de commencer avec Reason car la syntaxe de ce langage est similaire à JavaScript. Si vous avez écrit des applications React auparavant, le passage à Reason sera encore plus facile pour vous, car vous pouvez utiliser toutes vos connaissances dans le domaine React lorsque vous travaillez avec ReasonReact. Au cœur de ReasonReact se trouve le même modèle de pensée qu'au cœur de React, le processus de collaboration avec eux est également très similaire. Cela signifie que lorsque vous passez à Reason, vous n'avez pas à recommencer à zéro. Vous traiterez avec Reason dans le processus.

La meilleure façon de commencer à utiliser Reason dans vos projets est d'y introduire progressivement des fragments écrits en Reason. Comme déjà mentionné, le code Reason peut être utilisé dans les projets JS, ainsi que le code JS dans les projets Reason. Cette approche est également applicable lors de l'utilisation de ReasonReact. Vous pouvez prendre le composant ReasonReact et l'utiliser dans une application React traditionnelle écrite en JavaScript.

C'est exactement l'approche incrémentielle qui a été choisie par les développeurs de Facebook, qui ont largement utilisé Reason lors du développement du messager Facebook .

Si vous voulez écrire une application React en utilisant Reason et apprendre les bases de ce langage dans la pratique, jetez un œil à ce matériel, où le développement du jeu "Tic Tac Toe" est étape par étape.

Résumé

Les créateurs de Reason avaient deux options. La première consistait à prendre JavaScript et à l'améliorer en quelque sorte. S'ils choisissaient cette voie, ils devraient faire face aux défauts historiques de JS.

Ils ont cependant choisi le deuxième chemin associé à OCaml. Ils ont pris OCaml, un langage mature avec d'excellentes performances, et l'ont modifié pour ressembler à JavaScript.

React est également basé sur les principes d'OCaml. C'est pourquoi l'écriture d'applications React est beaucoup plus facile et plus agréable avec Reason. Travailler avec React dans Reason offre une approche plus stable et sécurisée pour créer des composants React, car un système de type strict assure le développeur et il n'a pas à faire face à la plupart des problèmes JavaScript historiques.

Chers lecteurs! Avez-vous essayé ReasonReact?