Dale 💚 si quieres un Curso de Patrones Arquitectura de Software para Frontend
Fundamentos del Desarrollo Web Profesional
Cuándo necesitas un framework de JavaScript
Qué son los componentes
Cómo estructurar un componente
Qué es reactividad
Librerías vs. frameworks
Ecosistema de frameworks y librerías JavaScript
Contexto y funcionamiento de los Frameworks JavaScript
Qué es React y cómo se construyó
Qué es un componente en React y cómo funciona
Cómo usar React.js
Manejo del estado en React
Qué es Angular y cómo se construyó
Cómo usar Angular
Qué es Vue y cómo se construyó
Cómo usar Vue.js
Qué es Svelte y cómo se construyó
Cómo usar Svelte
Estilos con CSS, preprocesadores y CSS-in-JS
Qué es CSS-in-JS
Componentes en Angular con CSS
Trabajando con Vue Components
Vue Components con Preprocesadores de CSS
Trabajando en React con Styled Components
Estilos dinámicos con Styled Components en React
Trabajando en Svelte con Emotion
Cómo escalar sitios o aplicaciones web
Tipos de aplicaciones según su router: SPAs vs. SSR
Frameworks sobre frameworks: Next.js
Organización de archivos en el frontend
Retos y análisis para elegir tu próximo stack de desarrollo frontend
Cómo especializarte en Frameworks de JavaScript para Frontend
Aportes 34
Preguntas 2
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:
.
1️⃣ 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
.
2️⃣ 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
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”)
Algo curioso que comentó un profesor de Vue de Platzi alguna vez es que Vue SÍ es completamente reactivo, React no lo es 👀.
.
Solo para dar contexto, en JavaScript podemos manejar la reactividad de una forma muy fácil usando proxy’s. Los proxy’s nos permiten interceptar el cambio de valores de algunos objetos y realizar ciertas acciones. Si quieren conocer más sobre los proxy’s, en el Curso Profesional de JavaScript se toca este tema, y of course, yo los incitaré a probar Vue, el Curso de Introducción a Vue.js 3 explica más a fondo cómo funciona el paradigma de reactividad, e incluso el profesor hace un mini framework reactivo usando proxy’s de JavaScript, es un curso increíble! 💚
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 de programación y sigue dos reglas:
1. Responsive: Saber reaccionar ante cualquier situación
2. Message Driven: Arquitectura basada en mensajes.
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.
ser responsive significa ser recilientes(a prueba de todo) y elasticas (escalables)
Explica super bien !!! Gracias
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.
La verdad sí se agradecería un curso sobre patrones de diseño y arquitecturas para frontend.
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.
💚
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.
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
El paradigma reactivo debe de seguir dos lineamientos:
Muy buena explicación!! Gracias
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
===================================
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
.
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
Términos de reactividad.
Responsive:
¿Qué es el estado?
Lugar donde guardamos la información reactiva de nuestros
componentes. Son variables a las que nos suscribimos para recibir una actualización cada vez que cambian los valores del
estado.
Paradigmas:
Arquitectura basada en mensajes: Programar nuestras apps con emisores y receptores, los mensajes se entregan de manera asincrona, en una cola, en la cual los receptores se suscriben para que los emisores puedan enviarle los mensajes.
Patron de suscriptores, usa el patrón Observer y el ejemplo más conocido es RxJS de Angular.
Estado o State: Guardar la info reactiva de nuestros componentes. Variables a las que nos suscribimos a para recibir los estados de los datos. No siempre sabemos en que momento ejecutar nuestro código. Lo importante es con el estado, estamos suscritos y podemos reaccionar para cuando el usuario lo necesite
Render: Proceso por el cual nuestro código pasa a ser visual en el navegador.
Yo quiero el curso de reactividad!!!
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.
Resumen de la clase1:
Conceptos básicos:
Reactividad
Responsive: se divide en 2 puntos: resiliente y escalable.
Message driven
Resumen de clase3:
Como funciona la App:
Juan, estás volando. Gracias por este curso, realmente viene a explicar muchas cosas para las personas nuevas en este tema
Una verdadera maravilla de explicación de reactividad y de el flujo entre componente, render, estado y usuario. Entre al curso, pensando que quizá debí saltarlo y termine repasando muchas cosas interesantes. ¡Lo voy a terminar! 😄
Aqui me parece que el profe se confundio un poquis. El paradigma imperativo muestra el como, mientras que el paradigma declarativo se esfuerza en mostrar el que…
https://en.wikipedia.org/wiki/Declarative_programming
Tengo entendido que los conceptos de Programación Descriptiva (o Declarativa) y Programación Imperativa están al revés. La programación imperativa es la que muestra el paso a paso de un programa, es una de las más antiguas y la que más conocemos cuando nos introducimos al mundo de la programación. La programación declarativa muestra el QUÉ pero no el CÓMO. Un lenguaje interesante declarativo ( y lógico) es Prolog.
!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.