Primera semana con React/Redux

Después de mucho tiempo siguiendo la evolución del frontend decidí que ya era hora de migrar la mayoría de mis sistemas a Single-Page-Application. Para muchos una decisión obvia, ya que los conceptos no son nuevos. Sin embargo hay varios puntos que hasta ahora no estuvieron muy claros del todo como son la simplicidad al crear aplicaciones complejas, componentes web complejos y reutilizables, el surgimiento y obsolescencia de librerías Javascript, el "con jQuery puedes hacerlo" y mi dominio de frameworks del lado del servidor como es Symfony son solo algunos ejemplos.

Para mí tampoco es nuevo. Estuve usando AngularJs (Angular0.* y Angular1.*) desde hace mucho tiempo para crear componentes web muy complejos como chats, sistemas de notificaciones entre otras funciones útiles. Pero siempre mantuve el núcleo de la aplicación del lado del servidor principalmente con framework como Symfony y Django.

Hace años atrás las Single-Page-Application no eran fácil de crear y mucho menos de mantener. De ahí que los propios desarrolladores AngularJs decidiera crear la versión 2 con un nuevo concepto: "Componentes". Así mismo React está basado en componentes y ya parece ser el nuevo estándar. Ambos explotan las potencialidades de las nuevas versiones de Javascript. Librerías como Babel, WebPack hacen del desarrollo un "piece of cake". Así que la primera tarea fue elegir cuál de los 2 quería usar. (Aunque ya dominaba AngularJs, Angular>v2 es otro framework que debes aprender).

Bien, podría haber escogido Angular(>= v2), pero la tendencia en la comunidad Symfony es usar React, por lo que el soporte dentro de la propia comunidad está garantizada. Y la idea de "pensar el React" me enganchó.

Aprendiendo React y Redux

Para comenzar con React como siempre hago comienzo con la documentación oficial y como sabía que iba a necesitar Redux también me traje la documentación oficial. Al ir adentrándome en contenido queda claro que los conceptos de MVC (Modelo Vista Controlador) ya no existes y debo cambiar las formas en que diseño las aplicaciones. Si eres desarrollador Symfony, AngularJS 1, ExtJs, jQuery deben romper la forma tradicional de pensar en las aplicaciones y entender que en la web todo son componentes.

Si te pones a pensar siempre fue así, teníamos un conjunto de componentes anidados y reutilizables que poseen su propia funcionalidad. React por sí solo no es muy complicado y está muy bien para crear componentes reusables con gran dinamismo y consistencia. Pero no solo queremos componentes independientes, queremos que interactúen. Ahí es donde React introduce sus estados. Claro que entonces cuando llevamos la aplicación a grandes escalas mantener estos estados es difícil. Aquí es donde entra Redux.

Redux le permite a React organizar los estados de los componentes en un único árbol. Además de esto, define que este árbol solo puede cambiar mediantes el lanzamientos (dispatch()) de acciones ({type: "ADD_SOMETHING", 'some': 'thing'}) y los reductores (reducer(state, action) => newState) son los encargados de analizar estas acciones y actualizar el árbol de estados. Esto junto con un grupos de prácticas recomendadas conforman la base de cualquier sistema React/Redux.

Comenzar a codear rápido

En un final queremos desarrollar aplicaciones rápidamente, y pensando en estos los desarrolladores de Facebook nos dieron la herramientas create-react-app una de las más esenciales herramientas que un desarrolladores React puede tener pues te permite crear proyectos pre-configurado en muy poco tiempo. Con esta y agregando un par de librarías más tenemos un sistema funcional muy rápido. Para los symfoneros como yo, Api-Platform juega un papel fundamental a la hora de desarrollar. La sencillez que brinda para crear apis con Symfony y lo escalable que resulta hace del trabajo en la api no tenga un costo mayor al necesario. Y además brinda dos generadores de código, un admin y un cliente para consumir estas apis. Con este conjunto de librerías podemos tener un prototipo funcional de nuestra aplicación con muy poco esfuerzo.

Conclusiones

Aunque no puedo decir que hacer una aplicación con React en una semana fue tarea fácil. Hay que tener en cuenta que se pudo hacer en una semana, tanto aprender el framework como implementarlo a la par. Claro está que estamos hablando de un prototipo que aunque funcional puede mejorar muchísimo. Queda pendientes temas como seguridad, pues no parece haber un consenso o una documentación dedicada exclusivamente a asegurar distintas partes en React (De forma oficial digo, deben haber cientos de posts explicando cómo hacerlo). Lista de componentes puramente HTML útiles para manejar eventos y mostrar información, así como animación de esos componentes.

Creo que una de las ideas que trae tanto React como Redux es la utilización de Javascript moderno como parte fundamental de nuestro código. Esto trae además consigo que hay muchas formas de hacer lo mismo, y ese fue uno de los puntos que en un final más trabajo me dio entender. Tanto Redux como React intentan aprovechar al máximo las novedades de ES5 y ES6 dejando en nuestras manos la forma de implementar la mayoría de nuestro código. Lo que hace tanto React como Redux implementaciones de conceptos muy simples. Lo demás depende de ti.

Comentarios


No hay comentarios en esta entrada. Se el primero en comentar

Deja un comentario


Otros título del autor

Impresiones del segundo encuentro de desarrolladores habana
Hace solo algunos días que conozco este grupo de entusiastas y emprend...

Estamos creado la organización PositibeLabs
El día de hoy estamos creando la organización PositibeLabs para el des...

Categorías
Noticias

Úlltimas noticias sobre Tecnología, Desarrollo de software, Negocios e Innovación en la web.


Servicios

Servicios de PositibeLabs. Desarrollo de software, Páginas web, Aplicaciones de Gestión Empresarial, SEO y Mercadotecnia.


Bundles

Bundles y librerías de códgio abierto de PositibeLabs Projects


Artículos

Artículos sobre desarrollo de software y tecnologías de la información.