Name: JSNation 2023
Start: 2023-06-01T07:00:00.000Z
End: 2023-06-05T19:00:00.000Z

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

Más allá del marco de trabajo: Distribuye tu aplicación de escritorio como un profesional

Welcome to the Beyond the Framework workshop where we will discuss desktop apps and their development. We will focus on what makes a desktop app unique, how to choose a framework, and how to structure your code. The web and apps are intertwined, with a history dating back to the 1940s. When choosing a technology, consider core features and compatibility with existing frameworks like React and Svelte. Building an app is more complicated than a hello world app, and common issues in app development include understanding the main and render threads, synchronizing app state across windows, and separation of concerns. Tauri is a Rust crate that allows you to build your own desktop app, and it aims to make building Tauri apps accessible without the need to learn Rust. The main thread and render thread model is important in app development, and it allows for multi-threading in web browsers. The state is owned by the main thread and synchronized between all render threads. The concept of a native feeling UI is subjective and varies across operating systems. Packaging and distribution are essential for desktop apps, involving building, packaging, code signing, and distribution. The goal is to make building desktop apps as easy as deploying a website, and the Tauri working group is focused on improving the build process, user experience, and distribution of desktop apps.

Building apps using web technology is great; however, at times you may encounter limitations regardless of what framework you choose. During this workshop, we will talk about choosing a framework, common problems and how to overcome them. Table of contents- Introduction: The intertwined history of the Web and Apps- So many desktop app technologies! How do I choose one?- Common issues and how to think about apps- Conclusion

Beyond the Framework: Distributing Your Desktop App Like a Pro

Jonas Kruckenberg

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

De 0 a Autenticación en una Hora para tu Aplicación JavaScript

This workshop covers the implementation of authentication in a JavaScript application using Node and React. It explores the concepts of authentication and user access, token-based authentication, and the implementation of API calls for login and actions. The workshop also covers the creation of middleware for validation and the implementation of social login. It concludes with a discussion on session management, building forms with flows, customizing screens and authentication methods, and upcoming releases and community engagement.

Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including: - User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.

0 To Auth In An Hour For Your JavaScript App

Asaf Shen

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

Llevando tu aplicación web a nativa con Capacitor

Cross-platform development with Cordova paved the way for a vibrant ecosystem of plugins, but had limitations. React Native provides a core library for building apps, but rewriting an app to work in React Native can be challenging. Flutter may mislead developers into thinking they are creating truly native apps. Capacitor offers a solution that combines the benefits of a native app with access to native APIs while remaining pure web. Capacitor allows you to build a full native app that can access APIs through JavaScript.

So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store! Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more

Bringing Your Web App to Native With Capacitor

Mike Hartington

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

Crear un Producto Colaborativo Similar a Notion en 2H

Today's workshop focused on building a collaborative notion-like product using CK Editor 5. The workshop covered setting up the editor and configuring plugins, including features like bold, headings, lists, and links. Other topics included autosaving, undo/redo functionality, working with tables and images, implementing real-time collaboration and comments, and introducing experimental features like drag and drop. The workshop concluded with a discussion on the limitations of Notion and the potential for creating custom plugins with CK Editor 5.

You have been tasked with creating a collaborative text editing feature within your company’s product. Something along the lines of Notion or Google Docs. CK 5 is a feature-rich framework and ecosystem of ready-to-use features targeting a wide range of use cases. It offers a cloud infrastructure to support the real-time collaboration system needs. During this workshop, you will learn how to set up and integrate CK 5. We will go over the very basics of embedding the editor on a page, through configuration, to enabling real-time collaboration features. Key learnings: How to embed, set up, and configure CK 5 to best fit a document editing system supporting real-time collaboration. Table of contents:- Introduction to the CK 5 ecosystem.- Introduction to a “Notion-like” project template.- Embedding CK 5 on a page.- Basic CK 5 configuration.- Tuning up CK 5 for a specific use case.- Enabling real-time editing features.

Build a Collaborative Notion-Like Product in 2H

Witek Socha

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

Consulta de datos de blockchain con GraphQL

Simon introduces the basics of blockchain and smart contracts, including decentralization and immutability. The Graph is an indexing protocol that serves as the data layer of web three, providing a solution to challenges with blockchain data. The CryptoPunk example demonstrates the use of subgraphs as a database for specific protocols. The importance of data accuracy and trust in the blockchain is highlighted. The Graph's business model is based on query fees and allows for easy querying and retrieval of NFTs.

Curious about how data works in the world of blockchain? Join Simon in an engaging session about The Graph, the decentralized indexing protocol that makes it easy for blockchain developers to search and query blockchain data.  Table of the contents:- Understanding blockchain data- Anatomy of a smart contract- Indexing blockchain data with The Graph- Accessing data on The Graph- Recommended subgraphs- Writing subgraphs overview

Querying Blockchain Data with GraphQL

Simon Emanuel Schmid

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

Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones

This workshop introduces Replay, a tool for solving bugs faster by providing context through session replays. It demonstrates the importance of context in bug solving and showcases the features of session replay, such as viewing HTML, console logs, network requests, and linking backend errors. The workshop also covers the use of virtual DOM and mutation observer for efficient page changes. Privacy concerns are addressed by replacing sensitive information in replays, and the power of session replay in identifying and understanding the sequence of errors is highlighted.

You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real. Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).

Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay

Ryan Albrecht

Como desarrolladores, nos apoyamos en los hombros de gigantes, y puede ser útil echar un vistazo al pasado para obtener una mejor perspectiva. En esta charla exploraremos brevemente la última década de desarrollo backend y patrones arquitectónicos. A menudo hemos abandonado tecnologías en un intento de hacer que la experiencia del desarrollador sea sin fricciones. Sin embargo, a veces olvidamos lo que podemos aprender de los 'buenos viejos tiempos'. ¿Qué estás construyendo: un monolito, un sistema de microservicios o algo intermedio? Un cambio en cómo vemos las cosas puede ayudarnos a seguir avanzando.

Las APIs están evolucionando. Otra vez.

Technology is a spiral, with foundational ideas resurfacing. Java revolutionized enterprise applications. REST and JSON simplified building APIs and websites. Node.js enabled fast and custom development, leading to the microservices revolution. Platformatic aims to fill the gap in building, managing, and scaling microservices painlessly.

As developers we stand on the shoulders of giants, and it can be helpful to take a look at the past to gain a better perspective. In this talk we’ll briefly explore the past decade of backend development and architectural patterns. We’ve often ditched technologies in an attempt to make the developer experience frictionless. However we sometimes forget what we can learn from “the good old days”. What are you building: a monolith, a microservices system or something in between? A shift in how we see things can help us keep moving forwards.

APIs are Evolving. Again.

Matteo Collina

Luca Maraschi

Solid captó la atención de la comunidad frontend al popularizar la programación reactiva con su convincente uso de Señales para renderizar sin re-renderizaciones. Los hemos visto adoptados en el último año en todo, desde Preact hasta Angular. Las Señales ofrecen un conjunto poderoso de primitivas que aseguran que tu interfaz de usuario esté sincronizada con tu estado, independientemente de los componentes. Un lenguaje universal para la interfaz de usuario frontend. Pero, ¿qué pasa con lo Asíncrono? ¿Cómo logramos orquestar la carga y mutación de datos, el renderizado en el servidor y la transmisión? Ryan Carniato, creador de SolidJS, echa un vistazo a una primitiva diferente. Una que a menudo se malinterpreta pero que es igual de poderosa en su uso. Únete a él mientras muestra de qué se trata todo este Suspense.

SolidJS: ¿Por qué tanto Suspense?

Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface. But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.

SolidJS: Why All the Suspense?

Ryan Carniato

Bun, Deno y muchos otros tiempos de ejecución de JavaScript han sido populares, pero ¿sabes por qué? ¿Es tan fácil crear un tiempo de ejecución desde cero? He estado investigando el secreto detrás del poder de Node.js y por qué están surgiendo tantos nuevos tiempos de ejecución de JavaScript. Desglosando cada componente clave utilizado en Node.js, he llegado a conclusiones interesantes que muchas personas solían decir, pero en la práctica funciona de manera un poco diferente. En esta charla, los asistentes aprenderán los conceptos utilizados para crear un nuevo tiempo de ejecución de JavaScript. Pasarán por un ejemplo de cómo hacer un tiempo de ejecución de JavaScript siguiendo lo que hay detrás de escena en el proyecto Node.js utilizando C++. Aprenderán la relación entre V8 de Chrome y Libuv y qué hace que un tiempo de ejecución de JavaScript sea mejor que otros.

Bun, Deno, Node.js? Recreando un tiempo de ejecución de JavaScript desde cero

This Talk explores the journey of learning and recreating Node.js from scratch, highlighting the main components and experimentation involved. It delves into implementing functions in V8 and setTimeout in Node.js, as well as the execution pipeline and the event loop. The collaboration between different JavaScript runtimes and the continuing evolution of Node.js are also discussed. The speaker shares their experience of exploring Node.js and writing a book, and hints at future projects involving React Native.

Bun, Deno, and many other JavaScript runtimes have been hype, but do you know why? Is it that easy to make a runtime from scratch? I've been researching the secret behind Node.js' power and why there are so many new JavaScript runtimes coming up. Breaking down each key component used on Node.js I've come to interesting conclusions that many people used to say whereas in practice it works a bit differently. In this talk, attendees will learn the concepts used to create a new JavaScript runtime. They're going to go through an example of how to make a JavaScript runtime by following what's behind the scenes on the Node.js project using C++. They'll learn the relationship between Chrome's V8 and Libuv and what makes one JavaScript runtime better than others.

Bun, Deno, Node.js? Recreating a JavaScript Runtime From Scratch

Erick Wendel

React + WebGPU + IA - ¿Qué podría salir mal? 😳

With AI and web GPU, it's an exciting time to be a developer. The speaker's journey involves combining programming and design, leading to the creation of Pure Blue, a powerful programming environment. Adding AI to the mix, the speaker discusses the potential of AI in the creative process and its impact on app development. The talk explores the role of React components and WebGPU in enabling fine-grained editing and running AI models locally. The future of app development is discussed, emphasizing the need to stay ahead of the curve and leverage the power of JavaScript.

React + WebGPU + AI – What Could Go Wrong? 😳

Aria Minaei

El equipo de Core Web Vitals de Google entiende que la cantidad de recomendaciones de rendimiento web es abrumadora y muchos no saben por dónde empezar. Hemos estado trabajando en identificar las 9 principales recomendaciones (3 por Core Web Vital), que creemos que tendrán el mayor impacto y que recomendamos que los sitios web revisen primero. Esta charla explicará cuáles son y por qué son nuestras principales recomendaciones para 2023.

Principales Recomendaciones de Core Web Vitals para 2023

Google has introduced Core Web Vitals, three new metrics for measuring user experience on websites. They have also provided recommended limits for each metric and announced a new metric called IMP. The talk focuses on web performance recommendations, including optimizing HTML parsing, using the fetch priority API, and optimizing CLS. It also covers optimizing JavaScript performance, avoiding unnecessary third-party content, and optimizing rendering and DOM. These recommendations aim to improve web performance and user experience.

The Google Core Web Vitals team understand the amount of web performance recommendations is overwhelming and many don't know where to start. We've been working on identifying the 9 key recommendations (3 per Core Web Vital), which we think will have the most impact and which we recommend sites look at first. This talk will explain what they are, and why they are our top 2023 recommendations.

Top Core Web Vitals Recommendations for 2023

Barry Pollard

Pocos desarrolladores disfrutan depurando, y la depuración puede ser compleja para las aplicaciones web modernas debido a los múltiples marcos, lenguajes y bibliotecas utilizados. Pero, las herramientas de desarrollo han avanzado mucho en facilitar el proceso. En esta charla, Jecelyn profundizará en el estado moderno de la depuración, las mejoras en DevTools y cómo puedes usarlas para depurar tus aplicaciones de manera confiable.

Depuración Web Moderna

This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.

Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.

Modern Web Debugging

Jecelyn Yeen

No ha habido escasez de críticas justas e injustas hacia los Componentes Web de una amplia gama de personas que construyen para la web, incluyendo pero no limitado a los autores de Frameworks de JavaScript en supuesta competencia con la plataforma. En esta charla te mostraré cómo navegar y simplificar el multifacético paisaje de los componentes web, satisfaciendo las críticas comunes y mostrando cómo puedes Usar la Plataforma de manera más efectiva hoy en día.

Lo Bueno, Lo Malo, y Los Componentes Web

Web Components are a piece of reusable UI enabled by web standards and built into the web platform. They offer the potential for faster component initialization and less library overhead. Web Components can be created from scratch and utilized with existing component libraries. Shadow DOM and Declarative Shadow DOM provide benefits such as scoped CSS and server-rendered components. The tradeoff between not repeating oneself and achieving full server-side rendering support is discussed. User experience is deemed more important than developer experience.

There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.

The Good, The Bad, and The Web Components

Zach Leatherman

El Núcleo de Turbopack Explicado (Codificación en Vivo)

Tobias Koppers introduces TurboPack and TurboEngine, addressing the limitations of Webpack. He demonstrates live coding to showcase the optimization of cache validation and build efficiency. The talk covers adding logging and memorization, optimizing execution and tracking dependencies, implementing invalidation and watcher, and storing and deleting invalidators. It also discusses incremental compilation, integration with other monorepo tools, error display, and the possibility of a plugin system for Toolpag. Lastly, the comparison with Bunn's Builder is mentioned.

The Core of Turbopack Explained (Live Coding)

Tobias Koppers

Estás curioso sobre lo que hace Apache Kafka y cómo funciona, pero entre la terminología y las explicaciones que parecen comenzar a un nivel complejo, ha sido difícil embarcarse. Esta sesión es diferente. Hablaremos de lo que es Kafka, lo que hace y cómo funciona en términos simples con ejemplos fáciles de entender y divertidos que puedes compartir más tarde en una cena con tu familia. Esta sesión es para mentes curiosas, que quizás nunca hayan trabajado con sistemas de transmisión distribuidos antes, o que sean principiantes en aplicaciones de transmisión de eventos. Pero que la simplicidad no te engañe - al final de la sesión estarás equipado para crear tu propio flujo de eventos de Apache Kafka!

Apache Kafka Explicado Simplemente Con Ejemplos de TypeScript

Apache Kafka is a distributed, scalable, and high-throughput event streaming platform that plays a key role in event-driven architecture. It allows for the division of monolithic applications into independent microservices for scalability and maintainability. Producers and consumers are the key components in Kafka, allowing for a decoupled system. Kafka's replication and persistent storage capabilities set it apart from alternatives like Redis and RabbitMQ. Kafka provides easy access to real-time data and simplifies real-time data handling.

You’re curious about what Apache Kafka does and how it works, but between the terminology and explanations that seem to start at a complex level, it's been difficult to embark. This session is different. We'll talk about what Kafka is, what it does and how it works in simple terms with easy to understand and funny examples that you can share later at a dinner table with your family. This session is for curious minds, who might have never worked with distributed streaming systems before, or are beginners to event streaming applications. But let simplicity not deceive you - by the end of the session you’ll be equipped to create your own Apache Kafka event stream!

Apache Kafka Simply Explained With TypeScript Examples

Olena Kutsenko

¿Alguna vez has cargado una fuente desde el CDN de Google Fonts? ¿O has añadido el atributo loading=lazy a una imagen? Estas optimizaciones son recomendadas en todo el web – pero, a veces, hacen que tu aplicación no sea más rápida sino más lenta. En esta charla, Ivan mostrará cuando algunas optimizaciones de rendimiento comunes salen mal – y qué necesitamos hacer para evitar eso.

Cuando las Optimizaciones Salen Mal

The Talk discusses cases where common optimizations can make the app slower instead of faster, highlighting the impact of a CDN implementation on performance. The delay in the CDN connection process caused the first contentful paint to be delayed. Code splitting, while reducing bundle size, resulted in delayed rendering and worsened performance. Lazy loading images can cause performance issues, and image optimization needs to be carefully managed. Link, pre-connect, and pre-load headers can help with connection and loading cascades, but only if files are loaded later.

Ever loaded a font from the Google Fonts CDN? Or added the loading=lazy attribute onto an image? These optimizations are recommended all over the web – but, sometimes, they make your app not faster but slower. In this talk, Ivan will show when some common performance optimizations backfire – and what we need to do to avoid that.

When Optimizations Backfire

Ivan Akulov

En esta charla aprenderás todo sobre el renacimiento que Angular ha estado experimentando. Primero, analizaremos cómo el framework adoptó la reactividad detallada con señales para mejorar su rendimiento en tiempo de ejecución por órdenes de magnitud. Luego nos sumergiremos en la aplicación de un enfoque similar de carga de código detallada para hacer que todo se cargue más rápido. Al final, aprenderás sobre las herramientas que puedes aprovechar para implementar todo esto en tus aplicaciones.

Momento Angular

Angular has experienced significant growth and is the second most popular framework after React. The latest release of Angular, called Angular Ivy, went through a major refactoring in 2021. Angular's reactivity model has been improved with the introduction of signals, which enable better integration with RxJS and support advanced reactivity patterns. Angular has made optimizations for performance, including improvements in load speed and lazy loading. The Angular team acknowledges the innovations in other frameworks and highlights the impact of introducing TypeScript in enabling the project's success.

In this talk you'll learn all about the <a href="https://twitter.com/sarah_edo/status/1628065696247857152" target="_blank">renaissance</a> Angular has been going through! First, we'll look into how the framework embraced fine-grained reactivity with signals to boost its runtime performance by orders of magnitude. After that we'll dive into applying a similar fine-grained approach to code loading to make everything load faster. At the end, you'll learn about the tooling you can leverage to land all this in your apps!

Angular Momentum

Minko Gechev

Utilizamos frameworks para facilitar la construcción de nuestras aplicaciones. Sin embargo, a medida que la aplicación crece, su rendimiento se ve afectado. No hay una sola cosa, sino una muerte por mil cortes. Los desarrolladores están bajo presión y a menudo eligen el camino fácil y rápido para entregar una funcionalidad en lugar del camino de alto rendimiento. El camino de alto rendimiento suele requerir más trabajo. Así que veamos estos dos caminos e imaginemos un mundo donde el camino de alto rendimiento sea el camino rápido y fácil.

Construyendo una Aplicación Web: El Camino Fácil y el Camino de Alto Rendimiento. ¿Por qué no son lo mismo?

Misko Havry introduces himself and discusses the impact of JavaScript on performance. The concepts of reconciliation, hydration, and resumability are explored, along with the importance of clean code and compiler optimization. The Talk includes demos of application components and showcases the power of code extraction. The QUIC framework is highlighted for its ability to optimize code loading and prioritize interactions. The service worker is used to selectively download components for improved performance. SEO and debugging in QUIC are also discussed, along with comparisons to other frameworks.

We use frameworks to make building our applications easier. Yet as the application scales, its performance suffers. There is no one thing, but rather a death by thousand cuts. Developers are under pressure, and they often choose the easy and quick path to deliver a feature rather than the performant path. The performant path is usually more work. So let's look at these two paths and imagine a world where the performant path is the quick and easy path.

Building a Web-App: The Easy Path and the Performant Path. Why Are They Not the Same?

Miško Hevery

¿Qué es un ORM? Una herramienta de Mapeo Objeto-Relacional (ORM) es una biblioteca para mapear una tabla SQL a una Clase. En la mayoría de los casos, los ORM obligan a los usuarios a estructurar su código para tener objetos Modelo que incluyen tanto el acceso a los datos como la lógica de negocio. Había una vez, hice varios proyectos usando ORM siguiendo la creencia común de que simplificarían el desarrollo y mantenimiento de los proyectos. Estaba equivocado. Los ORM a menudo son un obstáculo a superar para la parte más compleja de un proyecto. Como la siguiente parada de mi viaje, recomendé a las personas que usaran los lenguajes nativos de sus bases de datos, por ejemplo, SQL. Esto funciona muy bien en su mayor parte, pero crea una lucha bastante grande: hay mucho código de plantilla que escribir que puede ser bastante tedioso. Estaba equivocado, de nuevo. Hoy les presento Platformatic DB.

Nunca usaría un ORM

Welcome to a talk on Object-Relational Mapping (ORM) and its potential pitfalls. The speaker discusses issues with modals and the MVC pattern, as well as the benefits of structuring code around system features instead. They introduce PlatformaticDB as a solution for easy backend development, showcasing its deployment and testing capabilities. The talk also covers integrating with Next.js, writing custom SQL queries, and the speaker's plans for future support and database compatibility.

What's an ORM? An Object-Relational Mapping tool (ORM) is a library to map a SQL table to a Class. In most cases, ORMs force the users to structure their code to have Model objects that include both data access and business logic. Once upon a time, I did several projects using ORMs as I followed the common belief that they would simplify the development and maintenance of projects. I was wrong. ORMs are often a hurdle to overcome for the most complex part of a project. As the next stop of my journey, I recommended people use the native languages of their databases, e.g., SQL. This works great for the most part, but it creates quite a struggle: there is a lot of boilerplate code to write that can be pretty tedious. I was wrong, again. Today I'm presenting you Platformatic DB.

I Would Never Use an ORM

Los proyectos modernos de JavaScript vienen en muchas formas: sitios web, aplicaciones web, aplicaciones de escritorio, aplicaciones móviles y más. Para la mayoría de ellos, el denominador común es la deuda técnica que proviene de la configuración de herramientas: empaquetadores, suite de pruebas, análisis de código, documentación, etc. Quiero presentarte Rome, una cadena de herramientas que aspira a ser una herramienta todo en uno para la web, con una sola herramienta puedes mantener la salud de todos tus proyectos!

Rome, ¡una cadena de herramientas moderna!

Rome is a toolchain built in Rust that aims to replace multiple tools and provide high-quality diagnostics for code maintenance. It simplifies tool interactions by performing all operations once, generating a shared structure for all tools. Rome offers a customizable format experience with a stable formatter and a linter with over 150 rules. It integrates with VCS and VLSP, supports error-resilient parsing, and has exciting plans for the future, including the ability to create JavaScript plugins. Rome aims to be a top-notch toolchain and welcomes community input to improve its work.

Modern JavaScript projects come in many shapes: websites, web applications, desktop apps, mobile apps, and more. For most of them, the common denominator is the technical debt that comes from settings up tools: bundlers, testing suite, code analysis, documentation, etc. I want to present you Rome, a toolchain that aims to be a all-in-one toolchain for the web, with one single tool you can maintain the health of all your projects!

Rome, a Modern Toolchain!

Emanuele Stoppa

¿Cuántas formas conoces para hacer iteración con JavaScript y Node.js? ¡Mientras, for loop, for...in, for..of, .map(), .forEach(), streams, iterators, etc! ¡Sí, hay muchas formas! Pero, ¿sabías que JavaScript tiene protocolos de iteración para estandarizar la iteración síncrona e incluso asíncrona? En este masterclass aprenderemos sobre estos protocolos y descubriremos cómo construir iteradores y objetos iterables, tanto síncronos como asíncronos. Aprenderemos sobre algunos casos de uso comunes para estos protocolos, exploraremos generadores y generadores asíncronos (grandes herramientas para la iteración) y finalmente discutiremos algunos consejos útiles, trampas comunes y algunas ideas salvajes (más o menos exitosas)!

Protocolos de Iteración en JavaScript

We are working on troubleshooting a production issue in a startup. The CTO identified a problem with loading large files into memory and suggested reading the file line by line. We learn about iterators and generators in JavaScript, which allow us to process data one item at a time. Generators can be used to combine async and generator functions for file processing. The speaker also discusses using a for loop instead of map, filter, and reduce. The Talk concludes with the speaker mentioning poly-filling the implementation using core.js and offering free workshops on iteration protocols and Node.js streams.

How many ways do you know to do iteration with JavaScript and Node.js? While, for loop, for...in, for..of, .map(), .forEach(), streams, iterators, etc! Yes, there are a lot of ways! But did you know that JavaScript has iteration protocols to standardise synchronous and even asynchronous iteration? In this workshop we will learn about these protocols and discover how to build iterators and iterable objects, both synchronous and asynchronous. We will learn about some common use cases for these protocols, explore generators and async generators (great tools for iteration) and finally discuss some hot tips, common pitfalls, and some (more or less successful) wild ideas!

JavaScript Iteration Protocols

Luciano Mammino

Nuestros sistemas de diseño comúnmente incluyen componentes que se muestran encima de otro contenido: tooltips, date pickers, menús y enseñanza de la interfaz de usuario, por nombrar solo algunos. Las actualizaciones propuestas para la plataforma web están a punto de hacer que construir estos sea mucho más fácil. Es posible que ni siquiera necesites JavaScript. En esta charla, aprenderás todo sobre el próximo atributo 'popover', la modalidad y la capa superior.

Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes

The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.

Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

Hidde de Vries

ChatGPT causó sensación en el mundo tecnológico. Todo el mundo habla de ello, desde tu CTO hasta tu peluquero (al menos el mío lo hace). Y hay muchas razones por las que todos deberíamos estar emocionados al respecto y muchas otras innovaciones de IA/ML. Pero, ¿cómo las incorporas a tu pila tecnológica, a tu sitio web/backend, para trabajar con tus datos y proporcionar búsqueda impulsada por IA y aumento de datos? Existe una nueva generación de bases de datos nativas de IA, que utilizan modelos de aprendizaje profundo para encontrar respuestas a consultas en lenguaje natural. Estamos hablando de la capacidad de buscar a través de texto, imágenes, videos, ADN o cualquier dato no estructurado, todo con una sola consulta. La regla general es: si hay un modelo de ML, podemos buscar a través de él. Únete a mí para aprender sobre los bloques fundamentales (LLMs y vector embeddings, Bases de datos vectoriales), cómo interactúan todos ellos y, lo más importante, cómo puedes construir algo tú mismo con tecnología de código abierto. Y, por supuesto!!! Habrá una demostración de codificación en vivo, donde te guiaré a través de la experiencia de construir una búsqueda basada en IA, con Weaviate, una base de datos vectorial de código abierto, y agregarla a una aplicación. Ahora la pregunta... ¿deberíamos hacer esto en Angular, React, Vue o simplemente JS puro? ;) #QueLosDiosesDeLaDemoEsténConNosotros

Lleva la búsqueda basada en IA a tu aplicación web

The Talk discusses the use of machine learning in search engines, specifically focusing on semantic search and vector embeddings. It explores the integration of JavaScript and machine learning models, using Weaviate as an open-source vector database. The Talk demonstrates how to connect to Weaviate, query data, and perform machine learning queries. It also highlights the benefits of Weaviate, such as its superior developer experience and performance. Additionally, the Talk addresses customization options, data privacy concerns, and the varying effectiveness of different machine learning models.

ChatGPT took the tech world by storm. Everyone talks about it, from your CTO to your hairdresser (at least my barber does). And there are many reasons why we should all be excited about it and many other AI/ML innovations. But how do you bring them into your tech stack, your website/backend, to work with your data and provide AI-driven search and data augmentation? There is a new generation of AI Native databases, which use deep learning models to find answers to natural language queries. We are talking about the ability to search through text, images, videos, DNA, or any unstructured data, all with a single query. The rule of thumb: if there is an ML model, we can search through it. Join me to learn about the foundation blocks (LLMs and vector embeddings, Vector Databases), how they all play together and most importantly - how you can build something yourself with open-source tech. And, of course!!! There will be a live-coding demo, where I will take you through the experience of building an AI-based search – with Weaviate, an open-source Vector Database – and adding it to an app. Now the question... should this be done in Angular, React, Vue or just pure JS ;) #MayTheDemoGodsBeWithUs

Bring AI-Based Search to Your Web App

Sebastian Witalec

Esta charla trata sobre un enfoque de ejemplo sobre cómo organizar el mantenimiento en múltiples equipos, donde hablamos sobre cómo llegamos a este plan en Jumbo y qué beneficios aporta a la Experiencia del Desarrollador al poder entregar continuamente funciones a nuestros clientes. Estamos lidiando con el mantenimiento, la propiedad, la adición de pequeñas funciones, la actualización de Vue2 a Vue3 y la cultura que respalda esta forma de trabajo.

Mantener una Biblioteca de Componentes a Gran Escala

Jumbo, a grocery chain in the Netherlands, has a tech campus with over 400 developers working on digital solutions. They built a distributed component library called Kompas, allowing everyone to contribute and ensuring knowledge is not lost. They adopted a hybrid solution, combining centralized and decentralized approaches, for fast development while maintaining a clear vision and high-quality standards. The key takeaway is to be willing to change processes and find what works best for your organization or team.

This talk is about an example approach on how to organise maintenance across multiple teams, where we talk about how we came to this plan at Jumbo and what benefits it brings to the Developer Experience while being able to continuously deliver features to our customers. We're dealing with maintenance, ownership, adding small features, upgrading from Vue2 to Vue3 and the culture that supports this way of working.

Maintaining a Component Library at Scale

Joran Quinten

¡Solo me dieron 7 minutos! ¡Así que esta es una charla sin diapositivas, solo código! Voy a mostrarte una implementación de monorepo basada en espacios de trabajo de Yarn/NPM/PNPM y cómo podemos acelerarla. En particular, estoy utilizando Nx para obtener una mejor paralelización, la capacidad de definir tuberías de tareas, caché y más. ¿Curioso? ¡Acompáñame!

Monorepos basados en paquetes: Aceleración en menos de 7 minutos

The Talk discusses speeding up MonrayBus in a pmpm workspace by organizing packages and considering dependencies. It covers installing and configuring the nx package, including choosing cacheable scripts. The nx-graph command is introduced for analyzing dependencies and optimizing the build process.

They gave me just 7 minutes! So this is a no-slides, just code talk! I'm gonna show you a Yarn/NPM/PNPM workspaces-based monorepo implementation and how we can speed it up. In particular, I'm using Nx on top to get better parallelization, the ability to define task pipelines, caching, and more. Curious? Join me!

Package-based Monorepos - Speed Up in Under 7 Minutes

Juri Strumpflohner

La mayoría de las bibliotecas de UI actuales brindan una gran experiencia de usuario con una amplia variedad de componentes. Pero cuando se trata de personalización intensiva y escenarios no estándar, especialmente para el comercio electrónico, se vuelven difíciles de gestionar, escalar e incluso ralentizan el rendimiento. ¿Cómo crear una biblioteca de UI que brinde a los usuarios la mayor libertad posible para personalizar los componentes, al tiempo que mantenemos nuestro rendimiento y escalabilidad al máximo? ¿Cuánta accesibilidad podemos proporcionar de forma predeterminada a nuestros usuarios? ¿Cuánta libertad de personalización es suficiente? Eso es de lo que trata mi charla.

Sistema de Componentes Accesibles a través de la Personalización

The Talk discusses the importance of building an accessible UI component library, focusing on reusability, customizability, and responsiveness. It emphasizes the need for visual and functional consistency when developing components and highlights the key aspects of accessibility, including keyboard navigation, contrast, and content structure. The Talk also covers the building of accessible dialogues and provides tips for enhancing user experience. It emphasizes the significance of documentation, scalability, and customization in component planning. The Talk concludes by discussing the use of ARIA, accessibility testing, and strategies for persuading organizations to prioritize accessibility.

Most current UI libraries provide great user experience with a vast of components. But when it comes to heavy customization, and non-standard scenarios, especially for E-Commerce, they become hard to manage, scale or even slow down performance. How to create a UI library that provides users the most possible freedom in customizing components, while keeping our performance and scalability to the fullest? How much accessible we can provide out of the box to our users? How much customization freedom is enough? That's what my talk's about.

Accessible Component System Through Customization

Maya Shavin

En el rápido espacio de las aplicaciones de redes sociales, algunas funcionalidades también podrían ser utilizadas para aplicaciones web. Voy a mostrarte cómo puedes utilizar la API de Detección de Rostros con la función de bandera en Chrome. Con una demostración, exploraremos las posibilidades de implementar filtros de rostro en tus proyectos futuros. Con el acceso a la cámara web de un dispositivo, agregamos gafas procesando una transmisión de video y usándola para divertirnos, encontrando ese punto dulce donde la diversión y el aprendizaje se unen.

Crear Filtros de Rostro AR con la API de Detección de Rostros de Chrome

The Chrome Face Detection API is part of the bigger shape detection API and includes text detection and barcode detection. Enabling the API is as simple as opening a specific URL and enabling the experimental feature. The API provides features like detecting faces and processing landmarks, rendering glasses on faces, and applying face filters. It can handle multiple faces and images in videos, but performance depends on hardware and device processing speed. The API is currently in progress and feedback is being requested for potential production capabilities.

In the fast pacing space of social media apps, some functionality could also be used for web applications. I am going to show you how you could use the feature flagged Face Detection API in Chrome. With a demo, we will explore the possibilities to implement face filters in your future projects. With the webcam access of a device, we add glasses by processing a video feed and using it for fun, finding that sweet spot where fun and learning come together.

Create AR Face Filters With the Chrome Face Detection API

Jorrik Klijnsma

En esta charla, echaremos un vistazo a la creciente intersección de la IA y el desarrollo web. Hay mucho revuelo en torno a los posibles usos de la IA en la escritura, comprensión y depuración de código, e integrarlo en nuestras aplicaciones se está volviendo más fácil y asequible. Pero también hay preguntas sobre el futuro de la IA en el desarrollo de aplicaciones, y si nos hará más productivos o tomará nuestros trabajos. Hay mucha emoción, escepticismo y preocupación por el auge de la IA en el desarrollo web. Exploraremos el verdadero potencial de la IA para crear nuevos marcos de desarrollo web, y separaremos los hechos de la ficción. Así que si estás interesado en el futuro del desarrollo web y el papel de la IA en él, esta charla es para ti. Ah, y este resumen de la charla fue escrito por IA después de que le di varias de mis ideas no estructuradas.

IA y Desarrollo Web: ¿Exageración o Realidad?

This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.

In this talk, we'll take a look at the growing intersection of AI and web development. There's a lot of buzz around the potential uses of AI in writing, understanding, and debugging code, and integrating it into our applications is becoming easier and more affordable. But there are also questions about the future of AI in app development, and whether it will make us more productive or take our jobs. There's a lot of excitement, skepticism, and concern about the rise of AI in web development. We'll explore the real potential for AI in creating new web development frameworks, and separate fact from fiction. So if you're interested in the future of web development and the role of AI in it, this talk is for you. Oh, and this talk abstract was written by AI after I gave it several of my unstructured thoughts.

AI and Web Development: Hype or Reality

Wes Bos

Me encanta escribir JavaScript. Se siente ligero, sin restricciones y flexible, todas cualidades que impulsan la creatividad y me invitan a practicar nuevas e interesantes técnicas. Con el tiempo, he desarrollado muchos patrones y principios que me ayudan en mi día a día. En esta charla, te mostraré algunos de ellos y luego veremos cómo los aplico dentro del propio código de AlpineJS. ¡Va a ser un buen momento!

Cómo me gusta escribir JavaScript

Caleb Porzio introduces Alpine JS, a JavaScript framework, and demonstrates the process of creating a scrappy version of AlpineJS and refactoring it. The Talk covers topics such as creating a Dom Walker, evaluating expressions, using mutation observers, and refactoring the code. It also discusses techniques like inverting conditionals, using callbacks, and parameter currying. The Talk emphasizes the importance of abstraction, handler extraction, and a declarative approach in software development.

I love writing JavaScript. It feels lightweight, free-form, and flexible--all qualities that boost creativity and invite me to practice new and interesting techniques. Over time, I've developed lots of patterns and principles that help me day to day. In this talk, I'll show you a handful of them and then we'll look at how I apply them inside the AlpineJS codebase itself. It's gonna be a good time!

How I Like to Write JavaScript

Caleb Porzio

Google recopila información de rendimiento de todas las sesiones en los navegadores Chrome que han optado por participar en su base de datos del Informe de Experiencia de Usuario de Chrome (CrUX). Luego utiliza esta información como un factor de clasificación para su motor de búsqueda, pero también hace que esta información esté disponible públicamente para que todos la vean. Utilicé estos datos para analizar y comparar el rendimiento de los principales frameworks de JavaScript. En particular, observé la probabilidad de que los sitios web construidos con cada framework tengan buenos puntajes de Core Web Vitals (CWV). En el camino encontré varios resultados sorprendentes y resolví al menos un misterio. ¡Vea cómo se clasifica su framework favorito frente a todos los demás!

Comparando el Rendimiento de los Frameworks de JavaScript Utilizando Datos del Mundo Real

The choice of framework impacts website performance. Lab tests and field data are used to measure performance. Core Web Vitals are important metrics for performance evaluation. New frameworks that prioritize speed are emerging. MetaFrameworks like QUIC, SolidStart, Astro, and Nuxt show promise in improving performance. React frameworks like Gatsby and Remix perform well. Wix has a significant impact on React's performance. Framework choice significantly impacts the probability of building a fast website. Improvement is needed in framework performance.

Google collects performance information from all sessions on opted-in Chrome browsers into its Chrome User Experience Report (CrUX) database. It then uses this information as a ranking factor for its search engine, but it also makes this information publicly available for everyone to view. I used this data to analyze and compare the performance of the leading JavaScript frameworks. In particular, I looked at the likelihood that websites built using each framework will have good Core Web Vitals (CWV) scores. Along the way I encountered several surprising results, and solved at least one mystery. See how your favorite framework ranks vs all the rest!

Comparing JavaScript Frameworks Performance Using Real-World Data

Dan Shappir

Un recorrido por las abrumadoras formas de automatizar navegadores. Únete a Michael en un recorrido para ver qué sucede detrás de escena de "await page.goto('https://example.com');" y otros. Descubre los pros y los contras de cada una de las tres formas de automatización de navegadores. Entiende por qué estamos agregando una cuarta: WebDriver BiDi.

Tres formas de automatizar tu navegador, y por qué estamos agregando una cuarta: WebDriver BiDi

This Talk discusses browser automation techniques, including the introduction of a new web driver. It covers the history of browser automation, different techniques for automating browsers, and the use of web APIs and browser extensions. The Talk also explains how automation tools communicate with browser drivers and the challenges of waiting for elements to appear on the screen. It highlights the differences between the WebDriver protocol and the Chrome DevTools protocol, and introduces the WebDriver Bidirection project that aims to combine the best parts of both protocols. Lastly, it mentions the WebDriver Bidi support for console monitoring and introduces WebDriver ByteEye as a stable automation choice.

A journey through overwhelming ways to automate browsers. Join Michael on a journey to see what happens behind the scenes of "await page.goto('https://example.com');" et. al. See what pros and cons each of the three ways of browser automation have. Understand why we are adding a fourth - WebDriver BiDi.

Three Ways to Automate Your Browser, and Why We Are Adding a Fourth: WebDriver BiDi

Michael Hablich

La Mejora Progresiva es la filosofía de proporcionar una experiencia básica y funcional a todos, independientemente del dispositivo, y agregar capas adicionales de interactividad y deleite a medida que son compatibles. La última década de desarrollo web, centrándose en las SPAs, donde JavaScript es un requisito indispensable, ha hecho que esta filosofía sea muy difícil: ¿cómo hacemos sitios web que están fundamentalmente construidos con JavaScript accesibles para usuarios sin él? Esta charla examina la filosofía detrás de la Mejora Progresiva, luego se centra en algunos ejemplos concretos (¡incluyendo una inmersión en la salida del compilador de Svelte!) de cómo podemos construir experiencias funcionales, confiables y utilizables para todos, agregando interactividad encantadora para aquellos que pueden admitirla.

Mejora Progresiva: Qué es y qué no es, una introducción práctica con Svelte

Progressive enhancement is a strategy that provides a baseline experience for all users while enhancing it for those with modern browsers. Feature detection and graceful degradation are complementary approaches to achieve this. Polyfills can emulate new browser functionality in old browsers. Progressive enhancement is about meeting user needs while considering performance. Building apps in SvelteKit allows for easy development of progressively enhanced apps. Svelte components and DOM content provide a convenient way to structure and update the UI. Form submission and progressive enhancement can be achieved by enabling file upload and processing when JavaScript is disabled.

Progressive Enhancement is the philosophy of providing a basic, functional experience to everyone, regardless of device, and adding additional layers of interactivity and delight as they are supported. The last decade of web development, focusing on SPAs, where JavaScript is a hard requirement, have made this philosophy very difficult – how do we make websites that are fundamentally built with JavaScript accessible to users without it? This talk examines the philosophy behind Progressive Enhancement, then focuses on some concrete examples (including a dive into Svelte compiler output!) of how we can build functional, reliable, and usable experiences for all, adding delightful interactivity for those who can support it.

Progressive Enhancement - What It Is and Isn’t, a Practical Introduction With Svelte

Elliott Johnson

¡HTTP/3 es el nuevo protocolo de red en auge, disponible hoy! Aunque obtienes la mayoría de sus beneficios de forma predeterminada, también hay bastantes cosas que puedes y debes hacer para maximizar el rendimiento. En esta charla, analizamos cómo optimizar las cargas útiles de JS para las primeras rondas de red, cómo los navegadores priorizan JS frente a otros tipos de recursos, las sutilezas de SPA vs MPA, y cómo usar de manera óptima las características de 0-RTT y 103 Early Hints. También analizamos la integración del protocolo con fetch() y hablamos sobre el próximo WebTransport!

Rendimiento de HTTP/3 para Desarrolladores JS

HTTP 3, also known as H3, is the latest version of the HTTP protocol with new performance-related features. Enabling HTTP 3 requires minimal effort and provides significant benefits, but limits fine-grained control over performance features. Zero RTT has limitations due to security reasons and restrictions on allowed requests. Resource loading and prioritization in HTTP 3 have some problems, as browsers may not agree on resource importance. Fetch priority allows fine-grained control over resource loading order, and resource discovery can be improved with 103 Early Hints. Web transport provides low-level access to QUIC and HTTP3 features for real-time use cases.

HTTP/3 is the hot new networking protocol, available today! While you get most of its benefits out-of-the-box, there are also quite some things you can and should do to get maximise performance. In this talk, we look at optimizing JS payloads for the first network round trips, how browsers prioritize JS against other resource types, SPA vs MPA nuances, and how to optimally use the 0-RTT and 103 Early Hints features. We also look at the protocol's integration with fetch() and talk about the upcoming WebTransport!

HTTP/3 Performance for JS Developers

Robin Marx

¿Podemos deshacernos de las contraseñas ya? Son una mala experiencia de usuario y los usuarios son notoriamente malos con ellas. El advenimiento de WebAuthn ha acercado al mundo sin contraseñas, pero ¿dónde nos encontramos realmente? En esta charla exploraremos la experiencia actual del usuario de WebAuthn y los requisitos que un usuario debe cumplir para autenticarse sin contraseña. También exploraremos las alternativas y salvaguardias que podemos utilizar para mejorar la experiencia de las contraseñas y hacerla más segura. Al final de la sesión, tendrás una visión de cómo podría ser la autenticación en el futuro y un plan para construir la mejor experiencia de autenticación hoy en día.

El estado de la autenticación sin contraseña en la web

Passwords are terrible and easily hacked, with most people not using password managers. The credential management API and autocomplete attribute can improve user experience and security. Two-factor authentication enhances security but regresses user experience. Passkeys offer a seamless and secure login experience, but browser support may be limited. Recommendations include detecting Passkey support and offering fallbacks to passwords and two-factor authentication.

Can we get rid of passwords yet? They make for a poor user experience and users are notoriously bad with them. The advent of WebAuthn has brought a passwordless world closer, but where do we really stand? In this talk we'll explore the current user experience of WebAuthn and the requirements a user has to fulfill for them to authenticate without a password. We'll also explore the fallbacks and safeguards we can use to make the password experience better and more secure. By the end of the session you'll have a vision for how authentication could look in the future and a blueprint for how to build the best auth experience today.

The State of Passwordless Auth on the Web

Phil Nash

Es más fácil que nunca usar JavaScript para construir aplicaciones móviles nativas. Pero para los desarrolladores web que construyen en el ecosistema móvil por primera vez, desplegar aplicaciones multiplataforma construidas con herramientas como Capacitor o React Native puede ser complejo. Aprenda sobre las consideraciones específicas de implementación móvil a través de la perspectiva de un desarrollador web, incluyendo las diferencias clave entre móvil y web, cómo desarrollar una estrategia de implementación y cómo evaluar las opciones de herramientas.

Implementaciones móviles para desarrolladores web

Mobile deployments are crucial for web developers due to the increasing number of users on mobile devices. Cross-platform development and web to mobile migrations are on the rise with tools like React Native, Ionic, Capacitor, and Native Script. Mobile testing requires native binary compilation and testing on real devices. Google Play and iOS have specific methods for releasing apps to testers, while web development allows for dynamic updates and quick deployment. Mobile app building and deployment require specific infrastructure and code signing processes. App store approval guidelines and versioning updates pose challenges in mobile app deployment.

It's easier than ever to use JavaScript to build native mobile applications. But for web developers building in the mobile ecosystem for the first time, deploying cross-platform apps built with tools like Capacitor or React Native can be complex. Learn about the mobile-specific deployment considerations through the lens of a web developer, including the key differences between mobile and web, how to develop a deployment strategy, and how to evaluate tooling options.

JSNation 2023

The main JavaScript conference of the year