JSNation 2023

Construir aplicaciones utilizando tecnología web es genial; sin embargo, a veces puedes encontrar limitaciones sin importar qué marco de trabajo elijas. Durante esta masterclass, hablaremos sobre cómo elegir un marco de trabajo, problemas comunes y cómo superarlos.
Tabla de contenidos- Introducción: La historia entrelazada de la Web y las aplicaciones- ¡Tantas tecnologías de aplicaciones de escritorio! ¿Cómo elijo una?- Problemas comunes y cómo pensar en las aplicaciones- Conclusión

La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.

Entonces, tienes una increíble aplicación web que has construido y quieres llevarla de tu navegador web a la App Store. Seguro, hay muchas opciones aquí, pero la mayoría requerirá que mantengas aplicaciones separadas para cada plataforma. Quieres que tu código base sea lo más cercano posible en la Web, Android e iOS. Afortunadamente, con Capacitor, puedes tomar tu aplicación web existente y crear rápidamente aplicaciones nativas para iOS y Android para distribuir en tu App Store favorita.
Contenido: Este masterclass está dirigido a desarrolladores principiantes que tienen una aplicación web existente o están interesados en el desarrollo móvil. Repasaremos:- ¿Qué es Capacitor?- ¿Cómo se compara con otras soluciones multiplataforma?- Usando Capacitor para construir una aplicación nativa utilizando tu código web existente- Organizando nuestra aplicación para su distribución en tiendas de aplicaciones móviles con convenciones de nombres, iconos, pantallas de inicio y más

Se te ha asignado la tarea de crear una función de edición de texto colaborativa dentro del producto de tu empresa. Algo similar a Notion o Google Docs.
CK 5 es un marco de trabajo y ecosistema rico en funciones listas para usar que se enfoca en una amplia gama de casos de uso. Ofrece una infraestructura en la nube para satisfacer las necesidades del sistema de colaboración en tiempo real. Durante esta masterclass, aprenderás cómo configurar e integrar CK 5. Repasaremos los conceptos básicos de cómo incrustar el editor en una página, desde la configuración hasta la habilitación de funciones de colaboración en tiempo real. Aprendizajes clave: cómo incrustar, configurar y ajustar CK 5 para que se adapte mejor a un sistema de edición de documentos que admita colaboración en tiempo real.
Tabla de contenidos:- Introducción al ecosistema de CK 5.- Introducción a una plantilla de proyecto similar a `Notion`.- Incrustar CK 5 en una página.- Configuración básica de CK 5.- Ajustar CK 5 para un caso de uso específico.- Habilitar funciones de edición en tiempo real.

¿Curioso acerca de cómo funcionan los datos en el mundo de la blockchain? Únete a Simon en una sesión interesante sobre The Graph, el protocolo de indexación descentralizado que facilita a los desarrolladores de blockchain buscar y consultar datos de blockchain.
Tabla de contenidos:- Comprendiendo los datos de blockchain- Anatomía de un contrato inteligente- Indexando datos de blockchain con The Graph- Accediendo a datos en The Graph- Subgrafos recomendados- Resumen de la escritura de subgrafos

¿Conoces ese molesto error? ¿El que no aparece localmente? Y no importa cuántas veces intentes recrear el entorno, no puedes reproducirlo. Has revisado las migas de pan, leído la traza de pila y ahora estás jugando al detective para unir los tickets de soporte y asegurarte de que sea real.
Únete al desarrollador de Sentry, Ryan Albrecht, en esta charla para aprender cómo los desarrolladores pueden utilizar la Reproducción de Sesiones, una herramienta que proporciona reproducciones de video de las interacciones de los usuarios, para identificar, reproducir y resolver errores y problemas de rendimiento más rápido (sin golpear tu cabeza contra el teclado).

Platformatic te permite desarrollar rápidamente APIs GraphQL y REST con un esfuerzo mínimo. La mejor parte es que también te permite aprovechar todo el potencial de Node.js y Fastify cuando lo necesites. Puedes personalizar completamente una aplicación de Platformatic escribiendo tus propias características y complementos adicionales. En el masterclass, cubriremos tanto nuestros módulos de código abierto como nuestra oferta en la nube:- Platformatic OSS (open-source software) — Herramientas y bibliotecas para construir rápidamente aplicaciones robustas con Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (actualmente en beta) — Nuestra plataforma de alojamiento que incluye características como aplicaciones de vista previa, métricas integradas e integración con tu flujo de Git (https://platformatic.dev/).
En este masterclass aprenderás cómo desarrollar APIs con Fastify y desplegarlas en la nube de Platformatic.

En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.

Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.

Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas

Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.

El masterclass presenta los principios de arquitectura clave, patrones de diseño y tecnologías utilizadas para construir microservicios en el stack de Node.js. Cubre la teoría del marco de trabajo GRPC y el mecanismo de protocol buffers, así como técnicas y especificaciones para construir servicios aislados utilizando el enfoque de monorepo con lerna y yarn workspaces, TypeScript. El masterclass incluye una tarea práctica en vivo para crear una aplicación de conversión de moneda que sigue los paradigmas de microservicios. Es adecuado para desarrolladores que deseen aprender y practicar el patrón de microservicios GRPC con la plataforma Node.js.
Requisitos previos:- Buen entendimiento de JavaScript o TypeScript- Experiencia con Node.js y escribir aplicaciones de backend- Preinstalar Node.js, npm- Preinstalar el Compilador de Protocol Buffer- Preferimos usar VSCode para una mejor experiencia con JavaScript y TypeScript (otros IDE también son aceptables)