Reaccionar el desarrollo de aplicaciones usando ReasonReact

¿Utiliza React para crear interfaces de usuario? El autor del material, cuya traducción publicamos, dice que también trabaja con React. Aquí quiere hablar sobre por qué vale la pena escribir ReasonML para las aplicaciones React.



React es una muy buena herramienta de desarrollo de interfaz. ¿Puedes hacerlo aún mejor? Para mejorar su trabajo con React, primero debe comprender sus principales problemas. En particular, un problema cuyos orígenes se encuentran en el hecho de que React es una biblioteca de JavaScript.

Reaccionar y JavaScript

Si observa detenidamente React, notará que algunos de los principios subyacentes a esta biblioteca son ajenos a JavaScript. En particular, estamos hablando de la inmutabilidad, de los principios de la programación funcional y del sistema de tipos.

La inmunidad es uno de los principios básicos de React. Las mutaciones en las propiedades de los componentes o el estado de una aplicación son altamente indeseables, ya que esto puede tener consecuencias impredecibles. JavaScript no tiene mecanismos estándar para proporcionar inmunidad. Las estructuras de datos se vuelven inmutables ya sea adhiriéndose a ciertas convenciones o utilizando bibliotecas como immutable-js .

La biblioteca React se basa en los principios de la programación funcional, ya que las aplicaciones React son composiciones de funciones. Aunque JavaScript tiene algunas características de programación funcional, como funciones de primera clase, no es un lenguaje de programación funcional. Si necesita escribir un buen código declarativo en JavaScript, debe recurrir a bibliotecas de terceros como Lodash / fp o Ramda .

¿Qué hay de malo con el sistema de tipos? React tiene el concepto de PropTypes . Se usa para simular tipos en JavaScript, ya que este lenguaje en sí no está estáticamente escrito. Para aprovechar la escritura estática en JS, nuevamente, debe recurrir a herramientas de terceros como Flow y TypeScript .


Compare React y JavaScript

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

¿Existe un lenguaje de programación que sea mejor que JavaScript compatible con React?
Puedes dar una respuesta positiva a esta pregunta. Este lenguaje es ReasonML .

La razón implementa la inmutabilidad. Como está basado en OCaml , un lenguaje de programación funcional, las características correspondientes también están integradas en Reason. Este lenguaje también tiene su propio sistema de tipos adecuado para React.


Compare React, JavaScript y Reason

Resulta que Reason es compatible con los principios básicos de React.

Razón

La razón no es un lenguaje nuevo. Es una sintaxis alternativa y un kit de herramientas 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 ).


OCaml

La sintaxis tipo C de Reason hace que OCaml esté disponible para los programadores que están familiarizados con lenguajes comunes como JavaScript o Java. La razón le da al desarrollador una mejor documentación que OCaml, y una comunidad cada vez mayor de entusiastas se ha formado a su alrededor. Además, lo que está escrito en Reason es fácil de integrar con proyectos JS existentes.


Razón

El núcleo de la razón es OCaml. La razón tiene la misma semántica que OCaml, solo que la sintaxis es diferente. Esto significa que Reason hace posible escribir código OCaml usando una sintaxis similar a JavaScript. Como resultado, el programador tiene características OCaml tan maravillosas como un sistema de tipo estricto y un mecanismo de coincidencia de patrones.

Eche un vistazo al fragmento de código Reason para familiarizarse con su sintaxis.

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)) }; 

Aunque este patrón utiliza un mecanismo de coincidencia de patrones, sigue siendo muy similar a JavaScript.

El único lenguaje que funciona en los navegadores es JavaScript, por lo tanto, para escribir para navegadores en cualquier idioma, necesitamos compilarlo en JavaScript.

BuckleScript

Una de las características más interesantes de Reason se puede llamar el compilador BuckleScript, que toma el código escrito en Reason y lo convierte en código JS legible y productivo, además, lo limpia bien de las construcciones no utilizadas.


BuckleScript

La legibilidad de los resultados de BuckleScript será útil si trabaja en un equipo en el que no todos están familiarizados con Reason. Estas personas, al menos, podrán leer el código JS resultante.

El código de razón es a veces tan similar al código JS que el compilador no necesita convertirlo en absoluto. Con este estado de cosas, puede disfrutar de los beneficios del código estático de escritura y escritura de Reason que parece estar escrito en JavaScript.

Aquí hay un ejemplo de código que funcionará tanto en Reason como en JavaScript:

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

BuckleScript viene con cuatro bibliotecas. Esta es una biblioteca estándar llamada Belt ( la biblioteca estándar de OCaml no es suficiente aquí), y enlaces para JavaScript, Node.js y la API DOM.

Dado que BuckleScript se basa en el compilador OCaml, la compilación es muy rápida , mucho más rápida que Babel y varias veces más rápida que TypeScript.

Usando BuckleScript, compilamos el fragmento de código de motivo anterior que contiene la función fizzbuzz() en JavaScript.


Compilación de código de motivo en JavaScript con BuckleScript

Como puede ver, el código JS resultó ser bastante legible. Parece que fue escrito por un hombre.

Los programas escritos en Reason se compilan no solo en JavaScript, sino también en código nativo y en código de bytes. Como resultado, por ejemplo, puede escribir una aplicación en Reason y ejecutarla en un navegador, en MacOS, en teléfonos inteligentes con Android e iOS. Hay un juego de Gravitron escrito por Jared Forsyth sobre Reason. Se puede ejecutar en todas las plataformas anteriores.

Organización de la interacción con JavaScript.

BuckleScript permite organizar la interacción de Reason y JavaScript. Esto significa no solo la posibilidad de usar el código JS en funcionamiento en la base del código Reason, sino también la posibilidad de interacción del código escrito en Reason con este código JavaScript. Como resultado, el código escrito en Reason es fácil de integrar en proyectos JS existentes. Además, en el código de razón puede usar paquetes JavaScript de NPM. Por ejemplo, puede crear un proyecto que comparta Flow, TypeScript y Reason.

Sin embargo, no todo es tan simple. Para usar el código JavaScript o las bibliotecas en Reason, primero debe portarlos usando enlaces Reason. En otras palabras, para usar el estricto sistema de tipos Reason, necesitamos tipos para el código JavaScript normal.

Si necesita usar cualquier biblioteca de JavaScript en el código de Reason, primero debe recurrir al Reason Package Index ( Redex ) y averiguar si esta biblioteca ya se ha portado a Reason. El proyecto Redex es un catálogo de bibliotecas y herramientas escritas en bibliotecas Reason y JavaScript con enlaces Reason. Si logró encontrar la biblioteca necesaria en este directorio, puede instalarla como una dependencia y usarla en una aplicación de Reason.

Si no puede encontrar la biblioteca deseada, tendrá que escribir las carpetas usted mismo. Si recién está comenzando con Reason, tenga en cuenta que escribir carpetas no es una tarea de principiante. Esta es una de las tareas más difíciles que uno tiene que resolver para aquellos que programan en Reason. De hecho, este es un tema para un artículo separado.

Si solo necesita alguna funcionalidad limitada de alguna biblioteca de JavaScript, no necesita escribir enlaces para toda la biblioteca. Esto solo se puede hacer para las funciones o componentes necesarios.

ReasonReact

Al comienzo del artículo, hablamos sobre cómo se dedica al desarrollo de aplicaciones React usando Reason. Puede hacerlo gracias a la biblioteca ReasonReact .

Quizás ahora esté pensando: "Todavía no entiendo por qué es necesario escribir aplicaciones React en Reason". Sin embargo, ya hemos discutido la razón principal para usar el paquete React and Reason, que es que React es mejor compatible con Reason que con JavaScript. ¿Por qué es esto así? La cuestión es que React fue creado en base a Reason, o más bien, basado en OCaml.

Path to ReasonReact

El primer prototipo de React fue desarrollado por Facebook y fue escrito en el Metalenguaje estándar ( StandardML ), en un lenguaje que es un pariente de OCaml. Luego React fue transferido a OCaml, además, React fue portado a JavaScript. Esto se hizo debido al hecho de que toda la web usaba JavaScript y probablemente no sería razonable hacer declaraciones como: "Ahora escribiremos la interfaz de usuario en OCaml". La traducción de React a JavaScript valió la pena y condujo a una amplia distribución de esta biblioteca.

Como resultado, todos están acostumbrados a percibir React como una biblioteca JS. React, así como otras bibliotecas e idiomas como Elm , Redux , Recompose , Ramda y PureScript , han ayudado a popularizar el estilo funcional de programación en JavaScript. Y gracias a la difusión de Flow y TypeScript en JavaScript, la escritura estática también se ha vuelto popular. Como resultado, el paradigma de la programación funcional utilizando tipos estáticos se ha vuelto dominante en el mundo del desarrollo frontend.

En 2006, Bloomberg creó y transfirió a la categoría de proyectos de código abierto el compilador BuckleScript, que convierte OCaml a JavaScript. Esto les permitió escribir un código frontal mejor y más seguro utilizando el estricto sistema de tipo OCaml. Tomaron el compilador OCaml optimizado y muy rápido y lo hicieron generar código JavaScript.

La popularidad de la programación funcional y el lanzamiento de BuckleScript crearon un clima ideal que permitió a Facebook volver a la idea original de React, una biblioteca que se escribió originalmente en StandardML.


ReasonReact

Mezclaron la semántica de OCaml con la sintaxis de JavaScript y crearon Reason. Además, crearon un contenedor Reason para React, presentado en forma de una biblioteca ReasonReact, que tiene funciones adicionales, como encapsular los principios de Redux en componentes con estado. Una vez hecho esto, trajeron a React a sus orígenes .

Acerca de las características de reacción en la razón

Cuando la biblioteca React se tradujo a JavaScript, las capacidades del lenguaje se adaptaron a las necesidades de React creando varias bibliotecas y herramientas. Este enfoque, en particular, significa la necesidad de una gran cantidad de dependencias para los proyectos. No diremos que tales bibliotecas están en constante evolución, y se producen cambios regularmente en ellas, haciendo que sus nuevas versiones sean incompatibles con las antiguas. Como resultado, el desarrollador debe ser muy serio y cuidadoso al mantener las bibliotecas de las que dependen sus proyectos.

Esto agrega una capa adicional de complejidad al desarrollo de JavaScript. Por ejemplo, una aplicación React típica generalmente contiene al menos las dependencias que se pueden ver en la siguiente figura.


Dependencias de aplicación de reacción típicas

Estas son las tareas que resuelven estas dependencias:

• Escritura estática - Flow / TypeScript.
• Inmunidad - InmutableJS.
• Enrutamiento - ReactRouter.
• Formato de código: más bonito.
• Linting - ESLint.
• Funciones auxiliares - Ramda / Lodash.

Ahora usaremos, en lugar de React for JavaScript, la biblioteca ReasonReact. ¿Necesitamos, con este enfoque, todas estas dependencias?


Cambiar a ReasonReact

Después de analizar la misma lista de tareas que se resolvieron previamente con herramientas adicionales, descubrimos que todas se pueden resolver con las herramientas integradas ReasonReact. Puedes leer más sobre ellos aquí .

En una aplicación preparada por ReasonReact, no se necesitan todas estas y muchas otras dependencias. El hecho es que muchas de las características más importantes que simplifican el desarrollo ya están incluidas en el lenguaje. Como resultado, el trabajo con dependencias se simplifica y, a medida que la aplicación crece y se desarrolla, este trabajo no se vuelve complicado.

Todo esto es posible gracias al uso del lenguaje OCaml, que tiene más de 20 años. Este es un lenguaje maduro, cuyos principios y mecanismos básicos son probados y estables.

Que sigue

Si vienes del mundo de JavaScript, es fácil comenzar con Reason porque la sintaxis de este lenguaje es similar a JavaScript. Si escribió aplicaciones React anteriormente, cambiar a Reason será aún más fácil para usted, ya que puede usar todos sus conocimientos en el campo de React cuando trabaje con ReasonReact. En el corazón de ReasonReact se encuentra el mismo modelo de pensamiento que en el núcleo de React, el proceso de trabajar con ellos también es muy similar. Esto significa que cuando cambia a Razón no tiene que comenzar desde cero. Tratarás con Reason en el proceso.

La mejor manera de comenzar a utilizar Reason en sus proyectos es introducir gradualmente fragmentos escritos en Reason en ellos. Como ya se mencionó, el código Reason se puede usar en proyectos JS, así como el código JS en proyectos Reason. Este enfoque también es aplicable cuando se utiliza ReasonReact. Puede tomar el componente ReasonReact y usarlo en una aplicación React tradicional escrita en JavaScript.

Este es exactamente el enfoque incremental elegido por los desarrolladores de Facebook, que utilizaron ampliamente Reason al desarrollar el mensajero de Facebook .

Si desea escribir una aplicación React usando Reason y aprender los conceptos básicos de este lenguaje en la práctica, eche un vistazo a este material, donde el desarrollo del juego "Tic Tac Toe" es paso a paso.

Resumen

Los creadores de la razón tenían dos opciones. El primero fue tomar JavaScript y mejorarlo de alguna manera. Si eligen este camino, tendrían que lidiar con los defectos históricos de JS.

Ellos, sin embargo, eligieron el segundo camino asociado con OCaml. Tomaron OCaml, un lenguaje maduro con excelente rendimiento, y lo modificaron para que se pareciera a JavaScript.

React también se basa en los principios de OCaml. Es por eso que escribir aplicaciones React es mucho más fácil y divertido con Reason. Trabajar con React in Reason ofrece un enfoque más estable y seguro para crear componentes de React, ya que un sistema de tipo estricto asegura al desarrollador y no tiene que enfrentar la mayoría de los problemas históricos de JavaScript.

Estimados lectores! ¿Has probado ReasonReact?