¿Qué es React?
React es una librería Javascript focalizada en el desarrollo de interfaces de usuario. Esa es su principal área de trabajo, pero lo cierto es que con todo el ecosistema de aplicaciones y herramientas y componentes, con React encontramos un excelente aliado para hacer todo tipo de aplicaciones web, SPA (Single Page Application) o incluso aplicaciones para móviles.
Es por tanto una base sobre la cual se puede construir casi cualquier cosa con Javascript y que nos facilita mucho el desarrollo, ya que nos ofrece muchas cosas ya listas, en las que no necesitamos invertir tiempo para desarrollar.
Un poco de historia
React es una librería que proviene de Facebook. Es software libre y a partir de su liberación una creciente comunidad de desarrolladores la está usando. Se crea en base a unas necesidades, generadas por el propio desarrollo de la web de la popular red social. En Facebook necesitaban herramientas para un desarrollo rápido pero focalizadas en un mayor rendimiento que otras alternativas existentes en el mercado.
Detectaron que el típico marco de binding y doble binding ralentizaba un poco su aplicación, debido a la cantidad de conexiones entre las vistas y los datos. Como respuesta crearon una nueva dinámica de funcionamiento, en la que optimizaron la forma como las vistas se renderizaban frente al cambio en los datos de la aplicación.
A partir de ahí la probaron en su red social con resultados positivos y luego en Instagram, también propiedad de Facebook, con éxito. Más adelante, alentados por los positivos resultados en el rendimiento de React, muchas otras aplicaciones web de primer nivel la fueron adoptando. BBC, Airbnb, Netflix, Dropbox y un largo etc.
Cuál es el objetivo de React
Sirve para desarrollar aplicaciones web de una manera más ordenada y con menos código que si usas Javascript puro o librerías como jQuery centradas en la manipulación del DOM. Permite que las vistas se asocien con los datos, de modo que si cambian los datos, también cambian las vistas.
El código spaguetti que se suele producir mediante librerías como jQuery se pretende arquitecturizar y el modo de conseguirlo es a través de componentes. Una interfaz de usuario es básicamente creada a partir de un componente, el cual encapsula el funcionamiento y la presentación. Unos compoentes se basan además en otros para solucionar necesidades más complejas en aplicaciones. También permite crear otras piezas de aplicación cómodamente, como los test.
Comparación de React con otras librerías o frameworks
Con respecto a librerías sencillas como jQuery, React aporta una serie de posibilidades muy importante. Al tener las vistas asociadas a los datos, no necesitamos escribir código para manipular la página cuando los datos cambian. Esta parte en librerías sencillas es muy laboriosa de conseguir y es algo que React hace automáticamente.
También en comparación con jQuery nos permite una arquitectura de desarrollo más avanzada, con diversos beneficios como la encapsulación del código en componentes, que nos ofrecen una serie de ventajas más importantes que los plugin, como la posibilidad de que esos componentes conversen e interaccionen entre si, algo que que sería muy difícil de conseguir con Plugins.
ReactJS solapa por completo las funcionalidades de jQuery, por lo que resulta una evolución natural para todos los sitios que usan esa librería. Podrían convivir pero no es algo que realmente sea necesario y recargaría un poco la página, por lo que tampoco sería muy recomendable.
Ya luego en comparación con frameworks como es el caso de Angular o Ember, React se queda a mitad de camino. Pero ojo, a partir de todo el ecosistema de React se llega más o menos a las mismas funcionalidades, así que es una alternativa perfecta.
Decimos que se queda a mitad de camino porque React por sí mismo es una librería y no un framework, puesto que React se ocupa de las interfaces de usuario. Quizás nos sirva decir que sería la «V» en un framework «MVC», aunque es solo una manera de hablar, puesto que React podría ocupar también parcelas de lo que sería la «C». Todo depende de nuestra manera de trabajar aunque, no obstante, esta posible carencia con respecto a los frameworks Javascript se soluciona con capas adicionales a React. Lo que podría interpretarse como una desventaja, muchos desarrolladores lo entienden como una ventaja con respecto a frameworks completos, ya que tú puedes desarrollar con React a tu gusto, aplicando aquellas herramientas y librerías adicionales que hacen las cosas como mejor se adapte al proyecto.
No se puede decir de una manera objetiva si es ReactJS es mejor o peor que otras alternativas, porque eso ya entra más en el terreno de la opinión. Lo cierto es que muchas librerías se especializan en el «data-binding», pero React toma esa misma necesidad y la resuelve de otra manera. La diferencia es que React le pone más inteligencia a la necesidad de actualizar una vista cuando es necesario y lo consigue mediante el «DOM Virtual».
En líneas generales el virtual DOM es una representación del DOM pero en memoria. Cuando se actualiza una vista se actualiza 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 sabe perfectamente qué partes de la página debe actualizar y se ahorra la necesidad de actualizar la vista entera. Es algo muy potente y es la base del rendimiento optimizado de React. Esto se hace de manera transparente para el desarrollador, que no necesita intervenir en nada.
React es isomórfico
Éste es un concepto relativamente nuevo, pero muy interesante en el desarrollo de aplicaciones que se desean tengan un buen posicionamiento en buscadores. Básicamente se trata de 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.
El problema de las aplicaciones Javascript es que muchas veces reciben 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, que es la solución más adecuada, porque nos permite desacoplar el servidor del cliente, pero 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.
Nota: Al no tener contenido una página que recibe los datos en un JSON, Google no sabe qué palabras clave son interesantes y no otorga ranking para ellas. Con ello la aplicación o página no consigue posicionar. Google está haciendo cambios y ha comenzado a procesar el Javascript para saber los datos de una página, pero aún dista de las ventajas que supone que el contenido esté en el propio HTML que entrega el servidor.
Para la librería que nos ocupa, React, permite isomorfismo. Eso es que, con el mismo código somos capaces de renderizar tanto en el cliente como el servidor. Por tanto, cuando llega un buscador como Google, con la misma base de código se le puede entregar el HTML con el contenido ya renderizado, lo que lleva a que una aplicación React sea capaz de posicionarse tan bien como una aplicación web tradicional que renderice del lado del servidor, como es el caso de un desarrollo tradicional o un desarrollo basado en un CMS como WordPress.
Todo esto se consigue gracias a NodeJS y se puede reutilizar no solo la parte de la presentación, sino también la lógica de negocio. En resumen React permite isomorfismo, algo que le faltaba tradicionalmente a AngularJS 1.x. Ahora se ha resuelto en Angular 2.x. Aunque muchas librerías siguen sin ser capaces de soportar isomorfismo.
Ecosistema de React
Como hemos dicho, React en sí es una librería y como tal hay cosas que se deja del lado de fuera con respecto a soluciones aportadas por los frameworks MVC. Sin embargo existe todo un ecosistema de herramientas, aplicaciones y librerías que al final equiparan React a un framework.
Hay herramientas que se usan en múltiples proyectos, como el caso de Redux o Flux, que aportan partes que React no se encarga. Éstos se ocupan del flujo de datos en React y lo resuelven de una manera optimizada, elegante, poniendo énfasis en la claridad de las aplicaciones. Como desarrolladores podemos escoger entre varios frameworks encargados del flujo de los datos, basados en React. Como otros ejemplos tenemos generadores de aplicaciones, sistemas de routing del lado del cliente, etc.
Por otra parte, al desarrollar en base a componentes reutilizables permite que puedas usar el desarrollo de un proyecto en otro. Y por el mismo motivo, encuentras una amplia comunidad que libera sus propios componentes para que cualquier persona los pueda usar en cualquier proyecto. Por tanto, antes de desarrollar algo en React conviene ver si otro desarrollador ya ha publicado un componente que lo haga y en la mayoría de los casos, cuando se trata de cosas de ámbito general, veremos que siempre es así.
Hay componentes desde simples botones, sliders, tooltips, etc. Es muy sencillo que se pueda compartir, gracias a que los componentes son capaces de trabajar de manera independiente y que encapsulan funcionalidad para que no interaccionen con otros componentes si no se desea.
React Native es otra de las herramientas disponibles en el ecosistema, que permite llevar una aplicación escrita con Javascript y React como aplicación nativa para dispositivos iOS, Android, etc. Y se trata de aplicaciones nativas, no de web views.
Conclusión
React es una librería completa y con un punto de maduración óptimo para implementarla en muchos tipos de proyectos distintos. Nos permite un desarrollo ágil, ordenado y con una arquitectura mantenible, focalizada en un gran performance.
Aunque React no se encarga de todas las partes necesarias para hacer una aplicación web compleja, la serie de componentes y herramientas diversas que se basan en React nos permite encontrar una alternativa capaz de hacer cualquier cosa que podríamos hacer con un complejo framework.
Fuente: Desarrollo Web
