Name: JSNation US 2024
Start: 2024-11-18T14:00:00.000Z
End: 2024-11-21T22:30:00.000Z

Kristiyan Velkov

Yash Verma

Nicolas Carlo

  Neha  Seth

Kræn Hansen

Julian Burr

Tanner Linsley

Kiril Peyanski

Vinicius Dallacqua

Ian Schwartz

Gunj Joshi

Lera

Seungho Park

Ameer Sami

Kelly Vaughn

Kristopher  Baumgartner

Mike Hartington

Joran Quinten

Thibault Van den Broecke

Amanda Witecki

Agnieszka Labonarska

David Pugh

Kyle Langford

Florence Shelley

Yomi Eluwande

Philip Fulcher 

Anselm Eickhoff

Samuel Stroschein

Monica Powell

Sriram Hariharan

Darshan Bhatta

David Villamarin

Yossi Kahlon

Thorsten Hell

Svelte 5 ha salido, y es radicalmente diferente pero íntimamente familiar.

Estrella del Norte

As a child, the speaker was fascinated with space and finding direction. Svelte is an HTML-first approach to web development that simplifies tasks and offers efficient reactivity. The speaker reflects on Svelte's growth, goals, and design philosophy. Svelte aims to fix broken software and prioritize user focus. The future direction includes error boundaries, better debugging, and AI's role. Building open source software is challenging, and Rust's impact is discussed. The speaker values framework diversity and highlights the advancements and challenges faced by web development.

Svelte 5 is out, and it's radically different but intimately familiar.

Svelte 5: North Star

Rich Harris

Desbloquea la próxima generación de productividad para desarrolladores. En esta masterclass, profundizaremos en cómo las herramientas impulsadas por IA están transformando la forma en que construimos software. Descubre técnicas para la iteración rápida, la depuración inteligente y la creación de experiencias de usuario excepcionales. Ya sea que estés utilizando modelos de IA de vanguardia o explorando la primera ola de asistencia de IA, esta masterclass te equipará con estrategias para mejorar tu flujo de trabajo.

El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy

AI is transforming software engineering by using agents to help with coding. Agents can autonomously complete tasks and make decisions based on data. Collaborative AI and automation are opening new possibilities in code generation. Bolt is a powerful tool for troubleshooting, bug fixing, and authentication. Code generation tools like Copilot and Cursor provide support for selecting models and codebase awareness. Cline is a useful extension for website inspection and testing. Guidelines for coding with agents include defining requirements, choosing the right model, and frequent testing. Clear and concise instructions are crucial in AI-generated code. Experienced engineers are still necessary in understanding architecture and problem-solving. Energy consumption insights and sustainability are discussed in the Talk.

Unlock the next generation of developer productivity. In this talk, we'll dive into how AI-powered tools are transforming the way we build software. Discover techniques for rapid iteration, intelligent debugging, and the creation of exceptional user experiences. Whether you're using cutting-edge AI models or exploring the first wave of AI assistance, this talk will equip you with strategies to level up your workflow.

The Ai-Assisted Developer Workflow: Build Faster and Smarter Today

Addy Osmani

El desarrollo web está experimentando una transformación rápida, nuevas tecnologías basadas en estándares están remodelando la forma en que construimos aplicaciones web. Esta charla explorará las grandes ideas, nuevos estándares web, avances en AI, WASM y Web GPU, runtimes alternativos de JavaScript, y nuevas APIs de CSS que están impulsando la próxima generación de desarrollo web. También cubriremos propuestas emocionantes para el futuro de JavaScript, así como lo último en herramientas de desarrollo que impulsarán tu desarrollo a ser al menos un desarrollador 1.5×.

Una Mirada al Futuro del Desarrollo Web en 2025

Today, Wes Boss introduces the new features of the web, including customizable select and temporal, a standardized API for working with dates, time, and duration. The current date API in JavaScript has some problems related to time zones and date manipulation. With the temporal API, you can create dates without a time zone, specify dates without a year, and create durations without being attached to a specific date. The API also provides features for finding the difference between two dates. Invokers is a declarative click handlers API that eliminates the need for JavaScript. Speculation API enables pre-rendering and pre-loading of pages, improving performance. The CSS Anchor API allows positioning elements based on another element's location. Web components are encapsulated, framework-agnostic, and easy to use, offering a standardized approach for building reusable UI components. Building media UI components, like video players, is made easier with web components like Shoelace. Transformers JS allows running AI models in JavaScript for tasks like emotion detection and background removal. Python doesn't run in the browser, but JavaScript does. Small AI models can be loaded and executed faster in the browser using technologies like WebGPU. Animate height auto transition using calc size. Apply starting styles to elements for smooth animations. Use Vue transition for CSS and JavaScript animations. Syntax website with Vue transition for smooth page transitions. CSS relative colors allow for lighter or darker shades. Scope CSS ensures styles only apply to specified div containers. Web primitives facilitate modern JavaScript code. You can create web requests and receive web responses using the same primitives on both the client and server. There are many new web standards that work everywhere and frameworks like Hano and Nitro are built upon them. The select and Popover elements are accessible by default. Most of the discussed features will be available in all browsers by 2025. The future of web development with AI is uncertain, but web developers should embrace AI tools to improve efficiency. Implicit CSS lazy loading depends on whether it's prefetching or pre-rendering. Wes Boss discusses the specific features he is excited about in web development, including starting style, calc auto, and allowed discrete. He shares his preferred way of staying informed on new web development discoveries, emphasizing the importance of being part of the community and keeping up with industry discussions. Wes also mentions reading W3C meeting notes and recommends following the Twitter account Intent2Ship to stay updated on upcoming CSS features. Lastly, he discusses the potential impact of the new Scope CSS feature on developers' management of styles.

Web development is undergoing a rapid transformation, new technologies based on standards are reshaping the way we build web applications. This talk will explore the big ideas, new web standards, advancements in AI, WASM and Web GPU, alternative JavaScript runtimes, and new CSS APIs that are driving the next generation of web dev. We will also cover exciting proposals for the future of JavaScript, as well as the latest in dev tooling that will rocket your development into being at least a 1.5× developer.

A Look Ahead at Web Development in 2025

Wes Bos

En esta masterclass práctica, estarás equipado con las herramientas para probar efectivamente la seguridad de las aplicaciones web. Este curso está diseñado tanto para principiantes como para aquellos que ya están familiarizados con las pruebas de seguridad de aplicaciones web y desean ampliar su conocimiento. En un mundo donde los sitios web juegan un papel cada vez más central, asegurar la seguridad de estas tecnologías es crucial. Comprender la perspectiva del atacante y conocer los mecanismos de defensa apropiados se han convertido en habilidades esenciales para los profesionales de TI.Esta masterclass, dirigida por el renombrado entrenador Gregor Biswanger, te guiará a través del uso de herramientas de pentesting estándar de la industria como Burp Suite, OWASP ZAP y el marco profesional de pentesting Metasploit. Aprenderás a identificar y explotar vulnerabilidades comunes en aplicaciones web. A través de ejercicios prácticos y desafíos, podrás poner en práctica tu conocimiento teórico y expandirlo. En este curso, adquirirás las habilidades fundamentales necesarias para proteger tus sitios web de ataques y mejorar la seguridad de tus sistemas.

Masterclass Práctica: Introducción a Pentesting para Aplicaciones Web / APIs Web

Introduction to Pan Testing. Today we'll focus on web apps and web APIs. Set up and configure necessary tools for pan testing. Use Kali Linux with Docker for testing purposes. Learn how to use Bob Sweet as a proxy in Kali Linux. Use Postman with the Bob Sweet proxy. Utilize the scope feature in Bob Sweet Proxy for comprehensive testing. Learn about scanning and enumeration in ethical hacking. Understand broken object and function level authorization. Analyze communication and system usage in pan testing. Decouple your backend and use DTOs. Crack and manipulate JWT tokens. Use HTTPS and implement backend authentication for security.

In this hands-on workshop, you will be equipped with the tools to effectively test the security of web applications. This course is designed for beginners as well as those already familiar with web application security testing who wish to expand their knowledge. In a world where websites play an increasingly central role, ensuring the security of these technologies is crucial. Understanding the attacker's perspective and knowing the appropriate defense mechanisms have become essential skills for IT professionals.This workshop, led by the renowned trainer Gregor Biswanger, will guide you through the use of industry-standard pentesting tools such as Burp Suite, OWASP ZAP, and the professional pentesting framework Metasploit. You will learn how to identify and exploit common vulnerabilities in web applications. Through practical exercises and challenges, you will be able to put your theoretical knowledge into practice and expand it. In this course, you will acquire the fundamental skills necessary to protect your websites from attacks and enhance the security of your systems.

Hands-On Workshop: Introduction to Pentesting for Web Apps / Web APIs

Gregor Biswanger

El enfoque principal de la charla será la nueva API de entornos que es muy importante para los frameworks.

Qué hay de nuevo en Vite 6

Vite, a popular build tool for front-end development, has seen significant growth since its public release in 2021. It has been downloaded 12 million times and has over 1,000 contributors. Vite offers benefits such as a powerful dev server, hot module reloading, and a plugin API based on Rollup. However, there are limitations with server-side rendering that require extra code and handling of SSR flags. Vite's environment API allows for cleaner communication between the browser and server, and plugins can configure and customize specific environments. The future plans for Vite include stabilizing the environment API and integrating Rolldown Vite for faster builds. Vite is compatible with various front-end frameworks and is used by projects like Vaku and Vinci. The environment API has potential for per-local builds and building on older versions of Node, but may not be recommended for internationalization purposes.

The main focus of the talk will be the new environments API that is a big deal for frameworks.

What's New in Vite 6

Dominik Göpel

Las fugas de memoria en JS son un punto ciego para muchas (me atrevería a decir que la mayoría) aplicaciones web y necesitamos difundir conciencia. Cómo saber si tu aplicación tiene fugas de memoria en el entorno real (reporting API), cómo encontrar fugas (Memlab de Facebook + mi extensión de grabadora) y cómo solucionarlas (generalmente lo más fácil).

Your App Crashes My Browser

We asked co-sponsors to present React, an essential framework for web and mobile developers. TypeScript improves the development experience. Let's talk about the neglected topic of JavaScript leaks and how Chrome handles them. Leaks are easy to create, even for good developers. We crashed browsers due to memory leaks. Solution: fully reload the page after soft navigations. Today we have tools to fix leaks. The first step is admitting you have a problem. Use the reporting API to collect data on memory leaks. If you have a problem, it's not just a single leak. Debug and take memory snapshots. Load the page, perform an action, go back. Compare snapshots to find leaks. Use Memlab by Facebook to identify leaked objects. Memlab tells us memory is used, leaks are everywhere. Chrome extension helps with exporting actions to scenario.js file. 50 users already. Fixing memory leaks involves finding and nullifying unused objects. Spot the leak in a simple React component that adds event listeners. Removing the component leaves the listeners behind. In session two, adding a set interval creates additional listeners. Debugging with Memlab and using non-minified code and named functions helps identify the leaks. Solution: add a component. In React, frameworks provide ways to clean up after components are removed. Spotting a leak in uppercase spelling of mount. Hooks offer use effect to handle cleanup. A use effect allows you to return a function for cleanup. Spot the weird memory leak caused by console logs. Try the reporting API, check your framework, use null, and find your first leak. Memory leaks may be more significant on a mobile browser due to limited available memory. Differentiating between leaked memory and growing global state can be determined by the app's architecture. Checking for memory leaks on mobile can be done using dev tools and manual inspection or by using Puppeteer and the developer tools protocol for emulation. The lack of naming and bindings for anonymous functions in a codemark plugin is a potential area for improvement. Neglect and the excessive amount of JavaScript are common culprits for poor web performance. Facebook's experience with redesigning their website highlighted the need for tools to address the performance bottleneck caused by JavaScript. Throttling the CPU can be effective. Developers should set objects to null when they are no longer needed, allowing the garbage collector to clean up. Chrome DevTools provides options for detecting console log memory objects. WeakRefs and WeakMaps can be useful for cleaning up memory leaks. Integration with tools like MemLab can help regression test releases for memory leaks. We are still early in memory leaks tooling. Raising awareness about the problem is important. Lighthouse scores are not the sole indicator of a fast website. Additional testing and familiarity with Core Web Vitals are recommended.

Memory leaks in JS are a blind spot for many (I'd guess most) web apps and we need to spread awareness. How to know if your app leaks memory in the wild (reporting API), how to find leaks (memlab by Facebook + my recorder extension) and how to fix them (usually the easiest).

 Stoyan Stefanov

¿Cansado de seguir el ritmo de los últimos test runners de JavaScript? No estás solo. Vamos a hacer un viaje desde los días de Selenium (//div[@class='nightmare']) hasta la refrescante simplicidad de Vitest. A través de conversaciones con creadores de frameworks y desarrolladores curtidos en batalla, exploraremos por qué seguimos reinventando las herramientas de prueba, y por qué eso no siempre es algo malo. Aprenderás cuándo subirse a las nuevas tendencias de pruebas, cuándo quedarse con lo que funciona, y por qué a veces la mejor opción es simplemente hacer clic en tu aplicación como si fuera 1999. Perfecto para cualquiera que alguna vez se haya preguntado '¿Realmente necesitamos otro test runner?' (Spoiler: A veces sí lo necesitamos.)

Veinte Años de Pruebas Web: Desde el Amanecer de Selenium hasta la Promesa de Vitest

My goal with this talk was to answer the question of why we have another test runner. The talk breaks down the history of web testing into three chunks: the click-through era, browser war one, and browser war two. It discusses the motivations behind browser test runners and node test runners, highlighting Karma as the first node-based runner that gained popularity. The rise of node-based test runners like Ava, Tape, Mocha, and Jest is attributed to their stability and ease of use compared to Karma. Jest faced challenges with module loading and transpiling, but its non-opinionated abstraction made it a suitable choice. The shift towards environment-aware runners like VTest allows for safer testing and aligns with the need for transpilation across different environments. Lastly, the talk touches on the future of test tooling and the implications of AI on testing.

Tired of keeping up with the latest JavaScript test runners? You're not alone. Let's take a journey from the days of Selenium (//div[@class='nightmare']) to the refreshing simplicity of Vitest. Through conversations with framework creators and battle-scarred developers, we'll explore why we keep reinventing testing tools—and why that's not always a bad thing. You'll learn when to jump on new testing trends, when to stick with what works, and why sometimes the best choice is just clicking through your app like it's 1999. Perfect for anyone who's ever wondered 'Do we really need another test runner?' (Spoiler: Sometimes we do.)

Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise

Jessica Sachs

Los frameworks web modernos trabajan con un flujo de datos unidireccional. Lo que se muestra en la pantalla es una función del estado de la aplicación, y las actualizaciones a ese estado solo actualizan la parte particular del DOM a la que se refiere. A través de sus propios caminos, muchos otros frameworks web han llegado a soluciones que son análogas entre sí, a menudo llamadas "Señales". Ahora, un grupo de autores de bibliotecas de señales y mantenedores de frameworks de front-end están trabajando juntos en TC39 para estandarizar algunas de las estructuras de datos y algoritmos centrales que serán necesarios para las implementaciones de JS de Señales, y podríamos usar su ayuda para impulsar JavaScript hacia adelante.

Estandarización de Señales en TC39

I'll be talking about standardizing signals in TC39. Immediate mode wipes out the whole screen and writes a new one, while retained mode changes only what is necessary. Signals represent a cell of data that can change over time. The correct solution is to topologically sort dependencies and evaluate them in a coherent order. Standard signals allow for code sharing across frameworks and the creation of reusable infrastructure. The signal API is designed to be wrapped by different frameworks. Standards can achieve more portability and reduce the need to lock into specific ecosystems. The API includes a watcher, a set of signals being observed, with a synchronous callback made when the first member becomes potentially dirty. The speaker discusses how signals relate to state management libraries in React and mentions the potential for signals to become a web standard in the future.

Modern web frameworks work with one-way data flow. What is displayed on the screen is a function of the application state, and updates to that state only update the particular part of the DOM to which it relates. Through their own paths, many other web frameworks have arrived at solutions which are analogous to each other, often called “Signals.” Now, a group of signal library authors and maintainers of front-end frameworks are working together in TC39 to standardize some of the core data structures and algorithms that will be required for JS implementations of Signals, and we could use your help pushing JavaScript forward.

Standardizing Signals in TC39

Daniel Ehrenberg

Aprende el potencial completo de TypeScript utilizando características avanzadas como Type Inference, Type Guards, Generics, Transformers y Utility Types con programación asíncrona tanto en Node.js (usando Express.js) como en Bun.js (usando Hono.js), todo mientras entiendes las mejores prácticas para construir APIs fuertemente tipadas con diferentes bases de datos.Visión GeneralEn esta masterclass, comenzaremos con una discusión sobre las actualizaciones recientes en Node.js y Bun.js, centrándonos en su soporte incorporado para TypeScript. Aprenderás cómo configurar TypeScript en ambos entornos de ejecución y crear APIs estrictamente tipadas usando Express.js y Hono.js. A través de demostraciones prácticas, exploraremos la integración con varias bases de datos como MongoDB y Postgres, aprovechando las características avanzadas de TypeScript para construir aplicaciones robustas. Al final de la masterclass, estarás equipado con el conocimiento para optimizar el código TypeScript para el rendimiento y los patrones de diseño, asegurando que tus APIs sean tanto eficientes como mantenibles.Objetivos de Aprendizaje- Introducción al soporte de TypeScript en Node.js y Bun.js- Características Avanzadas de TypeScript: Generics, Type Guards, Mapped Types, etc.- Middleware e Inyección de Dependencias con Express.js y Hono.js- Mejora de Patrones de Diseño y Rendimiento en TypeScript- Pruebas Unitarias e Integración con TypeScript- Integración de Bases de Datos: MongoDB, Postgres, Prisma y otros- Mejores Prácticas para el Desarrollo de APIs Robustas tanto en Node.js como en Bun.js

Advanced TypeScript for Bun and Node.js

Welcome to the advanced TypeScript workshop for back-end development. We'll dive into interesting concepts, patterns in API development, and type-safe back-end testing. Learn how to create a robust API in Node using industry best practices and explore a fully functional Node.js API built with Express, MongoDB, Mongoose, and TypeScript. Implement dependency injection using Inversify and see how it works in a fully working demo. Enhance the code base by adding dependency injection, unit testing, and other TypeScript techniques. Explore the benefits of dependency injection and how it allows for flexible and modular code. Test API routes and implement both dependency injection and unit testing for reliable and controlled testing. Dive into integration testing, mocking, and hot-swapping services. Implement a logger service and create a generic service for basic CRUD functionalities. Troubleshoot issues and make choices based on the complexity and requirements of your application. This workshop provides a comprehensive guide to building a type-safe backend using TypeScript and Node.js.

Learn the full potential of TypeScript by using advanced features like Type Inference, Type Guards, Generics, Transformers, and Utility Types with asynchronous programming in both Node.js (using Express.js) and Bun.js (using Hono.js), all while understanding best practices for building strongly typed APIs with different databases.OverviewIn this workshop, we’ll kick off with a discussion on the recent updates in Node.js and Bun.js, focusing on their built-in TypeScript support. You'll learn how to set up TypeScript in both runtimes and create strictly typed APIs using Express.js and Hono.js. Through hands-on demos, we'll explore integration with various databases like MongoDB and Postgres, leveraging advanced TypeScript features to build robust applications. By the end of the workshop, you'll be equipped with the knowledge to optimize TypeScript code for performance and design patterns, ensuring your APIs are both efficient and maintainable.Learning Goals- Introduction to Node.js’s and Bun.js’s TypeScript support- Advanced TypeScript Features: Generics, Type Guards, Mapped Types, etc.- Middleware and Dependency Injection with Express.js and Hono.js- Design Pattern and Performance Enhancements in TypeScript- Unit and Integration Testing with TypeScript- Database Integration: MongoDB, Postgres, Prisma, and others- Best Practices for Robust API Development in both Node.js and Bun.js

Adrian Hajdin

Sí, usar htmx para construir una aplicación web significa que escribirás menos JavaScript en general para tu aplicación web. No, esto no hace que htmx sea anti-JavaScript. Aunque ciertamente hay entusiastas de htmx que odian JavaScript, no obstante, htmx puede verse desde un ángulo pro-JavaScript: al liberar a JavaScript de tener que ser todo para tu aplicación web, puedes centrarte en usarlo donde fue diseñado para ser utilizado. Y, al hacerlo, ¡redescubre la alegría de JavaScript!

No Seriously: htmx es Pro-JavaScript!

HTMX is a hypermedia-oriented front-end library that enhances HTML as a hypermedia. It generalizes the concept of hypermedia controls in HTML, allowing any element to become a hypermedia control. HTMX provides practical attributes like HX swap and HX indicator. The active search demo showcases the dynamic behavior achievable with HTMX. HTMX allows developers to build web applications without writing a ton of JavaScript. It works well for traditional web apps but may not be suitable for offline functionality or fast interactions. HTMX can be integrated with JSX and various backend stacks, and TypeScript can be used alongside HTMX.

Yes, using htmx to build a web application means you will write less overall JavaScript for your web application. No, this does not make htmx anti-JavaScript. While there are certainly htmx enthusiasts who hate JavaScript, nonetheless, htmx can be looked at from a pro-JavaScript angle: by relieving JavaScript from having to be everything for your web application, you can focus on using it where it was designed to be used. And, in doing so, rediscover the joy of JavaScript!

No Seriously: htmx is Pro-JavaScript!

Carson Gross

Prepárate para llevar tus habilidades de desarrollo front-end al siguiente nivel con nuestra masterclass práctica. En esta sesión de cuatro horas, aprenderás los entresijos del desarrollo dirigido por pruebas utilizando Playwright, una herramienta poderosa que revolucionará tu flujo de trabajo de desarrollo web.¿Estás cansado de pasar horas interminables depurando problemas en tus aplicaciones web? Sumérgete en la escritura de pruebas antes de escribir código, asegurando una calidad y funcionalidad de primera clase en tus aplicaciones web. Di adiós a las pruebas manuales y hola a las pruebas automatizadas que detectan errores temprano en el proceso de desarrollo.Únete a nosotros para una masterclass interactiva y divertida donde ganarás la confianza para elevar tu juego de desarrollo front-end y construir aplicaciones web como un profesional. No dejes que puntos de dolor comunes como el comportamiento inconsistente de la interfaz de usuario o problemas de regresión te ralenticen: aprende a usar Playwright de manera efectiva para evitar estos escollos y agilizar tu proceso de desarrollo.¡No pierdas esta oportunidad de desbloquear todo el potencial del desarrollo dirigido por pruebas con Playwright – regístrate ahora y prepárate para mejorar tus habilidades!

Construyendo Aplicaciones Web Robusta con Desarrollo Dirigido por Pruebas y Playwright

Welcome to Building Robust Web Applications Using Test Driven Development and Playwright. We'll be building a small application in a TDD flow using React and Next.js. Playwright is a powerful and easy-to-use testing tool developed by Microsoft. It combines the strengths of Selenium and Cypress, offering features like overwrite capabilities, network interceptions, and the ability to emulate mobile devices. Using TDD with Playwright improves code quality, speeds up development, and ensures the whole application works. Playwright supports various testing approaches, such as end-to-end testing, visual regression testing, and component and network testing. It provides different methods for locating elements beyond CSS selectors and allows for stable animations in visual regression testing. We'll implement Playwright tests, run them, and use advanced testing techniques like user-facing selectors and hooks. We'll also test different environments, implement responsive grid layouts, and test movie details and navigation functionality. Overall, the Workshop provides best practices for Playwright testing and emphasizes the benefits of TDD in web application development.

Get ready to take your front-end development skills to the next level with our hands-on workshop. In this four-hour session, you will learn the ins and outs of test-driven development using Playwright, a powerful tool that will revolutionize your web development workflow.Are you tired of spending endless hours debugging issues in your web applications? Dive deep into writing tests before writing code, ensuring top-notch quality and functionality in your web applications. Say goodbye to manual testing and hello to automated tests that catch bugs early in the development process.Join us for an interactive and fun workshop where you'll gain the confidence to elevate your front-end development game and build web applications like a pro. Don't let common pain points like inconsistent UI behavior or regression issues slow you down - learn how to effectively use Playwright to avoid these pitfalls and streamline your development process.Don't miss this opportunity to unlock the full potential of test-driven development with Playwright – sign up now and get ready to uplevel your skills!

Building Robust Web Applications with Test-Driven Development and Playwright

Maurice de Beijer

Playwright permite pruebas confiables de extremo a extremo para aplicaciones web modernas. Soporta Chromium, WebKit y firefox para pruebas en Windows, Linux y macOS, localmente o en CI, ya sea en TypeScript/JavaScript, Python, .NET y Java.En esta charla, exploremos algunas capacidades avanzadas de Playwright y descubramos una gama de características, consejos y trucos que quizás no conozcas, desde dependencias de proyectos hasta simulación de API, pruebas de tiempo y más.

Técnicas Avanzadas de Playwright para Pruebas Impecables

Hi, everyone. My name is Debbie O'Brien, Principal Technical PM at Microsoft. I'm focusing on Playwright, a reliable end-to-end testing tool for modern web apps. It works on any browser and platform, has powerful tooling, and tests run fast. Advanced techniques include UI mode, HTML reports, and trace viewer. Use annotations in Playwright to enhance reporting and test organization. Mocking API responses and external links is possible with Playwright. You can also test date and time by setting a fixed fake time. Playwright offers CLI test options and has a vibrant community. Join the Playwright Discord server and follow the important docs and YouTube channel for more information.

Playwright enables reliable end-to-end testing for modern web apps. It supports Chromium, WebKit, and firefox for testing on Windows, Linux, and macOS, locally or on CI, in either TypeScript/JavaScript, Python, .NET and Java.In this talk let's explore some advanced Playwright capabilities and uncover a range of features and tips and tricks that you may not know about from project dependencies to API mocking, testing time and more.

Advanced Playwright Techniques for Flawless Testing

Debbie O'Brien

¿Qué pasaría si pudiéramos usar todas las funciones matemáticas avanzadas, herramientas de análisis de datos y visualización, etc., dentro de nuestro navegador, con JavaScript, en lugar de depender de bibliotecas de python como numpy y scipy, sin mucha degradación del rendimiento? Sí, eso es posible - con stdlib, que es una biblioteca estándar para javascript y node.js.

Matemáticas Avanzadas y Análisis de Datos Con JavaScript

In this talk, we explore advanced mathematics and data analysis with JavaScript, comparing its speed with Python and R. We discuss the role of WebAssembly and cases where plain JavaScript falls short. We introduce Standard Lib, a fundamental library for numerical computation on the web, similar to NumPy or SciPy in Python. We delve into the speed and performance of JavaScript, highlighting its performance compared to Python and R for different array sizes. We also discuss the performance of WebAssembly and native add-ons. Finally, we discuss the features of Standard Lib, including fancy indexing, blast operations, and its integration with Google Sheets.

What if we could use all the advanced mathematical functions, data analysis and visualization tools, etc., inside our browser, with JavaScript, instead of relying on python libraries such as numpy and scipy, without much degradation of performance? Yes, that is possible - with stdlib, which is a standard library for javascript and node.js.

Advanced Mathematics and Data Analysis With JavaScript

Dado que JavaScript lanza nuevas características cada año, podrías perderte algunas de las actualizaciones interesantes de objetos integrados como Array e Intl. Exploraremos nuevos métodos y objetos como Array.fromAsync() e Intl.Segmenter, y te mostraremos cómo navegar el soporte del navegador para nuevas características para que puedas eliminar bibliotecas externas o pasos de transpilación.

Modern JavaScript: Leveling Up Arrays and Intl

Hi, I'm Mariko from Chrome Developer Relations Team. Let's dive into the talk, leveling up JavaScript. I sat down and learned JavaScript. I sat down and learned ES6 again. TC39 has published a new version of JavaScript spec every year. I want to focus on the parts of JavaScript that got updates recently. So ArrayFlat creates a new flattened array. You can also pass a depth argument to flatten nested arrays. Another method, copyToReserve, creates a reversed copy of an array. There's also copy to sort, which creates a sorted copy of an array. Another useful method is array to spliced, which allows you to remove and add items to a copied array. Lastly, the array at method returns an item at a given index. Array at accepts negative numbers for reverse order lookup. Find last iterates in reverse order and returns the item or index. Copy to change the value at a given index with a function. Object group by allows grouping and creating a new object by type. JavaScript intl allows for word segmentation in different languages, improving readability. It also includes features like data type format, number format, and plural rules for locale-based results. Staying up to date on web features is challenging due to time-consuming research and potential errors in implementation. Baseline provides clear information on web platform features supported by major browsers, ensuring compatibility without issues. Baseline provides two levels of support: newly available and widely available. By aligning your project to Baseline, you can confidently avoid browser compatibility issues. You can use Baseline to keep up with what's new on the web by installing the Baseline widget. Websites and dashboards like feature explorer and web starters.dev have been released. The project roadmap includes developer tooling and integrating Baseline into linters and actions. Check the RAM archive insights page for user data based on Baseline years. We are planning for more tools next year, including linting and AI integration.

Since JavaScript releases new features every year now, you might miss some of the cool updates to built-in objects like Array and Intl. We'll explore new methods and objects like Array.fromAsync() and Intl.Segmenter, and show you how to navigate browser support for new features so you can remove external libraries or transpiling steps.

Mariko Kosaka

¿Alguna vez has sido engañado por una de las muchas trampas del objeto JS Date? ¿Agrupas datos de zona horaria? ¡Entonces echa un vistazo a Temporal! Temporal es una propuesta de TC39 que actualmente se está implementando en motores JS, que trae un mejor manejo de fechas y tiempos, y conciencia de zonas horarias, a JS. Esta charla es un recorrido por lo que necesitas saber sobre Temporal, pasando por una tarea simple, una media y una complicada, cada una resuelta con Temporal.

Temporal: Fechas y Tiempos Modernos en JavaScript

I'll speak today about the Temporal proposal, which adds modern date and time handling to JavaScript. Temporal is an API that'll be available in browsers soon and will add a built-in library for dates and times, avoiding the need for external libraries like Moment. It offers strong typing with different types for different data, such as calendar dates with or without time. Temporal objects are immutable and designed to work with JavaScript's internationalization facilities. It addresses deficiencies in the global Date object and introduces types like instant and plain types for accurate representation of time and dates across time zones. With the old Date, representing a date without a time can be problematic, especially in time zones where midnight is skipped due to daylight saving time. Temporal introduces types like PlainDate, PlainTime, PlainYearMonth, PlainMonthDay, and ZonedDateTime to accurately represent different scenarios. Additionally, there is a type called Duration for arithmetic operations and unit conversion. Now that I've introduced you to the cast of characters in Temporal, it's time to show how to accomplish a programming task. We'll start with an easy task: getting the current time as a timestamp in milliseconds using the instant type. To convert between Temporal types, you can either drop or add information. The toZonedDateTime method is used for conversion and requires adding a time zone and a time. Although Temporal objects are immutable, you can create new objects with replaced components using the with method. Migrating from the old Date object to Temporal offers a more reliable solution and avoids potential bugs. Check out the documentation for more details and enjoy using Temporal in your codebase!

Ever been fooled by one of the many pitfalls of the JS Date object? Do you bundle time zone data? Then check out Temporal! Temporal is a TC39 proposal currently being implemented in JS engines, that brings better date and time handling, and time zone awareness, to JS. This talk is a tour of what you need to know about Temporal, walking through one simple, one medium, and one complicated task each solved with Temporal.

Temporal: Modern Dates and Times in JavaScript

 Philip Chimento

Local-first es una nueva forma de construir apps alrededor del estado local (que se sincroniza entre usuarios y trabajadores del servidor) en lugar de usar APIs y bases de datos tradicionales. En esta charla veremos cómo se ve eso con mi framework, Jazz (para TypeScript/React). Veremos cómo escribir una app se convierte en poco más que definir un esquema de datos y construir algo de UI.

Local-First: Una Nueva Forma Loca de Construir Apps

Hi everyone, my name is Anselm and today I'd like to tell you about LocalThirst, a crazy new way to build apps. The traditional technologies are not made for the advanced features that users expect. Local first infrastructure simplifies the app development stack by allowing app-specific parts without a complex stack. Building apps with CRDTs enable real-time multiplayer, cross-device sync, offline support, and auto-merging of conflicts. Public key cryptography simplifies sharing, complex permissions, and enables end-to-end encryption. Local first frameworks like Jazz combine permissions, local first user identity, and cryptography. Managing schema changes in local first apps can be challenging but can be managed with patterns and caution. Backend workers in Local First work the same way as front-end workers, and Jazz allows precise access control for server workers. Jazz enables easy offline-first and local-first user experiences and is used for various apps like Invoice Rater, Learn Anything, and Succulent. Start building local-first apps with Jazz at jazz.tools.

Local-first is a new way of building apps around local state (that is synced among users and server workers) instead of using traditional APIs and databases. In this talk we'll have a look at what that looks like with my framework, Jazz (for TypeScript/React). We'll see how writing an app becomes little more than defining a data schema and building some UI.

Local-First: A Crazy New Way to Build Apps

Los Micro Frontends están en todas partes: en el cliente, en el servidor y en el edge. Muy a menudo, la escalabilidad de los micro frontends está determinada por la libertad e independencia de los equipos que los utilizan. Esto puede llevar a problemas ya que potencialmente código arbitrario entra en las aplicaciones en tiempo de ejecución, planteando la pregunta de qué vulnerabilidades potenciales existen y cómo mitigarlas. En esta sesión, escucharás sobre algunas de las vulnerabilidades más frecuentes que aparecen en proyectos del mundo real que utilizan micro frontends. Verás qué puedes hacer para deshacerte de ellas y evitar errores que conduzcan a problemas de seguridad. La misión de esta charla es entregar a velocidad y escala, pero hacerlo sin comprometer la seguridad.

Micro Frontends y Seguridad

Welcome to a session about micro-frontends and security. This Talk discusses the vulnerabilities in micro-frontend systems, including injections, insecure design, and security misconfiguration. It also explores identification and authentication flaws, and suggests mitigation strategies like using session cookies and secure HTTP channels. The Talk highlights the importance of implementing a gateway for enhanced security and addresses concerns about insecure design. It emphasizes integrity verification of JavaScript files and the prevention of code injection. The use of environment variables and configuration mismanagement is also discussed, along with the importance of vulnerability scanning and testing. The Talk concludes by emphasizing the need for authenticity and monitoring in micro-frontend development.

Micro Frontends are everywhere - on the client, on the server, and on the edge. Quite often the scalability of micro frontends is determined by the freedom and independence of the teams using them. This can lead to problems as potentially arbitrary code enters the applications at runtime asking the question of what potential vulnerabilities exist and how to mitigate them. In this session, you'll hear about some of the most frequent vulnerabilities that appear in real-world projects using micro frontends. You'll see what you can do to get rid of them and avoid mistakes leading to security issues. The quest for this talk is to deliver at speed and scale, but do it without compromises on security.

Micro Frontends and Security

Florian Rappl

Implementar autocompletar en una aplicación web es en realidad bastante complicado si quieres hacerlo bien. Una buena implementación incluye la desactivación de rebote de la entrada, el estado de carga/error, abortar solicitudes en curso y más.Resolver estos problemas a través de varios frameworks de front-end presenta problemas únicos y soluciones interesantes.En esta charla, mostraré las 1000 (¡eso es 8 en binario 😉!) maneras en que implementé esto a través de React, Solid, Preact, Svelte, Vue, Angular, HTMX y Vanilla JS. Compararé y contrastaré estas soluciones, mostraré algunos de los patrones comunes que surgieron y también destacaré los frameworks que hacen esto más fácil que otros.Los asistentes a esta charla se irán con nuevos trucos para probar en su framework favorito, así como una perspectiva sobre cómo se hacen las cosas en el panorama actual de frameworks de front-end.

1000 Maneras de Autocompletar

In this talk, the speaker explores how auto-complete can be implemented in different ways across various frameworks and libraries such as React, Vue, Angular, preact, Svelte, solid, and HTMX. The speaker discusses the different approaches to handling state and updating it in each framework. They also cover topics like debouncing user input, making API calls, and list rendering. The talk concludes with considerations for choosing a front-end framework and the speaker's personal preference for Svelte and Vue. They also mention the benefits of using web components to reduce boilerplate code. Overall, the talk aims to showcase alternative ways of developing applications beyond just React and encourage developers to explore and experiment with different frameworks.

Implementing autocomplete in a web app is actually quite tricky if you want to do it right. A good implementation includes de-bouncing input, loading / error state, aborting requests in flight and more!Solving these problems across various front-end frameworks presents unique problems and interesting solutions.In this talk I will showcase the 1000 (that's 8 in binary 😉) ways I implemented this across React, Solid, Preact, Svelte, Vue, Angular, HTMX and Vanilla JS. I will compare and contrast these solutions, showcase some of the common patterns that emerged and also highlight frameworks that make this easier than others.Attendees of this talk will walk away with new tricks to try in their favorite framework as well as perspective on how things are done in the current front-end framework landscape.

1000 Ways to Autocomplete

CJ Reynolds

Nue hace que las bases de código sean más limpias, trae herramientas más rápidas y genera sitios web con un diseño y usabilidad increíbles. 1. Bases de código más limpias * Contenido primero * Diseño desacoplado * Dominio de UX/CSS 2. Herramientas más rápidas * Más cerca del metal * Menos de todo * Rendimiento 10x 3. UX increíble * Transiciones de vista * Diseño de movimiento * 10x menos para cargar 4. Hoja de ruta * Nue 1.0 estable * Plantillas * Aplicaciones de una sola página * Cosas en la nube

Nue: El marco de UX para la web

Hello, everyone. My name is Tero Piirainen, a software engineer from Helsinki, Finland. I'm introducing a new UX framework for the web called Nue. It provides better tooling, code basis, and resulting websites compared to established frameworks like Next.js or Beat or Astro. Nue is incredibly fast, 100 times faster than Next.js, with improved hot reloading times. Simplicity is a key advantage of Nue, offering instant browser reactions to saved files and quick updates with hot reloading. Nue emphasizes timeless skills and focuses on design engineering, transitioning from JavaScript to modern CSS. Gnu, a component of Nue, focuses on CSS and offers small and fast websites with built-in turbo-linking and view transition motion effects. Overall, Nue and Gnu provide a simpler, faster, and more flexible development experience with a focus on user experience and design engineering.

Nue makes cleaner codebases, brings faster tooling, and spits out websites with incredible design and usability. 1. Cleaner codebases * Content first * Decoupled design * UX/CSS mastery 2. Faster tooling * Closer to metal * Less of everything * 10x performance 3. Incredible UX * View transitions * Motion design * 10x less to load 4. Roadmap * Nue 1.0 stable * Templates * Single-page apps * Cloud stuff

Nue: The UX Framework for the Web

Tero Piirainen

La generación aumentada por recuperación (RAG) proporciona a los modelos de lenguaje grandes información actualizada y les ayuda a alucinar menos. Pero, ¿cómo funciona todo bajo la superficie? En esta sesión de codificación en vivo, construiremos los componentes de un sistema RAG desde cero en JavaScript. (¡Aparte del LLM, probablemente no haya tiempo para eso!) Al construir el nuestro, entenderemos la vectorización, la búsqueda de similitud y el papel de los modelos de incrustación y las bases de datos vectoriales. Luego lo conectaremos todo para ver a nuestro bot aumentado en acción. Obtendrás una buena base en los componentes de chatbots exitosos y por qué funcionan.

Construir RAG desde Cero

Today's Talk explores the concept of Retrieval Augmented Generation (RAG) and its application in building chatbots. RAG involves giving language models more context by retrieving relevant data. This is achieved by creating vectors for each talk and using cosine similarity to compare them. The talk emphasizes the limitations of word-based vectors and the benefits of using embedding models and vector databases. By replacing word-based models with vector search, content can be sorted and retrieved more efficiently. RAG, along with large language models and AI, has the potential to enhance scalability and unleash new possibilities.

Retrieval augmented generation (RAG) provides large language models with up to date information and helps them hallucinate less. But how does it all work beneath the covers? In this live coding session we'll build the components of a RAG system from scratch in JavaScript. (Aside from the LLM, there probably isn't time for that!) By building our own, we'll understand vectorisation, similarity search, and the role of embedding models and vector databases. We'll then plug it all together to see our augmented bot in action. You'll get a good grounding in the components of successful chatbots and why they work.

Build RAG from Scratch

Phil Nash

En un mundo de componentes escritos en JavaScript, CSS se convirtió en un ciudadano de segunda clase. Pero olvida los memes. En esta charla, Tony muestra cómo el CSS moderno puede ser el mejor amigo de los desarrolladores de JavaScript, ahorrando tiempo de codificación y evitando los tipos de problemas de estilo que solían atormentar a los desarrolladores de JS y que han resultado en una miríada de abstracciones de CSS competidoras, que quizás ya no sean tan necesarias.

Es hora de enamorarse de CSS (de nuevo)

Hi, I'm Tony Alisea, a developer with over 25 years of experience. CSS won in the 90s due to its separation of structure and presentation, cascade concept, and powerful selectors. JavaScript developers fell out of love with CSS when they started using frameworks to construct the DOM. Instead of looking at the DOM holistically, we began to think in terms of componentization. CSS has continued to grow and add extraordinary features, such as CSS nesting and cascade layers. CSS layers give more control over the layering of CSS styles. Container queries allow us to respond to the size of the container instead of the viewport. The has pseudo class enables selecting parent elements. CSS is now more component-friendly and improves the user experience.

In a world of components written in JavaScript, CSS became a second-class citizen. But forget the memes. In this talk Tony shows how modern CSS can be a JavaScript developers best friend, saving coding time, and avoiding the kinds of styling problems that use to plague JS devs and have resulted in a myriad of competing CSS abstractions, which may not be so necessary any more.

It’s Time to Fall in Love With CSS (Again)

Tony Alicea

Las interfaces de voz nos rodean a diario, ayudándonos con algunas tareas. Pero olvidemos la productividad por un segundo y experimentemos con nuestra voz en la Web. Veremos el estado actual del Web Speech API, exploraremos su potencial en Karaoke, ¡y nos divertiremos un poco!

Desbloqueando Experimentos Divertidos: Explorando el Web Speech API

Hello, JS Nation! Today, I'll show you how I created gamified karaoke using Web Speech API. The Web Speech API has two parts: speech recognition and speech to text. It was originally built for karaoke but can also be used for forms and dictation. There are some quirks with the speech recognition API, such as limited microphone input and variation in implementation and privacy concerns across browsers. The speaker demonstrates how to implement speech recognition in a karaoke application and tests its error matching capabilities. Other interesting points include voice interface design considerations and the value of engaging in fun and unproductive side projects.

Voice interfaces surround us daily, helping us with some tasks. But let's forget productivity for a second and experiment with our voice on the Web. We will look at the current state of the Web Speech API, explore its potential in Karaoke, and have some fun!

Unlocking Fun Experiments: Exploring the Web Speech API

Ana Rodrigues

Mírame ejecutar malware ofuscado real desde NPM de manera segura mientras revelo lo que hace.  Aprende cómo es posible y utiliza la tecnología detrás de esto para asegurar tu aplicación contra código malicioso que pasa tus auditorías y detecciones. Y si la ofuscación no es suficiente, obsérvalo aplicado a una carga útil de malware entregada como bytecode precompilado de V8 sin código fuente proporcionado.

Mírame Ejecutar Malware Desde NPM

I'm Zebe, a JavaScript developer with a focus on security. Let's talk about the risks of consuming NPM packages, particularly malicious ones. We explore how to obtain and run malware, as well as evaluate and analyze JavaScript malware in Node.js. Malware can be delivered as pre-compiled bytecode, and defenses involve tools like npm audit. Hardin JavaScript and Lafamote are security tools that protect JavaScript applications and dependencies. Lafamote puts each package in its own compartment and provides tooling to create access policies. It prevents stolen cookies and restricts access to sensitive globals. Limited time offer to help set up projects with Lafamote.

Watch me run real obfuscated malware from NPM safely while revealing what it does.  Learn how it's possible and use the technology behind it to secure your application from malicious code that gets past your audits and detections. And if obfuscation is not enough, watch it applied to a malware payload delivered as pre-compiled V8 bytecode with no source code provided for it.

Watch Me Run Malware From NPM

Zbyszek Tenerowicz

La transmisión de medios es omnipresente... Escuchamos nuestras canciones favoritas mientras corremos o estamos sentados en el tren. Nos absorbemos en audiolibros escritos por nuestros autores favoritos. Vemos series de televisión o películas con nuestra familia y amigos. La transmisión de medios está en todas partes.. Hoy en día, con el creciente número de dispositivos y contenido, los proveedores deben mantenerse al día y ofrecer la reproducción más eficiente y fluida a todos los usuarios, sin importar dónde se encuentren, sin importar qué dispositivos usen. También deben cumplir con las normativas, para que ningún contenido pueda ser distribuido sin el consentimiento y conocimiento de los productores. En esta charla, vamos a aprender cómo transmitir medios en la Web. Aprenderemos sobre las tecnologías comunes como la segmentación, la tasa de bits adaptativa (ABR) y el protocolo DASH utilizado para proporcionar una reproducción eficiente y fluida. Veremos en detalle cómo funciona la descodificación de contenido con licencia gracias a Encrypted Media Extensions (EME). Por último, pero no menos importante, veremos todo esto en acción, durante la demostración, al final de la presentación. Si estás interesado en aprender cómo las compañías de streaming más grandes del mundo transmiten su contenido, únete a mí en esta sesión.

Modern & Secure Streaming on the Web

Today's Talk explores modern and secure streaming on the web, covering topics such as segmentation, media source extensions, dash protocol, and encryption/decryption with encrypted media extensions. The MP4 format is discussed, including atom structure and fragmentation. The use of the MPEG-DASH streaming protocol to fragment files and create a dash manifest is explained. Content protection and playback are handled through media source extensions, decryption components, and the creation of decryption keys. A demo is conducted to showcase the preparation, encryption, and playback of encrypted content. The importance of segmentation, media source extensions, encryption, and digital rights management in ensuring smooth and secure content distribution is emphasized.

Media streaming is ubiquitous... We listen to our favourite songs while running, or sitting on the train. We are absorbed by audiobooks written by our favourite authors. We watch TV series or movies with our family and friends. Media streaming is everywhere.. Nowadays, with the increasing number of devices and content, providers must keep pace and provide the most efficient and smooth playback to all users, no matter where they are, no matter what devices they use. They also have to stay compliant, so that no content can be distributed without producers' consent and knowledge. In this talk, we are going to learn how to stream media on the Web. We will learn about the common technologies such as segmentation, adaptive bitrate (ABR) and DASH protocol used to provide an efficient and smooth playback. We will look into details of how decrypting licensed content works thanks to Encrypted Media Extensions (EME). Last but not least, we will see all of these in action, during the demo, at the end of the presentation. If you are interested in learning how the world's biggest streaming companies stream their content, join me for this session.

Katarzyna Dusza

Reutilizar características de front-end construidas por diferentes equipos puede ser un desafío dependiendo del enfoque elegido. Si usamos una biblioteca, ¿qué pasa con el versionado y el mantenimiento? Si usamos un monolito, ¿qué pasa con los tiempos de construcción? Podemos encontrar una solución pragmática en Module Federation, no solo para compartir características sino también para dividir y conquistar. Únete a mí en esta charla para discutir las últimas actualizaciones de Module Federation, la seguridad de tipos, analizar sus desafíos y revisar un caso real donde aplicamos esta solución para compartir proveedores, hooks, características y problemas interesantes que enfrentamos en el camino.

¿Qué pasa con Micro Frontends

Micro-frontends break down a large frontend into smaller, independently deployable pieces. This approach improves scalability, team autonomy, and code maintenance. Two primary ways to implement micro-frontends are build time and run time. Module federation, introduced in Webpack 5, allows for dynamic real-time updates across teams. Challenges in implementing micro-frontends include getting type safety with TypeScript and testing at runtime. Module federation 2.0 introduced type extraction and manifest updates. Full site federation allows testing the whole app. Micro frontends involve trade-offs, so choose what benefits you the most.

Reusing front-end features built by different teams can be challenging depending on the chosen approach. If we use a library, what about versioning and maintenance? If we use a monolith, what about build times? We can find a pragmatic solution in Module Federation, not only for sharing features but also for dividing and conquering. Join me in this talk to discuss the latest updates of Module Federation, type safety, analyze its challenges, and check a real-world case where we applied this solution to share providers, hooks, features, and interesting issues we faced on the way.

What’s With Micro Frontends

Nataly Rocha

El desplazamiento virtual es una forma ingeniosa de reducir la sobrecarga de renderizado, y es especialmente útil a medida que aumenta la complejidad de los sitios web. Aunque hay muchas bibliotecas plug-and-play que soportan el desplazamiento virtual en varios frameworks, crear el tuyo propio es sorprendentemente fácil. Además, esto permite optimizar al máximo cada viewport para su contenido, desbloqueando ahorros adicionales de rendimiento. En esta charla, aprenderás cómo crear un viewport de desplazamiento virtual flexible desde cero, y hacerlo eficiente utilizando conceptos de programación funcional. Seguiremos una implementación de un viewport de desplazamiento virtual usando componentes web de principio a fin, incluyendo alturas de elementos variables, skeletons, renderizado asíncrono de componentes hijos. Luego lo optimizaremos usando memoization, envolviendo constructos imperativos más eficientes en una capa funcional, y usando reciclaje de elementos para reducir significativamente el churn de renderizado al usar componentes hijos sin estado. Finalmente, tocaremos el estado del arte en el renderizado del DOM virtual, y cómo este enfoque se compara con el uso de la nueva propiedad CSS `content-visibility`.

Desplazamiento Virtual Rápido y Flexible con Programación Funcional

Today's Talk focuses on implementing virtual scrolling to improve performance and flexibility of lists. The process involves computing the height of the viewport, scroll position, and individual list item height. By rendering only the elements within the viewport, the initial page load and scrolling performance are enhanced. Various optimization techniques are discussed, including memoization, binary search, and delayed rendering. These techniques significantly improve scrolling performance and provide a better user experience. Additional techniques such as using skeletons, element pooling, and functional purity can further optimize rendering. Advanced techniques, like moving elements within the pool and using content visibility, yield substantial performance improvements. However, content visibility is better suited for large pages with few large sections. Overall, the Talk offers valuable insights into virtual scrolling and its limitations.

Virtual scrolling is a clever way to reduce rendering overhead, and is especially helpful as the complexity of websites increases. Although there are many plug-and-play libraries which support virtual scrolling in various frameworks, rolling your own is surprisingly easy. In addition, this allows one to maximally optimize each viewport for its content, unlocking additional performance savings. In this talk, you will learn how to create a flexible virtual scrolling viewport from scratch, and make it performant using concepts from functional programming. We will be following an implementation of a virtual scrolling viewport using web components from start to finish, including variable element heights, skeletons, asynchronous child component rendering. We will then optimize it using memoization, wrapping more-performant imperative constructs in a functional layer, and using element recycling to significantly reduce render churn when using stateless child components. Finally, we will touch on the state of the art in virtual DOM rendering, and how this approach compares to the use of the new `content-visibility` CSS property.

Fast, Flexible Virtual Scrolling With Functional Programming

Adam Niederer

Debido a la disponibilidad de varios servicios de IA y LLMs de código abierto, ahora podemos construir aplicaciones "agentes" muy sofisticadas. Gestionar múltiples agentes de IA que se ejecutan simultáneamente y controlar el flujo de datos entre ellos es bastante difícil en la programación tradicional con Promise o async/await. Proponemos un estilo de "programación de flujo de datos" junto con una implementación de referencia de código abierto, GraphAI (https://github.com/receptron/graphai).

Aprovechando la Programación de Flujo de Datos para Sistemas de IA Escalables y Eficientes en Entornos Distribuidos

Today's Talk introduces Graphi, a declarative dataflow programming environment for AI. It emphasizes the importance of asynchronous APIs and deep programming environments in the era of AI. The JavaScript version of OpenAPI enables easier handling of multiple asynchronous calls. Declarative dataflow programming improves efficiency and async/await simplifies calling asynchronous API functions. To further optimize asynchronous programming, a dataflow approach is recommended. Graphi allows building conversational graphs and handling cyclic dataflow. It offers advantages like parallelism, resultability, and scalability. Graphi introduces new concepts like nested graphs and distributed computing. It is an open-source project actively being improved and welcomes contributions.

Because of the availability of various AI services and open source LLMs, we are now able to build very sophisticated "agentic" applications. Managing concurrently running multiple AI agents and controlling data-flow among them is quite difficult in traditional Promise or async/await programming. We propose a "data-flow programming" style along with a reference open-source implementation, GraphAI (https://github.com/receptron/graphai).

Leveraging Data Flow Programming for Scalable and Efficient AI Systems in Distributed Environments

Satoshi Nakajima

Para aquellos que no han oído hablar de Rspack, es una versión 1:1 de Webpack en Rust.Pero, ¿sabías que rspack en realidad es la cuarta iteración de los empaquetadores nativos que nuestro equipo ha diseñado, y originalmente comenzó como un complemento para esbuild? En su desarrollo, hemos reescrito esbuild y rollup en Rust, desmontado parcel para entenderlo mejor y en general hemos revisado todos los empaquetadores del mercado durante el desarrollo de rspack antes de finalmente elegir el diseño de la API de webpack para el proyecto tal como se conoce hoy en día. En esta charla compartiré los detalles de su creación, por qué lo construimos, cómo se ve el futuro de rspack y nuestra propia experiencia + datos comerciales que hemos recopilado con él en proyectos supermasivos en ByteDance.

Rspack Recientemente Fue Premiado como Avance del Año en JSNation

Today's Talk discussed RSPack, a Rust rewrite of Webpack that won Breakthrough of the Year at JS Nation. RSPack was developed at ByteDance to address the complexities of their WebInfra and provide a suitable bundler for native and exotic environments. The development of RSPack focused on improving on ES Build's capabilities, reducing CI wait times, and maximizing product velocity. ESBuild and Webpack had various weaknesses and limitations, leading to the decision to create a new bundler architecture. RSPack aimed to be language-agnostic and prioritize artifact integrity, performance, productivity, and business value. API design emphasized a balance between performance and versatility, tailored for larger businesses. RSPack achieved significant reductions in cloud costs and build times, and future ideas include TypeScript optimization and remote caching. For smaller companies, considerations when choosing a bundler include performance, chunking, reliability, and user experience.

For those who have not heard of Rspack, it's a 1:1 port of Webpack to Rust.But, did you know that rspack is actually the 4th iteration of native bundlers our team has designed, and it originally started out as a plugin for esbuild. In its development, we have rewritten esbuild &amp; rollup in rust, taken apart parcel to understand it better, and overall have reviewed every bundler on the market during the development of rspack before finally picking the webpack api design for the project as it is known today. In this talk I will share the behind the scenes of its creation, why we built it, what the future for rspack looks like, and our own experience + business data we have gathered with it in supermassive projects at ByteDance.

Rspack Recently Was Awarded Breakthrough of the Year at JSNation

Zack Jackson

Esta sesión te guiará a través del campo avanzado de las pruebas de UI E2E impulsadas por IA, centrándose en cómo acelera la creación de pruebas y simplifica el mantenimiento de las pruebas. Comenzaremos examinando los desafíos en la generación de pruebas E2E con IA, señalando cómo esto difiere de la tarea más simple de crear pruebas unitarias. La discusión luego cambiará a una solución que aborda estos desafíos de manera efectiva. Prepárate para ver una demostración en vivo donde crearemos una prueba E2E usando herramientas populares como Cypress o Playwright. Para concluir, analizaremos cómo la IA se acerca a la automatización completa del mantenimiento de nuestros conjuntos de pruebas, asegurando que se mantengan actualizados con una intervención manual mínima.

Pruebas de UI E2E impulsadas por IA: Creación más rápida, Mantenimiento más fácil

Hello, everyone. Today we are going to explore AI-powered end-to-end testing. Unlike unit tests, UI testing has a huge layer of obstructions between the source code and the rendered UI. The source code includes HTML, CSS, and TypeScript, which are transpiled into JavaScript and bundled with tools like Webpack. AI can generate tests effectively for standard websites or blogs, but it may struggle with niche applications behind strict authorization or on-premise tools. AI-powered end-to-end testing for complex scenarios requires our guidance. We use meaningful data test IDs and follow the page objects model pattern. Additionally, we rely on useful tools like the end-to-end test helper in-browser extension and the continue IDE extension. Now, let's proceed to the demo, where we will create tests for the Pokemon application, including the ability to filter by name or type. We will navigate to the Pokemon details page and use our extension to manage settings and prompts. Additionally, we will create the details page object together and generate the test file. The Pokemon details page has 105 elements. We can view the elements for debugging purposes, including page object name, Pokemon details page, and system message. We will copy the page object and save it to a file. We need to make it exportable. Then, we will use the extension to create an end-to-end test and pass the context. I will use all the open files, including the page objects and the test case itself. I will send them to EI along with the predefined prompt. There is a system message and additional information we need to be aware of. The test runs successfully, and that concludes this part.

This session will guide you through the advanced field of AI- E2E UI Testing, focusing on how it speeds up test creation and simplifies test maintenance. We'll begin by examining the challenges in generating E2E tests with AI, noting how this differs from the simpler task of creating unit tests. The discussion will then shift to a solution that addresses these challenges effectively. Prepare to see a live demonstration where we'll craft an E2E test using popular tools like Cypress or Playwright. To wrap up, we'll look into how AI comes close to fully automating the maintenance of our test suites, ensuring they stay up-to-date with minimal manual intervention.

JSNation US 2024

The main web dev conference in the US