Name: JSNation 2024
Start: 2024-06-13T11:00:00.000Z
End: 2024-06-17T19:00:00.000Z

Vlad Dumitrica

Vinicius Dallacqua

Petra vos

Lera

Alba Silvente Fuentes

Nicolas Carlo

Aleksei Podgaev

Paula Burghelea

JSNation Conference 🗓 June 1-5, 2023

Daria Shabala

Kræn Hansen

Adrian Hajdin

Varun

Thibault Van den Broecke

Károly Török

Batuhan NARCI

Bart Zaalberg

Agnieszka Labonarska

Joanna Otmianowska

Florence Shelley

Marko Draksic

Luis Oliveira

Elaine Shinagawa

Eric Burel

Omar Diop

Benjamin Rensch Vinterberg

Kristopher  Baumgartner

Nishant Satyam

Sahar Brodbeker

Andrico Karoulla

Artūras Tyškevičius

Karina Ionkina

Vasilika Klimova

Oliver Janssen

Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo. Puntos Cubiertos: 1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso Cómo Ayudará a los Desarrolladores: - Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software

Domina los Patrones de JavaScript

Mastering JavaScript patterns will give you a deep understanding of coding principles and problem-solving abilities. Learning these patterns will set you apart as an advanced developer and open up opportunities to become a consultant or mentor. The workshop covers a wide range of patterns, including object-creational, factory, singleton, prototype, decorator, adapter, composite, proxy, observer, strategy, and command. It also discusses the importance of architectural patterns and provides further resources for learning and practice.

During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time. Points Covered: 1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies How It Will Help Developers: - Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry

Master JavaScript Patterns

En el panorama en rápida evolución de las tecnologías web, la introducción de WebGPU y WebXR representa un avance significativo, prometiendo redefinir los límites de lo que es posible en experiencias web 3D. Esta charla se adentra en el corazón de estas nuevas tecnologías, guiada por la biblioteca Three.js. Comenzamos explorando WebGPU, una API de gráficos de próxima generación que ofrece un rendimiento y eficiencia mejorados para renderizar gráficos 3D directamente en el navegador. Demostraremos cómo Three.js se está adaptando para aprovechar todo su potencial, desbloqueando oportunidades sin precedentes para que los desarrolladores creen experiencias interactivas visualmente impresionantes. Transicionando al ámbito inmersivo, profundizamos en WebXR, una tecnología que abre la puerta a experiencias de realidad virtual y realidad aumentada directamente desde la web. Mostraremos cómo Three.js permite a los creadores construir experiencias inmersivas.

Embracing WebGPU and WebXR With Three.js

The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.

In the rapidly evolving landscape of web technologies, the introduction of WebGPU and WebXR represents a significant leap forward, promising to redefine the boundaries of what's possible in 3D web experiences. This talk dives into the heart of these new technologies, guided by the Three.js library. We begin by exploring WebGPU, a next-generation graphics API offering enhanced performance and efficiency for rendering 3D graphics directly in the browser. We'll demonstrate how Three.js is adapting to harness its full potential, unlocking unprecedented opportunities for developers to create visually stunning interactive experiences. Transitioning to the immersive realm, we delve into WebXR, a technology that opens the door for virtual reality and augmented reality experiences right from the web. We'll showcase how Three.js enables creators to build immersive experiences.

Mr.doob

En esta charla, echaremos un vistazo a una biblioteca de javascript idiosincrásica, htmx, que está diseñada para hacer que HTML sea más poderoso como hipermedia. Lo hace generalizando la idea de controles de hipermedia como etiquetas de anclaje y formularios. Los desarrolladores web que usan htmx generalmente no escriben tanto javascript como lo harían si eligieran una biblioteca de javascript SPA más popular para sus necesidades de front-end. De esta manera, htmx puede ayudar a abordar la "Fatiga de JavaScript", una sensación general de estar abrumado por el mundo de JavaScript. A veces se considera a htmx como una biblioteca "para personas que odian JavaScript". Irónicamente, sin embargo, al reducir drásticamente la cantidad de JavaScript que un desarrollador web debe escribir para construir una aplicación web, htmx puede hacer que el JavaScript que un desarrollador quiera escribir sea mucho más agradable, convirtiendo la escritura de JavaScript en una parte divertida, valiosa y lúdica de una aplicación web más amplia en lugar de una tarea que debe realizarse para llevar a cabo tareas simples.

htmx Es Pro-JavaScript

HTMX is a JavaScript library that extends HTML and works with a JSON API. It generalizes the functionality of links and forms, making any element a potential hypermedia control. HTMX simplifies the implementation of hypermedia functionality with a dozen core attributes. It can achieve powerful UI results without writing much JavaScript. HTMX complements JavaScript libraries and enhances user experience by providing functionality that the browser lacks.

In this talk we will take a look at an idiosyncratic javascript library, htmx, which is designed to make HTML more powerful as a hypermedia. It does this by generalizing the idea of hypermedia controls such as anchor tags and forms. Web developers who use htmx typically do not write nearly as much javascript as they would if they chose a more popular SPA javascript library for their front end needs. In this way, htmx can help address "JavaScript Fatigue", a general sense of being overwhelmed by the JavaScript world. htmx is sometimes held up as a library "for people who hate JavaScript". Ironically, however, by dramatically reducing the amount of JavaScript a web developer must write to build a web application, htmx can make the JavaScript that a developer wants to write much more enjoyable, making writing JavaScript a playful, high-value and fun part of a broader web application rather than a chore that must be dealt with to accomplish simple tasks.

htmx Is Pro-JavaScript

Carson Gross

Es posible que no necesites tanto JS como piensas para lograr patrones comunes de UI con estas nuevas APIs nativas del navegador. Sumérgete en las nuevas y futuras APIs de CSS, HTML y JS que hacen que nuestro código sea más ligero y rápido de enviar.

Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador

This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.

You might not need as much JS as you think to accomplish common UI patterns with these new native browser APIs. Dive into new and future CSS, HTML and JS APIs that make our code leaner and faster to ship.

Install Nothing: App UIs With Native Browser APIs

Scott Tolinski 

En esta charla, Evan echa un vistazo atrás en su trayectoria de código abierto, comenzando desde proyectos de hobby hasta liderar hoy en día dos de los proyectos más influyentes en el ecosistema de JavaScript: Vue y Vite. Discutiremos los altibajos durante este viaje, y también tocaremos un poco sobre el futuro de los dos proyectos.

10 Años de OSS Independiente: Una Retrospectiva

This talk is a ten-year retrospective into the growth of the Vue.js framework as an open-source project. It highlights the challenges faced by open-source developers, the importance of finding balance and managing scope, and the collaborative nature of the Vue community. The talk also discusses the development of Vite as a build tool and the vision for a unified JavaScript toolchain. It emphasizes the need for community alignment, contributions, and testing, while acknowledging the challenges of bad actors in the open-source community.

In this talk, Evan takes a look back at his open source journey, starting from hobby projects to today leading two of the most influential projects in the JavaScript ecosystem today: Vue and Vite. We will discuss the ups and downs during this journey, and also touch a bit on the future of the two projects.

10 Years of Independent OSS: A Retrospective

Evan You

Codificar y depurar debería fluir, no desvanecerse. Veamos qué hay de nuevo y mejorado en Chrome DevTools para que tu viaje de desarrollo y depuración web sea suave como la seda.

De la Fricción al Flujo: Depuración con Chrome DevTools

The Talk discusses the importance of removing frictions in the debugging process and being aware of the tools available in Chrome DevTools. It highlights the use of the 'Emulate a Focus Page' feature for debugging disappearing elements and the improvement of debugging tools and workflow. The Talk also mentions enhancing error understanding, improving debugging efficiency and performance, and the continuous improvement of DevTools. It emphasizes the importance of staying updated with new features and providing feedback to request new features.

Coding and debugging should flow, not fizzle! Let's see what's new and improved in Chrome DevTools to make your web development &amp; debugging journey smooth sailing.

From Friction to Flow: Debugging With Chrome DevTools

Jecelyn Yeen

La IA está en todas partes, pero ¿por qué deberías preocuparte como desarrollador web? Únete a Jason Mayes, líder de Web AI en Google, quien te pondrá en el camino desmitificando la terminología común para asegurarse de que nadie se quede atrás, y luego te guiará a través de algunos de los últimos modelos de aprendizaje automático, herramientas y frameworks que puedes utilizar directamente en el navegador a través de JavaScript para ayudarte a dar vida a tus ideas creativas de aplicaciones web para casi cualquier industria en la que estés trabajando. Al mover la IA al lado del cliente, no hay dependencia del servidor después de la carga de la página, lo que te brinda beneficios como privacidad, baja latencia, soluciones sin conexión y costos más bajos, que serán de creciente importancia a medida que se desarrolle el campo. Esta charla es adecuada para todos los curiosos de la web y el aprendizaje automático, así que ven y aprende algo nuevo para agregar a tu conjunto de herramientas de ingeniería web para 2024.

Aplicaciones Web del Futuro con Web AI

Web AI in JavaScript allows for running machine learning models client-side in a web browser, offering advantages such as privacy, offline capabilities, low latency, and cost savings. Various AI models can be used for tasks like background blur, text toxicity detection, 3D data extraction, face mesh recognition, hand tracking, pose detection, and body segmentation. JavaScript libraries like MediaPipe LLM inference API and Visual Blocks facilitate the use of AI models. Web AI is in its early stages but has the potential to revolutionize web experiences and improve accessibility.

AI is everywhere, but why should you care, as a web developer? Join Jason Mayes, Web AI Lead at Google, who will get you on track by demystifying common terminology ensuring no one is left behind, and then take you through some of the latest machine learning models, tools, and frameworks you can use right in the browser via JavaScript to help you bring your creative web app ideas to life for almost any industry you may be working in. By moving AI to the client side, there is no reliance on the server after the page load, bringing you benefits such as privacy, low latency, offline solutions, and lower costs which will be of growing importance as the field develops. This talk is suitable for everyone with a curiosity for web and machine learning, so come along and learn something new to put in your web engineering toolkit for 2024.

Web Apps of the Future With Web AI

Jason Mayes

Los motores JS de producción moderna pueden parecer intimidantes, ¡pero eso no es todo lo que hay! Esta charla relámpago se basa en mis experiencias pasadas trabajando en motores JS de aficionados, y cubrirá lo siguiente: - Diferentes ángulos para abordar esta tarea aparentemente compleja- Cosas que puedes aprender en el camino- Algunos proyectos existentes que optimizan por diversión (en lugar de perseguir benchmarks), y lo que los hace únicos Verás que no necesitas tener experiencia en diseño de compiladores para comenzar a explorar los internos del motor JS. ¡Lo más importante, es divertido!

Construyendo un motor JS -- ¡Por diversión!

The Talk discusses the basics of building a JS engine, highlighting the complexity and feature completeness of existing engines. It emphasizes the possibility of creating a simpler engine tailored to specific use cases and target audiences. The speaker suggests starting anywhere in the process and provides tips on using parser libraries, implementing runtime features, and ensuring correctness through testing. Additionally, the Talk encourages exploring JavaScript standards and engaging with the open-source community.

Modern production-grade JS engines can seem intimidating, but that's not all there is! This lightning talk draws from my past experiences working on hobbyist JS engines, and it will cover the following: - Different angles to approach this seemingly complex task- Things you can learn along the way- Some existing projects that optimize for fun (instead of chasing benchmarks), and what makes them unique You'll see that you don't need a background in compiler design to get started exploring JS engine internals. Most importantly, it's fun!

Building a JS Engine -- For Fun!

Linus Groh

La IA está revolucionando la escena del front-end, pero ¿es un cambio de juego o un ladrón de empleos? ¿Cansado de tareas repetitivas y código boilerplate? Imagina esto: la IA maneja las partes aburridas, permitiéndote desatar tu creatividad en lo que realmente importa. Pero pongamos el freno por un segundo, ¿podría esta magia realmente echarnos de nuestros propios trabajos? En esta charla reveladora, profundizaremos en las herramientas de IA que pueden mejorar tus habilidades de codificación y diseño. También abordaremos la pregunta candente que todos piensan pero nadie hace: ¿Es la IA tu futuro compañero o el que te quitará el trabajo? Prepárate para aprender cómo hacer de la IA tu aliada en la codificación, todo mientras mantienes tu carrera en terreno firme.

IA en el Desarrollo Front-End: ¿Tu Compañero Creativo o Ladrón de Empleo?

AI in front-end development empowers developers to take on more ambitious projects and innovate at a faster pace. Natural language is a new programming language that can be used for coding, learning, and automating complex tasks. However, it is important to remember that AI is a supplement to human capabilities, not a replacement. Developers need to evolve their skills and stay ahead of emerging technologies to work effectively with AI. The demand for AI engineers is high.

AI is shaking up the front-end scene, but is it a game-changer or a job-taker? Tired of repetitive tasks and boilerplate code? Picture this: AI handles the boring parts, letting you unleash your creativity on the stuff that really matters. But let’s hit the brakes for a second—could this wizardry actually boot us out of our own jobs? In this eye-opening talk, we’ll dive deep into AI tools that can level up your coding and design skills. We’ll also tackle the burning question everyone’s thinking but not asking: Is AI your future sidekick or the one that’ll swipe your job? Get ready to learn how to make AI your ally in coding, all while keeping your career on solid ground.

AI in Front-End Dev: Your Creative Partner or Job Snatcher?

Alexandra Spalato

Únete a Evan mientras explora el poder del diseño AI-primero. Descubre cómo priorizar la AI desde el inicio redefine las experiencias de usuario y crea un futuro donde la AI mejora sin problemas las aplicaciones en varios dominios. ¡Embarquémonos en un viaje para dar forma al futuro de las aplicaciones en la era de la AI!

AI Primero: Aplicaciones del Futuro

This talk explores the ways AI is being used to shape the future of applications. It emphasizes the importance of an AI-first approach and the potential for AI to enhance various industries, such as aviation. The talk also contrasts the limitations of the AI-on-top approach with the continuous learning and user-centric focus of the AI-first approach. It discusses the importance of building trust through safety, transparency, and browser-based processing, and highlights the potential of AI to address user experience issues and improve accessibility.

Join Evan as he explores the power of AI-first design. Discover how prioritizing AI from the start redefines user experiences and creates a future where AI seamlessly enhances applications across domains. Let's embark on a journey to shape the future of applications in the age of AI!

AI First: Applications of the Future

Evan Seaward

Introducción al nuevo formato de configuración plana de ESLint, y vea cómo puede mejorar enormemente nuestra experiencia tanto para los creadores de reglas como para los usuarios. Haga la caja negra transparente y fácil de entender.

ESLint One for All Made Easy

ESLint is a popular and constantly improving tool that offers full control and simplicity in JavaScript with native imports. The new Flat Config simplifies the complex tree structure of shared configs and has been in the works for five years. It allows for customization and type generation, maximizing flexibility. ESLint can be used as a formatter and a tool for code mode, providing more control and customization options. It also supports other languages and can be integrated with prettier. Migrating to the Flat Config may be challenging, but compatible packages and tools are available to assist with the transition.

Introduce to the new ESLint flat config format, and see how it can greatly improve our experience for both rule makers and users. Make the black box transparent, and easy to understand.

Anthony Fu

Uno de los problemas más comunes en las bases de código de JavaScript es que nuestro código es demasiado complejo. A medida que los proyectos y sus requisitos evolucionan, la complejidad se infiltra. La complejidad excesiva ralentiza el progreso, frustrándonos mientras intentamos mantener grandes porciones de un programa en nuestra mente solo para entender lo que está sucediendo. ¡Para conquistar la complejidad, debemos refactorizar! En esta charla, investigaremos cómo identificar la complejidad innecesaria en nuestra base de código utilizando la complejidad cognitiva como medida, cómo abordar la refactorización de código complejo y qué herramientas están disponibles para ayudarnos a refactorizar. Lo pondremos todo en práctica a través de un ejemplo en vivo. Al final de la charla, estarás emocionado de abordar esa monstruosidad de función de 1000 líneas en tu propia base de código (sabes cuál).

Conquistando la Complejidad: Refactorización de Proyectos JavaScript

Today's Talk explores the complexity in code and its impact. It discusses different methods of measuring complexity, such as cyclomatic complexity and cognitive complexity. The importance of understanding and conquering complexity is emphasized, with a demo showcasing complexity in a codebase. The Talk also delves into the need for change and the role of refactoring in dealing with complexity. Tips and techniques for refactoring are shared, including the use of language features and tools to simplify code. Overall, the Talk provides insights into managing and reducing complexity in software development.

One of the most common issues in JavaScript code bases is that our code is too complex. As projects and their requirements evolve, complexity creeps in. Excess complexity slows progress, frustrating us as we try to keep large chunks of a program in our heads just to understand what is happening. To conquer complexity, we must refactor! In this talk, we'll investigate how to identify unnecessary complexity in our code base using cognitive complexity as a measure, how to approach refactoring complex code, and what tools are available to help us refactor. We'll put it all into practice through a live example. By the end of the talk, you'll be excited to tackle that 1000-line monstrosity of a function in your own code base (you know the one).

Conquering Complexity: Refactoring JavaScript Projects

Phil Nash

Aprende cómo construir rápidamente aplicaciones peer-to-peer con Pear Runtime. No se requieren servidores. Comprende los paradigmas peer-to-peer y construye aplicaciones a partir de bloques de construcción bien definidos. En este masterclass se cubrirá cómo crear aplicaciones de escritorio y terminales (con discusión para móviles) que funcionan completamente peer-to-peer desde cualquier lugar del mundo. Al final de este masterclass, deberías saber cómo construir un nuevo tipo de aplicación altamente escalable con costos infraestructurales reducidos (~0) junto con arquitecturas adecuadas y mejores prácticas para aplicaciones peer-to-peer. Del creador de Pear Runtime y la compañía que nos trae keet.io. Tabla de contenido:- Introducción a Pear- Preguntas y respuestas iniciales- Configuración- Creación de una aplicación de escritorio Pear- Compartir una aplicación Pear- Ejecutar una aplicación Pear- Creación de una aplicación terminal Pear- Lanzamiento de una aplicación Pear- Discusiones arquitecturales- Preguntas y respuestas finales

Construye aplicaciones peer-to-peer con Pear Runtime

Welcome to the PAIR runtime workshop where we will build a peer-to-peer chat app and cover setup instructions for PAIR. PAIR is a platform for building peer-to-peer apps and can be used for desktop, terminal, and mobile apps. The UI is built using the telebrowser and electron platform, with plans to transition to BEAR and Chromium. PAIR offers advantages over traditional tech models, eliminates infrastructure costs, and allows for faster development. Future plans include Pair Build for creating wrapper apps, setting up identities for syncing devices, and cryptographic proof of actions taken within rooms.

Learn how to rapidly build peer-to-peer applications with Pear Runtime. No servers required. Understand peer-to-peer paradigms and construct applications from well-defined building blocks. This workshop will cover how to create both Desktop and Terminal applications (with discussion for Mobile) that work entirely peer-to-peer from anywhere in the world. By the end of this workshop you should know how to build a new type of highly scalable application with entirely reduced infrastructural costs (~0) along with suitable architectures and best practices for peer-to-peer applications. From the creator of Pear Runtime and the company that brings us keet.io. Table of content:- Introducing Pear- Initial Q &amp; A- Getting Setup- Creating a Pear Desktop Application- Sharing a Pear Application- Running a Pear Application- Creating a Pear Terminal Application- Releasing a Pear Application- Architectural Discussions- Wrap-up Q &amp; A

Build Peer-to-Peer Applications with Pear Runtime

David Mark Clements

En esta charla, exploraremos cómo la API de Renderizado del Navegador puede automatizar tareas del navegador, liberando a los desarrolladores del trabajo manual repetitivo. Comenzaremos con una visión general de Cloudflare Workers y cómo permiten ejecutar JavaScript en el borde. Luego, discutiremos la automatización del navegador en detalle, cubriendo cómo interactuar con el DOM, completar formularios y extraer datos de páginas web. Mostraremos ejemplos del mundo real de cómo la automatización del navegador con Cloudflare Workers puede mejorar la experiencia del usuario de las aplicaciones web, aumentar la productividad y automatizar tareas, como generar capturas de pantalla y PDFs de páginas web, probar aplicaciones web y realizar auditorías de rendimiento. Al final de esta charla, los asistentes obtendrán una mejor comprensión de cómo utilizar la API de Renderizado del Navegador para automatizar tareas del navegador y llevar sus habilidades de desarrollo web al siguiente nivel.

Automatiza el Navegador con la API de Renderizado del Navegador de Workers

The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!

In this talk, we will explore how the Browser Rendering API can automate browser tasks, freeing developers from repetitive manual work. We will begin with an overview of Cloudflare Workers and how they enable running JavaScript at the edge. Then, we will discuss browser automation in detail, covering how to interact with the DOM, fill out forms, and scrape data from web pages. We will showcase real-world examples of how browser automation with Cloudflare Workers can improve the user experience of web applications, increase productivity, and automate tasks, such as generating screenshots and PDFs of web pages, testing web applications, and running performance audits. At the end of this talk, attendees will gain a better understanding of how to use the Browser Rendering API to automate browser tasks and take their web development skills to the next level.

Automate the Browser With Workers Browser Rendering API

Gift Egwuenu

La comunidad Local-first ha creado una nueva arquitectura para nuestro mundo dominado por la nube. En esta charla, Andrey Sitnik abogará por la arquitectura de primer lugar, profundizará en sus características únicas y proporcionará experiencia de producción en el mundo real. Esta charla es útil para todos los ingenieros porque contiene varios pasos para mejorar la privacidad. Desde simples primeros pasos sin reescribir la aplicación hasta revisiones profundas utilizando la arquitectura de primer lugar, hay algo para todos.

Arquitectura de Privacidad en Primer Lugar

Building JavaScript Apps and Privacy: Understanding the importance of privacy in software development and the impact it can have on the world. Privacy concerns extend beyond targeted advertising and include data leaks and breaches. The connection of multiple pieces of data by data brokers poses a threat to privacy. The local first approach allows for data storage on local devices while still using a server for synchronization. Implementing local first requires a good database and APIs for data storage. Principles like end-to-end encryption and password protection bring benefits but also present challenges. Moving to privacy-focused analytics, using passkeys for encryption, and secure data sharing are ways to protect user privacy.

Local-first community created a fresh new architecture for our world dominated by cloud. In this talk, Andrey Sitnik, will advocate for local-first architecture, delve into its unique futures, and provide real-world production experience. This talk is helpful for every engineer because it contains multiple steps to improve privacy. From simple first steps without rewriting the app to profound revisions utilizing local-first architecture- there’s something for everyone.

Privacy-First Architecture

Andrey Sitnik

Hoy en día, todos los desarrolladores están utilizando LLMs en diferentes formas y variantes, desde ChatGPT hasta asistentes de código como GitHub CoPilot. Siguiendo esto, muchos productos han introducido capacidades de IA integradas, y en este masterclass haremos que los LLMs sean comprensibles para los desarrolladores web. Y nos adentraremos en la codificación de tu propia aplicación impulsada por IA. No se necesita experiencia previa en trabajar con LLMs o aprendizaje automático. En su lugar, utilizaremos tecnologías web como JavaScript, React que ya conoces y amas, al mismo tiempo que aprendemos sobre algunas nuevas bibliotecas como OpenAI, Transformers.js

Aprovechando LLMs para Construir Experiencias de IA Intuitivas con JavaScript

The workshop explores leveraging LLMs and generative AI with JavaScript, focusing on incorporating AI in JavaScript, leveraging TensorFlow.js for ML, and using AI models and backend technologies. It covers using TensorFlow.js toxicity model, Transformers JS with WebWorkers, and building AI applications with existing models. The workshop also delves into prompt engineering for zero-shot prompts and implementing few-shot prompting. It concludes with exploring fuchsia prompts and embeddings, prompt engineering, and context awareness, and offline usage with TensorFlow embeddings.

Today every developer is using LLMs in different forms and shapes, from ChatGPT to code assistants like GitHub CoPilot. Following this, lots of products have introduced embedded AI capabilities, and in this workshop we will make LLMs understandable for web developers. And we'll get into coding your own AI-driven application. No prior experience in working with LLMs or machine learning is needed. Instead, we'll use web technologies such as JavaScript, React which you already know and love while also learning about some new libraries like OpenAI, Transformers.js

Leveraging LLMs to Build Intuitive AI Experiences With JavaScript

Roy Derks

Shivay Lamba

¿TypeScript o no TypeScript? Han pasado más de diez años desde su nacimiento y muchos de nosotros todavía luchamos por entenderlo y amarlo. Es tan simple pero a veces no sabemos realmente cómo funciona.Bueno, es hora de entender más y dejar de evadirlo con un simple any.Tipos, funciones, literales, uniones, intersecciones y más: juntos, veremos todas las nociones que te llevarán a empezar a amarlo y usarlo al máximo para asegurar un futuro más seguro desde el punto de vista tipológico y quizás no ser odiado por tu yo futuro.

Sumérgete en TypeScript Avanzado

Today's Talk discusses TypeScript and its relationship with JavaScript, emphasizing the importance of studying JavaScript first. The Talk explores type guards, runtime type checking, and the use of the 'never' type to handle errors and ensure type safety. It also delves into alternative solutions for type handling, branded types, and schema-based validation using Zod. The Talk concludes with advice on migrating to TypeScript and the need for beginner-friendly documentation and strictness in code.

Typescript or not Typescript? More than ten years have passed since its birth, and many of us still struggle to understand and love it. It’s so simple but sometimes we don’t really know how it works.Well, it’s time to understand more and stop bypassing it with a simple any.Types, functions, literals, unions, intersections and so on: together, we will see all the notions that will lead you to start loving and using it to the fullest to ensure a more typologically secure future and perhaps not be hated by your future self.

Dive Into Advanced TypeScript

Luca Del Puppo

En este masterclass, cubriremos las diez vulnerabilidades más comunes y riesgos de seguridad críticos identificados por OWASP, que es una autoridad confiable en Seguridad de Aplicaciones Web.Durante el masterclass, aprenderás cómo prevenir estas vulnerabilidades y desarrollar la capacidad de reconocerlas en aplicaciones web.El masterclass incluye 10 desafíos de código que representan cada una de las vulnerabilidades más comunes de OWASP. Se proporcionarán pistas para ayudar a resolver las vulnerabilidades y pasar las pruebas.El instructor también proporcionará explicaciones detalladas, diapositivas y ejemplos de la vida real en Node.js para ayudar a comprender mejor los problemas. Además, obtendrás información de un Mantenedor de Node.js que compartirá cómo gestionan la seguridad en un proyecto grande.Es adecuado para desarrolladores de Node.js de todos los niveles de habilidad, desde principiantes hasta expertos, se requiere un conocimiento general de aplicaciones web y JavaScript. Tabla de contenidos:- Control de Acceso Roto- Fallas Criptográficas- Inyección- Diseño Inseguro- Configuración de Seguridad Incorrecta- Componentes Vulnerables y Obsoletos- Fallas de Identificación y Autenticación- Fallas de Integridad de Software y Datos- Fallas de Registro y Monitoreo de Seguridad- Falsificación de Solicitudes del Lado del Servidor

Principales Diez Vulnerabilidades de Seguridad OWASP en Node.js

The workshop covers the OWASP top 10 security vulnerabilities and provides practical exercises to fix them using Node.js and Fastify. Topics include access control, data encryption, password security, injection attacks, insecure design, preventing overbooking, rate limiting, security misconfiguration, cookies configuration, dependency management, identification and authentication failures, software and data integrity, deserialization vulnerability, and logging. Multifactor authentication and preventing server-side request forgery are also discussed. The importance of updating dependencies and following best practices to prevent vulnerabilities is emphasized.

In this workshop, we'll cover the top 10 most common vulnerabilities and critical security risks identified by OWASP, which is a trusted authority in Web Application Security.During the workshop, you will learn how to prevent these vulnerabilities and develop the ability to recognize them in web applications.The workshop includes 10 code challenges that represent each of the OWASP's most common vulnerabilities. There will be given hints to help solve the vulnerabilities and pass the tests.The trainer will also provide detailed explanations, slides, and real-life examples in Node.js to help understand the problems better. Additionally, you'll gain insights from a Node.js Maintainer who will share how they manage security within a large project.It's suitable for Node.js Developers of all skill levels, from beginners to experts, it requires a general knowledge of web application and JavaScript. Table of contents:- Broken Access Control- Cryptographic Failures- Injection- Insecure Design- Security Misconfiguration- Vulnerable and Outdated Components- Identification and Authentication Failures- Software and Data Integrity Failures- Security Logging and Monitoring Failures- Server-Side Request Forgery

OWASP Top Ten Security Vulnerabilities in Node.js

Marco Ippolito

¿Cómo puedes tener la confianza de que tu código está bien probado? Para mí, los criterios son sencillos: te sientes cómodo desplegándolo automáticamente en producción un viernes por la noche, y el flujo de lanzamiento se mantiene tan verde como un árbol perenne. En esta charla, compartiré algunos enfoques que estoy siguiendo para alcanzar ambos objetivos en aplicaciones Node.js (APIs, BFFs, etc).

Pruebas: Haz más con menos

This talk focuses on practical approaches for testing Node.js applications, including the use of Dora metrics and the testing trophy strategy. It emphasizes the importance of covering critical flows with integration and end-to-end tests, while also considering the cost and speed of different test types. The speaker recommends mocking third-party services and using snapshot testing, but warns about the potential for false positives. Playwright is suggested as a preferred tool, and the importance of automated test execution is emphasized.

How can you be confident that your code is well-tested? For me, the criteria are straightforward: you feel comfortable deploying it automatically to production on a Friday evening, and the release pipeline stays as green as an evergreen tree. In this talk, I'll share some approaches that I am following to hit both targets for Node.js apps (APIs, BFFs, etc).

Testing: Do More With Less

Eugene Fidelin

Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes. Aspectos destacados: - Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente. Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva

Deja que la IA sea tu Documentación

Artificial intelligence is cool and helpful in solving real problems, making people more productive. Integrating AI into React applications is in high demand to enhance user engagement and unlock efficiency. Real-time AI involves training models on live data, while generative AI shapes our daily interactions with technology. Vectors enable semantic and contextual search, and using MongoDB Atlas brings power to AI applications. Triggers in MongoDB can automatically update embeddings and vector search is essential for finding information in various use cases.

Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery. Key Takeaways: - Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources. Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs

Let AI Be Your Docs

Jesse Hall

Analizaremos los optimizadores habituales aplicados en las compilaciones de producción y cómo se pueden combinar con compilaciones incrementales.

Desafíos para las Optimizaciones de Producción Incrementales

TurboPack is a new bundle similar to Webpack, focusing on incremental builds to make them as fast as possible. Challenges in production builds include persistent caching, incremental algorithms, and optimizing export usage. The compilation process can be split into parsing and transforming modules, and chunking the module graph. TurboPack aims to achieve faster production builds through incremental optimization and efficiency. Collaboration and compatibility with other ecosystems are being considered, along with the design of a plugin interface and tree-shaking optimization.

We will look into usual optimization bundlers applied on production builds and how they can be combined with incremental builds.

Challenges for Incremental Production Optimizations

Tobias Koppers

Comprende los fundamentos de la tecnología NFT y su aplicación en el fortalecimiento de la seguridad web. A través de demostraciones prácticas y ejercicios prácticos, los asistentes aprenderán cómo integrar sin problemas mecanismos de control de acceso basados en NFT en sus proyectos de desarrollo front-end.

Cómo Construir Control de Acceso Front-End con NFTs

Welcome everyone! Today we are talking about unlocking digital ownership and starting accounts using blockchain technology. NFTs are unique digital assets based on blockchain technology. Blockchain provides transparency and immutability. To get started with blockchain, you need to install a wallet, specifically the MetaMask extension for Chrome. To enable your wallet, share your wallet address with others to receive money. To obtain tokens for testing, we will use a workshop faucet that provides test tokens. To create an NFT, we will use the Remix online environment. We mint a new token to the sender, and this is the unique ID of the asset in the collection. To create a project, use the command provided and specify the project name. To configure the Next.js to use my image, create a dotenv file with the smart contract address. You can have basic or VIP access and unlock content using NFTs. Update the main page by connecting the wallet, granting access, and minting an NFT. Create a new account and connect it to the wallet. Access someone else's token and content. Recap of creating basic smart content using Solidity. Exploring the possibilities and use cases of NFTs, including their use in sports, gaming, and real estate. Exploring the unique nature of NFTs, their various types, and the importance of transaction validation and fees in blockchain networks. Exploring other blockchains compatible with Ethereum, their benefits, and the importance of transaction fees in blockchain networks. Thank you for attending the workshop and interacting with me.

Understand the fundamentals of NFT technology and its application in bolstering web security. Through practical demonstrations and hands-on exercises, attendees will learn how to seamlessly integrate NFT-based access control mechanisms into their front-end development projects.

How to Build Front-End Access Control with NFTs

Solange Gueiros

La cruda realidad es que el desarrollo de software es desordenado. Comienzas con las mejores herramientas, la mejor arquitectura y las mejores intenciones, pero la calidad inevitablemente decae con el tiempo. El código frontend es particularmente frágil en el tiempo, ya que se encuentra en la intersección de producto, diseño e ingeniería. Hace un tiempo comencé a preguntarme si todas las bases de código están destinadas a fallar y volverse obsoletas. Luego comencé a recopilar lecciones de éxitos y fracasos pasados y noté cuán importante era la resiliencia para el éxito de un proyecto a largo plazo. La resiliencia es la capacidad de una base de código para sobrevivir a oleadas de desarrollo caótico y cambios no planificados. La resiliencia tiene menos que ver con las herramientas y frameworks que implementas, y más que ver con la disciplina de escribir y mantener un código limpio. ¿Alguna vez te has preguntado cuánto trabajo se requerirá para actualizar el código que estás escribiendo hoy, dentro de 6 meses? Veamos si podemos responder eso con un simple: "no mucho".

Lecciones para Construir Bases de Código Resilientes

Code bases degrade over time, so it's important to build a protective layer and accept imperfections. Collocation and leaving traces in the code are key for better understanding. TypeScript's strict null checks and explicit typing can improve code reliability. Guidelines and naming conventions are crucial for maintaining a consistent and scalable architecture. Version control complexity is not significantly affected by having multiple components in one file.

The harsh reality is that software development is messy. You start with the best tools, the best architecture and the best intentions, but quality inevitably degrades over time. Frontend code is particularly fragile in time as it sits at the intersection of product, design and engineering. A while ago I started asking myself if all codebases are destined to fail and become legacy or obsolete. Then I began collecting lessons from past wins and failures and noticed how important resilience was to the success of a long term project. Resilience is the ability of a codebase to survive through waves of chaotic development and unplanned changes. Resilience has less to do with the tools and frameworks you deploy, and more to do with the discipline of writing and maintaining clean code. Have you ever wondered how much work will be required to update the code you are writing today, 6 months from now? Let's see if we can answer that with a simple: "not too much".

Lessons for Building Resilient Codebases

Alex Moldovan

El siempre creciente panorama de aplicaciones de JavaScript ha llegado ahora a la gran pantalla, sí, lo has oído bien, ¡puedes construir apps de TV con JavaScript! El espacio operativo de las TVs es un desastre; hay más fragmentación que en el ecosistema de Android, y eso ya es decir algo. Cada fabricante ha tratado de reinventar la rueda creando su propio sistema operativo. En este momento, los principales actores son Android TV, tvOS, WebOS, Tizen, entre muchos otros. Esto lo convierte en un lugar único donde JavaScript y las tecnologías web pueden convertirse en un factor unificador y ahorrarte el estrés de tratar de desarrollar y mantener un montón de apps para la gran pantalla. Hablaremos sobre cómo construir apps de TV, qué frameworks de JS pueden ayudar en esto, y exploraremos los desafíos que vienen de la mano con el desarrollo de apps de TV, como los cuellos de botella de rendimiento y la gestión del enfoque utilizando los controles remotos.

JavaScript en la Gran Pantalla: Creando Apps de TV

JavaScript is widely used in web, mobile, and backend development, and now it is also being used to create TV apps. TVs with web-based operating systems can be targeted with JavaScript applications, and React is commonly used for TV app development. React Native allows for cross-platform TV app development, except for Roku. User interactions and focus management are important considerations in TV app development. Performance optimization is crucial for TV apps, as TVs have lower device scores and limited RAM. Spatial virtualization can significantly improve TV app performance.

The ever-expanding landscape of JavaScript applications has now reached the big screen - yes, you heard it right, you can build TV apps with JavaScript!  The TV operating space is a mess; there’s more fragmentation than the Android ecosystem, and that’s saying something. Each manufacturer has tried to reinvent the wheel by making their own OS. At the moment, the main players are Android TV, tvOS, WebOS, Tizen, among a whole myriad of others.  This makes it a unique place where Javascript and web technologies can become a uniting factor and save you from the stress of trying to develop and maintain handfuls of apps for the big screen.  We’ll talk about how to build TV apps, what JS frameworks can help in this, and explore the challenges that come hand-in-hand with TV app development, namely performance bottlenecks and focus management using remote controls.

JS on the Big Screen: Making TV Apps

Mo Khazali

Imagina desarrollar donde el frontend y el backend cantan en armonía, los tipos bailan en perfecta sincronía y los errores se convierten en un recuerdo lejano. ¡Eso es la magia de TypeScript Nirvana! Únete a mí en un viaje para descubrir los secretos de las definiciones de tipos unificadas, la clave para desbloquear un desarrollo sin fricciones. Nos sumergiremos en: - Lenguaje compartido, amor compartido: Define los tipos una vez y compártelos en todas partes. La consistencia se convierte en tu mejor amiga, los errores en tu peor pesadilla (uno que rara vez verás).- Codificación sin esfuerzo: Olvídate de la tediosa tarea de comprobar tipos manualmente. TypeScript te respalda, liberándote para centrarte en construir cosas increíbles.- Magia de mantenibilidad: Con tipos claros que guían tu código, mantenerlo se convierte en un paseo por el parque. Más tiempo para innovar, menos tiempo para depurar.- Fortaleza de seguridad: El sistema de tipos de TypeScript protege tu aplicación de vulnerabilidades comunes, convirtiéndola en una fortaleza contra amenazas de seguridad.

Desarrollo sin fricciones con un sistema de tipos unificado

Welcome to the TypeScript workshop where we will learn about TypeScript Nirvana, a type development system. We will discuss the need for a type system and how it helps generate a single source of truth for TypeScript definitions. Let's now set up a Next.js project and create schemas with Prisma. Set up a build system with TurboRepo and TShop to generate all client packages. Work on terminal configuration, UI source, and resolving config fail. Install Prisma and create user resources. Create DTOs and build a REST API. Generate API docs and clients. Set up front-end and run the script. Talk to the backend, import access, and create API clients. Create a user service and controller. Continue with user service and backend setup. Build a fully-typed system without being tied to a particular technology.

Imagine developing where frontend and backend sing in harmony, types dance in perfect sync, and errors become a distant memory. That's the magic of TypeScript Nirvana! Join me on a journey to unveil the secrets of unified type definitions, the key to unlocking frictionless development. We'll dive into: - Shared language, shared love: Define types once, share them everywhere. Consistency becomes your BFF, errors your worst nightmare (one you'll rarely see).- Effortless coding: Ditch the manual grind of type checking. TypeScript's got your back, freeing you to focus on building awesomeness.- Maintainability magic: With crystal-clear types guiding your code, maintaining it becomes a walk in the park. More time innovating, less time debugging.- Security fortress: TypeScript's type system shields your app from common vulnerabilities, making it a fortress against security threats.

Frictionless Development With Unified Type System

Ejiro Asiuwhu

Ya hay muchos ORMs en el mundo de JS, ¿por qué construir otro? En esta charla descubriremos por qué Drizzle es diferente de otras soluciones en el mercado, por qué lo consideramos un ORM de "día 1000" y cómo se siente ser un ORM sin cabeza. También profundizaremos en el ecosistema de Drizzle y veremos soluciones que mejorarán enormemente tu experiencia de drizzling™.

¿Qué hay con Drizzle ORM?

Drizzle is a TypeScript ORM that leverages SQL knowledge, is fast and has its own ecosystem. It manages database schema and supports prepared statements for peak performance. Drizzle provides a complete set of tools, including Drizzle Studio and query runners. The ecosystem includes GraphQL integration and community-built tools.

There's already plenty of ORMs in the JS world, so why build another one? In this talk we'll figure out why Drizzle is different from other solutions in the market, why do we consider it a "day 1000 ORM" and how does it feel to be a headless ORM with a head. We'll also delve into the Drizzle ecosystem and look at solutions that will greatly enhance your drizzling™ experience.

What’s the Deal With Drizzle ORM?

Dan Kochetov

Entre los core-web vitals y las herramientas de perfilado siempre hay un gran obstáculo, la aprobación de la empresa. Hay muchas formas en las que tu trabajo de rendimiento puede no ser visto o priorizado. Así que hablemos de ellas.

Por qué tu trabajo de rendimiento no es visible

This Talk discusses the importance of performance work and how to drive performance governance. It emphasizes the need to frame data, set meaningful budgets, and understand both engineering and product perspectives. The Talk also highlights the significance of delivering value, establishing solid performance governance, and gaining buy-in from management. Additionally, it emphasizes the importance of measuring performance, optimizing through data, and collecting performance data using tools like Speedcurve and Bugbear Sentry. The speaker also mentions their training program and expresses gratitude towards the audience.

Between core-web vitals and profiling tools there's always one big obstacle, company buy-in. There are many ways your performance work might not be seen or prioritised. So let's talk about them.

Why Your Performance Work Is Not Seen

En esta charla, discutimos y obtenemos una introducción a Web5, una plataforma web descentralizada de código abierto que devuelve la propiedad y el control sobre los datos a los individuos, donde pertenecen. Lo hace proporcionando una nueva capa para la web que permite a los desarrolladores construir aplicaciones y protocolos descentralizados.

Construyendo una Web Descentralizada con Web5

Today's Talk introduces Web5, which combines the best of Web 2 and Web 3 to build a decentralized web. Web5 consists of three pillars: decentralized identifiers, verifiable credentials, and decentralized applications. Verifiable credentials are used on platforms like LinkedIn, while decentralized web nodes act as data stores for web apps. Web5 allows users to own their data, reduces friction in onboarding, and enables example applications like Universal Music Playlist and Connected Travel. Building for Web5 presents challenges such as key management and data usage, but there are resources available to learn more about the technologies.

In this talk, we discuss and get an introduction into Web5, an open source decentralized web platform that returns ownership and control over data to individuals where it belongs. It does this by providing a new layer for the web that enables developers to build decentralized applications and protocols.

Building a Decentralized Web With Web5

Adewale Abati

Durante los últimos 18 meses, Angular ha estado experimentando un gran impulso al que la comunidad se ha referido como el "Renacimiento de Angular".En esta charla veremos cómo se manifiesta en mejoras en la experiencia de desarrollo, rendimiento, documentación y una apariencia mejorada.

Renacimiento de Angular

Angular and React have similar models of reactivity, with the framework optimizing change detection. Angular introduced signals for optimizing change detection in real-world applications, resulting in improved performance. Deferrable views in Angular allow for lazy loading and significant speed improvements. The island architecture in Angular enables independent component islands without needing hydration. Angular is working on features like partial iteration and zoneless, and aims to support developers in delivering web apps with confidence.

For the past 18 months Angular has been experiencing a lot of momentum that the community has been referring to as the "Angular Renaissance."In this talk we'll see how this manifests in improvements in developer experience, performance, documentation, and a better look!

JSNation 2024

The main JavaScript conference of the year