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

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

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

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

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

¿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

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 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

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

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

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

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

Unlock the Power of Modern Full-Stack Development in Half a Day!Ready to build lightning-fast, scalable web applications? Join our immersive 4-hour interactive workshop and dive headfirst into the world of Full-Stack Next.js 15!This isn't just another theory session. You'll roll up your sleeves and build a real-world movie comparison application from scratch, guided step-by-step by our expert instructor Maurice. We'll start by setting up your local development environment with a robust PostgreSQL database running in a Docker container. Then, you'll experience the magic of rapid UI generation using <a href="https://v0.dev/">v0.dev</a>, allowing you to create stunning interfaces with ease.But we won't stop at the front-end. You'll learn how to seamlessly integrate your UI with a powerful backend using Next.js 15's latest features and the elegant Prisma ORM to interact with your PostgreSQL database. Plus, you'll discover the best practices for handling client-side behavior with a fun, interactive movie comparison feature.Finally, we'll take your application live with continuous deployment to Vercel, showcasing how to effortlessly share your creations with the world. By the end of this workshop, you'll have a fully functional movie comparison app and the confidence to tackle your own full-stack projects using the cutting-edge Next.js 15 ecosystem.

Full-stack App in half a Day: Next.js 15 Development Bootcamp

Maurice de Beijer

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

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?

Luca Del Puppo

¿Qué separa al 1% superior de los ejecutores en tecnología del resto? No es solo talento o largas horas, es cómo piensan, lideran y operan diariamente. En esta charla, desglosaré los cambios de mentalidad, micro-hábitos y marcos de toma de decisiones que distinguen a los ingenieros y líderes de clase mundial.Ya sea que seas un ingeniero que aspira a un nivel de personal o un gerente que crece hacia el liderazgo ejecutivo, aprenderás:<ul><li>Las 3 filosofías centrales por las que viven los mejores ejecutores (con ejemplos del mundo real)</li><li>Cómo crear apalancamiento en lugar de solo trabajar más duro</li><li>Por qué la claridad supera al esfuerzo – y cómo obtenerla</li><li>Cómo construir tu sistema operativo personal para un crecimiento constante</li><li>La sorprendente verdad sobre la confianza, visibilidad e influencia</li></ul>Respaldado por el coaching de más de 100 ingenieros y liderando equipos en LinkedIn, Netflix y Salesforce, esta sesión está llena de ideas accionables para cualquiera que esté listo para jugar en el siguiente nivel.

La Mentalidad del 1% Superior: Cómo Piensan, Lideran y Prosperan los Altos Ejecutores

Top 1% talent in tech focuses on mindset, performance over hustle. Clarity, systems, leverage key for career growth. Systems create predictability, leverage compounds impact, leverage flywheel for long-term success. Build personal operating system, treat yourself like a product, focus on clarity for success. Build confidence, visibility, influence for success. Think leverage, not effort. Optimize career intention. Drive work with purpose.

What separates the top 1% of performers in tech from the rest? It’s not just talent or long hours – it’s how they think, lead, and operate daily. In this talk, I’ll break down the mindset shifts, micro-habits, and decision-making frameworks that set world-class engineers and leaders apart.Whether you’re an engineer aiming for staff level or a manager growing into executive leadership, you’ll learn:<ul><li>The 3 core philosophies top performers live by (with real-world examples)</li><li>How to create leverage instead of just working harder</li><li>Why clarity beats hustle – and how to gain it</li><li>How to build your personal operating system for consistent growth</li><li>The surprising truth about confidence, visibility, and influence</li></ul>Backed by coaching 100+ engineers and leading teams across LinkedIn, Netflix, and Salesforce, this session is packed with actionable insights for anyone ready to play at the next level.

The Top 1% Mindset: How High Performers Think, Lead, and Thrive

Naz Delam

Yash Verma, software engineer discussing observability and OpenTelemetry, covering the history and importance of monitoring in modern observability. Evolution of tools like Prometheus from Facebook's Project Scuba for real-time queries. Challenges in distributed systems and the shift to tracing for system understanding. OpenTelemetry's role as a vendor-agnostic framework for efficient telemetry data handling and the significance of semantic conventions. Community engagement in OpenTelemetry, emphasizing practical application insights and the industry's movement towards value-driven observability.

Ever used an app that crashed and thought, "Why can’t this just work?" For users, it’s frustrating. For businesses, it’s expensive. As JavaScript developers, we’re stuck in the middle - juggling frontend tweaks, backend performance, and monitoring tools to figure out what went wrong. That’s where observability comes in because understanding your code is like going to the gym. No shortcuts, no pills. You gotta put in the work to put on the muscle.  It’s not just some SRE buzzword anymore but a must-have for developers. Observability helps you spot issues, understand system behavior, and fix problems faster. And with OpenTelemetry, you get an open-source framework to manage logs, traces, and metrics without vendor lock-in. In this session, you’ll learn, all things observability, optimize both frontend and backend, and integrate OpenTelemetry to gain insights into your system. Moreover, you'll also learn how to practically integrate OpenTelemetry into your JavaScript apps, to create spans, track activities, name them effectively. The result? Fewer headaches, better performance, and apps that not just works but you completely understands.

When JavaScript Meets OpenTelemetry: It's Observability O'Clock

Yash Verma

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

Al igual que Hono, puedes crear fácilmente un framework web de backend utilizando APIs de Estándares Web como Request y Response. Estos se ejecutan en Cloudflare Workers, Deno, Bun, etc. En esta charla, presentaré cómo hacerlo, como implementar el enrutamiento usando URLPatterns, una sintaxis similar a Hono/Express, mecanismos de middleware y renderizado del lado del servidor con React. ¡Esto es reinventar la rueda, pero hacer tu propio framework es divertido!

¡Construye Tu Framework Web Desde Cero!

Excited to talk at JS Nation about building web frameworks from scratch, covering framework basics and providing an example without a framework. Framework essentials include handling browser views, routing, parameters, response types, errors, and security. Discussing the components a framework needs such as routing, parameters, response types, error handling, authentication, and security. Exploring request handling in a framework with customization of headers, status, and using static methods like response.json. Detailed insights into routing, response customization, and efficient implementation for multiple responses based on paths and methods. Implementation of routing syntax, data retrieval from requests, context handling, middleware integration, and helper functions for response manipulation in a framework.

Like Hono, you can easily create a backend web framework using Web Standards APIs such as Request and Response. These run on Cloudflare Workers, Deno, Bun, etc. In this talk, I will introduce how to make it, such as implementing routing using URLPatterns, Hono/Express-like syntax, middleware mechanisms, and server-side rendering with React. This is reinventing the wheel, but making your framework is fun!

Build Your Web Framework From Scratch!

Yusuke Wada

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

Burak discusses web sustainability and introduces the Web Almanac report, focusing on the sustainability chapter. Analysis of web page data load improvements between 2022 and 2024 despite exceeding recommended limits. Concerns about the increase in unused CSS and JavaScript data waste in 2024 compared to 2022. Discussion on image optimization techniques like lazy loading and responsive image types. Emphasis on optimizing data transfer through techniques like text compression. Strategies for web optimization include caching, image optimizations, and text compression. Solutions for web page sustainability involve caching, image optimizations, and text compression. Exploring text compression with gzip, optimizing page weight, and addressing green hosting complexities. Addressing website sustainability's cost and emissions, calling for contributors and volunteers.

Dive into the environmental impact of the web through key insights from the HTTP Archive Almanac 2024. Discover shocking statistics about web sustainability, from massive page weights to unused code, and learn practical, immediate solutions to reduce your website's carbon footprint. This talk combines hard data with actionable strategies to make the web greener

Web Almanac 2024: Is the Web Sustainable? 

Burak Güneli

JS 0 and JS Sugar proposal for JavaScript evolution. Complexity abstraction to engines. Splitting language into JS0 and JSugar. Lessons learned from developers' concerns and users' preferences. Involvement in shaping JavaScript ecosystem.

In October 2024, a language evolution proposal was submitted to the TC39 Javascript Committee meeting. In it, a new vision for JS as a whole is shown, one in which the language is seemingly split in two - a core ""JS0"" and an extended ""JSSugar"". What is this about, why did it come up at this point and what does it mean for us as JavaScript developers?In this short talk, we'll go over the proposal, exploring what it tries to accomplish, how and its potential pros and cons from a neutral, community-first perspective.

Divide and Conquer? - Exploring the 'JS0' and 'JSSugar' Proposal for JavaScript Evolution

Daniel Hervás

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.

What We All Pretend to Know: The Differences Between the JS Engine & JS Runtime

Karina Ionkina

Samiul Huque

¿Quieres automatizar tareas manuales diarias o explorar la ampliación de la funcionalidad del navegador? Esta charla te tiene cubierto; desglosaremos cómo construir Web Extensions desde cero, cubriendo arquitectura, gestión de estado, Manifest V3, mejores prácticas y herramientas para dar vida a tus ideas! 🚀

Construyendo Web Extensions Con Tu Framework Favorito

Alba Silvente, Fullstack Engineer at Servlug, discusses unlocking web extension power with Vue. Shows demo features and AI API usage. Talks about building extensions, standards, structures, open-source tools, and practical use cases. Explores the simplicity and benefits of web extensions for customization, automation, and time-saving. Mentions varied functionalities like translation, JSON formatting, and form filling using extensions. Exploring form-filling extensions and building web extensions with Manifest V3 and Vue. Understanding the structure and components like pop-up and sidebar pages. Discussing manifest.json for defining extension details, background JavaScript in service worker context, and creating popup and sidebar pages. Discussing the importance of different contexts for popup and sidebar pages, customization with various JavaScript frameworks, and utilizing content scripts to interact with web pages. Communicating with content scripts, configuring settings via the options page, and extending web extensions with various functionalities like overriding home pages, bookmarks, history, and adding options to the context menu. Communicating with browser APIs for web extensions using packages like WebExtension Polyfy and webext. Storing data in web extensions efficiently with specialized storage areas. Simplifying communication between components using the WebX Bridge package for seamless browser API interactions. Using Vite and WXT frameworks for web extension development. Implementing preference configuration and communication flow between components for efficient web extension creation with WXD. Defining items in local storage for preferences and using composable for shared components in web extensions development. Using extension storage for web extension synchronization and integrating AI APIs for text analysis. Exploring Content Script Actions, Background API Communication, and Extension Deployment.

Do you want to automate daily manual tasks or explore extending browser functionality? This talk has you covered; we’ll break down how to build Web Extensions from scratch – covering architecture, state management, Manifest V3, best practices and tools to bring your ideas to life! 🚀

Building Web Extensions With Your Favourite Framework

Alba Silvente Fuentes

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

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

Welcome to a talk on Surprise! Svelte Secretly Sending Signals by Paolo Ricciuti showcasing live coding with a demo of reactivity in Svelte using writable stores and the proxy API. The proxy API in Svelte allows for intercepting object operations to enhance reactivity. Efficient state management, event handling, and dependency management are key topics discussed. Strategies for managing dependencies, handling current and actual effects, clearing sets, scheduling functions efficiently, and handling signal memory cleanup in Svelte are covered. The talk also addresses signal-based frameworks, async issue solutions, and alternative approaches like Solid for handling signals sequentially.

Svelte 5 introduced runes which use signals under the hood. While signals are very cool and unlock a ton of composability possibilities they have their own gotchas... let's explore them while creating a reactive signal based system from scratch to really understand them from the base!

Surprise! Svelte Secretly Sending Signals

Paolo Ricciuti

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 sesión, exploraremos por qué el modelo de un solo hilo de JavaScript causa retraso en la UI, por qué setTimeout() y requestIdleCallback() fallan en la priorización de tareas, y cómo scheduler.postTask() finalmente ofrece a los desarrolladores un control detallado sobre la ejecución.A través de ejemplos del mundo real, análisis de rendimiento y una demostración en vivo, mostraremos cómo la programación priorizada puede eliminar los congelamientos de la UI, mejorar la capacidad de respuesta y hacer que la ejecución de JavaScript sea verdaderamente centrada en el usuario. Si te importa el rendimiento de JavaScript, ¡esta es la charla que no querrás perderte! 🚀

JavaScript No Es Lento – Solo Está Programado Incorrectamente

Srilakna discusses JavaScript performance, highlighting scheduling challenges and the limitations of existing models. The introduction of the Post Task Scheduler API addresses these issues, offering promise-based scheduling for specific priorities. The internal workings and implementation of the API are explained, emphasizing task prioritization to ensure smooth UI performance. The API enables developers to control task priorities effectively, preventing UI freeze and lag.

In this session, we’ll explore why JavaScript’s single-threaded model causes UI lag, why setTimeout() and requestIdleCallback() fail at task prioritization, and how scheduler.postTask() finally gives developers fine-grained control over execution.Through real-world examples, performance analysis, and a live demo, we’ll show how prioritized scheduling can eliminate UI freezes, improve responsiveness, and make JavaScript execution truly user-centric. If you care about JavaScript performance, this is the talk you don’t want to miss! 🚀

JavaScript Isn’t Slow – It’s Just Scheduled Wrong

Sulagna Ghosh

Katharina Fetzer emphasizes the importance of green coding principles in startups amidst climate change. High Lane implements cloud native applications and lightweight solutions. Efficient load handling in the cloud involves scalable virtual servers. Resource sharing and optimization in the cloud promote cost efficiency. Highlane's cloud-first strategy and lightweight app development aim for a greener web presence. The webpage relaunch at Highlane reduced emissions by 50%.

As IT professionals, we play a critical role in energy consumption and emissions, and it's our responsibility to address this impact. By adopting greener practices in web development, we can contribute to achieving climate goals while still driving innovation and growth. I'll share insights of how we integrated principles of green web development in the redesign of our website and explain their impacts.

Sustainable Web Development in Startups: Applying Green Coding Principles for a Greener Future

Katharina Fetzer

Aprende cómo funciona Vite's Hot Module Replacement (HMR) bajo el capó y todos los conceptos clave que lo impulsan.

Hot Module Replacement es Fácil

Welcome to JS Nation. Homework replacement, also known as HTML, allows code updates without page refresh. Understanding HTML involves APIs, server reactions to file edits, and client-side handling of changes. HTML API lifecycle includes attaching callbacks, disposing unneeded states, and accepting new modules. Server handling file changes, finding related modules, and HTML propagation decisions determine module execution and page reload. Propagation scenarios dictate HTML updates within boundaries or full reloads. Client-server communication through WebSocket manages reloads or module updates.

Learn how Vite's Hot Module Replacement (HMR) works under the hood and all the key concepts that power it.

Hot Module Replacement is Easy

Bjorn Lu

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

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

¿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

Acompáñame mientras exploramos el lado oscuro de los micro-frontends: la duplicación de dependencias. ¿Alguna vez te has preguntado qué sucede con el tamaño total de tu bundle cuando divides un gran SPA en docenas de micro-frontends? En esta sesión compartiremos nuestro viaje compartiendo dependencias entre micro-frontends en monday.com para reducir el tamaño total del bundle en la página y aumentar el rendimiento.

Compartir es cuidar: Mejorando el rendimiento de Micro-frontends con el intercambio de dependencias

Saar Becker discusses the challenges of micro-frontends at monday.com, focusing on bundle size due to loading React multiple times. The hot swap solution v1 is introduced to address this issue by sharing dependencies efficiently. Strategies include providing the same React version, managing shared dependencies through hot swaps, and optimizing bundle building by creating compound-named bundles. The talk delves into revising hot-swapping solutions, resolving indirect dependency issues, and optimizing dependency bundle building for production readiness.

Join me as we take a look into the dark side of micro-frontends - dependency duplication. Ever wondered what happens to your overall bundle size when you break a huge SPA into dozens of micro-frontends? In this session we’ll share our journey with sharing dependencies between micro-frontends in monday.com to reduce overall bundle size on the page and increase performance.

Sharing Is Caring – Boosting Micro-frontends Performance With Dependency Sharing

Sahar Brodbeker

Introduction to Demystifying IPFS, discussing the web platform's reach and flaws like link rot and censorship. Discussing the security challenges of web origin anchoring, location addressing flaws, and the introduction to IPFS with content addressing and peer-to-peer networking. Exploring IPFS content addressing with SIDs and the role of providers in data retrieval. Exploring data encoding in IPFS with UnixFS and the role of peer-to-peer networking in content retrieval. Discussing the challenges of peer-to-peer networking in IPFS and the benefits of content addressing. Emphasizing the advantages of censorship resistance, link rot prevention, and tamper-proofing in IPFS. Discussing the importance of DNS link in IPFS and the key operations of addressing data by SID, providing or pinning data, and data retrieval using protocols like bit swap and HTTP from gateways. Introducing the challenges with centralized gateways in IPFS, efforts to eliminate them by turning every IPFS node into a gateway, and the introduction of Helia, a modular TypeScript implementation for Node.js and the web.

IPFS is a peer-to-peer network distributing for content addressed data and can be thought of as a distributed CDN. Yet, given its evolutionary trajectory IPFS is often misunderstood. In this talk, you’ll learn about current state of IPFS with a focus on integration with the web platform using HTTP(S), how it enables local-first distribution of web apps, and real applications for you as a web developer.

Demystifying IPFS: A Web Developer's Guide to Content Distribution

Daniel Norman

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

¡Vamos a sumergirnos en el mundo de las pruebas con el test runner incorporado de Deno! ¡Adelante, el agua está encantadora!Comenzaremos explorando los principios de las pruebas efectivas, perfectos para principiantes que están mojando los pies. Luego, presentaremos el test runner listo para usar de Deno.Con la API Deno.test, estarás volando en poco tiempo. Cubriremos cómo escribir afirmaciones y ver de primera mano cómo ayudan a garantizar que tu código se comporte como se espera.Para concluir, exploraremos la escritura de pruebas que serán familiares para aquellos con experiencia en Jest y Vitest, utilizando Deno y su biblioteca estándar. Obtendrás conocimientos prácticos sobre lo simple que Deno hace configurar tu entorno de pruebas, estructurar tus casos de prueba y optimizar tu flujo de trabajo de pruebas.Ya seas un desarrollador experimentado o nuevo en Deno, esta charla proporcionará las herramientas y el conocimiento que necesitas para navegar con confianza en las aguas de las pruebas en tus proyectos Deno y hacer una gran entrada con tus habilidades de prueba.

Testing the Waters With Deno

Today's discussion delves into testing in Deno, emphasizing its simplicity and built-in tooling. Deno offers a seamless testing experience for developers, allowing tests to be written in TypeScript without extensive setup. The platform supports BDD-style testing, provides various assertion types, advanced features like code coverage and snapshot testing, and allows for filtering tests based on keywords. Additionally, Deno facilitates component testing, dependency mocking, and migration of test suites from Jest to Deno with minimal changes.

Let’s dive into the world of testing with Deno’s built-in test runner! Come on in, the water’s lovely!We’ll kick things off by exploring the principles of effective testing, perfect for beginners dipping their toes in. Then, we’ll introduce Deno’s out-of-the-box test runner.With the Deno.test API, you’ll be jetting in no time. We’ll cover how to write assertions and see firsthand how they help ensure your code behaves as expected.To wrap things up, we’ll explore writing tests that will be familiar to those experienced with Jest and Vitest, using Deno and its standard library. You’ll gain practical knowledge on how simple Deno makes setting up your testing environment, structuring your test cases, and optimizing your testing workflow.Whether you’re a seasoned developer or new to Deno, this talk will provide the tools and knowledge you need to confidently navigate the waters of testing in your Deno projects and make a splash with your testing skills!

JSNation 2025

The main JavaScript conference of the year