Video Summary and Transcription
Ir a conferencias puede ser abrumador, por lo que el orador creó una guía de los conceptos de tendencia en la web utilizando personajes de cómics. El tema elegido es la reanudabilidad, y se utiliza la historia de Tony Stark para explicarlo. La reanudabilidad permite una interactividad inmediata en una página web y se logra a través de la serialización y ejecución de código. El orador desafía a la audiencia a proponer temas para futuras guías.
1. Introducción a la Charla
Ir a conferencias, eventos, reuniones como esta puede ser abrumador. No tenemos los modelos mentales correctos de ellos. Me gustan mucho los cómics y pensé, ¿qué pasaría si uniera mi amor por los cómics y mi amor por la tecnología y construyera otra guía para los conceptos de tendencia en la web? Soy Daniel Alfonso, un defensor del desarrollador en OLX, instructor y autor. Esta charla trabajará con URL. Voy a mostrarles tres temas y les pediré que aplaudan por cada uno.
Vale. Hola, hola a todos. Así que intentemos asegurarnos de que podemos repasar esto en cinco a siete minutos porque va a ser interesante. Así que para empezar, ir a conferencias, eventos, reuniones como esta puede ser abrumador. Hay estas palabras que se lanzan alrededor de cada charla, y no siempre entendemos lo que significan. El problema es porque no tenemos los modelos mentales correctos de ellos. Y los modelos mentales son las cosas que asocias cuando escuchas una palabra. Así que si estás durmiendo, sabes todos los pasos en tu mente que tienes que hacer para dormir, espero. Así que algo sobre mí. Me gustan mucho, mucho los cómics. Y tengo más cómics de los que puedo coleccionar. Y pensé, ¿qué pasaría si uniera mi amor por los cómics y mi amor por la tecnología y construyera otra guía para los conceptos de tendencia en la web? Así que muy rápidamente me presento. Soy Daniel Alfonso. Soy esta persona en esta diapositiva en caso de que no me reconozcas. Estoy trabajando como defensor del desarrollador en OLX. Soy instructor, puedes encontrarme en X. Escribí un libro sobre React Query. Acabo de lanzar un curso sobre testing libraries. Así que estas son todas las cosas que son importantes saber sobre mí. Descargo de responsabilidad. Algunas de las cosas que se verán aquí y los personajes son propiedad de Marvel y DC. Así que no hay responsabilidad sobre eso. Solo quiero contar una historia. Por favor, no me demanden. ¿Cómo funcionará esta charla? Esta charla trabajará con URL. Porque en este punto, y en este momento, no sé de qué voy a hablar. Ustedes van a decidir. Porque voy a mostrarles tres temas en un momento. Y aplaudiendo, les voy a pedir que aplaudan a cada uno de ellos.
2. Elección del Tema y Personaje
El tema que reciba más aplausos será el que se discuta. Se presentarán dos personajes, y la historia que gane ayudará a construir el modelo mental. Después de la historia, se dará la explicación técnica. Los temas propuestos son hidratación, reactividad de grano fino y reanudabilidad. Se elige la reanudabilidad, y se selecciona la historia de Iron Man.
Y el que reciba más aplausos será sobre el que voy a hablar. ¿De acuerdo? Después, lo que va a suceder es que para ese tema específico, voy a mostrar dos personajes. Y una vez más, ustedes van a aplaudir. Y la historia que gane, es una historia específica que les ayudará a construir el modelo mental para ese tema. Y al final, espero que entiendan qué demonios estamos viendo aquí. Así que solo recapitulemos la historia. Y después del final de la historia, obtenemos la explicación técnica. Así que aquí están los tres temas que propongo hoy. Así que lo que voy a pedir. Voy a nombrar a cada uno de ellos. Voy a pedirles que aplaudan. Y el que reciba más aplausos es el que va a tener una toma nerd. Así que hidratación. Vale. Reactividad de grano fino. Reanudabilidad. Vale. Esa fue difícil. Pero creo que fue la reanudabilidad. Así que vamos con eso. Vale. Ahora es la parte en la que tengo que elegir. Para la reanudabilidad, hay dos personajes que pueden elegir. Pueden elegir a Iron Man o a Lex Luthor. ¿Quién quiere ver la historia de Iron Man? ¿Quién quiere ver la historia de Lex Luthor? Vale. Iron Man ganó. Así que vamos con eso. Ahora yo estoy
3. El Dilema de la Armadura de Tony Stark
Después de salvar el mundo, Tony Stark perdió todas sus armaduras en una batalla contra Kang el Conquistador. Cansado de sus esfuerzos heroicos, Tony envió un memo a su IA, Friday, para recordarle que construya nuevos trajes Mark. Sin embargo, ocurrió una explosión y el enemigo de Tony, el Mandarín, aprovechó su vulnerabilidad. Ahora Tony necesita construir un nuevo traje, pero el proceso anterior era lento e implicaba descargar a Friday en la armadura para activarla.
voy a ser un narrador. Voy a contar una historia. Así que tengan paciencia conmigo, porque tengo como cuatro minutos. Así que después de salvar el mundo, Tony Stark tuvo un problema. Verán, él luchó contra Kang el Conquistador. Y lo que pasó fue, bueno, estas batallas son duras. Y por eso, perdió todas sus armaduras. Todo fue destruido en el proceso. Cero armaduras ahora. Pero verán, Tony estaba cansado. Acaba de salvar al mundo después de todo. Así que envió un memo a Friday, que es su IA personalizada, no Jarvis. Eso es en las películas. Historia completamente diferente. Así que le pidió a Friday, Friday, por favor recuérdame mañana construir algunos nuevos trajes Mark. Y bueno, se fue a dormir. Verán, salvar al mundo, es un negocio duro después de todo. Pero de repente ocurrió una explosión. Verán, algo pasó. Y lo que pasó fue, bueno, aparentemente uno de los enemigos de Tony no puede dejar pasar su oportunidad. Y en este caso, el enemigo es el Mandarín. Así que de repente el Mandarín sabe, okay, Tony es vulnerable. No tiene armaduras. Sé que el proceso que tiene ahora tomará un poco de tiempo para construir una nueva. Así que ataquemos su lugar. De repente Tony se despertó y fue como, okay, ahora necesito un traje. Necesito construir esto. Pero no sé qué hacer porque verán, el proceso que Tony había construido antes, le tomó bastante tiempo construir una armadura. Verán, tenía que construir la armadura, y luego la armadura no funcionaba inmediatamente. No era interactiva. Y tenía que hacer esto, que era descargar a Friday, su IA personalizada, en la armadura y asegurarse de que Friday desde el interior activara la armadura. Eso es
4. El Protocolo Resumable de la Armadura de Tony
Pero sabía que este proceso llevaría mucho tiempo y probablemente significaría que moriría a manos del Mandarín. Así que se vio obligado a pensar, está bien, necesito una armadura lista para trabajar ahora mismo. Friday comenzó a construir el traje. Pero lo que sucedió de manera diferente en este proceso fue que, a medida que se generaba cada parte de la armadura, se añadía información adicional a la armadura. Mandarín dispara un rayo que definitivamente mataría a Tony, pero una nueva armadura llega y lo recoge. Algo cambió con el Protocolo Resumable. Ahora el traje está activo por defecto. Tony disparó el enorme rayo.
lo que pasó antes. Pero sabía que este proceso llevaría mucho tiempo y probablemente significaría que moriría a manos del Mandarín. Así que se vio obligado a pensar, como algunos de mis dragones aparecían en el fondo, y básicamente pensó, está bien, necesito una armadura lista para trabajar ahora mismo. Así que Friday, inicia el protocolo resumable. Constrúyeme un traje ahora. Y Friday lo hizo. Friday comenzó a construir el traje. Pero lo que sucedió de manera diferente en este proceso fue que, a medida que se generaba cada parte de la armadura, se añadía información adicional a la armadura. Se estaba codificando, algo de información extra allí. Y esto es importante por una razón, y te lo diré en un momento. Verás, mientras esto sucedía, Mandarín estaba haciendo su típico monólogo de malo. Verás, vas a morir, voy a ganar, lo que sea, lo que sea, bla, bla, bla, ves esto en cada cómic. Y de repente lo que hace es apuntar su mano a Tony, y dispara un rayo de los diez anillos. Este sería un rayo que definitivamente mataría a Tony. Pero lo que sucede en este punto es que él simplemente salta, y del aire, una nueva armadura llega y lo recoge. Está a salvo. Sobrevivió a este rayo. Ahora, Mandarín sabía cómo funcionaba el proceso. Sabía que no había manera de que Tony saliera de allí con vida, y no había manera de que todo el proceso lo hiciera. Verás, algo cambió con el Protocolo Resumable. Lo que cambió fue que, mientras Friday estaba haciendo esta parte y estaba construyendo la armadura, también codificó una parte muy pequeña de sí misma en la armadura. Y esta parte muy pequeña era responsable de recibir las órdenes que Tony le daba, y ejecutarlas utilizando la información que estaba codificada en la armadura. Esto significa que no hay fase de arranque, que era lo que teníamos antes. Antes, la IA pasaría por el traje y alimentaría cada parte de la armadura. Ahora el traje está activo por defecto. Ya es interactivo. Así que Tony hizo lo más sensato. Dijo Friday, dispara los registros, los cohetes, dispara los cohetes. Y escuchó el mensaje en su casco, como, está bien, alimentando los cohetes, Tony. Después de un rato, cohetes listos. Así que Tony hizo lo que pudo, y disparó el enorme rayo.
5. Explicación de la Reanudabilidad con Tony Stark
Esta explosión destruyó la casa, permitiendo a Tony escapar y pedir refuerzos. La reanudabilidad resuelve el problema de la interactividad no inmediata en una página. La hidratación es lenta, pero con la reanudabilidad, la página se vuelve inmediatamente interactiva. El Quick Loader, un JavaScript de un kilobyte, es responsable de ejecutar el código necesario. El proceso de construcción de la armadura de Tony implicaba hidratación, lo que llevaba a una lenta solicitud del cliente. La reanudabilidad resuelve este problema al serializar la información para su ejecución en un nuevo contexto.
Bueno, esta explosión básicamente lo que hizo fue destruir esta casa. Todo se derrumbó, pero esto también aseguró que Tony pudiera hacer una cosa, que era escapar y salir de allí a salvo, y pedir refuerzos. Entonces, ¿qué pasó después, podrías estar pensando. Bueno, para eso, tienes que estar atento al próximo número. Porque esto es un número de cómic después de todo, y tienes que esperar semanalmente para que continúen con la historia. Así que sé que nos estamos quedando sin tiempo, pero lo que acabamos de ver aquí fue la Reanudabilidad. Y esto fue la Reanudabilidad con la ayuda de Tony Stark. Así que ahora es la parte en la que voy a darles una explicación muy rápida sobre qué demonios pasó aquí. Porque el problema que la Reanudabilidad viene a resolver es que una página no es inmediatamente interactiva. Tenemos que hacer esta cosa llamada hidratación una vez que obtenemos nuestra página renderizada en el servidor en el navegador. Y durante la hidratación, donde estamos haciendo parte del trabajo que hicimos en el servidor ya en el cliente, y estamos ejecutando un montón de otro código. Así que cuando estamos haciendo la Reanudabilidad, lo que pasa es que cuando estamos generando el HTML, lo estamos renderizando en el servidor, estamos serializando algo de información extra. Y lo que pasa es que debido a esto, esta información nos permite reanudar la ejecución en el cliente una vez que obtenemos el código, la página. Así que esto significa que la página es inmediatamente interactiva una vez que la obtenemos. Además, hay este muy pequeño kilobyte de JavaScript que se descarga, que se llama Quick Loader. Sí, lo adivinaste, la Reanudabilidad se hizo popular debido a esta cosa llamada Quick. Y el Quick Loader es responsable de configurar un escuchador de eventos global que capturará todos los eventos, y utilizando la información serializada, los ejecutará. Así que esto significa que sólo descargaremos el necesario JavaScript para ejecutar esa parte del código. Así que esto es lo que vimos, y estamos a punto de terminar. El primer problema que tuvimos, la hidratación es lenta. Ese fue el proceso que Tony tenía antes. Básicamente, estaba haciendo hidratación cuando estaba construyendo la armadura. Así que había un problema, y este problema llevó al cliente a solicitar una nueva página. Lo que hizo después fue usar el marco, la IA personalizada, el servidor construiría esta nueva página HTML y serializaría toda la información necesaria para reanudar su ejecución en un nuevo contexto. Después, la armadura llegaría al cliente, así que el cliente obtendría la página, y es inmediatamente interactiva. Así que finalmente, el cliente también obtendría el Quick Loader que configuraría el escuchador de eventos global, y básicamente, cada vez que ocurra un evento, el Quick Loader lo interceptaría, obtendría el JavaScript, y lo ejecutaría. Así que esto fue la Reanudabilidad. Sólo voy a pasar estas animaciones rápidamente porque esto es justo lo que vimos. Este es el modelo completo de la Reanudabilidad y lo que pasa siempre que queremos entenderlo. Así que espero que
6. Próximos Pasos y Desafío
Disfruté de este concepto y me divertí mucho simplificando temas con los que lucho. Ahora, quiero desafiarlos a que propongan temas para futuras guías. ¡Gracias!
disfruté de esta historia, y solo voy a pasar a la última diapositiva. Y disfruté de este concepto porque me divertí mucho haciéndolo. Es una forma para mí de simplificar los temas con los que lucho últimamente, y contarlos de formas que realmente amo. Entonces, ¿qué sigue? El próximo tema, bueno, para eso, me gustaría lanzarles un desafío. Propongan temas que les gustaría que haga una guía temprana. Estoy totalmente dispuesto a hacerlo. Entonces, como pueden ver, ya tenemos un par de ellos aquí. Ustedes eligieron uno hoy. Entonces, en el futuro, podría haber uno. Ese fue mi tiempo. Muchas gracias. Soy Daniel Alfonso.
Comments