Name: JSNation 2025
Start: 2025-06-12T11:00:00.000Z
End: 2025-06-16T19:00:00.000Z

Kristiyan Velkov

Taz Singh

Olivier Tassinari

Ciarán Curley

James Swinton-Bland

Seungho Park

Kræn Hansen

Michiel van der Ros

Irina Baeva

Ioana Sauleac

Brian Whippo

Peter-Paul Koch

Lera

Luca Del Puppo

Oli Legat

Violina Popova

Burak Güneli

Daniel Roe

Medhat Dawoud

Maël Nison

Richard Carrigan

Sander Vervaeke

Barbara Ferreira

Benjamin Rensch Vinterberg

Jason Chaw

Petar Kuzmanov

Jose Pablo Fernandez Guerra

Thibault Van den Broecke

HT Sahin

Evangelia Mitsopoulou

David Pugh

Károly Török

Batuhan NARCI

Pieter Wigboldus

La promesa de la web es el acceso universal a servicios a través de OSes y dispositivos sin guardianes, pero como todos los sistemas, la web no es lo que promete, es lo que hace. Y hoy, la web es cada vez más excluyente. Las raíces de esta exclusión son una discrepancia entre la realidad del hardware y las redes desde las cuales los usuarios acceden a nuestros servicios frente a nuestras expectativas de esos mismos dispositivos y redes. Las tendencias que impulsaron a JavaScript en el lado del cliente a principios de la década de 2010 hace tiempo que dejaron de soplar. Entonces, ¿qué hacemos ahora? Esta charla profundiza en la realidad de la red y el dispositivo que debemos enfrentar, y por qué nuestro futuro como desarrolladores web depende de lo que hagamos aquí y ahora.

La Década Perdida del Frontend y la Brecha de Desigualdad de Rendimiento

Alex Russell's journey from engineering to product management, the focus on improving web experiences, and optimizing software for end-user success. Considerations include device performance, web diversity, and API constraints. Challenges of web platforms encompass hardware and network limitations, prioritizing user experience. Understanding the impact of Moore's Law on device performance and adapting browsers for efficiency. Emphasis on code optimization, user-focused development, and quality in web UI. Addressing challenges in PWA success, developer learning, and balancing frameworks with platform understanding.

The promise of the web is universal access to services across OSes and devices without gatekeepers, but like all systems, the web isn't what it promises – it's what it does. And today, the web is increasingly exclusionary. The roots of this exclusion are a mismatch between the reality of the hardware and networks users access our services from versus our expectations of those same devices and networks. The trends that put wind into JavaScript's sails on the client side in the early 2010's have long since stopped blowing. So, what now? This talk digs into the network and device reality we must confront, and why our future as web developers depends on what we do here and now.

Frontend’s Lost Decade and the Performance Inequality Gap

 Alex Russell

En VoidZero, hemos estado trabajando arduamente en construir la base para una cadena de herramientas unificada para JavaScript. Durante el último año y medio, hemos reconstruido todo dentro de Vite desde cero, ahora funcionando en una cadena de herramientas impulsada por Rust que contiene OXC y Rolldown. En esta charla, discutiremos el porqué, las implicaciones y la visión futura de todo este trabajo.

Vite y el Futuro de las Herramientas de JavaScript

Evan Yeo discusses Vite's growth, challenges with dependencies like ES Build and Rollup, and the creation of the bundler Rolldown. The JavaScript ecosystem faces fragmentation, but the company aims for a unified JavaScript stack. Rust is chosen for lower-level development, while JavaScript and TypeScript for high-level APIs. Roldown offers advanced bundling features, outperforming existing tools. Integration with Vite leads to tailored optimizations and significant speed improvements. Vite+ development focuses on creating a comprehensive toolkit. VitePlus integrates TS-down for library bundling, ViteTest for testing, and OX-Lint for linting. Future plans include monorepo awareness, build orchestration, and framework-like features.

At VoidZero, we have been hard at work on building the foundation for a unified toolchain for JavaScript. Over the past year and half, we have reworked everything inside Vite from the ground up, now running on a Rust-powered toolchain containing OXC and Rolldown. In this talk, we will discuss the why, the implications, and the future vision of all this work.

Vite and the Future of JavaScript Tooling

Evan You

Node.js continúa prosperando a pesar de las afirmaciones de su declive. Desmentiremos mitos, destacaremos mejoras recientes y demostraremos su rendimiento robusto en el panorama tecnológico actual. La charla cubrirá el papel de Node.js en la programación del lado del servidor y aplicaciones nativas de la nube, contribuciones de la comunidad, integración de características modernas de JavaScript e influencia de tecnologías emergentes. Concluiremos proyectando el brillante futuro de Node.js y áreas de crecimiento en el mundo tecnológico en evolución.

El Estado de Node.js 2025

The speaker covers a wide range of topics related to Node.js, including its resilience, popularity, and significance in the tech ecosystem. They discuss Node.js version support, organization activity, development updates, enhancements, and security updates. Node.js relies heavily on volunteers for governance and contribution. The speaker introduces an application server for Node.js enabling PHP integration. Insights are shared on Node.js downloads, infrastructure challenges, software maintenance, and the importance of update schedules for security.

Node.js continues to thrive despite claims of its decline. We'll debunk myths, highlight recent enhancements, and demonstrate its robust performance in today's tech landscape. The talk will cover Node.js's role in server-side programming and cloud-native applications, community contributions, integration of modern JavaScript features, and influence of emerging technologies. We'll conclude by projecting Node.js's bright future and growth areas in the evolving tech world.

The State of Node.js 2025

Matteo Collina

Conozca Transformers.js, una innovadora biblioteca de JavaScript para ejecutar modelos de machine learning de última generación 100% localmente en su navegador. Con soporte para casi 2 000 modelos preentrenados, que abarcan una amplia gama de modalidades y tareas, Transformers.js permite a los desarrolladores integrar sin problemas capacidades avanzadas de ML en sus aplicaciones web. También exploraremos cómo aprovechamos las tecnologías web emergentes como WebGPU y WebNN para crear experiencias web interactivas, que preservan la privacidad y son escalables.

Transformers.js: Machine Learning de Última Generación para la Web

Joshua introduces Transformers JS and Hugging Face, emphasizing community collaboration and pre-trained models. Transformers JS evolution led to 1.4 million monthly users, supporting 155 architectures. The library's browser-based capabilities offer real-time processing, cost-efficiency, and scalability. Integration enhancements include native web GPU execution and React Native implementation. Web ML implementation focuses on Onyx Runtime for device execution and web GPU for resource optimization. Browser-based ML applications cover vision, speech recognition, and text-to-speech. Advanced implementations include multimodal applications and educational tools. Interactive AI demonstrations showcase semantic search and conversational AI scenarios. Model licensing transitions to ECMAScript for efficiency and model redownloading factors are discussed.

Learn about Transformers.js, an innovative JavaScript library for running state-of-the-art machine learning models 100% locally in your browser. With support for nearly 2 000 pretrained models, spanning a wide range of modalities and tasks, Transformers.js empowers developers to seamlessly integrate advanced ML capabilities into their web applications. We'll also explore how we leverage emerging web technologies like WebGPU and WebNN to create interactive, privacy-preserving, and scalable web experiences.

Transformers.js: State-of-the-Art Machine Learning for the Web

 Joshua Lochner

En esta masterclass cubriré un proceso repetible sobre cómo iniciar aplicaciones full stack en Cursor. Espere comprender técnicas como el uso de GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usarlos en notas para generar listas de verificación que guíen el desarrollo de aplicaciones. Profundizaremos más en cómo solucionar alucinaciones/errores que ocurren, indicaciones útiles para hacer que su aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espere poder ejecutar su propia aplicación full stack generada por IA en su máquina! Por favor, encuentre las preguntas frecuentes <a href="https://docs.google.com/document/d/13E5znTvDiQUrWuR4WzkaOndAx2VeCTlUpJXrd1DXzfA/edit?usp=sharing">aquí</a>

Building Full Stack Apps With Cursor

Mike Mikula discusses building full stack apps in Cursor, emphasizing planning upfront and utilizing features like rules, memories, and task lists. The Workshop explores Cursor's modes, settings, and features for project management. It covers creating PRD and TRD checklists, validating commit rules, data handling, community engagement, and resolving Tailwind v4 compatibility challenges. Strategies for optimizing checklist usage, addressing testing issues, troubleshooting build tools, and adapting rules with Cloudflare integration are also discussed. Additionally, the Workshop delves into resolving data generation and commit issues, exploring automated testing with MCP and Puppeteer, and testing automation with Postgres MCP and Prisma.

In this workshop I’ll cover a repeatable process on how to spin up full stack apps in Cursor.  Expect to understand techniques such as using GPT to create product requirements, database schemas, roadmaps and using those in notes to generate checklists to guide app development.  We will dive further in on how to fix hallucinations/ errors that occur, useful prompts to make your app look and feel modern, approaches to get every layer wired up and more!  By the end expect to be able to run your own AI generated full stack app on your machine! Please, find the FAQ <a href="https://docs.google.com/document/d/13E5znTvDiQUrWuR4WzkaOndAx2VeCTlUpJXrd1DXzfA/edit?usp=sharing">here</a>

Mike Mikula

La forma en que escribimos código está cambiando fundamentalmente. En lugar de quedar atrapado en bucles anidados y detalles de implementación, imagine enfocarse puramente en la arquitectura y la resolución creativa de problemas mientras su programador de pares de IA maneja la ejecución. En esta masterclass práctica, te mostraré cómo aprovechar Cline (un agente de codificación autónomo que recientemente alcanzó 1M de descargas en VS Code) para acelerar drásticamente tu flujo de trabajo de desarrollo a través de una práctica que llamamos "vibe coding" - donde los humanos se enfocan en el pensamiento de alto nivel y la IA maneja la implementación.Descubrirás:<ul><li>Los principios fundamentales del "vibe coding" y cómo se diferencia del desarrollo tradicional</li><li>Cómo diseñar soluciones a un alto nivel y hacer que la IA las implemente con precisión</li><li>Demostración en vivo: Construcción de un sistema de almacenamiento en caché de grado de producción en Go que nos ahorró $500/semana</li><li>Técnicas para usar IA para entender bases de código complejas en minutos en lugar de horas</li><li>Mejores prácticas para solicitar a los agentes de IA que obtengan exactamente el código que deseas</li><li>Errores comunes a evitar al trabajar con asistentes de codificación de IA</li><li>Estrategias para usar IA para acelerar el aprendizaje y reducir la dependencia de ingenieros senior</li><li>Cómo combinar efectivamente la creatividad humana con las capacidades de implementación de IA</li></ul>Ya sea que seas un desarrollador junior que busca acelerar tu aprendizaje o un ingeniero senior que desea optimizar tu flujo de trabajo, saldrás de esta masterclass con experiencia práctica en desarrollo asistido por IA que puedes aplicar inmediatamente a tus proyectos. A través de demostraciones de codificación en vivo y ejercicios prácticos, aprenderás cómo aprovechar Cline para escribir mejor código más rápido mientras te enfocas en lo que importa: resolver problemas reales.

How to 9,2x Your Development Speed with Cline

Nick presents effective engineering with Client, focusing on AI usage for day-to-day development, suitable for engineers at various skill levels. Experienced engineers benefit from AI tools like Client, addressing common objections and enhancing productivity. AI integration with existing tools, efficient task management, and workflow automation streamline development processes. Leveraging AI tools for efficient documentation, workflow management, and interactive setup for PR reviews. Encouraging audience engagement, feedback, and offers for utilizing AI tools in coding.

The way we write code is fundamentally changing. Instead of getting stuck in nested loops and implementation details, imagine focusing purely on architecture and creative problem-solving while your AI pair programmer handles the execution. In this hands-on workshop, I'll show you how to leverage Cline (an autonomous coding agent that recently hit 1M VS Code downloads) to dramatically accelerate your development workflow through a practice we call "vibe coding" - where humans focus on high-level thinking and AI handles the implementation.You'll discover:<ul><li>The fundamental principles of "vibe coding" and how it differs from traditional development</li><li>How to architect solutions at a high level and have AI implement them accurately</li><li>Live demo: Building a production-grade caching system in Go that saved us $500/week</li><li>Techniques for using AI to understand complex codebases in minutes instead of hours</li><li>Best practices for prompting AI agents to get exactly the code you want</li><li>Common pitfalls to avoid when working with AI coding assistants</li><li>Strategies for using AI to accelerate learning and reduce dependency on senior engineers</li><li>How to effectively combine human creativity with AI implementation capabilities</li></ul>Whether you're a junior developer looking to accelerate your learning or a senior engineer wanting to optimize your workflow, you'll leave this workshop with practical experience in AI-assisted development that you can immediately apply to your projects. Through live coding demos and hands-on exercises, you'll learn how to leverage Cline to write better code faster while focusing on what matters - solving real problems.

Vibe coding with Cline

Nik Pash

Una mirada detrás de escena sobre la realización de la serie de encuestas para desarrolladores "Estado de" (Estado de JS, CSS, etc.) así como lecciones aprendidas y tendencias futuras.

El Estado de la Web

Sasha Grief discusses the state of the web through web development surveys, leading to an interactive quiz about the state of JS and usage of front end frameworks. Discussion on popular front-end libraries like React, Vue, Angular, and the rising popularity of TypeScript among developers in recent surveys. Discussion on TypeScript adoption, TC39 committee proposals, favorite CSS feature 'has,' and browser support for 'has' selector. Browser interoperability, browser vendors' initiatives, AI usage among web developers, and survey insights. Job titles linked to higher income, diversity of survey topics, top hobby among developers, and popular specific video games. Learnings on CSS features, TypeScript default, AI usage, survey benefits, challenges in reaching diverse survey participants. Surprising positivity in JavaScript usage, stable framework landscape, AI adoption challenges, mainstream AI tools, successful situp.js survey. Inconsistent respondent numbers, manual data normalization efforts, subjective question selection process, community input, mitigation of selection bias. Reason for starting surveys, transition from Meteor JS, exploration of JavaScript ecosystem.

A behind-the-scenes look at running the "State of" series of developer surveys (State of JS, CSS, etc.) as well as lessons learned and upcoming trends.

The State of the Web

Sacha Greif

¿Qué pasaría si pudieras usar LLMs multimodales para interactuar con sitios web o dispositivos IoT usando control de movimiento?A medida que los avances en IA multimodal ofrecen nuevas oportunidades para expandir los límites de lo que se puede hacer con esta tecnología, comencé a preguntarme cómo podría aprovecharse desde la perspectiva de la interacción humano-computadora.En esta charla, te llevaré a través de mi investigación experimentando con la construcción de prototipos controlados por movimiento usando LLMs en JavaScript.

Control de Movimiento Con LLMs Multimodales

The Talk delves into motion control with multimodal AI, exploring TensorFlow.js models for gesture recognition and enhancing user interactions. It discusses leveraging LLMs for gesture-based interaction, investigating Gemiini for gesture recognition, and controlling light states with Gemini functions. The conversation includes webcam-based gesture recognition, custom gesture databases, and the future of personalized AI assistance with acoustic recognition.

What if you could use multimodal LLMs to interact with websites or IoT devices using motion control?As advancements in multimodal AI offer new opportunities to push the boundaries of what can be done with this technology, I started wondering how it could be leveraged from the perspective of human-computer interaction.In this talk, I will take you through my research experimenting with building motion-controlled prototypes using LLMs in JavaScript.

Motion Control With Multimodal LLMs

Charlie Gerard

Hace más de una década, iniciar cualquier proyecto web requería una gran inversión para cubrir capacidades básicas como el soporte multilingüe o detalles creativos como las animaciones. Tu proyecto siempre resultará en hojas de estilo inmantenibles y código JavaScript complejo solo para llegar a la meta. Hoy en día, la web se ha convertido en un lienzo más maduro. Con proyectos reales como ejemplos, permíteme mostrar cómo la plataforma ha movido la línea de inicio para que nosotros, los desarrolladores, construyamos sitios web innovadores y accesibles.

Los Nuevos Valores Predeterminados de la Web Moderna

The speaker reflects on past experiences developing various websites, highlighting challenges faced in achieving visually unique sites with similar functionalities. They discuss hacks used in web development, the evolution of CSS and web APIs, and express a desire for modern web defaults. Challenges with mobile viewport height on touch devices are described, along with the evolution of hacks into simpler CSS solutions. The evolution of scroll behavior, scroll snapping challenges, and scrolling interception techniques are also discussed. The text covers animation challenges, transitioning to promise-based animations, and the use of frameworks for animations and view transitions in web development.

More than a decade ago, kicking off any web project required a huge investment to cover basic capabilities like multi-language support or creative details like animations. Your project will always result in unmaintainable stylesheets and complex JavaScript code just to get to the finish line. Today, the web has become a more mature canvas. With real projects as examples, let me show how the platform has moved the start line for us developers to build innovative and accessible websites.

The New Defaults of the Modern Web

Jeremias Menichelli

En las aplicaciones modernas tenemos millones de líneas de código con datos provenientes de una variedad de fuentes de datos. Para lograr una experiencia de usuario rápida, usar un patrón similar a suspense es innegociable. Solo si hubiera algo que pudiera manejar las complejidades en suspense con prefetching, cascadas, dependencias de datos, etc. ¿Cómo podemos hacer que suspense sea más ingenioso?En esta charla veremos cómo la creación de plantillas y las señales hacen que el patrón de suspense sea muy sencillo en Angular. ¡Suspende tu incredulidad! Hay un estado asíncrono más simple con recursos.

Suspenso Ingenioso

Minko Gedev presents tradeoffs of deferred loading in Angular and React, addressing misconceptions about the frameworks. Exploring Deferred Loading Nuances and Angular vs. React Implementation with Large Language Models. Beginning with AngularJS, Transition to React, and Contribution to Angular Community. Joining Angular Team at Google, Building React App, Comparing Functionality with Angular. AI Assistance in Angular App, Using Chat Functionality with AI for Actions, Implementing Function Calling for Cart Items. Adding T-shirts to Cart Using AI, Simple Implementation and Tool Addition for AI.generate Call, Visualizing Messages and Adding Products to Cart. Speeding up Application with Lazy Loading in React and Angular, Configuring Chat Functionality. Configuring Chat Data in React, Dependency Observation in Component Tree. Async Function Issue in React, Component Data Dependency, Data Loading in Angular. Inspiration from Amazon for Lazy Loading, React and Angular Implementation, Visibility with IntersectionObservers. Adding Prefetching in Angular and Server-Side Rendering Considerations with Incremental Hydration. React and Angular Trade-offs in Templating and Framework Features. Evaluating JavaScript Frameworks and SEO Impact. Utilizing GenKit API for Function Mapping and React Component Logic Abstraction. Exploring requestIdleCallback in Safari and Signals vs. RxJS in Angular. Considering Framework Selection Criteria Beyond Popularity and Trendiness. Exploring React Features and Angular Templating in TypeScript. Disadvantages of Angular Partial Hydration and Waterfall Effects.

In modern apps we have millions of lines of code with data coming from a variety of data sources. To achieve swift user experience using a suspense-like pattern is non-negotiable. Only if there's something that could manage the complexities in suspense with prefetching, waterfalls, data dependencies, etc. How can we make suspense more resourceful?In this talk we'll see how templating and signals make the suspense pattern a breeze in Angular. Suspend your disbelief! There's a simpler async state with resources.

Resourceful Suspense

Minko Gechev

Esta es la historia de cómo casi pasé una noche en la calle, ¡por culpa del objeto Date de JavaScript! Nos sumergiremos y trataremos de entender por qué sucedió eso y cómo prevenirlo. Afortunadamente, próximamente en un navegador cerca de ti está Temporal, la API integrada de JavaScript que hace que este tipo de errores sean cosa del pasado.

Temporal: El Curioso Incidente de la Noche Equivocada

Speaker's involvement in Temporal proposal and TC39 meetings for JavaScript standardization. Date conversion challenges faced in development. Addressing time zone discrepancies with Temporal to prevent bugs. Exploration of Temporal types and design philosophy. Usage of Java's time zone serialization in JavaScript Temporal. Challenges in implementing Temporal proposal and its transformative potential in ECMAScript.

This is the story of how I almost spent a night on the street — because of JavaScript's Date object! We'll dive in and try to understand why that happened, and how to prevent it. Luckily coming soon to a browser near you is Temporal, the JavaScript built-in API that makes this kind of mess-up a thing of the past.

Temporal: The Curious Incident of the Wrong Nighttime

 Philip Chimento

¿Iniciando una nueva aplicación? ¿Tienes una aplicación existente que está creciendo? Elegir la solución de autenticación correcta puede hacer o deshacer tu producto. ¿Deberías comprar una solución, construir la tuya propia desde cero o probar un proyecto de open-source? Se discutirán los pros y los contras de cada enfoque. Ya seas un fundador de startup, gerente de producto o desarrollador, esta sesión te equipará con los conocimientos necesarios para tomar una decisión informada que se alinee con tus objetivos comerciales y requisitos técnicos.

Auth: Construir vs Open Source vs Comprar

Authentication is crucial for system security, with options including building, buying, or using open source. Modern security complexities are addressed by purchasing systems with enterprise-level security features. Cost considerations in authentication highlight maintenance and scaling costs, with buying solutions providing peace of mind and predictable costs.

Starting a new application? Have an existing application that is growing? Choosing the right authentication solution can make or break your product. Should you buy a solution, build your own from scratch, or try an open-source project? The pros and cons of each approach will be discussed. Whether you are a startup founder, product manager or developer, this session will equip you with the insights needed to make an informed choice that aligns with your business goals and technical requirements.

Auth: Build vs Open Source vs Buy

Mark Robustelli

En esta masterclass, Thomas Steiner del equipo de IA de Google Chrome se sumerge en las diversas APIs de IA integradas que el equipo está explorando actualmente. Primero, está la API de Prompt exploratoria que permite interacciones de forma libre con el modelo Gemini Nano. En segundo lugar, están las diferentes APIs de tareas que están afinadas para funcionar bien en una tarea particular como traducciones, detección de idiomas, resumir y escribir o reescribir. Después de introducir las APIs, la parte final de la masterclass se centra en demostraciones, aplicaciones y casos de uso desbloqueados a través de estas APIs.

IA Justo en el Navegador Con las APIs de IA Integradas de Chrome

Thomas Steiner discusses AI in Chrome, language detection, translation, and summarization using Chrome APIs. He troubleshoots slow performance with the Summarizer API and introduces the Prompt API for text formatting. The development of a multimodal image detector, model interaction enhancements, and utilizing image recognition for prompt responses are demonstrated. The exploration of multimodal conversations with the Prompt API, seamless conversations with PWA, and cross-browser compatibility for Chrome APIs are highlighted.

In this talk, Thomas Steiner from Google Chrome's AI team dives into the various built-in AI APIs that the team is currently exploring. First, there's the exploratory Prompt API that allows for free-form interactions with the Gemini Nano model. Second, there are the different task APIs that are fine-tuned to work well for a particular task like translations, language detection, summarization, and writing or rewriting. After introducing the APIs, the final part of the talk focuses on demos, applications, and use cases unlocked through these APIs.

AI Right in the Browser With Chrome’s Built-in AI APIs

Thomas Steiner

Los bundlers modernos de JavaScript son maravillas arquitectónicas que transforman bases de código complejas en activos de producción optimizados. Esta inmersión técnica deconstruye cómo funcionan los bundlers como Vite, webpack o Rollup bajo el capó, revelando la ingeniería que impulsa nuestras herramientas de construcción. Realizaremos un viaje a través del pipeline de bundling, comenzando por la comprensión del AST, el análisis y la resolución de dependencias mediante análisis estático, algunas optimizaciones clave como tree-shaking y code splitting, cerrando con algunos conceptos avanzados como HMR.

Bundlers: Una Profundización en las Herramientas de Construcción Modernas de JavaScript

Edoardo, DevRel at Storyblok, explains the importance of JavaScript bundlers and discusses Storyblok's migration to Vite. Challenges with old JavaScript applications are illustrated, emphasizing issues with global variables and dependency control. Optimizing JavaScript module loading through ES modules is discussed, highlighting browser compatibility and performance concerns. The process of creating and structuring JavaScript bundles is detailed, focusing on dependency graphs and module organization. Techniques for managing bundle execution, utilizing abstract syntax trees for code parsing, and implementing optimization strategies are explored, with a specific emphasis on Vite, hot module replacement, and development enhancements.

Modern JavaScript bundlers are architectural marvels that transform complex codebases into optimized production assets. This technical deep dive deconstructs how bundlers like Vite, webpack, or Rollup work under the hood, revealing the engineering that powers our build tools. We will journey through the bundling pipeline, starting from the understanding of the AST, parsing and static analysis for dependency resolution, some core optimizations like tree-shaking and code spitting, closing with some advanced concepts like HMR.

Bundlers: A Deep Dive into Modern JavaScript Build Tools

Edoardo Dusi

¿Hemos estado atrapados en los mismos bucles de dolor de pruebas durante años? ¡Aunque pueda parecerlo, no lo hemos estado!Incluso si AI ahora está escribiendo nuestras pruebas, muchos desarrolladores de JavaScript han enfrentado numerosos desafíos, desde la falta de claridad en las clasificaciones de pruebas hasta la lucha de mocking, pruebas de integración de larga duración y el cambio de todo a pruebas E2E.Recapitulemos todo lo que ha sucedido en los últimos años y miremos al presente para explorar lo que 2025 traerá para las pruebas en el mundo de JavaScript en torno a los test runners, bibliotecas de pruebas, mocking, prácticas de producción y herramientas basadas en AI.

El estado de las pruebas de JavaScript en 2025

The talk delves into JavaScript testing challenges, company testing practices diversity, and the evolution of testing tools. It explores the transition to user-centric testing, browser-based component testing, and advancements in AI testing tools. The evolving landscape includes Playwright's features and comprehensive testing solutions. Future trends discuss network mocking, AI testing advancements, and the role of AI in JavaScript testing practices.

Have we been stuck in the same testing pain loops for years? Even though it might seem like it, we haven't!Even if AI is now writing our tests, many JavaScript developers have faced numerous challenges, from the unclarity of test classifications to the struggle of mocking, long-running integration tests, and shifting everything to E2E tests.Let's recap everything that has happened in the past years and look into the present to explore what 2025 will bring for testing in the JavaScript world around test runners, testing libraries, mocking, production practices, and AI-based tools.

The 2025 State of JavaScript Testing

Daniel Afonso

Turbopack Persistent Caching

Tobias Koppers from Vercel TurboPack team discusses implementing persistent caching for long-term web application development, foreseeing significant growth in application sizes over the next decade. AI's role in code writing, TurboPack's vision for instant builds, challenges in build control, and the shift to incremental performance with caching for faster builds. TurboPack emphasizes making incremental builds fast and every build incremental, focusing on trustable and granular incremental builds, efficient granular cache handling in TurboEngine, and automatic granular cache invalidation. The system optimizes performance through efficient persistent cache integration, graph state persistence, database optimization, custom persistent layer creation, and optimizing build time efficiency. TurboPack stands out with its unique bottom-up caching approach, expansion to a general purpose bundler, and plans to enhance framework compatibility. Additionally, the comparison with ESBuild highlights the emphasis on incremental builds and detailed cache granularity with a token-based, almost AI-like approach.

Tobias Koppers

En esta masterclass, exploraremos cómo gestionar configuraciones de aplicaciones directamente en tu repositorio de Git e integrarlas en el sistema de tipos de TypeScript. El objetivo es hacer que tu código sea consciente de la configuración real en tiempo de compilación, reduciendo la necesidad de validación en tiempo de ejecución y pruebas unitarias.Descubrirás:<ul><li>Cómo crear tipos sin pérdida para datos estáticos</li><li>Técnicas para eliminar rutas de código innecesarias y reducir la validación en tiempo de ejecución</li><li>Cómo aprovechar los tipos de utilidad para extraer información específica de las configuraciones</li><li>Operadores clave de TypeScript y cómo manejar errores comunes al trabajar con tipos genéricos</li><li>Mejores prácticas para mejorar la seguridad de tipos y la experiencia del desarrollador</li></ul>Al final de esta masterclass, tendrás una comprensión sólida de cómo implementar Config como Código en tus proyectos de TypeScript, mejorando la mantenibilidad, la seguridad de tipos y el soporte de autocompletado. Esta masterclass es ideal para desarrolladores de TypeScript que buscan optimizar su código y agilizar la gestión de configuraciones.

Live Coding: Eliminando Comprobaciones Redundantes en Tiempo de Ejecución con Config como Código&Tipo en TypeScript

TS developer focused on TypeScript & typing system for improved developer experience. Discussing in-code configurations for international platforms, reducing hosting needs, and utilizing permissions system for Git. Emphasizing the unity of configuration and code through typing. Typing configuration for build-time validation. Using information for early feedback on code branches. Introduction to repository with Express application for fetching products based on market. Configuration setup with market sellers and locales. Market key typing and validation for product routing. Defining config shape, deriving types from configuration, ensuring contract fulfillment. Improving code branches and type validation, optimizing runtime checks. Resolving issues in fetch products, implementing locale of seller type, deriving market config of seller, and obtaining seller locale. Creating a type to combine market keys and locales for specific markets. Ensuring market locale acceptance, type guarding, and refining market key for sellers. Adapting types for effective testing practices. Creating and validating market locale. Object type definition and fixture usage. Task assignment and code testing.

In this workshop, we’ll explore how to manage application configurations directly in your Git repository and integrate them into the TypeScript type system. The goal is to make your code aware of the actual configuration at compile-time, reducing the need for runtime validation and unit tests.You'll discover:<ul><li>How to create lossless types for static data</li><li>Techniques to eliminate unnecessary code paths and reduce runtime validation</li><li>How to leverage utility types to extract specific information from configurations</li><li>Key TypeScript operators and how to handle common pitfalls when working with generic types</li><li>Best practices for improving type safety and developer experience</li></ul>By the end of this workshop, you'll have a solid understanding of how to implement Config as Code in your TypeScript projects, enhancing maintainability, type safety, and autocomplete support. This workshop is ideal for TypeScript developers looking to optimize their code and streamline configuration management.

Live Coding: Eliminating Redundant Runtime Checks with Config as Code&Type in TypeScript

Jannik Sommerfeld

¿Pensando en usar &lt;canvas&gt; para renderizar tu UI? ¡Buena idea! Pero hagámoslo accesible. Aprende cómo aprovechar la estructura del árbol DOM para permitir a los usuarios interactuar con tu canvas usando el teclado y un lector de pantalla. Descubre las trampas complicadas y cómo sortearlas.

a11y y Lienzos Interactivos

Oli's talk delves into the importance of accessibility and interactive canvases, comparing SVG and canvas rendering for chart components. The discussion includes enhancing SVG elements with ARIA attributes for better screen reader interpretation, implementing accessible canvas using proxy elements, and showcasing interactive elements with focus visibility. The talk also explores dynamic focus indicators, AI integration for screen readers, and the optimization of canvas over SVG for performance. Considerations for EU accessibility testing, direct screen reader APIs, and image-to-speech conversion using TransformersJS are discussed.

Thinking of using &lt;canvas&gt; to render your UI? Great idea! But let’s make it accessible. Learn how to leverage the DOM tree structure to allow users to interact with your canvas using the keyboard and a screen reader. Find out about tricky gotchas and how to work around these.

a11y & Interactive Canvases

En la serie de televisión Knight Rider, el concepto de un coche inteligente era pura ciencia ficción. Más de 40 años después, ahora tenemos las herramientas para hacerlo realidad, puramente en el navegador. Esta charla explora la combinación de técnicas de IA como RAG y llamadas a funciones con APIs avanzadas del navegador (por ejemplo, WebBluetooth) para crear un agente de IA basado en el navegador con personalidad, memoria y autonomía, impulsado por WebAssembly y WebGPU, ¡totalmente offline y preservando la privacidad!

Construyamos a K.I.T.T. Con JavaScript

Speaker introduces a side project involving JavaScript and iconic car recreation at JS Nation. Nico, a frontend developer, explains the concept of KIT from Knight Rider and its human-like features, emphasizing the use of machine learning in building it. Using Transformers.js involves defining tasks and models, with options like Whisper for transcribing speech to text and Kokoro.js for text to audio conversion. Adding intelligence through LLMs enhances the capabilities of the pipeline. Models small enough to run on device, allowing browser usage using LLM library. Creating engines and new conversations, streaming replies with added tokens for efficiency. Implementing Kit reasoning process for problem-solving and fun in learning and building using LLMs.

In the TV series Knight Rider, the concept of an intelligent car was pure sci-fi. Over 40 years later, we now have the tools to bring it to life - purely in the browser. This talk explores combining AI techniques like RAG and function calling with advanced browser APIs (e.g., WebBluetooth) to create a browser-based AI agent with personality, memory, and autonomy, powered by WebAssembly and WebGPU - fully offline and privacy-preserving!

Let’s Build K.I.T.T. With JavaScript

Nico Martin

Imagina la conveniencia de ejecutar archivos TypeScript directamente con Node.js usando `node file.ts`. Hace solo unos años, este concepto parecía un sueño lejano. Hoy, se presenta como una característica experimental emocionante. Esta charla narra el viaje de transformar este sueño en una realidad.

Ejecutar TypeScript Nativamente en Node.js

Discussion on TypeScript adoption in Node.js, typescript's popularity, challenges in integrating TypeScript with Node.js due to versioning differences, introducing strip types to remove non-JavaScript syntax, leveraging the SWC library through Amaro for efficient code execution, Node.js support for TypeScript with experimental strip types, enabling transform types and source maps by default, TypeScript evolution with new flags for type checking, TypeScript ESM code evaluation in Node, issues with TypeScript and JavaScript syntax ambiguity, collaboration between Node.js and TypeScript teams, recommendations on using TypeStripping for production projects, comparison of performance between TS Node and Node for TypeScripting, handling type definitions and runtime checking in TypeScript using Zod.

Imagine the convenience of executing TypeScript files directly with Node.js using `node file.ts`. Just a few years ago, this concept seemed like a distant dream. Today, it stands as an exciting experimental feature. This talk narrates the journey of transforming this dream into a reality.

Run TypeScript Natively in Node.js

Marco Ippolito

En esta masterclass, aprenderás cómo crear una Extensión de GitHub Copilot. Exploraremos el nuevo ecosistema de herramientas impulsadas por IA de GitHub y te guiaremos a través de la construcción de tu propia extensión desde cero. Al final de esta sesión, comprenderás cómo aprovechar las Extensiones de Copilot para mejorar tu flujo de trabajo de desarrollo e integrarte con servicios de terceros.En Esta Masterclass, Descubrirás:<ul><li>Qué es GitHub Copilot y sus capacidades</li><li>Qué son las Extensiones de GitHub Copilot</li><li>La anatomía de una Extensión de Copilot</li><li>Cómo construir tu propia Extensión de Copilot</li></ul>Desarrollo Práctico:<ul><li>Clonar el repositorio de plantilla: nickytonline/copilot-extension-template</li><li>Instalar dependencias</li><li>Exponer tu servidor de desarrollo local</li><li>Crear y configurar tu Aplicación de GitHub</li><li>Usar el Copilot Extensions Preview SDK</li><li>Depurar y probar tu extensión</li></ul>Al final de esta masterclass, habrás creado una Extensión de GitHub Copilot funcional que podrás usar inmediatamente en tu entorno de desarrollo. Podrás extender esta base para construir integraciones más complejas y herramientas personalizadas impulsadas por IA adaptadas a tus necesidades específicas.Esta masterclass es ideal para:<ul><li>Desarrolladores que buscan mejorar su productividad con herramientas de IA</li><li>Equipos que desean construir integraciones personalizadas con GitHub Copilot</li><li>Cualquiera interesado en crear herramientas de desarrollo impulsadas por IA</li></ul>

¡Vamos a Crear una Extensión de GitHub Copilot!

Introduction to GitHub Copilot extension workshop covering basics, extension anatomy, SDK usage, setup, and Q&A. Exploring Copilot extensions functionality, setup requirements, and permissions. Preparation of development environment, managing Copilot extensions locally, configuring GitHub app and permissions, troubleshooting configuration and authorization issues, creating and demonstrating advanced Copilot extension features, interacting with UI components, and exploring deployment options and future prospects.

In this workshop, you'll learn how to create a GitHub Copilot Extension. We'll explore GitHub's new AI-powered tool ecosystem and guide you through building your own extension from scratch. By the end of this session, you'll understand how to leverage Copilot Extensions to enhance your development workflow and integrate with third-party services.In This Workshop, You'll Discover:<ul><li>What GitHub Copilot is and its capabilities</li><li>What GitHub Copilot Extensions are</li><li>The anatomy of a Copilot Extension</li><li>How to build your own Copilot Extension</li></ul>Hands-on Development:<ul><li>Clone the template repository: nickytonline/copilot-extension-template</li><li>Install dependencies</li><li>Expose your local development server</li><li>Create and configure your GitHub Application</li><li>Use the Copilot Extensions Preview SDK</li><li>Debug and test your extension</li></ul>By the end of this workshop, you'll have created a working GitHub Copilot Extension that you can use immediately in your development environment. You'll be able to extend this foundation to build more complex integrations and custom AI-powered tools tailored to your specific needs.This workshop is ideal for:<ul><li>Developers looking to enhance their productivity with AI tools</li><li>Teams wanting to build custom integrations with GitHub Copilot</li><li>Anyone interested in creating AI-powered developer tools</li></ul>

Let's Create a GitHub Copilot Extension!

Nick Taylor

Los signals han estado revolucionando la gestión de estado últimamente, ofreciendo un enfoque más intuitivo y eficiente que los métodos tradicionales. Pero, ¿qué tipo de magia hay bajo el capó? Cambias un valor, y todos los lugares que usan ese valor se actualizan y recalculan automáticamente… 🤔En esta charla, miraremos detrás del telón y exploraremos el funcionamiento interno de los signals, construyendo nuestra propia implementación desde cero (Aviso: usar solo con fines de aprendizaje 😉).Los signals se han convertido casi en un bloque de construcción de facto en los frameworks de JavaScript últimamente, con algunas excepciones notables (te estamos mirando React 👀), por lo que realmente vale la pena tener una comprensión más profunda sobre cómo operan, cómo depurarlos efectivamente y cómo evitar errores comunes. Además, ¿a quién no le gusta un poco de live coding? ✨

Construye Tu Propia Reactividad: Un Análisis Profundo de los Signals

Karl Vorden introduces signals for reactivity in JavaScript, aiming to demystify its implementation for better understanding. Signals in JavaScript provide efficient reactivity by updating only the necessary code without extra work. Different frameworks offer signal implementations like createSignal in solid JS, resembling React's useEffect but functioning differently. Vue signals are called refs, created with the ref function, returning an object with a value property. Define effect functions for tracking changes and execution in reactive signals. Explore computed functions for complex operations within reactive signals. Beware of pitfalls with conditionals affecting signal execution.

Signals have been revolutionizing state management lately, offering a more intuitive and performant approach than traditional methods. But what kind of magic is there under the hood? You change a value, and all places that use that value update and recalculate themselves automagically… 🤔In this talk we will look behind the curtain and explore the inner workings of Signals, by building our own implementation from scratch (Disclaimer: use for learning purposes only 😉).Signals have become almost a de facto building block in JavaScript frameworks lately, with some notable exceptions (looking at you React 👀), so it really pays off to have a deeper understanding about how they operate, how to debug them effectively and how to avoid common pitfalls. Plus, who doesn't like a bit of live coding? ✨

Build Your Own Reactivity: A Deep Dive Into Signals

Carl Vuorinen

¡Chrome DevTools acaba de recibir un impulso turbo! El equipo de Chrome DevTools ha estado lanzando nuevas características a un ritmo feroz durante el último año, incluyendo una revisión completa del Panel de Rendimiento con Métricas en Vivo en tiempo real y Perspectivas impulsadas por IA que expondrán cuellos de botella que nunca supiste que existían.Olvídate de las tediosas búsquedas en la documentación y de las cacerías en foros; ahora, la IA te asiste directamente dentro de los paneles de Elementos, Rendimiento, Red y Fuentes, manteniéndote en el flujo. Utiliza las nuevas herramientas de alineación y colaboración para compartir fácilmente tus observaciones y tu destreza en depuración con tu equipo y partes interesadas.Desataremos todo el potencial de estas características revolucionarias, revelando gemas ocultas y atajos que transformarán tu flujo de trabajo de depuración de un esfuerzo a un sprint supercargado. Prepárate para codificar más rápido, depurar de manera más inteligente y construir experiencias que vuelen.

Supercarga Tu Depuración Con las Nuevas Características en Chrome Devtools

Eva and Bari introduce the complexity of web development and emphasize the evolving nature of DevTools, discussing productivity gains through new features. The talk covers performance debugging enhancements and user-friendly changes in the performance panel. Live metrics screen offers real-time insights, integrating real user data for performance comparison. Configuring DevTools for accurate user emulation and leveraging performance trace capabilities for debugging. Enhancing user experience with AI insights and visual assistance, setting up AI workspace in DevTools. Addressing data privacy concerns and AI usage control. Chrome DevTools API and Gemini model enhancements, AI features specific to Chrome, web sockets throttling, and AI agent probing in performance context.

Chrome DevTools just got a turbo boost! The Chrome DevTools team has been releasing new features at a furious rate over the past year, including  a complete Performance Panel overhaul with real-time Live Metrics and AI-powered Insights that'll expose bottlenecks you never knew existed. Forget tedious documentation searches and forum hunts; now, AI assists you directly within the Elements, Performance, Network and Sources panels, keeping you in the flow. Use the new alignment and collaboration tools to easily share your observations and debugging wizardry with your team and stakeholders, We'll unleash the full potential of these game-changing features, revealing hidden gems and shortcuts that'll transform your debugging workflow from a slog to a supercharged sprint. Get ready to code faster, debug smarter, and build experiences that fly.

Supercharge Your Debugging With the New Features in Chrome Devtools

Barry Pollard

Ewa Gasperowicz

El European Accessibility Act (EAA) está llegando, y las empresas se apresurarán a certificar sus sitios web como accesibles de la manera más fácil posible. Pero las altas puntuaciones de Lighthouse y Axe no significan accesibilidad real. Muchos dependerán de estas herramientas para "probar" el cumplimiento, a pesar de sus puntos ciegos críticos: enfoque roto, ARIA engañoso y contenido dinámico inaccesible. Aún más confuso, Lighthouse y Axe están construidos sobre la misma base, sin embargo, pueden producir resultados diferentes. Así que desglosaremos estos defectos y exploraremos mejores formas de garantizar una verdadera accesibilidad.

Las pruebas de a11y están rotas: cómo Lighthouse y Axe fallan en proyectos reales

The speaker, Gulasha, shares insights on accessibility challenges, commitment, automated testing tools, and the European Accessibility Act. Emphasis is placed on text content accessibility, web interface mandates, manual testing importance, and complex graphics explanations. Issues with focus visibility, voice control testing, and global accessibility certification are highlighted. Promoting accessibility practices, advocating for certification, and starting small initiatives within teams are discussed.

The European Accessibility Act (EAA) is coming, and companies will rush to certify their websites as accessible in the easiest way possible. But high Lighthouse and Axe scores don't mean real accessibility. Many will rely on these tools to "prove" compliance, despite their critical blind spots – broken focus, misleading ARIA, and inaccessible dynamic content. Even more confusing, Lighthouse and Axe are built on the same foundation, yet they can produce different results. So let's break down these flaws and explore better ways to ensure true accessibility.

a11y Testing Is Broken: How Lighthouse and Axe Fail in Real Projects

Glafira Zhur

pnpm v10 agregó soporte para un nuevo tipo de dependencia llamado "Dependencias de Configuración". Estas dependencias hacen posible desarrollar plugins de pnpm y compartir tus configuraciones entre proyectos.

Dependencias de Configuración en pnpm

Introduced new feature in PNPM v10 called config dependency, allowing custom plugins. Centralizing configuration and dependencies management. Early installation of limited config dependencies in PNPM. Trusted dependencies for lifecycle scripts in PNPM. Versatility of pmpm hooks in configuration. Example of a config dependency for fixing type script issues. Discussion on project sustainability, security, contributors, and hiring prospects. Comparison of migration tools, hosting preferences, and package version restrictions.

pnpm v10 added support for a new type of dependency called "Configurational dependencies". These dependencies make it possible to develop pnpm plugins and share your configurations between projects.

Configurational Dependencies in pnpm

Zoltan Kochan

En el sistema de tipos de TypeScript es más que solo una herramienta para detectar errores: es una forma de resolver problemas complejos con código limpio y confiable. En esta charla, profundizaremos en técnicas avanzadas de TypeScript como tipos mapeados, tipos condicionales y genéricos para manejar incluso los desafíos de tipos más complicados.Verás cómo estas técnicas pueden ayudarte a extraer, transformar y validar tipos de datos mientras mantienes tu código simple y mantenible. Estas "acrobacias de TypeScript" no son solo para mostrar: son habilidades prácticas que hacen que tus sistemas sean más fuertes y fáciles de trabajar.Ven a aprender cómo aprovechar al máximo la flexibilidad y el poder de TypeScript para construir soluciones que sean tan inteligentes como seguras.

TypeScript Gymnastics: ¿Por Qué Son Tan Poderosos para Ti?

The Talk delves into TypeScript, highlighting its introduction, differences from JavaScript, and providing code examples. It emphasizes the significance of strict typing in TypeScript, showcasing the use of literal types and union types for precise type modeling. The discussion also covers template literal types for creating combined types and precise type matching, as well as conditional handling without if statements and function type inference. Furthermore, it explores looping, recursion, object type manipulation, key manipulation, mapper type, and TypeScript utility types for efficient property management and type manipulation.

In TypeScript’s type system is more than just a tool for catching errors—it’s a way to solve complex problems with clean and reliable code. In this talk, we’ll dive into advanced TypeScript techniques like mapped types, conditional types, and generics to handle even the trickiest type challenges.You’ll see how these techniques can help you extract, transform, and validate data types while keeping your code simple and maintainable. These "TypeScript gymnastics" aren’t just for show—they’re practical skills that make your systems stronger and easier to work with.Come learn how to take full advantage of TypeScript’s flexibility and power to build solutions that are as smart as they are safe.

TypeScript Gymnastics: Why Are They So Powerful for You?

El rol de tech lead es uno de los más incomprendidos y pasados por alto en la industria tecnológica. Los desarrolladores son promovidos por sus habilidades de codificación, sin embargo, el éxito en este rol se mide por el liderazgo, no solo por la capacidad técnica. Este cambio puede ser desorientador porque ser un tech lead no se trata solo de tecnología, se trata de personas.Basándome en mi experiencia como tech lead en ThoughtWorks y en el coaching de más de 300 tech leads, exploraré por qué este rol es singularmente complejo. Situados en la intersección de personas, tecnología y negocios, los tech leads deben desarrollar habilidades blandas críticas como la delegación, la resolución de conflictos y la alineación del equipo, sin embargo, la mayoría son lanzados al rol sin apoyo.En esta sesión, descubriremos por qué la mayoría de los problemas tecnológicos son en realidad problemas de personas y cómo abordarlos. Discutiremos los tres cambios de mentalidad clave que los tech leads necesitan para tener éxito y las siete habilidades blandas esenciales a desarrollar, con pasos prácticos para comenzar.Pasar de un rol técnico a uno de liderazgo es difícil, incómodo y a menudo desordenado. Pero también es una oportunidad de crecimiento, no solo como líder, sino como persona. Ya sea que aspires a ser un tech lead, seas nuevo en el rol o un líder experimentado refinando tu enfoque, esta charla arrojará luz sobre uno de los roles más incomprendidos en tecnología, enfocándose en las personas.Esta sesión ofrece un vistazo a mi próximo libro de O’Reilly, Leveling Up as a Tech Lead, donde profundizo en los desafíos y estrategias para dominar este rol.

Convirtiéndose en un Tech Lead: De la Tecnología a las Personas

Annamarie Fischer discusses transitioning to a tech lead role, highlighting the importance of soft skills development. Tech leads need to focus on both technical expertise and people skills, including conflict resolution and clear processes. Developing soft skills like active listening, relationship-building, and delegation tools is crucial for effective tech leadership. Mindset shifts from individual to team focus, coding to value-driven decisions, and short-term to long-term thinking are essential for tech leads to succeed in enabling team success and strategic direction.

The tech lead role is one of the most misunderstood and overlooked positions in the tech industry. Developers are promoted for their coding skills, yet success in this role is measured by leadership, not just technical ability. This shift can be disorienting because being a tech lead isn’t just about technology, it’s about people.Drawing from my experience as a tech lead at ThoughtWorks and coaching over 300 tech leads, I’ll explore why this role is uniquely complex. Positioned at the intersection of people, technology, and business, tech leads must develop critical soft skills like delegation, conflict resolution, and team alignment, yet most are thrown into the role without support.In this session, we’ll uncover why most tech problems are actually people problems and how to address them. We’ll discuss the three key mindset shifts tech leads need to succeed and the seven essential soft skills to develop, with practical steps to get started.Shifting from a technical role to leadership is difficult, uncomfortable, and often messy. But it’s also an opportunity for growth, not just as a leader, but as a person. Whether you're aspiring to be a tech lead, new to the role, or an experienced leader refining your approach, this talk will shed light on one of the most misunderstood roles in tech, by focusing on people.This session offers a glimpse into my upcoming O’Reilly book, Leveling Up as a Tech Lead, where I dive deeper into the challenges and strategies for mastering this role.

Becoming a Tech Lead: From Tech to People

Anemari Fiser

¡Explora un mundo de hardware como nunca has visto antes! Esta presentación contendrá demostraciones en vivo utilizando tanto robots locales como aquellos en producción de todo el país. Aunque la tecnología utilizada es avanzada, el enfoque es accesible para cualquiera que haya usado JavaScript antes.La charla cubre la arquitectura de WebRTC como un conjunto de tecnologías para habilitar la comunicación peer-to-peer, así como cómo se puede aprovechar para interactuar con hardware embebido y robótica desde el navegador, todo utilizando APIs de JavaScript. Mi objetivo es hacer que la programación de dispositivos sea más accesible para los desarrolladores web y demostrar una solución práctica para llevar proyectos de hobby de tu escritorio a producción.

Control de Robot en Tiempo Real Desde el Navegador Con WebRTC

Nick Hare, developer advocate at Veeam, learned robotics from open source projects. WebRTC facilitates secure machine connections. Implementing WebRTC involves using Stun, ICE candidates, TURN servers, and signaling. Signaling and Remote Procedure Calls are crucial for peer-to-peer communication. Building a proof of concept with Notify involves PubSub messaging and REST API. Establishing WebRTC connections and data channels enables direct messaging. Video streaming and remote control are demonstrated with a webcam connected to a Raspberry Pi. VM robotics development allows building robots and smart machines with cloud support and SDK.

Explore a world of hardware the likes of which you've never seen before! This presentation will contain live demos using both local robots and those in production from across the country. While the technology being used is advanced, the approach is accessible to anyone whose used JavaScript before.The talk covers the architecture of WebRTC as a stack of technologies for enabling peer-to-peer communication, as well as how it can be leveraged for interacting with embedded hardware and robotics from the browser, all using JavaScript APIs. My goal is to make programming devices more accessible to web developers and demonstrate a practical solution for taking hobby projects from your desk to production.

Real-Time Robot Control From the Browser With WebRTC

Nick Hehr

Los frameworks modernos de desarrollo web proporcionan tantos niveles de abstracción que los desarrolladores no necesitan un entendimiento profundo de los tiempos de ejecución o motores subyacentes para comenzar a trabajar. De hecho, la facilidad de uso es el objetivo de los frameworks modernos y un buen indicador de su éxito. Al iniciar una aplicación, es fácil ver Node como solo "una pieza del rompecabezas" y confundirlo con un motor de JavaScript, o un lenguaje, cuando, en realidad, no es ninguno de los dos.Es valioso para los desarrolladores entender las diferencias entre los motores y los tiempos de ejecución empleados en sus proyectos de full-stack para tener un modelo mental de cómo se está ejecutando su código y optimizarlo para los entornos en los que se está ejecutando. El objetivo de esta charla es aclarar la distinción entre un motor de JavaScript y un tiempo de ejecución, revisar cómo interactúan entre sí (tanto en servidores como en la web) y ver aplicaciones prácticas de este conocimiento.

Lo Que Todos Fingimos Saber: Las Diferencias Entre el Motor de JS y el Tiempo de Ejecución de JS

The talk delves into the intricacies of JavaScript engine and runtime, emphasizing the importance of understanding execution processes for effective development and debugging. It discusses how JavaScript engines optimize code through parsing, abstract syntax trees, and byte code execution. Strategies for optimizing code include maintaining type stability, using type-stable arrays, and consistent object shapes to avoid deoptimization. Recommendations for enhancing JavaScript execution involve ensuring input type consistency, using type-stable arrays, and understanding the event loop's role in code execution across different runtimes and engines.

Modern web development frameworks provide so many levels of abstraction that developers don’t need a deep understanding of the underlying runtimes or engines to hit the ground running. In fact, ease of use is the point of modern frameworks and a good indicator of their success. When spinning up an application, it’s easy to view Node as just “a piece of the puzzle,” and mistake it for a JavaScript engine, or a language, when, in reality, it is neither.It is valuable for developers to understand the differences between the engines and runtimes employed in their full-stack projects in order to have a mental model of how their code is being executed, and to optimize it for the environments in which it is running. The goal of this talk is to make clear the distinction between a JavaScript engine and runtime, to review how they interact with one another (in both servers and on the web), and to look at practical applications of this knowledge.

JSNation 2025

The main JavaScript conference of the year