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

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

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

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

React no se desarrolló inicialmente para JavaScript

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

La inmutabilidad es uno de los principios básicos de React. No quiere cambiar sus accesorios o su estado porque si lo hace, podría experimentar consecuencias impredecibles. En JavaScript, no tenemos inmutabilidad de fábrica. Mantenemos nuestras estructuras de datos inmutables por una convención, o usamos bibliotecas como inmutableJS 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 utilizado para imitar los tipos en JavaScript, ya que no es un lenguaje escrito de forma estática. Para aprovechar la escritura estática avanzada, nuevamente necesitamos usar dependencias externas, como Flow y TypeScript.

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

¿Existe otro lenguaje de programación que sea más compatible con React que JavaScript?

Afortunadamente, tenemos ReasonML.

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

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

Razón

No es un idioma nuevo. Es una sintaxis alternativa similar a JavaScript y una cadena de herramientas 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).

Reason, con su sintaxis similar a 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 que 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 sólido sistema de tipos y coincidencia de patrones.

Echemos un vistazo a un ejemplo de la sintaxis de Reason.

let fizzbuzz = (i) => switch (i mod 3, i mod 5)  ; for (i in 1 to 100) { Js.log(fizzbuzz(i)) };

Aunque estamos usando la coincidencia de patrones en este ejemplo, sigue siendo 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 poderosas características de Reason es el compilador BuckleScript, que toma su código de Reason y lo compila en JavaScript legible y eficaz con una gran 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 de escritura estática sin ningún cambio en el código.

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

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

BuckleScript se envía 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.

Compilemos nuestro algoritmo FizzBuzz escrito en Reason para JavaScript.

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

Reason no solo se compila en JavaScript, sino también en código nativo y de bytes. Por lo tanto, puede escribir una sola aplicación usando 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 de 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 utilizar todos los paquetes JavaScript del ecosistema NPM en su código de Reason. Por ejemplo, puede combinar Flow, TypeScript y Reason juntos en un solo proyecto.

Sin embargo, no es tan simple. Para usar bibliotecas JavaScript o código en Reason, primero debe transferirlo a Reason a través de enlaces de Reason. En otras palabras, necesita tipos para su código JavaScript sin escribir para poder aprovechar el fuerte sistema de tipos 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 en la base de datos del índice de paquetes de Reason (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 necesite alguna funcionalidad de una biblioteca de JavaScript, no necesita escribir los enlaces de Reason para una biblioteca en su conjunto. Puede hacer eso solo para las funciones o componentes que necesita usar.

RazónReact

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

Quizás 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: Reason es más compatible con React que con JavaScript. ¿Por qué es más compatible? Porque React fue desarrollado para Reason, o más precisamente, para OCaml.

Camino a la Razón

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

Esto se debía a que toda la Web usaba JavaScript y probablemente no fue inteligente decir: "Ahora crearemos la interfaz de usuario en OCaml". Y funcionó: React en JavaScript se ha adoptado ampliamente.

Entonces, nos acostumbramos a React como una biblioteca de JavaScript. Reaccionar junto con otras bibliotecas y lenguajes (Elm, Redux, Recompose, Ramda y PureScript) hizo popular la programación funcional en JavaScript. 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 en JavaScript. Esto les permitió escribir código seguro en el front-end utilizando el fuerte sistema de tipos de OCaml. Tomaron el compilador OCaml optimizado y ultrarrápido y cambiaron su código nativo generador de back-end por uno que genera 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.

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

El poder de React in Reason

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 aún están en desarrollo y que se introducen cambios importantes con regularidad. 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
  • formato - más bonito
  • pelusa - ESLint
  • función auxiliar - Ramda / Lodash

Cambiemos ahora JavaScript React por ReasonReact.

¿Todavía necesitamos todas estas dependencias?

  • escritura estática - incorporada
  • inmutabilidad - incorporado
  • enrutamiento - incorporado
  • formateo - incorporado
  • pelusa - empotrada
  • 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, el mantenimiento de sus paquetes será más fácil y no aumentará la complejidad con el tiempo.

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

Envolver

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

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

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

¿Que sigue?

Si viene del mundo de JavaScript, será más fácil para usted comenzar 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 todo su conocimiento de React ya que ReasonReact tiene el mismo modelo mental que React y un flujo de trabajo muy similar. Esto significa que no es necesario empezar desde cero. Aprenderá la razón a medida que se desarrolle.

La mejor manera de comenzar a usar Reason en sus proyectos es hacerlo de forma incremental. Ya mencioné que puede tomar el código de Reason y usarlo en JavaScript, y al revés. Puede hacer lo mismo con ReasonReact. Usted 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 utilizan ampliamente Reason en el desarrollo de la aplicación Facebook Messenger.

Si desea crear una aplicación usando React in Reason y aprender los conceptos básicos de Reason de una manera práctica, consulte mi otro artículo donde crearemos un juego de 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.