Psst! He aquí por qué ReasonReact es la mejor manera de escribir React

¿Estás usando React para construir interfaces de usuario? Pues yo también. Y ahora, aprenderá por qué debería escribir sus aplicaciones React usando ReasonML.

Reaccionar es una forma genial de escribir interfaces de usuario. Pero, ¿podríamos hacerlo aún más fresco? ¿Mejor?

Para mejorarlo, primero debemos identificar sus problemas. Entonces, ¿cuál es el principal problema de React como una biblioteca de JavaScript?

React no se desarrolló inicialmente para JavaScript

Si observa más de cerca React, verá que algunos de sus principios principales son ajenos a JavaScript. Hablemos sobre la inmutabilidad, los principios de programación funcional y el sistema de tipos en particular.

La inmutabilidad es uno de los principios centrales de React. No querrás mutar tus accesorios ni tu estado porque si lo haces, podrías experimentar consecuencias impredecibles. En JavaScript, no tenemos la inmutabilidad fuera de la caja. Mantenemos nuestras estructuras de datos inmutables por una convención, o utilizamos bibliotecas como immutableJS para lograrlo.

React se basa en los principios de la programación funcional ya que sus aplicaciones son composiciones de funciones. Aunque JavaScript tiene algunas de estas características, como funciones de primera clase, no es un lenguaje de programación funcional. Cuando queremos escribir un buen código declarativo, necesitamos usar bibliotecas externas como Lodash / fp o Ramda.

Entonces, ¿qué pasa con el sistema de tipos? En React, teníamos PropTypes. Los hemos usado para imitar los tipos en JavaScript, ya que no es un lenguaje estáticamente escrito. Para aprovechar la escritura estática avanzada, nuevamente necesitamos usar dependencias externas, como Flow y TypeScript.

Reacción y comparación de JavaScript

Como puede ver, JavaScript no es compatible con los principios básicos de React.

¿Hay otro lenguaje de programación que sería más compatible con React que JavaScript?

Afortunadamente, tenemos ReasonML.

En Reason, obtenemos la inmutabilidad de la caja. Dado que se basa en OCaml, el lenguaje de programación funcional, también tenemos tales características integradas en el lenguaje. La razón también nos proporciona un sistema de tipo fuerte por sí solo.

Comparación de React, JavaScript y Reason

La razón es compatible con los principios básicos de React.

Razón

No es un idioma nuevo. Es una sintaxis y cadena de herramientas alternativa similar a JavaScript para OCaml, un lenguaje de programación funcional que existe desde hace más de 20 años. Reason fue creado por desarrolladores de Facebook que ya usaban OCaml en sus proyectos (Flow, Infer).

La razón, con su sintaxis tipo C, hace que OCaml sea accesible para personas que provienen de lenguajes convencionales como JavaScript o Java. Le proporciona una mejor documentación (en comparación con OCaml) y una comunidad en crecimiento a su alrededor. Además, facilita la integración con su base de código JavaScript existente.

OCaml sirve como lenguaje de respaldo para Reason. La razón tiene la misma semántica que OCaml: solo la sintaxis es diferente. Esto significa que puede escribir OCaml utilizando la sintaxis similar a JavaScript de Reason. Como resultado, puede aprovechar las increíbles funciones de OCaml, como su sistema de tipo fuerte y la coincidencia de patrones.

Veamos un ejemplo de la sintaxis de Reason.

dejar fizzbuzz = (i) =>
  interruptor (i mod 3, i mod 5) {
  El | (0, 0) => "FizzBuzz"
  El | (0, _) => "Fizz"
  El | (_, 0) => "Zumbido"
  El | _ => cadena_de_int (i)
  };
para (i en 1 a 100) {
  Js.log (fizzbuzz (i))
};

Aunque estamos usando la coincidencia de patrones en este ejemplo, todavía es bastante similar a JavaScript, ¿verdad?

Sin embargo, el único lenguaje utilizable para los navegadores sigue siendo JavaScript, lo que significa que debemos compilarlo.

BuckleScript

Una de las potentes funciones de Reason es el compilador BuckleScript, que toma su código de Reason y lo compila en JavaScript legible y con rendimiento con una excelente eliminación de código muerto. Apreciará la legibilidad si está trabajando en un equipo en el que no todos están familiarizados con Reason, ya que aún podrán leer el código JavaScript compilado.

La similitud con JavaScript es tan cercana que el compilador no necesita cambiar parte del código de Reason. Por lo tanto, puede disfrutar de los beneficios del lenguaje escrito estáticamente sin ningún cambio en el código.

vamos a sumar = (a, b) => a + b;
agregar (6, 9);

Este es un código válido tanto en Reason como en JavaScript.

BuckleScript se entrega con cuatro bibliotecas: la biblioteca estándar llamada Belt (la biblioteca estándar OCaml es insuficiente) y enlaces a JavaScript, Node.js y DOM API.

Dado que BuckleScript se basa en el compilador OCaml, obtendrá una compilación increíblemente rápida que es mucho más rápida que Babel y varias veces más rápida que TypeScript.

Vamos a compilar nuestro algoritmo FizzBuzz escrito en Reason para JavaScript.

La compilación de código de Reason para JavaScript a través de BuckleScript

Como puede ver, el código JavaScript resultante es bastante legible. Parece que fue escrito por un desarrollador de JavaScript.

Reason no solo compila a JavaScript, sino también a código nativo y bytecode. Por lo tanto, puede escribir una sola aplicación utilizando la sintaxis de Reason y poder ejecutarla en el navegador en teléfonos MacOS, Android e iOS. Hay un juego llamado Gravitron de Jared Forsyth que está escrito en Reason y se puede ejecutar en todas las plataformas que acabo de mencionar.

Interoperabilidad JavaScript

BuckleScript también nos proporciona interoperabilidad con JavaScript. No solo puede pegar su código JavaScript de trabajo en su base de código Reason, sino que su código Reason también puede interactuar con ese código JavaScript. Esto significa que puede integrar fácilmente el código de Reason en su base de código JavaScript existente. Además, puede usar todos los paquetes de JavaScript del ecosistema NPM en su código de motivo. Por ejemplo, puede combinar Flow, TypeScript y Reason en un solo proyecto.

Sin embargo, no es tan simple. Para usar bibliotecas o código JavaScript en Reason, primero debe portarlo a Reason a través de enlaces de Reason. En otras palabras, necesita tipos para su código JavaScript sin tipo para poder aprovechar el sistema de tipo fuerte de Reason.

Siempre que necesite usar una biblioteca de JavaScript en su código de Reason, verifique si la biblioteca ya fue portada a Reason navegando por la base de datos del Reason Package Index (Redex). Es un sitio web que agrega diferentes bibliotecas y herramientas escritas en bibliotecas Reason y JavaScript con enlaces Reason. Si encontró su biblioteca allí, puede instalarla como una dependencia y usarla en su aplicación Reason.

Sin embargo, si no encontró su biblioteca, deberá escribir los enlaces de Reason usted mismo. Si recién está comenzando con Reason, tenga en cuenta que escribir enlaces no es algo con lo que quiera comenzar, ya que es una de las cosas más desafiantes en el ecosistema de Reason.

Afortunadamente, solo estoy escribiendo una publicación sobre cómo escribir enlaces de Reason, ¡así que estad atentos!

Cuando necesita alguna funcionalidad de una biblioteca de JavaScript, no necesita escribir los enlaces de Reason para una biblioteca en su conjunto. Puede hacerlo solo para las funciones o componentes que necesita usar.

ReasonReact

Este artículo trata sobre cómo escribir React in Reason, que puedes hacer gracias a la biblioteca ReasonReact.

Tal vez ahora estés pensando "Todavía no sé por qué debería usar React in Reason".

Ya hemos mencionado la razón principal para hacerlo: la razón es más compatible con React que con JavaScript. ¿Por qué es más compatible? Porque React se desarrolló para Reason, o más precisamente, para OCaml.

Road to ReasonReact

El primer prototipo de React fue desarrollado por Facebook y fue escrito en Standard Meta Language (StandardML), un primo de OCaml. Luego, fue trasladado a OCaml. React también se transcribió a JavaScript.

Esto se debió a que toda la web estaba usando JavaScript, y probablemente no era inteligente decir: "Ahora construiremos la interfaz de usuario en OCaml". Y funcionó: reaccionar en JavaScript ha sido ampliamente adoptado.

Entonces, nos acostumbramos a Reaccionar como una biblioteca de JavaScript. Reaccione junto con otras bibliotecas e idiomas (Elm, Redux, Recompose, Ramda y PureScript) hicieron que la programación funcional en JavaScript fuera popular. Y con el auge de Flow y TypeScript, la escritura estática también se hizo popular. Como resultado, el paradigma de programación funcional con tipos estáticos se convirtió en la corriente principal en el mundo del front-end.

En 2016, Bloomberg desarrolló BuckleScript de código abierto, el compilador que transforma OCaml a JavaScript. Esto les permitió escribir código seguro en el front-end usando el sistema de tipo fuerte de OCaml. Tomaron el compilador OCaml optimizado e increíblemente rápido e intercambiaron su código nativo generador de back-end por uno generador de JavaScript.

La popularidad de la programación funcional junto con el lanzamiento de BuckleScript generó el clima ideal para que Facebook volviera a la idea original de React, que inicialmente se escribió en un lenguaje ML.

ReasonReact

Tomaron la semántica de OCaml y la sintaxis de JavaScript, y crearon Reason. También crearon el contenedor Reason alrededor de React - biblioteca ReasonReact - con funcionalidades adicionales como la encapsulación de los principios de Redux en componentes con estado. Al hacerlo, regresaron React a sus raíces originales.

El poder de reaccionar en la razón

Cuando React entró en JavaScript, ajustamos JavaScript a las necesidades de React mediante la introducción de varias bibliotecas y herramientas. Esto también significó más dependencias para nuestros proyectos. Sin mencionar que estas bibliotecas todavía están en desarrollo y se introducen regularmente cambios importantes. Por lo tanto, debe mantener estas dependencias con cuidado en sus proyectos.

Esto agregó otra capa de complejidad al desarrollo de JavaScript.

Su aplicación React típica tendrá al menos estas dependencias:

  • escritura estática - Flow / TypeScript
  • inmutabilidad - inmutableJS
  • enrutamiento - ReactRouter
  • formateo - Más bonito
  • revestimiento - ESLint
  • función de ayuda - Ramda / Lodash

Ahora cambiemos JavaScript React por ReasonReact.

¿Todavía necesitamos todas estas dependencias?

  • escritura estática - incorporada
  • inmutabilidad - incorporado
  • enrutamiento - incorporado
  • formateo - incorporado
  • revestimiento - incorporado
  • funciones de ayuda - incorporadas

Puede obtener más información sobre estas funciones integradas en mi otra publicación.

En la aplicación ReasonReact, no necesita estas y muchas otras dependencias, ya que muchas características cruciales que facilitan su desarrollo ya están incluidas en el lenguaje mismo. Por lo tanto, mantener sus paquetes será más fácil y no tendrá un aumento en la complejidad con el tiempo.

Esto es gracias a OCaml, que tiene más de 20 años. Es un lenguaje maduro con todos sus principios básicos establecidos y estables.

Envolver

Al principio, los creadores de Reason tenían dos opciones. Tomar JavaScript y mejorarlo de alguna manera. Al hacerlo, también tendrían que lidiar con sus cargas históricas.

Sin embargo, tomaron un camino diferente. Tomaron OCaml como un lenguaje maduro con gran rendimiento y lo modificaron para que se parezca a JavaScript.

React también se basa en los principios de OCaml. Es por eso que obtendrá una experiencia de desarrollador mucho mejor cuando la use con Reason. React in Reason representa una forma más segura de crear componentes React, ya que el sistema de tipo fuerte te respalda y no necesitas lidiar con la mayoría de los problemas de JavaScript (heredados).

¿Que sigue?

Si vienes del mundo de JavaScript, será más fácil que comiences con Reason, debido a su similitud de sintaxis con JavaScript. Si ha estado programando en React, será aún más fácil para usted ya que puede usar todos sus conocimientos de React ya que ReasonReact tiene el mismo modelo mental que React y un flujo de trabajo muy similar. Esto significa que no necesita comenzar desde cero. Aprenderás Razón a medida que te desarrolles.

La mejor manera de comenzar a utilizar Reason en sus proyectos es hacerlo de forma incremental. Ya mencioné que puede tomar el código de Motivo y usarlo en JavaScript, y viceversa. Puedes hacer lo mismo con ReasonReact. Toma su componente ReasonReact y lo usa en su aplicación React JavaScript, y viceversa.

Este enfoque incremental ha sido elegido por los desarrolladores de Facebook que están utilizando Reason ampliamente en el desarrollo de la aplicación Facebook Messenger.

Si quieres construir una aplicación usando React in Reason y aprender los conceptos básicos de Reason de una manera práctica, mira mi otro artículo donde crearemos un juego Tic Tac Toe juntos.

Si tiene preguntas, críticas, observaciones o consejos para mejorar, no dude en escribir un comentario a continuación o comunicarse conmigo a través de Twitter o mi blog.