Reactividad y Estrategias de Renderizado en JavaScript
Contenido del curso
Juan Castro
Profesor
Jose SRE
Alejandro Ibarra Rodriguez
Juan Castro
Profesor
Aidan Murillo Corrales
Sergio Brandon De Lucio Chavero
Juan Castro
ProfesorJuan Castro
Profesor
Angel Javier Sanchez Tenjo
Miguel Angel Reyes Moreno
Irving Juárez
Juan Pablo Jimenez
Jimmy Buriticá Londoño
Diana Florez
Max Andy Diaz Neyra
Agustina Corvo
Jose Luis Barboza Gonzales
Stiven Jiménez
Thomas Jeffery
Orangel Gonzalez
Luis Xavier Fernández
Angel Solis
Joel Eduardo Sánchez Herrera
Juan Castro
ProfesorJoel Eduardo Sánchez Herrera
Alejandro Gómez Huertas
Rafael Lizarraga
Fausto Misael Obregón Cabezas
Luis Alejandro Vera Hernandez
Dale 💚 si quieres un Curso de Patrones Arquitectura de Software para Frontend
💚
💚
Dale 💚 si quieres un Curso de Programación Reactiva en JavaScript
💚
💚
Caso práctico de manejo del Estado: . :one: Requerimiento general del producto (lo que el usuario debe ver)
La aplicación tiene una lista de elementos y un input de búsqueda
El usuario escribe su filtro / búsqueda
La aplicación muestra solo los elementos que cumplen con el filtro . :two: Requerimiento detallado del producto (lo que en realidad debemos construir)
La aplicación tiene un estado / store global para guardar elementos
Diferentes elementos de la UI se suscriben al estado global para enviar o recibir actualizaciones -- El input de búsqueda envía actualizaciones -- La lista de elementos recibe actualizaciones
El usuario escribe su filtro / búsqueda en el input, el input envía el mensaje al estado, el estado cambia y se lo notifica a la lista de elementos, la lista de elementos cambia y el usuario obtiene su respuesta
:eyes: Dato curioso: Una opción al trabajar con el estado es hacerlo inmutable. En vez de actualizar directamente el estado, crear un "nuevo" estado cada vez que hacemos una actualización. Y de esta forma podemos hacer cosas muy cool como viajar en el tiempo entre estados (muy útil para debugging).
La programación Funcional, el concepto de Inmutable es el pilar de este paradigma.
Reactividad: Es un paradigma, una forma de pensar nuestras aplicaciociones. Deben seguir 2 reglas:
Recuerda: La arquitectura no es ajena a la programación.
Estado: Es el lugar donde vamos a guardar la información reactiva de nuestros componentes. Son variables a las que nos suscribimos para recibir una notificación cada vez que cambian sus valores.
Render: o renderizado, es el proceso por el cual nuestro HTML, pasan a ser información visual en el DOM.
Estrategias de render: Virtual DOM y No Virtual DOM. Ninguna es mejor, depende del caso en particular.
Componente -> Estado -> Render -> Usuario (y vuelve a "Estado")
Que es la reactividad en el software y porque es importante?
La reactividad nacio en el 2014 con "The Reactive Manifesto", en donde explican como es que las aplicaciones web de hoy en día no pueden ser iguales a las aplicaciones web de hace 10 años. Esto debido principalmente a la cantidad de usuarios del internet que hay hoy en día. Por lo tanto, se dijo que para que una aplicación pueda ser competitiva, necesita 4 características principales:
Es un paradigma, una forma de pensar nuestras aplicaciones de forma que sigan dos reglas o lineamientos.
Otros dos conceptos para trabajar la reactividad son:
Estado o State: Aquí se guarda la información reactiva de nuestros componentes, no todos los frameworks lo llaman así pero en esencia son lo mismo, son variables a las que nos suscribimos para recibir una actualización cada vez que cambian sus valores. Podemos manejar un campo de búsqueda o filtrado en una lista de elementos. Con el estado estamos preparados para cuando el usuario solicite la búsqueda nosotros podamos reaccionar.
Render: Es el proceso por el cuál nuestro HTML pasan a ser información visual en el navegador (el DOM), con JS podemos manipular el HTML que ya está en el navegador y cambiarlo dependiendo de las interacciones de nuestros usuarios.
Estrategias de render:
Estas son las que usan los frameworks así que debemos elegir el que más se adapte a nuestro proyecto.
Reactividad
Es un paradigma de programación y sigue dos reglas: 1. Responsive: Saber reaccionar ante cualquier situación 2. Message Driven: Arquitectura basada en mensajes.
Explica super bien !!! Gracias
Resumen de la clase1: Conceptos básicos:
Reactividad
Responsive: se divide en 2 puntos: resiliente y escalable.
Message driven
Siento que los puntos que repasamos en esta clase son super importantes para lo que se viene. Gracias Juan 💚 por explicarlos así, se me hizo super fácil entender los conceptos.
ser responsive significa ser recilientes(a prueba de todo) y elasticas (escalables)
Te falto, dirigida por mensajes en el que éxito un emisor y un receptor, el emisor envía un mensaje que no recibe directamente el receptor, en realidad se guarda en una cola a la que el receptor debe suscribirse por medio de los observers para obtener el mensaje
La reactividad es una manera de pensar(es un paradigma de programacion) Para que sea Reactivo tiene que cumplirse 2 cosas
1° Que sea Responsive(Responsivo) Debe saber reaccionar. Saben que hacer sin importar lo que pase
Para decir que se es responsive debe cumplir 2 condiciones:Resiliente y escalable
Resiliente: La pagina siempre sabe como responder. Siempre darle una solucion ante un error de sea conexion o lo que fuese. Es decir, que pueda continuar con su navegacion
Escalable: no importa con cuanta informacion o cuantos usuarios deban entrar debe poder adaptarse
2°Arquitectura basada en mesajes
Los mensajes se guardan de forma asincronica Emisores - Receptores Se guardan en una cola( queue ) a la cual los receptores se deben suscribir para recibir su mensaje. A la hora de que el emisor envie el mensaje, el "queue aggregator" identifica en que queue debe guardar ese mensaje. Esa cola en particular se encargara de avisar a todos los suscritos que recibio un mensaje. Para utilizar este patron se usa observer (rx.js) => reactivex
No dejarnos llevar por la corriente y aprender de lo que estamos trabajando
============ =Estado=
=================================== Los estados son variables a las que no suscribimos para recibir una actualizacion cada vez que cambian sus valores Cada vez que el usuario aprete un boton o use una lista de busqueda tenemos que poder reaccionar
============ =Render=
=================================== Con JS podemos escribir el html de una parte de la pagina o toda una aplicacion completa. Tambien podemos acceder al html ya dibujado en el navegador
=Estrategias de render=
Virtual DOM es una representacion del DOM en JS Modificar directamente el DOM es muy costoso. Porque no necesitamos actualizar toda la aplicacion Solo ciertos lugares Como saber cuales lugares? Cada vez que vemos que hay un render se hace un copia de js. Entonces cada vez que vamos a modificar el js lo hacemos en el virtual DOM Una vez identificamos los componentes en especificos recien ahi le enviamos los cambios al DOM
No Virtual DOM No usar el virtual DOM
Responsive, no es igual al responsive design.
. Resiliente: Cuando nuestra aplicación siempre sabe que hacer, en cualquier momento . Escalable: Siempre va ir creciendo sin importar la cantidad de usuarios que se sumen
Yo sí quiero un curso de paradigmas y patrones de arquitectura para Front End
La verdad sí se agradecería un curso sobre patrones de diseño y arquitecturas para frontend.
MUCHA TEORIAAAAA Cada Framework usa una sitnaxis diferente para crear componentes, al igual que diferentes estrategias de rendering, esto es la forma que convierten los componentes en HTML.
No existe una unica forma para programar para que construyamos la misma aplicacion. Dependiendo del problema que tengamos que resolver habra caminos mas faciles que otros, esto son paradigmas, como la POO, la programacion funcional, etc. Pero hay paradigmas mas pequenos como el paradigma descriptivo siempre hay que mostrar el como. Pero en el hiperativo nos esforzamos por esconder el como hicimos las cosas. La Reactividad tambien es un paradigma pero este tiene que seguir dos lineamientos:
Responsive
No de Responsive Design, pero de saber reaccionar, saben que hacer sin importar lo que pase, estas tienen que ser Resilientes y Escalables.
Resiliente que siempre sabe que hacer, incluso en situaciones malas o de panico. Sabremos como responder a los usuarios y darles una solucion para que puedan seguir usando la aplicacion.
Elastico o Escalable quiere decir que no debe importar la informacion que vamos a trabajar o cuantos usuarios entren al mismo tiempo.
Arquitectura Basada En Mensajes (Message Driven)
Conciste en programar aplicaciones con emisores y receptores de mensajes, pero esto no llega directamente los mensajes. Esto no se entregan sincronicamente si no Asincronicamente, se guardan en cola a la que los receptores se deben suscribir para recibir sus mensajes.
Para este patron usamos Observadores, RXJS es una buena libreria para esto.
Esta es la forma en la que internamente funcionan muchos de los framework en JS para ser reactivos. Y hay que implementarla de forma conciente. TODOS DEBEMOS APRENDER ARQUITECTURA
El estado es donde vamos a guardar la informacion reactiva de nuestro componentes, son variables a las que nos suscribimos para recibir una actualizacion cada que cambian sus valores. Como un campo de busqueda o presione un boton, debemos buscar un estado para buscar las palabras clave para nuestra lista de elementos. COMO NO SABEMOS CUANDO SUCEDERA con el estado estamos listos para reaccionar cuando el usuario haga esto.
El renderizado es el proceso en el que nuestro HTML pasa a ser informacion visual o el DOM. Con JS podemos escribir el HTML en parte de los sitios, al igual podemos manipular el HTML que ya esta escrito, por eso hay estrategias para hacer esto.
Virtual DOM
Una reprensetacion del DOM en JS. Leer, hacer comparaciones y modificarlo directamente es muy costoso y a veces no necesitamos actualziar toda la aplicacion cuando a veces nada mas tenemos que actualizar N numero de componentes. Cuando trabajamos con esto creamos una copia del DOM que sera el cual compararemos y cuando sabremos que mofiicarlo haremos esto con el directo.
No Virtual DOM
A pesar de ser bueno hay personas que piensan que esto es un paso extra y esto es innecesario, que agregar este paso o actualizar un elemeneto en el navegador no vale la pena. Proponen que en vez de crear una copia del DOM, en vez creeemos un mini VIRTUAL DOM del puro componente y no de TODO EL DOM o no hacer copia.
Recordemos que cada componente tendra un ESTADO, de ahi estara en RENDER y los USUARIOS Podran interactual con la pagina y esto cambiara el ESTADO y el ciclo se repite.
Ya viene la prácticaaaaaaaaa
¡Aguanta tantito! ¡Es importantísimo!
Justo Ya estoy en eso, pero estoy repitiendo todas las paginas porque no las guarde, todo por no iniciar sesion jajaja:(
Paradigmas: Se puede programar de diferentes formas, pero hay caminos que son más cortos y fáciles. Ej. De paradigma: POO, Programación funcional.
Características de aplicaciones reactivas: -Responsive: Resiliente (Muy buen diseño estructurado, saben reaccionar) y Escalable (Buen funcionamiento bajo un número masivo de usuarios e información) Arquitectura Message Driven: Emisores y receptores de mensajes asincrónicamente se establece la comunicación.
Conceptos importantes de los Frameworks de JS: Estado: Es el lugar donde vamos a guardar la información reactiva de nuestros componentes. Variables a las que nos suscribimos para recibir una actualización cada vez que cambian sus valores. Es un tipo de suscripción entre variables. Render: Es el proceso por el cual las líneas de código pasan a ser información visual en el navegador.
Virutal Dom: Esto nace de la necesidad de NO recargar toda la aplicación, solamente ciertos lugares. Cada vez que hay un render se crea una copia del DOM en Js. Si deseas cargar una sección de comentarios, la pagina no se va a recargar completamente, solamente lo va a hacer la parte de la sección de comentarios.
Hola Platzi! ¿Cómo va? Estoy armando una carpeta de Google Docs con la toma de notas de todos los cursos que voy realizando para que entre todos podamos aportar!
Los invito a participar! https://drive.google.com/drive/folders/1SWGMgTMPbwgasbzcivcpcnIudc2vk_v0?usp=sharing
De una , que se haga ese Curso de Patrones Arquitectura de Software para Frontend
El estado es una variable donde guardamos la información reactiva y a la que nos suscribimos para recibir una actualización cada vez que esta cambie.