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

Taz Singh

Sophie Kolbe

Vlad Dumitrica

Rafael Piazdecki

Vinicius Dallacqua

Ioana Sauleac

Petra vos

Lera

Peter-Paul Koch

Alba Silvente Fuentes

Aleksei Podgaev

JSNation Conference 🗓 June 1-5, 2023

Kræn Hansen

Darko Bozhinovski

Daniel Afonso

Varun

Thibault Van den Broecke

Batuhan NARCI

Marius Obert

Travis McGeehan

Eli White

Vasilika Klimova

Johannes Goslar

Vasilii Boldurean

Max Kless

Giulio Zausa

Seungho Park

Oliver Janssen

Kevin

David Pugh

Ricardo Machado

Gido Manders

Robert

David Barry

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

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

En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.

Construyendo un Asistente AI Activado por Voz con Javascript

This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.

In this talk, we'll build our own Jarvis using Web APIs and langchain. There will be live coding.

Building a Voice-Enabled AI Assistant With Javascript

Tejas Kumar

En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más. Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.

Crea un Juego Con PlayCanvas en 2 Horas

Backplane Canvas is a web-first engine that embraces open standards like WebXR and supports gLTF. PlayCanvas offers an online editor for building experiences visually. The engine architecture, JavaScript gotchas, and API documentation are discussed. The workshop covers setting up the project and scene, creating a player character, writing custom scripts, adding physics and game elements, and implementing UI and sound effects. Additional resources and suggestions for improving the game are provided.

In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more. Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.

Make a Game With PlayCanvas in 2 Hours

Steven Yau

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

El soporte nativo de ESM para Node.js fue una oportunidad para que el proyecto Node.js lanzara soporte oficial para mejorar la experiencia de carga de módulos, para habilitar casos de uso como la transpilación sobre la marcha, la simulación de módulos, el soporte para cargar módulos desde HTTP y la monitorización. Mientras que CommonJS tiene soporte para todo esto, nunca fue oficialmente soportado y se hizo hackeando el código de ejecución de Node.js. ESM ha solucionado todo esto. Examinaremos la arquitectura de la carga de ESM en Node.js, y discutiremos la API del cargador que soporta su mejora. También veremos características avanzadas como la cadena de cargadores y la ejecución fuera de hilo.

Cargadores ESM: Mejorando la carga de módulos en Node.js

ESM Loaders enhance module loading in Node.js by resolving URLs and reading files from the disk. Module loaders can override modules and change how they are found. Enhancing the loading phase involves loading directly from HTTP and loading TypeScript code without building it. The loader in the module URL handles URL resolution and uses fetch to fetch the source code. Loaders can be chained together to load from different sources, transform source code, and resolve URLs differently. The future of module loading enhancements is promising and simple to use.

Native ESM support for Node.js was a chance for the Node.js project to release official support for enhancing the module loading experience, to enable use cases such as on the fly transpilation, module stubbing, support for loading modules from HTTP, and monitoring. While CommonJS has support for all this, it was never officially supported and was done by hacking into the Node.js runtime code. ESM has fixed all this. We will look at the architecture of ESM loading in Node.js, and discuss the loader API that supports enhancing it. We will also look into advanced features such as loader chaining and off thread execution.

ESM Loaders: Enhancing Module Loading in Node.js

Gil Tayar

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

¿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

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

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

En los círculos de rendimiento web, tendemos a observar de cerca los tiempos de pintado, los tiempos de bloqueo y muchos otros tiempos métricos, que todos contribuyen al análisis de la experiencia del usuario. En 2023, hemos comenzado a prestar más atención a las toneladas métricas. DEADScript es una presentación que destaca los recursos que cargamos en el desarrollo moderno, y el papel único de JavaScript en este inquietante dilema ambiental.

DEADScript: El Papel de JavaScript en la Sostenibilidad Web

This Talk discusses digital sustainability and the role of JavaScript in web sustainability. It highlights the impact of electricity carbon intensity and page weight on carbon footprints. The Talk also examines JavaScript's contribution to the carbon footprint on mobile devices and emphasizes the importance of reducing unnecessary requests. The introduction of the carbon control tool, which provides performance data and estimates carbon footprints, is also mentioned.

In the web performance circles, we tend to closely watch paint times, blocking times, and so many more metric times, which all contribute to analyzing the user experience. In 2023, we have begun to pay more attention to metric tonnes. DEADScript is a presentation highlighting the resources we’re loading in modern development, and JavaScript’s unique role in this disquieting environmental dilemma.

DEADScript: The Role Of JavaScript In Web Sustainability

Henri Helvetica

¡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

La codificación de video de alta calidad en los navegadores ha sido tradicionalmente lenta, de baja calidad y no permitía mucha personalización. Esto se debe a que los navegadores nunca tuvieron una forma nativa de codificar videos aprovechando la aceleración de hardware. En esta charla, repasaré los secretos de la creación de videos de alta calidad en los navegadores de manera eficiente con el poder de WebCodecs y WebAssembly. Desde contenedores de video hasta muxing, audio y más allá, esta charla te dará todo lo que necesitas para renderizar tus videos en los navegadores hoy en día!

Ampliando los límites de la codificación de video en navegadores con WebCodecs

This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.

High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!

Pushing the Limits of Video Encoding in Browsers With WebCodecs

Akash Hamirwasia

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

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

Todos los lenguajes son o han sido vulnerables a algún tipo de amenaza. Soy parte del equipo de Seguridad de Node.js y durante el año 2022, hemos realizado muchas Liberaciones de Seguridad y algunas de ellas fueron realmente difíciles de pensar. ¿Sabías que puedes ganar dinero encontrando vulnerabilidades críticas en Node.js? En esta charla, te mostraré 5 formas en las que podrías haber hackeado Node.js y cómo el equipo de Node.js maneja las vulnerabilidades.

5 Formas en las que Podrías Haber Hackeado Node.js

The Node.js security team is responsible for addressing vulnerabilities and receives reports through HackerOne. The Talk discusses various hacking techniques, including DLL injections and DNS rebinding attacks. It also highlights Node.js security vulnerabilities such as HTTP request smuggling and certification validation. The importance of using HTTP proxy tunneling and the experimental permission model in Node.js 20 is emphasized. NearForm, a company specializing in Node.js, offers services for scaling and improving security.

All languages are or were vulnerable to some kind of threat. I’m part of the Node.js Security team and during the year 2022, we've performed many Security Releases and some of them were really hard to think about. Did you know you can make money by finding critical vulnerabilities in Node.js? In this talk, I’ll show you 5 ways you can have hacked Node.js and how the Node.js team deals with vulnerabilities.

5 Ways You Could Have Hacked Node.js

Rafael Gonzaga

¿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

Matteo Collina

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

Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.

Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica

Today's workshop focused on creating a website using SvelteKit and Storyblock CMS. It covered topics such as installing SvelteKit and integrating Storyblock, configuring SSL for localhost, connecting Storyblock SDK with a space, retrieving data and setting up preprocess, creating components and styling with Tailwind, compiling components and troubleshooting, creating dynamic pages and adding fields to the schema, working with the image service, and deploying and internationalization. The workshop also touched on advanced topics like multilingual support and emphasized the importance of being familiar with a good CMS and framework for job opportunities.

This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

Roberto Butti

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

React + WebGPU + AI – ¿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

Platformatic te permite desarrollar rápidamente GraphQL y REST APIs con un esfuerzo mínimo. La mejor parte es que también te permite desatar todo el potencial de Node.js y Fastify siempre que lo necesites. Puedes personalizar completamente una aplicación de Platformatic escribiendo tus propias características y plugins adicionales. En la masterclass, cubriremos tanto nuestros módulos de Open Source como nuestra oferta en la Nube:- Platformatic OSS (open-source software) — Herramientas y bibliotecas para construir rápidamente aplicaciones robustas con Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (actualmente en beta) — Nuestra plataforma de alojamiento que incluye características como aplicaciones de vista previa, métricas integradas e integración con tu flujo de Git (https://platformatic.dev/).  En esta masterclass aprenderás cómo desarrollar APIs con Fastify y desplegarlas en la Platformatic Cloud.

Construir y Desplegar un Backend Con Fastify & Platformatic

Welcome to the platformatic workshop where you can create open API and graphical schema from your database without coding. The generator creates config files and types for the database representation. GraphiQL allows you to query the database and run subscriptions for real-time updates. The workshop covers creating relations, adding likes to entities, and implementing custom business logic. The back-end can be deployed to Platformatic Cloud, and there is support for API authentication and monitoring metrics. The workshop also introduces Dynamic Workspaces, SQLite benefits, and Platformatic Runtime for service composition.

Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/).  In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.

Build and Deploy a Backend With Fastify & Platformatic

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 del desarrollo backend y los patrones arquitectónicos. A menudo hemos abandonado tecnologías en un intento de hacer la experiencia del desarrollador 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.

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.

Luca Maraschi

Hoy en día, TypeScript es un estándar de la industria ya que proporciona una increíble experiencia de desarrollo con autocompletado, refactorización de código con confianza y mucho más. Pero la mayoría de los desarrolladores solo rascan la superficie y no utilizan TypeScript en todo su potencial. Esta charla profundizará en los conceptos poderosos y avanzados de TypeScript como los genéricos, los tipos condicionales, los type guards, los utility types para transformaciones de tipos y mucho más, utilizando ejemplos del mundo real para comprender mejor estos conceptos.

¡Vaya! ¿Puede TypeScript hacer eso?

Today's talk covers advanced concepts of TypeScript including type guards, generics, utility types, and conditional types. These concepts enhance the developer experience and improve code quality by ensuring type safety and reducing errors. The talk also explores the use of generics to make components more generic and reusable. Additionally, it discusses the power of custom utility types and the infer keyword in creating flexible and precise type definitions. TypeScript's string templates are highlighted as a tool for enforcing restrictions on values like margins in CSS. Overall, the talk provides valuable insights into leveraging TypeScript's advanced features for more robust and maintainable software development.

These days, TypeScript is an industry default as it provides amazing DX with autocomplete, confident code refactoring and much more. But most developers only scratch the surface and doesn't use Typescript to its fullest potential. This talk would dive into the powerful and advance concepts of TypeScript like generics, conditional types, type guard, utility types for type transformations and much more using real world examples to better understand these concepts.

Woah! Can TypeScript Do That?

Nikhil Kumaran S

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

Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal. QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala. En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.

Construyendo aplicaciones web que iluminan Internet con QwikCity

Quick is a framework that focuses on performance optimization and reducing JavaScript overload in websites. It allows for lazy loading of components and efficient downloading and execution of code. Quick integrates with various tools and platforms, including Auth.js, Superbase, and headless CMS. It provides features like client-side navigation, route loaders, and the ability to fetch and update data. Quick's rendering paradigm makes every application instantly interactive, and React-Quickify allows for the use of existing React components in Quick applications.

Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site. QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications. Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.

Building WebApps That Light Up the Internet with QwikCity

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

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

JSNation 2023

The main JavaScript conference of the year