Charla

"Elige tu propia aventura" con JavaScript, ES Modules, ArrayBuffers y WebSockets

Viernes 13

12:30h - 13:20h

Track 2

"Elige tu propia aventura" con JavaScript, ES Modules, ArrayBuffers y WebSockets

"Elige tu propia aventura" fue una exitosa serie de libros juveniles. Yo los conocía como "librojuegos", porque el lector tomaba el papel de protagonista y sus decisiones le hacían saltar entre páginas para descubrir diferentes tramas y desenlaces de la historia. Ya en 2018, y siguiendo esa idea, Netflix lanzó la distópica "Black Mirror: Bandersnatch" una experiencia disruptiva, que cambió para siempre el rol pasivo tradicional del espectador para convertirlo en el orquestador de la película. Y allí estaba yo, sentado en el sofá, disfrutando de esta sofisticada creación de Netflix mientras me preguntaba: ¿Cómo podría hacer esto con Javascript? ¿Qué tecnologías web utilizaría para crear algo así, llevarlo a otro nivel y, además, crear una librería de código abierto para que cualquiera pudiese crear su propia aventura interactiva? ¿Y tú, qué dices? ¿Estás listo para ser parte de esta aventura? Si decides conocer todos los retos y aprendizajes que me encontré, pasa a la página 7. Si crees que el tema es interesante y necesitas saber más, pasa a la página 8.

Guión: 1. Introducción 1.1 "Elige tu propia aventura", los libros 1.2 El fenómeno Bandersnatch de Netflix 2. De la idea al código 2.1 Reto: Transición entre vídeos 2.1.1 Llevando al límite el HTML5 Video 2.1.2 Video streams con ArrayBuffers 2.2 Reto: Las codificaciones de los vídeos 2.2.1 Al borde del abandono: sin documentación. 2.2.2 Aprendiendo a dominar ffmpeg 2.2.3 Sin cortes: sincronizando el audio 2.2.4 Demo 2.3 Reto: Decisiones 2.3.1 La estructura de datos 2.3.2 Flat Object. Lo simple siempre es mejor. 2.4 Reto: UI 2.4.1 Sin Webpack, sin Babel. 2.4.2 Hola Preact, Hola ECMAScript Modules 2.4.3 La UX y el timing perfecto: vídeo sin cortes 2.4.4 Los corner cases: el timeout 2.4.5 Theming y CSS Custom Properties 3. Decisiones democráticas en tiempo real 3.1 Comunicación bidireccional con sockets 3.2 Los descartes: Socket.IO, Server Sent Events, 3.3 Aprendiendo sobre Web Sockets 3.4 Orquestando la UI, el servidor y los clientes 3.5 useSWR: fetching de datos 4. Demo final 4.1 Últimas consideraciones 4.2 Anuncio de librería de código abierto: cyoa 4.3 ¡Gracias! 5. Preguntas

Medio
Open Source / Free Software
Entretenimiento / Videojuegos
Desarrollo Web

Miguel Ángel Durán García

Frontend Engineer Adevinta

Adevinta Spain

Miguel trabaja como Arquitecto Frontend en Adevinta Spain, una compañía especialista en marketplaces. Presentador del podcast WhatTheFront, apasionado