Que es React.js y como cambio el desarrollo FRONT-END

Revolucionó el desarrollo web a través de los años, fue concebida en 1992 y desde entonces se ha transformado en la tecnología más revolucionaria del mundo, es fácil determinarlo al analizar el impacto en la sociedad. Mucha gente cree que internet y web son sinónimos, aunque no lo son la web es un sistema distribuido de documentos HTML a los que puedes acceder a través de un navegador web conectado a internet a través del protocolo HTTP. ¡Si! escuchaste bien la web es HTML. la web usa la arquitectura cliente servidor esto significa que una máquina cliente hace una solicitud a un servidor que le entrega una información

¿CÓMO EL FRONT END LLEGO A SER EL FRONT END?

Hoy el término FRONT-END se pensó a fundamentar con la llegada de HTML5, el cuál cambió las reglas del juego dándole mucho poder a HTML junto con la versión CSS3, los desarrolladores empezaron preocupar de lo que pasaba en el lado del FRONT END es decir en el lado del cliente en esos tiempos donde antes predominaba tecnología como QUERY que se encargaba de simplificar JAVASCRIPT.

Así es como de repente ya podrías ejecutar aplicaciones como Office, Photoshop, realizar videoconferencias, juegos en línea, animaciones en 3d como Google Maps en el navegador sin instalar plugin ni extensiones entonces se popularizó el concepto de single page application o SP es decir una aplicación web que no recarga nunca la página y que para cambiar de interfaz así el proceso de routing asociando una URL a otra interfaz diferente pero jamás recarga la página porque piénsalo bien una aplicación web en la que cada clic requiera recargar la página entonces es considerada como un  sitio web tradicional.

MODELO MVC

Angular y otros lenguajes estuvieron a la cabeza adaptando el modelo MVC al Front, esta es una arquitectura del software que permite organizar las partes de una aplicación de la siguiente manera:

• El modelo representa los datos de la aplicación y el acceso a ellos, la vista es la interfaz con la que interactúa el usuario con los datos entregados por el modelo y el controlador es la lógica de negocio, lo que debe hacer la aplicación.
• El controlador es una especie de puente entre la vista y el modelo y es el usuario quien al interactuar con la vista desencadena las acciones del controlador.

Hacer cambios en el DOM es una de las tareas más pesadas del navegador de hecho para mostrar algo en pantalla hay muchos procesos por detrás y el hecho de mostrar algo es simplemente el último de ellos.

 ¿QUÉ ES EL DOM?

Son las iniciales del DOCUMENT OBJECT MODEL es la estructura interna de un documento HTML, es como un árbol que se ramifica por cada uno de los elementos del documento llamados nodos. La labor del navegador es interpretar el DOM a partir del código HTML, JAVASCRIPT y CSS, y dibujarlo en pantalla cada cambio en el DOM implica hacer nuevos cálculos para reinterpretar el estado y aunque siempre ha sido un estándar en la industria esto de separar HTML para la estructura, CSS para la presentación y JAVASCRIPT para el comportamiento a escala más grande podría también resultar un problema, porque teníamos la estructura por un lado el comportamiento que está muy asociado a esa estructura en un archivo JAVASCRIPT separado en otra ubicación en otro director y los estilos por otro lado escalar requería pensar diferente y cambiar de paradigmas y justamente es lo que hizo REACT.

ASÍ ES COMO REACT PROPONE EL CAMBIO

1.  Construir componentes no templetes porque la lógica está inevitablemente unida al marcado del elemento
2.  Los componentes son bloques cohesionados de piezas de interfaz reutilizables
3.  No más Two Way Data Binding que era el enfoque de otros lenguajes y es sino cambiar cada componente en cada actualización.
4. Virtual DOM: para optimizar las actualizaciones del DOM
5.  JSX para escribir el marcado dentro de JAVASCRIPT con una sintaxis sencilla en la que incluso los diseñadores web pueden contribuir porque es casi a HTML

Algunos conceptos para analizar son:

LOS COMPONENTES: son bloques de interfaz que pueden ser reutilizables por ejemplo un botón, un sencillo botón ya es un componente y puedes usarlo en diferentes lugares de tu aplicación

JSX: es lenguaje sencillo de entender cuya sintaxis sea prácticamente igual a HTML, es decir forma de escribir los componentes en JAVASCRIPT, pero con la misma sintaxis de HTML sin objetos, sin métodos, sin funciones raras, sin llamar parámetros; es HTML dentro de JAVASCRIPT.

VIRTUAL DOM: DOM guardado en memoria porque al final de cuentas un DOM es un objeto JAVASCRIPT, el problema es que ese objeto se pinta en pantalla cada vez que hay un cambio, por lo tanto con Virtual DOM cada vez que haya un cambio, se identifica cuál es ese único cambio y ese único cambio es el que se va a actualizar en pantalla, ese componente que cambia es el único que se va a actualizar en pantalla dejando todo el resto intacto, logrando mejor rendimiento.

ESTADO: hay dos tipos de estados el estado de los componentes y el estado de toda la aplicación en el caso de los componentes ellos tienen su propio estado que no lo comparten con ningún otro componente es algo con sus componentes hijos y cuando el estado cambia ellos se actualizan ahora si los componentes no comunican su estado con otros componentes como se comunican para que la aplicación sea coherente ahí viene el estado global de la aplicación al cual todos los componentes están suscritos es decir están escuchando los cambios para actualizarse de esa manera si hay un cambio un componente que requiere un cambio en otro se actualizan los dos.

ya quedó claro que REACT que es una gran tecnología que cambió el paradigma del desarrollo web para siempre que es muy versátil porque la puedes usar en FRONT-END embarquen en desarrollo móvil.