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

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

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

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

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

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

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

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

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

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

Anselm Eickhoff

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

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

¿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

Gunj Joshi

Pensar es una parte esencial de ser ingeniero. ¿Cómo puedes hacer visible tu pensamiento a los demás para que puedas colaborar mejor? Discutiremos estrategias para hacer visible tu pensamiento y cubriremos cómo implementarlas de manera efectiva.

Cinco maneras de hacer visible tu pensamiento en la colaboración de ingeniería

Hi, everybody. I'm a software engineer sharing five ways to make your thinking visible in engineering collaboration. One of the most effective strategies is asking facilitative questions, which show interest not only in the answer but also in the thinking process behind it. The SAIL framework is effective for collaborating in groups, involving sharing the plan, asking questions, generating ideas, and learning. Knowing your audience and their background knowledge is crucial. The ladder of feedback is a five-step process to provide constructive feedback without making the receiver feel attacked. Making thinking visible in engineering collaboration leads to greater understanding, more collaboration, and growth for the team.

Thinking is an essential part of being an engineer. How can you make your thinking visible to others so that you can collaborate better? We will discuss strategies to make your thinking visible and cover how to implement them effectively.

Five Ways To Make Your Thinking Visible In Engineering Collaboration

Karen Li

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

¿Cómo se convierte una gran organización en accesible? Hablemos sobre estrategias de escalado de a11y. Para descubrir cómo volverse accesible y mantenerse accesible.

Escalando a11y

Hello and welcome to this talk about scaling accessibility. The web was created with accessibility in mind, we just need to utilize it to create accessible web applications. Digital accessibility is about creating applications that are accessible for everyone, regardless of disability. WCAG stands for Web Content Accessibility Guidelines, which provide a baseline for web accessibility. To scale up accessibility, an organization-wide approach is crucial, including management support, a person with final responsibility for accessibility, and inclusion of accessibility in all processes. Collaboration and consistent design elements are key to preventing the release of inaccessible features. Internal researching, testing, and monitoring are essential to ensure accessibility. Challenges with WCAG requirements and audits exist, as not all issues are shown and sample sizes can lead to missed issues. Auditing and fixing in a cycle doesn't work for larger organizations, so accessibility should be checked in every step. An accessibility certificate and the feedback loop help build knowledge within teams and ensure ongoing accessibility. The talk concludes with a summary of previous topics and an invitation for further discussion.

How does a big organization become accessible? Let’s talk about a11y scaling strategies. To find out how to become accessible, and stay accessible.

Scaling a11y

Tim Damen

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

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

¿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

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

Las animaciones en la web siempre han parecido algo imposible de hacer bien. Con JavaScript complejo necesario para hacer algo atractivo y muchas matemáticas requeridas, las animaciones a menudo se ignoran. Pero, ¿y si hubiera una mejor manera? ¿Y si pudieras simplemente decirle al navegador qué va a animar y dejar que el navegador se encargue del resto? Entra View Transitions.View Transitions es una nueva característica web que permite a los desarrolladores construir animaciones atractivas sin tener que sumergirse en trabajar con JavaScript para hacerlo. ¡Veamos cómo agregar View Transitions a nuestra aplicación y cómo impulsar animaciones atractivas con facilidad!

Animaciones Simplificadas en la Web

MacroMedia Flash revolutionized web development by allowing easy creation of animations. Web animations evolved from meta tags to keyframe animations and JavaScript animations. View transitions provide a better solution by creating animated transitions between DOM states. Advanced view transitions allow for tracking changes in the DOM and achieving powerful features like animating elements with display:none. The web animations approach uses the flip animation technique to reveal information. Astro is a project that embraces view transitions and offers built-in support. React has good support for view transitions. View transitions are currently supported in most major browsers. CSS animations and shape transitions can be easily integrated to customize animation behavior.

Animations on the web have always seemed like something impossible to do right. With complex JavaScript needed in order to do anything compelling and a lot of math required, animations are often ignored. But, what if there were a better way? What if you could just tell the browser what will animate and let the browser take care of the rest? Enter View Transitions.View Transitions are a new web feature that allows developers to build compelling animation without having to dive into working JavaScript in order to do so. Let's look at adding View Transitions into our app and how to drive compelling animations with ease!

Simplified Animations on the Web

Mike Hartington

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

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.

AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance

Daniel Ostrovsky

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

Una cinta de video críptica que atormenta a sus espectadores, una entidad cambiante que acecha una estación de investigación, o un astronauta que lleva sin saberlo un alienígena a bordo de una nave espacial —¿te suenan familiares estos escenarios? Estas tramas de películas de terror comparten similitudes con escenarios en seguridad web que ya has encontrado.Acompáñame en un escalofriante viaje a través de la seguridad web mientras exploramos las vulnerabilidades más comunes a través del lente de las películas de terror. Desde los siniestros fallos de inyección que recuerdan a "Alien" hasta el aterrador espectro de la autenticación rota similar a "Unfriended". Pero no te preocupes, también arrojaremos luz sobre soluciones en desarrollo web, convirtiendo estas pesadillas de seguridad en historias de triunfo. Si te atreves, únete a nosotros y aprende cómo conquistar la oscuridad invitada por tus aplicaciones web.

Desde la Cripta al Código: Seguridad Web Explorada a Través de Películas de Terror

The Talk explores the parallels between web security and horror movies, highlighting the real-world impact of security issues. OWASP is introduced as a helpful team that ranks security risks. Broken access control is identified as a major risk, and best practices for access control are discussed. Cryptographic failures are compared to the movie Hellraiser, emphasizing the importance of encryption. Surviving security issues involves encrypting sensitive data, input validation, and using secure protocols. Injection attacks and defense strategies are illustrated through the movie Alien. The importance of monitoring and updating dependencies is emphasized. Code testing is crucial for security. Social engineering and favorite horror movies are briefly mentioned. Testing tools and the importance of taking action are highlighted. Overall, the Talk provides valuable insights into web security through the lens of horror movies.

A cryptic videotape haunting its viewers, a shape-shifting entity haunting a research station, or an astronaut unknowingly carrying an alien onto a spaceship —do these scenarios sound familiar? These horror movie plots share similarities with scenarios in web security you have already encountered.Join me on a chilling journey through web security as we explore the most common vulnerabilities through the lens of horror movies. From the sinister injection flaws reminiscent of "Alien" to the terrifying specter of broken authentication akin to "Unfriended". But don't worry, we'll also shed light on solutions in web development, turning these security nightmares into tales of triumph. If you dare, join us and learn how to conquer the darkness invited by your web applications.

From the Crypt to the Code: Web Security Explored Through Horror Movies

Ramona Schwering

En esta charla, presentaré una visión general de cómo manejamos procesos grandes en el lado del cliente (aplicaciones web) utilizando una API web llamada Web Worker. Voy a presentar un caso de uso en el que tuve que aplicar web workers y las ventajas que trajo en el procesamiento pesado, llamado "Rinha Front end" en Brasil, un desafío donde tuvimos que procesar archivos Json de varios tamaños solo usando el lado del cliente y sin afectar la experiencia del usuario y bloqueando el uso de la aplicación. Así que en esta charla presentaré un caso simple usando Javascript puro y cómo usar Web Workers para procesar fuera del hilo principal y bloquear nuestras interacciones con la página. Crearemos una aplicación simple usando vanilla JS y les presentaré esta característica.

Web Workers: Manejo de Procesamiento Pesado en el Lado del Cliente

In this talk, the speaker introduces web workers and discusses how they can handle large processing on the client side. Examples, benchmarks, and tradeoffs are provided. The benefits of using web workers are discussed, and a demo project using VanillaJS and the live server extension of VS Code is showcased. The speaker demonstrates how to use web workers to prevent the main thread from getting blocked during large operations. The process of creating a web worker file and moving functions to it is explained. The speaker also shows how to handle messages and perform operations with web workers. The final remarks include contact information and an invitation to check out the speaker's YouTube channel for React courses and articles.

In this talk I will bring an overview how we handle with large process on Client Side (WebApp Applications)  using Web Api called Web Worker. I'm going to bring a view of a use case that I had to apply web workers and the advantages it brought in heavy processing, called “Rinha Front end” on Brazil, an challenge where we had to process Json files of various sizes just using the client side and without affecting the user experience and blocking the use of the application. So I this talk I will bring a simple case where using pure Javascript and how to use Web Workers to process out of the main thread and block our interactions with the page.  We will create a simple application using vanilla JS and I will introduce you this feature.

Web Workers: Handling Heavy Processing on the Client Side

Kevin Uehara

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

La accesibilidad es crucial para crear productos inclusivos y a menudo para cumplir con los requisitos legales también. Sin embargo, evaluar y cuantificar el progreso de una empresa en esta área puede ser un desafío. En Stack Overflow, pasamos de abordar rápidamente los problemas de accesibilidad a una estrategia proactiva que integra la accesibilidad en nuestro ciclo de desarrollo de productos. Acompáñame mientras comparto cómo el equipo de Diseño del Sistema en Stack Overflow lideró esta transformación al definir objetivos claros, asegurar el compromiso de ingeniería y desarrollar un panel de accesibilidad que realiza un seguimiento del progreso y proporciona información accionable. Aprende cómo creamos un sistema de puntuación de accesibilidad semiautomatizado que nos ayudó a establecer objetivos de nivel de servicio de accesibilidad (SLO) para nuestros productos.

Deja de adivinar, comienza a medir: Cuantificación de la accesibilidad

Hello everybody, I'm Giammi. Today, I would like to share with you a case study about how quantifying accessibility played a crucial role in improving the accessibility of our products at Stack Overflow. We started our journey by setting clear accessibility targets based on WCAG guidelines and adopted the Advanced Perceptual Contrast Algorithm to address color contrast. We established a way to measure accessibility progress using automated tools and manual scores. Our focus was on the design system and we rolled out improvements such as a new color palette. Key learnings include the importance of setting clear targets and measuring product accessibility for motivation and visibility. Accessibility work is ongoing and should be integrated early in the development process. Thank you for listening.

Accessibility is crucial for creating inclusive products and often for meeting legal requirements too. However, assessing and quantifying a company's progress in this area can be challenging. At Stack Overflow, we transitioned from hastily addressing accessibility issues to a proactive strategy that integrates accessibility into our product development lifecycle. Join me as I share how the Design System team at Stack Overflow spearheaded this transformation by defining clear targets, securing engineering commitment, and developing an accessibility dashboard that tracks progress and provides actionable insights. Learn how we created a semi-automated accessibility scoring system that helped us to establish accessibility service level objectives (SLOs) for our products.

Stop Guessing, Start Measuring: Quantifying Accessibility

Giamir Buoncristiani

Freestyle es un nuevo runtime de JavaScript que elimina tu base de datos, permitiéndote hacer tu estado de JavaScript en memoria con estado🤯 .  Vamos a explorar las implicaciones del desarrollo más allá de las bases de datos, y las implicaciones para los ingenieros de JavaScript.

JavaScript Conquistó el Servidor, Es Hora de que Conquiste la Base de Datos También

Hi, I'm Ben, the CEO of Freestyle. We're building Cloud State, a JavaScript runtime that allows you to write your entire application in TypeScript. We believe that bringing all the layers into TypeScript natively can greatly improve team efficiency. By marking a class as 'at cloud state', it becomes persistent and can be deployed without a SQL database. Connecting to the front end is as simple as accessing the functions directly. CloudState enables the sharing of back-end data infrastructure as packages, eliminating the need for web servers and endpoints. Freestyle chat is an open-source chat solution that can be easily integrated into applications. Cloud State has the potential to transform databases like Node.js did to servers, making development better for JavaScript users.

Freestyle is a new JavaScript runtime that gets rid of your database, by letting you make your in memory JavaScript stateful🤯 .  We're going to go through the implications of development beyond databases, and the implications for JavaScript engineers.

JavaScript Took Over the Server, Its Time It Takes Over the Database Too

Benjamin Swerdlow

¿Alguna vez has tenido esa sensación de hundimiento cuando tu aplicación favorita de repente deja de funcionar? No estás solo. Los equipos de frontend se centran en el rendimiento del lado del cliente para mejorar la experiencia del usuario, donde los clientes pasan tiempo y se genera ingresos. Herramientas como RUM y Synthetic Monitoring ayudan, pero están desactualizadas y no son suficientes. Di hola a Frontend Observability, un enfoque holístico y de extremo a extremo para investigar errores y latencias.

Observability Matters: Esta Vez para Frontend

Hi, everyone! My name is Yash Varma, and I'm a software engineer and computer researcher. I'm an open telemetry enthusiast, working on creating a vendor-neutral observability framework. Today's talk is titled as Observability Matters, this time for frontend. We'll cover the evolution of ZEP, the understanding of observability, current state of front-end monitoring tools, core essence of front-end observability, and front-end observability direction. Observability is about understanding what's happening inside the system based on its internal behavior or output. Front-end developers often lack observability compared to back end developers. Synthetic monitoring and real user monitoring are two common tools used by frontend developers. Front-end observability allows us to understand application performance for different users and situations, connecting the dots and gaining insight into core web vitals and user sessions. It's time to adopt observability as a culture and break down silos between front-end and back-end to better understand the entire user experience.

Have you ever had that sinking feeling when your favorite app suddenly stops working? You’re not alone. Frontend teams focus on client-side performance to enhance user experience, where customers spend time and revenue is generated. Tools like RUM and Synthetic Monitoring help, but they're outdated and not sufficient. Say hi to Frontend Observability, a holistic and end-to-end approach to investigate errors and latencies.

Observability Matters: This Time for Frontend

Yash Verma

¿Alguna vez has querido construir una biblioteca de componentes pero te sentiste demasiado intimidado? ¡No te preocupes! Te guiaré a través de los dilemas que enfrentarás al crear tu primera biblioteca de componentes. Te mostraré cómo considerar las soluciones correctas y compartiré algunas de mis experiencias personales. Al final, estarás equipado para compartir tu primera biblioteca con el mundo.

Las Dilemas que Enfrenté al Construir una Biblioteca de Componentes

Building a component library involves making various decisions such as using a JavaScript framework, considering accessibility in testing, and using a monorepo. Building a component library allows for faster interface creation and consistent visual language. Making the wrong choice can lead to owning the complexity of interactions. Offloading the complexity to an open-source library can be beneficial. Exporting as a single package or scoped packages have their advantages and disadvantages. Setting up a specific workflow and repo structure is important for publishing components. It is recommended to publish as ESM and avoid bundling the library. Leveraging browser capabilities and using fundamental tools like CSS and TypeScript can be beneficial.

Ever want to build a component library but felt too intimidated? Don’t worry! I’ll walk you through the dilemmas you’ll face when creating your first component library. I’ll show you how to consider the right solutions, and I’ll share some of my personal experiences. By the end, you’ll be equipped to share your first library with world.

JSNation US 2024

JS stars in the US biggest planetarium