¿Por qué tiene tanto éxito la librería React?
React, también conocido como ReactJS, es una potente alternativa de librería JavaScript para el desarrollo frontend. Aunque se creó para solucionar las necesidades concretas de Facebook, hoy podemos encontrar React detrás de aplicaciones web tan variadas y reconocidas como las de la BBC, Airbnb o Netflix, que la adoptaron tras su éxito inicial en la popular Red Social.
¿Qué es React?
React es una librería JavaScript diseñada para el desarrollo de interfaces de usuario. Sin embargo, en base a componentes del propio Facebook o de su amplia comunidad es capaz de desarrollar todo tipo de proyectos complejos, o incluso es una buena alternativa para crear aplicaciones web SPA (Single-Page Application) para ordenadores o móviles.
Con React tendremos una base sobre la cual construir casi cualquier cosa con JavaScript de una manera más ordenada y con menos código que si se usa JavaScript puro o librerías como jQuery centradas en la manipulación del DOM. En React, gracias a que las vistas están asociadas a los datos, no necesitamos escribir código para manipular la página cuando los datos cambian, pues esto se hace automáticamente.
El rendimiento es su principal característica, motivo por el cual ha sido seleccionada para multitud de proyectos de alto nivel, además de facilitar un desarrollo ágil, ordenado y con una arquitectura mantenible. Entre otras innovadoras ideas de React para mejorar el rendimiento de las aplicaciones, está la incorporación de un DOM virtual, del que hablamos un poco más abajo.
Los componentes son una de las piezas fundamentales de React, que básicamente nos permiten encapsular código, para generar pequeñas piezas con funcionalidad limitada. Así como en la programación orientada a objetos, donde diversos objetos colaboran entre sí para resolver el objetivo de aplicaciones complejas, en la arquitectura de componentes éstos se organizan y colaboran de modo que puedan implementar cualquier aplicación avanzada. Lo que se consigue es una aplicación modular, evitando el denominado código spaguetti que se produce con librerías como jQuery.
Hay que destacar que React por sí mismo es una librería y no un framework, puesto que se ocupa de las interfaces de usuario. Sin embargo, diversos añadidos pueden convertir a React en un producto equiparable en características a un framework. Por ejemplo, Redux, que implementa un patrón mediante el cual los datos fluyen entre componentes de la aplicación. En cualquier caso, el hecho de que React sea una librería es interesante para muchos desarrolladores, ya que cada cual puede realizar sus aplicaciones de una manera personalizada, aplicando aquellas herramientas y librerías adicionales que se adapten mejor al proyecto o a las costumbres de trabajo de cada uno.
El DOM virtual
Muchas librerías se especializan en el data-binding, como Angular, Ember, Polymer, etc. La diferencia entre React y cualquier otra alternativa se centra en la existencia del DOM Virtual, que es básicamente una representación del DOM pero en memoria.
Cuando se actualiza una vista, lo que cambia en React es el DOM Virtual, que es mucho más rápido que actualizar el DOM del navegador. Cuando React compara el DOM Virtual con el DOM del navegador actualiza sólo las partes que son necesarias y no la vista completa. Este comportamiento es clave en React y causante de su alto rendimiento, ya que cuando cambia un dato en la aplicación no necesita actualizar la vista entera.
Isomorfismo
No podemos acabar sin hablar del isomorfismo, una de las características más importantes de React. Este concepto es muy interesante en el desarrollo de aplicaciones que queremos que consigan un buen posicionamiento de cara a buscadores.
Las aplicaciones JavaScript suelen recibir los datos en crudo del servidor (o un API) en formato JSON. Las librerías JavaScript y frameworks toman esos datos para producir el HTML que debe representar el navegador. Esto se convierte en un aspecto negativo de cara al posicionamiento en buscadores como Google, debido a que el cuerpo de la página no tiene contenido, de modo que el buscador no sabe qué palabras clave son interesantes y no otorga ranking para ellas. Con ello, la aplicación o página no consigue posicionar.
Valiéndose de NodeJS, la librería React permite que con un mismo código se pueda renderizar HTML tanto en el servidor como en el cliente, rebajando la carga de trabajo necesaria para realizar aplicaciones web amigables para buscadores, potenciando un mejor posicionamiento SEO.
Aunque React se trate de una librería, existe todo un ecosistema de herramientas y aplicaciones que al final lo equiparan a un framework. Al desarrollar en base a componentes reutilizables conseguimos una arquitectura muy consistente, de fácil escalabilidad y mantenimiento. Además, alrededor de React se ha creado una amplia comunidad, por lo que es fácil encontrar información técnica y componentes ya creados y que podremos usar en cualquier proyecto.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.