React es Single page app
Es muy importante resalta que React sigue la arquitectura de Single page app, por lo que las vistas son generadas del lado del cliente y solo se comunica al backend para obtener y guardar datos.
¿Qué es React?
React es sin duda una de las tecnologías web más revolucionarias de la actualidad, pues proporciona todo un mecanismo de desarrollo de aplicaciones totalmente desacoplado del backend y ejecutado 100% del lado del cliente.
React fue lanzado por primera vez en 2013 por Facebook y es actualmente mantenido por ellos mismo y la comunidad de código abierto, la cual se extiende alrededor del mundo. React, a diferencia de muchas tecnologías del desarrollo web, es una librería, lo que lo hace mucho más fácil de implementar en muchos desarrollos, ya que se encarga exclusivamente de la interface gráfica del usuario y consume los datos a través de API que por lo general son REST.
El nombre de React proviene de su capacidad de crear interfaces de usuario reactivas, la cual es la capacidad de una aplicación para actualizar toda la interface gráfica en cadena, como si se tratara de una formula en Excel, donde al cambiar el valor de una celda automáticamente actualiza todas las celdas que depende del valor actualizado y esto se repite con las celdas que a la vez dependía de estas últimas. De esta misma forma, React reacciona a los cambios y actualiza en cascada toda la interface gráfica.
Uno de los datos interesantes de React es que, se ejecutado del lado del cliente (navegador), y no requiere de peticiones GET para cambiar de una página a otra, pues toda la aplicación es empaquetada en un solo archivo JavaScript (bundle.js) que es descargado por el cliente cuando entra por primera vez a la página. De esta forma, la aplicación solo requerirá del backend para recuperar y actualizar los datos.
React suele ser llamado React.js o ReactJS dado que es una librería de JavaScript, por lo tanto, el archivo descargable tiene la extensión .js, sin embargo, el nombre real es simplemente React.
Server Side Apps vs Single Page Apps
Para comprender como trabaja React es necesario entender dos conceptos claves, los cuales son Server side app (Aplicaciones del lado del servidor) y Single page app (Aplicaciones de una sola página)
Server side app
Las aplicaciones del lado del servidor, son aquellas en las que el código fuente de la aplicación está en un servidor y cuando un cliente accede a la aplicación, el servidor solo le manda el HTML de la página a mostrar en pantalla, de esta manera, cada vez que el usuario navega hacia una nueva sección de la página, el navegador lanza una petición GET al servidor y este le regresa la nueva página.
Esto implica que cada vez que el usuario de click en una sección, se tendrá que comunicar con el servidor para que le regresa la nueva página, creado N solicitudes GET para N cambios de página. En una página del lado del servidor, cada petición retorna tanto el HTML para mostrar la página, como los datos que va a mostrar.
Como vemos en la imagen, el cliente lanza un GET para obtener la nueva página, el servidor tiene que hacer un procesamiento para generar la nueva página y tiene que ir a la base de datos para obtener la información asociada a la página de respuesta. La nueva página es enviada al cliente y este solo la muestra en pantalla. En esta arquitectura todo el trabajo lo hace el servidor y el cliente solo se limita a mostrar las páginas que el server le envía.
Single page app
Las aplicaciones de una sola página se diferencian de las aplicaciones del lado del servidor debido a que, gran parte del procesamiento y la generación de las vistas las realiza directamente el cliente (navegador). Por otro lado, el servidor solo expone un API mediante el cual, la aplicación puede consumir datos y realizar operaciones transaccionales.
En este tipo de arquitectura, se libera al servidor de una gran carga, pues no requiere tener que estar generando vistas para todos los usuarios conectados ni mantener en memoria todos los datos asociados a la sesión.
Como vemos en esta nueva imagen, el cliente es el encargado de realizar las vistas y realizar algunos procesamientos, mientras que el servidor solo expone un API para acceder a los datos.
Si bien, React funciona originalmente como SPA, existe técnicas para realizar el renderizado del lado del servidor, como es el caso de NextJS, un poderos framework que permite el renderizado del lado del servidor, sin embargo, esto querá fuera del alcance de este libro.
Acerca de este libro
Todo lo que acabas de ver en este artículo es solo una pequeña parte del libro Aplicaciones reactivas con React, NodeJS & MongoDB, El libro más completo en español para aprender a crear aplicaciones web completas con las tecnologías más potentes de la actualidad, desde el Frontend con React, hasta el Backend con un poderoso API REST con NodeJS y Express y persistiendo todo en MongoDB. te invito a que veas mi libro:
Ver libro
