El objetivo de esta charla es eminentemente práctico. Se trata de revisar herramientas que nos ayuden a usar el framework React para hacer una aplicación de FrontEnd de una forma más fácil, simple y adecuada y explicar también el porqué de que se elijan esas herramientas y no otras.
A diferencia de otros frameworks como Angular, donde todo lo que necesitas está en él, React solo te permite pintar interfaces. Todo el resto de lo que necesites deberás romperte la cabeza para encontrarlo en paquetes que te permitan hacerlo del modo más efectivo. Esto hace que React no sea un problema si eres un programador experimentado, pues conoces muchas herramientas y te gusta la flexibilidad que te da, y que no encuentras por ejemplo en Angular donde todo está predefinido. Sin embargo, hace la vida muy difícil a los programadores más junior, que a veces se pueden sentir perdidos.
Un camino intermedio es el framework VueJS, el cual es flexible como React para incorporar diferentes herramientas pero todas las necesarias han sido desarrolladas por el mismo grupo de desarrollo de VueJS. Esto lo simplifica todo frente a React donde los paquetes necesarios tienen distintos orígenes, la mayor parte de ellos de la comunidad de desarrolladores y donde has de ser más experto para localizarlos y usarlos.
Por esto, como una ayuda para los que deciden utilizar React, esta charla tiene como objetivo disminuir esa complejidad con la recomendación de buenas herramientas y paquetes que hagan la vida más fácil a los desarrolladores. En el video se comienza usando el empaquetador Parcel, una novedad frente al tan extendido webpack. La razón es que este empaquetador, que apenas lleva un año entre nosotros, es un empaquetador de aplicaciones ultra-rápido y que no necesita configuración. La novedad es que, en Parcel, todo está por defecto y sólo si quieres algo especial has de configurarlo, algo que no ocurre en webpack donde debes hacer la configuración siempre, aunque sea algo muy simple lo que quieres y esto hace a Parcel una alternativa muy eficiente a la hora de trabajar con React.
En Parcel todo está por defecto y sólo si quieres algo especial, debes configurarlo
La siguiente recomendación se refiere a las herramientas para dar el mismo estilo a todo tu código, hacerlo más legible y evitar errores. En JS existe la herramienta JSLint, pero como en el caso anterior, tiene algunas desventajas. Para que todo tu proyecto tenga un mismo estilo y sea fácilmente legible y libre de errores ha de crearse un archivo de configuración con las reglas de estilo que prefieras. Esto da el mismo estilo a tu proyecto, pero si quieres que los siguientes proyectos también tengan ese estilo (lo que facilita leerlos) has de tener guardada y a mano esa configuración para aplicársela. De no ser así cada proyecto tendrá el estilo que se decida en cada momento y el resultado sería un pequeño «caos de estilos».
Para evitar esta dificultad y simplificarlo está la herramienta StandardJS (JavaScrip Standard style) que te configura JSLint con estilos estandarizados. No tienes que escribir tú la configuración y todos tus proyectos tendrán así más uniformidad de estilo. Esto lo está convirtiendo casi en un estándar de facto por lo mucho que aligera el trabajo.
StandardJS te configura JSLint con estilos estandarizados
Otra de las herramientas que se revisan en este video es ReactN como alternativa a Redux. React funciona muy bien con Redux para mantener la representación del estado, de modo que con su unión React modifica la interfaz con los cambios de estado por lo que la vista es una buena representación de esos cambios de estado internos. Redux realiza esos cambios mediante acciones predefinidas. Sin embargo, Redux necesita mucho código y si nuestra aplicación es simple en su lógica, le añadirá una complejidad que no es necesaria. Es muy bueno, sin embargo, para aplicaciones complejas con multitud de acciones debidas a cambios de estado (un ejemplo podía ser la página de Netflix donde las opciones son muchas y la visualización ha de cambiar con ellas, pero sería innecesario para una aplicación de un simple formulario, por ejemplo).
Redux es recomendable para aplicaciones complejas con multitud de acciones debidas a cambios de estado. Por lo que React funciona muy bien con Redux para mantener la representación del estado
Para estas aplicaciones más sencillas en su lógica, ReactN es óptimo pues usa la misma API que React y tienes a la vez una buena representación del estado global.
Os dejamos aquí el video de la Interacso Talk donde todo esto está magníficamente explicado con más detalle y paso por paso con ejemplos en pantalla.
