Name: JSNation 2022
Start: 2022-06-16T09:00:00.000Z
End: 2022-06-20T22:00:00.000Z

Taz Singh

Lera

Sophie Kolbe

Ioana Sauleac

Peter-Paul Koch

Daria Shabala

Stephen Cooper

Batuhan NARCI

David Pugh

Harshil Agrawal

Zoltan Kochan

Mark Dalgleish

Nikolay Advolodkin

Lukas

Ricardo Machado

Barbara Ferreira

Petar Kuzmanov

Christian  Bayer

Demezhan Marikov

Alex Hayton

Ian Sutherland

Aman Beg

Denis Radin

Pieter BOERBoom

Darko Raguž

Rishi Narang

Vitor Barbosa

Hannes

Simon Golms

Los tutoriales interactivos basados en la web se han convertido en un elemento básico de los frameworks de front end, y es fácil ver por qué: a los desarrolladores les encanta poder probar nuevas herramientas sin el problema de instalar paquetes o clonar repositorios.Pero en la era de los meta-frameworks full stack como Next, Remix y SvelteKit, estos tutoriales solo llegan hasta cierto punto. En esta charla, veremos cómo nosotros, en el equipo de Svelte, estamos utilizando la tecnología web de vanguardia para repensar cómo nos enseñamos mutuamente las herramientas de nuestro oficio.

Documentación Full Stack

The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.

Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.

Full Stack Documentation

Rich Harris

Nuestra comprensión del rendimiento y la experiencia del usuario ha evolucionado mucho a lo largo de los años. Las herramientas de desarrollo web necesitan evolucionar de manera similar para asegurarse de que sean centradas en el usuario, accionables y contextuales donde se refiere a las experiencias modernas. En esta charla, Addy te guiará a través de cómo Chrome y otros han estado pensando en este problema y qué actualizaciones han estado haciendo a las herramientas de rendimiento para reducir la fricción para construir grandes experiencias en la web.

El Futuro de las Herramientas de Rendimiento

Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

Our understanding of performance &amp; user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

The Future of Performance Tooling

Addy Osmani

¿Qué podemos aprender de los últimos 10 años para los próximos 5 años? ¿Hay un futuro para Webpack? ¿Qué necesitamos hacer ahora?

¿Webpack en 5 años?

In the last 10 years, Webpack has shaped the way we develop web applications by introducing code splitting, co-locating style sheets and assets with JavaScript modules, and enabling bundling for server-side processing. Webpack's flexibility and large plugin system have also contributed to innovation in the ecosystem. The initial configuration for Webpack can be overwhelming, but it is necessary due to the complexity of modern web applications. In larger scale applications, there are performance problems in Webpack due to issues with garbage collection, leveraging multiple CPUs, and architectural limitations. Fixing problems in Webpack has trade-offs, but a rewrite could optimize architecture and fix performance issues.

What can we learn from the last 10 years for the next 5 years? Is there a future for Webpack? What do we need to do now?

Webpack in 5 Years?

Tobias Koppers

¿Qué haces cuando eres un framework que ha sobrevivido e innovado en dos Olas de Framework de JavaScript, y ves la nueva ola creciendo en la distancia? Innovas. En esta charla, exploramos el panorama del Framework de JavaScript, y algunas de las principales características competitivas que hemos visto. Exploraremos lo que Angular está introduciendo hoy y hacia dónde nos dirigimos en el futuro. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

El Viento y las Olas: La formación de Olas de Framework desde el Epicentro

Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.

What do you do when you're a framework that's survived and innovated in two JavaScript Framework Waves, and see the new wave cresting in the distance? You innovate. In this talk, we explore the JavaScript Framework landscape, and some of the major competitive features we've seen. We'll explore what Angular is introducing today and where we're headed in the future. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

The Wind and the Waves: The formation of Framework Waves from the Epicenter

Sarah Drasner

WebAssembly es una característica del navegador diseñada para llevar un rendimiento alto y predecible a las aplicaciones web, pero sus capacidades a menudo se malinterpretan. Esta charla explorará cómo WebAssembly es diferente de JavaScript, desde el punto de vista tanto del desarrollador como del motor del navegador, con un enfoque particular en la implementación de V8/Chrome. <a href="https://webvm.io/">WebVM</a> es nuestra solución para ejecutar eficientemente binarios x86 no modificados en el navegador y muestra lo que se puede hacer con WebAssembly hoy en día. Se discutirá una visión general de alto nivel de los componentes del proyecto, incluido el motor JIT, la capa de emulación de Linux y el backend de almacenamiento, seguido de demostraciones en vivo.

Creando lo Imposible: Virtualización X86 en el Navegador con WebAssembly

ChirpX is a technology to securely run binary code in the browser, written in C++ and compiled to JavaScript WebAssembly. It can run a full virtualized system in the browser, including Bash and other languages like Python and JavaScript. ChirpX aims for scalability and the ability to work with large code bases, supporting multiprocessing and multithreading. It uses a two-tiered execution engine with an interpreter and a JIT engine. Future plans include running the full X.Org server in the browser and implementing the Windows system call. WebVM, the underlying technology, has a virtual file system backed by Cloudflare.

WebAssembly is a browser feature designed to bring predictable high performance to web applications, but its capabilities are often misunderstood. This talk will explore how WebAssembly is different from JavaScript, from the point of view of both the developer and the browser engine, with a particular focus on the V8/Chrome implementation. <a href="https://webvm.io/">WebVM</a> is our solution to efficiently run unmodified x86 binaries in the browser and showcases what can be done with WebAssembly today. A high level overview of the project components, including the JIT engine, the Linux emulation layer and the storage backend will be discussed, followed by live demos.

Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly

Alessandro Pignotti

Únete a Ryan Carniato, creador de SolidJS, mientras muestra los fundamentos de esta visión única de un marco de JavaScript. Esta sesión reflexionará sobre los desafíos del desarrollo web moderno que motivaron la creación de Solid. Al volver a recorrer sus pasos desde los comienzos simples hasta un marco completo, Ryan mostrará cómo los primitivos reactivos son los únicos bloques de construcción que necesitas.

SolidJS: Reactivity Unchained

Solid.js is a declarative JavaScript library for building user interfaces that addresses performance optimization. It introduces fine-grained reactivity and avoids using a virtual DOM. The Talk explores rethinking performance and reactivity in web applications, understanding reactivity and primitives, and creating DOM elements and using JSX in Solid.js. It also covers rendering components, sharing state, and the advantages of fine-grained rendering and the reactive approach in Solid.js.

Join Ryan Carniato, creator of SolidJS, as he shows off the fundamentals of this unique take on a JavaScript Framework. This session will reflect on the challenges of modern web development that motivated Solid's creation. By retracing his steps from simple beginnings to a full-fledged framework, Ryan will showcase how reactive primitives are the only building blocks you need.

Ryan Carniato

Starbeam es una biblioteca para construir sistemas de datos reactivos que se integran nativamente con frameworks de UI como React, Vue, Svelte o Ember. En esta charla, Yehuda anunciará Starbeam. Cubrirá la motivación para la biblioteca, y luego entrará en los detalles de cómo funciona la reactividad en Starbeam, y lo más importante, cómo puedes usarlo para construir bibliotecas reactivas hoy que funcionarán nativamente en cualquier framework de UI. Si eres realmente aventurero, también hablará sobre cómo podrías usar Starbeam en una aplicación existente utilizando el framework de tu elección y hablará sobre los beneficios de usar Starbeam como el sistema de gestión de estado en tu aplicación.

Anunciando Starbeam: Reactividad Universal

Starbeam is a library for building reactive user interfaces with JavaScript, similar to Svelte, Vue, and Ember. It provides a data structure and query feature for filtering and sorting. The useStarBeam function ensures JSX reconciliation only occurs when reactive dependencies change. Starbeam tracks every read and write operation to update the component accordingly. It can be used with React and other frameworks, and offers debugging tools and locale integration.

Starbeam is a library for building reactive data systems that integrate natively with UI frameworks such as React, Vue, Svelte or Ember. In this talk, Yehuda will announce Starbeam. He will cover the motivation for the library, and then get into the details of how Starbeam reactivity works, and most importantly, how you can use it to build reactive libraries today that will work natively in any UI framework. If you're really adventurous, he will also talk about how you could use Starbeam in an existing app using your framework of choice and talk about the benefits of using Starbeam as the state management system in your application.

Announcing Starbeam: Universal Reactivity

Yehuda Katz

¿Curioso por saber cuáles son algunas de las posibles características de JS que se están cocinando en este momento?¡Sí, estás en el lugar correcto! Esta charla te guiará a través de dichas características con ejemplos de código y algunas ideas de las notas de la reunión TC39 sobre ellas.

¿Futuras características de JS?!

Welcome to the future features of JavaScript, including proposals for array operations, throw expressions, records and TPUs, pipeline operators, and more. The talk covers the introduction of type assertions for imported files, non-mutating array operations, and the simplification of error handling. It also explores the concept of immutability with records and TPUs, and the use of the pipeline operator to simplify code. Other proposals include Map.implace, IteratorHelper, slice notation, type annotations, Array UNIQBY, number ranges, and the Function 1 proposal.

Curious to know what are some of the potential JS features that are cooking right now?Yes are at the right place! This talk will be walking you through such features with code samples and some insights from the TC39 meeting notes about them.

Future Features of JS?!

Hemanth HM

Record &amp; Tuple es una característica propuesta para JavaScript que tiene como objetivo introducir nuevos tipos de valores inmutables. Los Records son estructuras inmutables de clave/valor y los Tuples son secuencias inmutables de datos. En esta charla, Robin, uno de los campeones de la propuesta, presentará la característica, mostrará cómo se puede utilizar y explicará cómo esta característica está avanzando en el proceso de estandarización TC39.

Record & Tuple: Estructuras de Datos Inmutables en JS

Today's Talk introduces the concept of record and tuple in JavaScript, which provide a new way to handle data. The Talk explores the references and mutability of objects, strings, and numbers in JavaScript. It discusses the limitations of freezing objects and proposes record and tuple as a solution. The Talk also covers methods and syntax for tuples, the status of the proposal, and acknowledges the contributions of various individuals. Overall, the Talk aims to redefine how data is handled in JavaScript and encourages waiting for broader browser support before implementing these features.

Record &amp; Tuple is a proposed feature for JavaScript that aims to introduce new immutable value types. Records are immutable key/value structures and Tuples are immutable sequences of data. In this talk, Robin, one of the champions of the proposal will introduce the feature, show how it can be used and explain how this feature is advancing in the TC39 standardization process.

Record & Tuple: Immutable Data Structures in JS

Robin Ricard

Yarn 4 es la próxima versión mayor de tu gestor de paquetes JavaScript favorito, con un enfoque en rendimiento, seguridad y experiencia del desarrollador. A lo largo de esta charla repasaremos sus nuevas características, cambios importantes y compartiremos nuestros planes a largo plazo para el proyecto.Si solo has oído hablar de Yarn sin probarlo aún, si no estás seguro de por qué la gente hace tanto alboroto con los gestores de paquetes, si te preguntas cómo tu gestor de paquetes puede hacer tu trabajo más sencillo y seguro, ¡esta es la charla perfecta para ti!

Yarn 4 - Gestión Moderna de Paquetes

Yarn is a package manager that focuses on stability, performance, and security. It offers unique features like plug and play installation, support for nonmodules, and the exec protocol. Yarn is committed to being a good citizen in the open-source community and contributes to fixing dependencies. It is part of the Node.js Loader's working group and advocates for Corepack. Yarn is still experimental but is improving its user experience and security features. Contributions are welcome, and switching to Yarn can improve performance in large projects.

Yarn 4 is the next major release of your favourite JavaScript package manager, with a focus on performance, security, and developer experience. All through this talk we'll go over its new features, major changes, and share our long-term plans for the project.If you only heard about Yarn without trying it yet, if you're not sure why people make such a fuss over package managers, if you wonder how your package manager can make your work simpler and safer, this is the perfect talk for you!

Yarn 4 - Modern Package Management

Maël Nison

Vivimos en tiempos emocionantes. Marcos de trabajo como TensorFlowJS nos permiten aprovechar el poder de los modelos de IA en el navegador, mientras que otros como Three.js nos permiten crear fácilmente mundos 3D. En esta charla veremos cómo podemos combinar ambos, para construir un sistema solar completo, en nuestro navegador, ¡usando nada más que gestos de mano! <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js

This Talk explores the use of TypeScript, 3JS, hand recognition, and TensorFlow.js to create 3D experiences on the web. It covers topics such as rendering 3D objects, adding lights and objects, hand tracking, and creating interactive gestures. The speaker demonstrates how to build a cube and a bouncy box, move objects with flick gestures, and create a solar system with stars and planets. The Talk also discusses the possibilities of using hand gestures for web navigation and controlling websites, as well as the performance limits of these technologies.

We live in exciting times. Frameworks like TensorFlowJS allow us to harness the power of AI models in the browser, while others like Three.js allow us to easily create 3D worlds. In this talk we will see how we can combine both, to build a full solar system, in our browser, using nothing but hand gestures! <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

Build a 3D Solar System with Hand Recognition and Three.js

Liad Yosef

En esta charla mostraré Makepad, una nueva pila de UI que utiliza Rust, Wasm y WebGL. A diferencia de otras pilas de UI, que utilizan un enfoque híbrido, todo el renderizado en Makepad se realiza en la GPU. Esto permite aplicaciones altamente pulidas y visualmente impresionantes que hasta ahora no han sido posibles en la web. Debido a que Makepad utiliza Rust, las aplicaciones se ejecutan tanto de forma nativa como en la Web a través de wasm. Las aplicaciones de Makepad pueden ser muy pequeñas, del orden de solo unos pocos cientos de kilobytes para wasm, hasta unos pocos megabytes con nativo. Nuestro objetivo es desarrollar Makepad en la pila de UI de elección para aplicaciones multiplataforma ligeras y de alto rendimiento. Tenemos la intención de enviar con nuestra propia aplicación de diseño e IDE.

Makepad - Aprovechando Rust + Wasm + WebGL para construir aplicaciones multiplataforma increíbles

Welcome to MakePad, a new way to build UI for web and native using WebAssembly and Rust. JavaScript is not suitable for complex applications like IDEs and design tools. Rust, a new programming language, was used to reimagine MakePad, resulting in a fast and efficient platform. MakePad offers live editing, high CPU performance, and the ability to load native instrument components. The future of MakePad includes an open-source release, a design tool, and support for importing 3D models.

In this talk I will show Makepad, a new UI stack that uses Rust, Wasm, and WebGL. Unlike other UI stacks, which use a hybrid approach, all rendering in Makepad takes place on the GPU. This allows for highly polished and visually impressive applications that have not been possible on the web so far. Because Makepad uses Rust, applications run both natively and on the Web via wasm. Makepad applications can be very small, on the order of just a few hundred kilobytes for wasm, to a few megabytes with native. Our goal is to develop Makepad into the UI stack of choice for lightweight and performant cross-platform applications. We intend to ship with our own design application and IDE.

Makepad - Leveraging Rust + Wasm + WebGL to Build Amazing Cross-platform Applications

Rik Arends

¿Sabes lo que es el síndrome del impostor, verdad!? Casi todos nosotros hemos sentido esa sensación persistente de que estamos fingiendo y que estamos seguros de ser descubiertos por todos los expertos que nos rodean en cualquier momento.Pero antes de que asumas que esta charla es la misma canción y baile lleno de platitudes que te animan a ignorar ese síndrome, permíteme darte una pequeña pista: no hay expertos a tu alrededor. El impostorismo no es un síndrome en absoluto, es una mentalidad y perspectiva pragmática, una que todos deberíamos abrazar y de la que deberíamos estar orgullosos. De hecho, es vital para que podamos hacer nuestro trabajo.

Confesiones de un Impostor

The Talk discusses imposter syndrome and reframes it as being a professional imposter. It emphasizes the importance of sharing and starting, embracing imposterism, and building inclusively for the web. The speaker shares personal experiences of being an imposter in various technical disciplines and highlights the significance of accessibility. The Talk concludes with the idea of building a collective RPG game to remove excuses for not making things accessible.

You know what impostor syndrome is, right!? Most all of us have felt that nagging feeling that we're faking it and that we're sure to be found out by all the experts around us at any moment.But before you go assuming this talk is the same ol' song and dance full of platitudes that encourage you to ignore that syndrome, let me clue you in on a little secret: there's no experts around you. Impostorism is not a syndrome at all, it's a pragmatic mindset and perspective, one we should all embrace and be proud of. In fact, it's vital to us getting our jobs done.

Confessions from an Impostor

Kyle Simpson

Los módulos son una herramienta popular para los Desarrolladores de JavaScript. Recientemente, ha habido una serie de propuestas que abordan cómo funcionan los Módulos, incluyendo Import Maps, Top level await, JSON modules, Module asserts, y muchos otros. Pero, ¿cómo funciona el sistema de carga de módulos y cómo estas propuestas lo mejoran? ¿Cómo se ve desde la perspectiva de los navegadores cargar un árbol de módulos con un import map? Exploraremos estas preguntas y más, dándote una mirada detrás de escena a la carga de módulos en JS.

Cómo funcionan los Módulos JS: una Perspectiva del Navegador

This Talk discusses JavaScript modules from the perspective of a browser, exploring how they work and their differences from common JS. It covers topics such as loading modules, module records, and the module map. The module loading and evaluation process is explained, along with the challenges of module adoption and performance. The Talk also touches on lazy loading, dynamic import, and import reflection. The speaker shares a humorous anecdote during the Q&A session about stealing a shirt from the DOM team.

Modules are a popular tool for JavaScript Developers. Recently, there have been a number of proposals touching on how Modules work, including Import Maps, Top level await, JSON modules, Module asserts, and many others. But how does the module loading system work, and how do these proposals augment it? What does it look like from the browsers perspective to load a module tree with an import map? We will explore these questions and more, giving you a behind the scenes look at module loading in JS.

How JS Modules work: a Browser Perspective

Yulia Startsev

Comienza con AG Grid Angular Data Grid con un tutorial práctico del equipo principal que te llevará a través de los pasos para crear tu primera grid, incluyendo cómo configurar la grid con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar inmediatamente a tus proyectos. También descubrirás cómo cargar datos en la grid y diferentes formas de agregar renderizado personalizado a la grid. Al final de la masterclass, habrás creado y personalizado un AG Grid Angular Data Grid. Contenidos:- comenzando e instalando AG Grid- configurando ordenación, filtrado, paginación- cargando datos en la grid- el grid API- agrega tus propios componentes a la Grid para renderizar y editar- capacidades de la edición comunitaria gratuita de AG Grid

Comienza con AG Grid Angular Data Grid

The Workshop introduces AG Grid and covers topics such as setting up row data and column definitions, enabling sorting, configuring grid features and user interaction, accessing the grid API, and adding styling. It also explores custom cell renderers, filters, and enterprise features like charting, grid options, and sidebar functionalities. The Workshop concludes with discussions on advanced grid features, aggregation, customizing the context menu, and accessing and updating data in the grid.

Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid. Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid

Get started with AG Grid Angular Data Grid

Saber cómo ejecutar pruebas de rendimiento en tu aplicación web correctamente es una cosa, y poner esos métricas en buen uso es otra. Y ambos aspectos son cruciales para el éxito general de tus esfuerzos de optimización de rendimiento. Sin embargo, puede ser todo un desafío a veces, ya que significa que necesitas tener un entendimiento preciso de todos los entresijos tanto de los datos de rendimiento como de las herramientas de rendimiento. Esta charla arrojará luz sobre cómo superar este desafío y te guiará a través de las trampas y trucos del oficio de Chrome DevTools, proporcionándote una hoja de ruta completa para el análisis y la optimización del rendimiento.

Aplicaciones Web de Alta Velocidad: Más Allá de lo Básico

This talk covers the latest features in Chrome DevTools, including network tab analysis, performance tab optimization, and user flows. It discusses optimizing HTTP requests with fetch priority to improve loading time. The performance tab provides insights on frame drops, long tasks, and the importance of minimizing total blocking time. The talk also highlights the optimization of page rendering and introduces user flows in Chrome DevTools.

Knowing how to run performance tests on your web application properly is one thing, and putting those metrics to good use is another. And both these aspects are crucial to the overall success of your performance optimization efforts. However, it can be quite an endeavor at times for it means you need to have a precise understanding of all the ins and outs of both performance data and performance tooling. This talk will shed light on how to overcome this challenge and walk you through the pitfalls and tricks of the trade of Chrome DevTools, providing you with a complete roadmap for performance analysis and optimization.

High-Speed Web Applications: Beyond the Basics

Michael Hladky

El sistema operativo permite controlar diferentes dispositivos utilizando el protocolo Human Interface Device desde hace mucho tiempo. Con WebHID API puedes hacer lo mismo directamente desde el navegador. Hablemos sobre las características y limitaciones del protocolo. Intentaremos conectar algunos dispositivos al portátil y controlarlos con JavaScript.

WebHID API: Control Everything via USB

Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.

Operational System allows controlling different devices using Human Interface Device protocol for a long time. With WebHID API you can do the same right from the browser. Let’s talk about the protocol features and limitations. We’ll try to connect some devices to the laptop and control them with JavaScript.

Nikita Dubko

Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!

Construye una sala de chat con Appwrite y React

AppRight is an open-source backend as a service that simplifies server setup and API design. It offers features like authentication, user management, database storage, cloud functions, and real-time image manipulation. The AppRight dashboard is customizable and can be used to manage the backend using its API. The workshop focuses on building a chat app using AppRight's backend services and frontend frameworks like React and Chakra UI.

API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!

Build a chat room with Appwrite and React

Wess Cope

¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.

Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure

The Workshop covered topics such as Nuxt3, Azure Static Web Apps, and Azure Functions. The participants created an insect encyclopedia-like application called Bucklopedia and deployed it to Azure. They also added styling, navigation, and functionality to the application. The workshop highlighted the ease of setting up a full-fledged API with Azure Functions and concluded with a successful deployment of the website.

We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.

Going on an adventure with Nuxt 3, Motion UI and Azure

Melanie de Leeuw

La expansión del tamaño y la complejidad de los datos, la adopción más amplia de ML, así como las altas expectativas puestas en las aplicaciones web modernas, exigen cada vez más potencia de cálculo. Aprenda cómo se pueden utilizar las bibliotecas de ciencia de datos RAPIDS más allá de los cuadernos, con servicios web acelerados por GPU en Node.js. Desde la ETL hasta las visualizaciones en tiempo real renderizadas en el lado del servidor, el proyecto experimental Node RAPIDS está desarrollando un amplio conjunto de módulos capaces de ejecutarse en escritorios locales e instancias de nube multi-GPU. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

Aceleración de GPU para servicios web y visualización en Node.js con RAPIDS

Welcome to GPU Accelerating Node.js Web Services and Visualization with Rapids. Rapids aims to bring high-performance data science capabilities to Node.js, providing a streamlined API to the Rapids platform without the need to learn a new language or environment. GPU acceleration in Node.js enables performance optimization and memory access without changing existing code. The demos showcase the power and speed of GPUs and rapids in ETL data processing, graph visualization, and point cloud interaction. Future plans include expanding the library, improving developer UX, and exploring native Windows support.

The expansion of data size and complexity, broader adoption of ML, as well as the high expectations put on modern web apps all demand increasing compute power. Learn how the RAPIDS data science libraries can be used beyond notebooks, with GPU accelerated Node.js web services. From ETL to server side rendered streaming visualizations, the experimental Node RAPIDS project is developing a broad set of modules able to run across local desktops and multi-GPU cloud instances. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

GPU Accelerating Node.js Web Services and Visualization with RAPIDS

Allan Enemark

La historia de la web se puede dividir en saltos evolutivos en el desarrollo. La era de los scripts en línea, la era de jQuery, la era de las SPAs, la era de JAMStack...Ahora estamos entrando en la siguiente etapa que ha sido cuidadosamente preparada en los últimos años. Permíteme invitarte al mundo de las soluciones modernas de monorepo y compartir contigo los beneficios que obtendrás al usarlas en proyectos de cualquier tamaño y configuración. Es hora de automatizar esas tareas de boilerplate y reducir los cuellos de botella para que puedas centrarte en lo que realmente importa.¡Prepárate para el próximo salto! ¡Bienvenido a la era de los monorepos!

La Era de los Monorepos

Today's Talk is about the world of monorepos, their history, benefits, and features. Monorepos address challenges in web development, such as slow build processes and unstable connections on mobile devices. Collocation in monorepos enables easy sharing of functions and components among projects. Speed and efficiency in monorepos are achieved through collocation, dependency graphs, and task orchestration. Monorepo tools like Learnr offer features such as caching and distributed task execution. Monorepos provide code sharing, consistent tooling, and automated migration, resulting in a 10x developer experience.

The history of the web can be divided into evolutionary development leaps. The age of inline scripts, the age of jQuery, the age of SPAs, the age of JAMStack...We are now entering the next stage that has been carefully prepared in the past few years. Let me invite you to the world of modern monorepo solutions and share with you the benefits you will reap by using them in every project size and setup. It's time you automate those boilerplate tasks and reduce the bottlenecks so you can focus on what truly matters.Get ready for the next leap! Welcome to the age of monorepos!

The Age of Monorepos

Miroslav Jonas

La accesibilidad ha sido el patito feo del desarrollo web durante mucho tiempo. A menudo me preguntan: "¿cuándo deberías probar la accesibilidad en tus aplicaciones?" Mi respuesta es simple: "¡desde el principio!". Independientemente del framework considerado - React, Svelte, Vue, YourOwn™️ - como desarrolladores, estamos en una posición privilegiada para ayudar al patito feo a convertirse en un hermoso cisne. ¿Cómo? Sumergiéndonos en el estanque y aprovechando el poder de las APIs de Javascript para construir los componentes adecuados para nuestras aplicaciones web. ¿Y cómo puedes saber si los estás construyendo correctamente? Combinando el Desarrollo Dirigido por Pruebas con la familia de bibliotecas de pruebas. ¿Listo para convertir tus aplicaciones web en cisnes?

a11y y TDD: Una Combinación Perfecta

This Talk explores the intersection of accessibility and test-driven development (TDD) in software development. TDD is a process that involves writing tests before writing production code, providing a safety net for code changes. The Talk demonstrates how to apply TDD principles to real-life examples, such as filling out a form, and emphasizes the importance of user-centric testing. By using atomic design principles, code can be organized in a clean and easy way. The Talk also discusses the use of labels and test IDs in tests for improved accessibility.

Accessibility has been web development's ugly duckling for quite some time now. I often get asked, "when should you test for a11y in your apps?" My answer is simple, "right from the start!". Regardless of the framework considered - React, Svelte, Vue, YourOwn™️ - as developers we are in a privileged position to help the ugly duckling grow into a beautiful swan. How? By diving deep into the pond and harnessing the power of Javascript APIs to build the right components for your web apps. And how can do you know you are building them right? By pairing Test Driven Development with the Testing Library family. Ready to grow your web apps into swans?

a11y and TDD: A Perfect Match

Rita Castro

Descubre los Micro Frontends con Module Federation. Aprende sobre los beneficios y desafíos para que puedas decidir si los Micro Frontends son adecuados para tu organización.

¿Es Module Federation adecuado para ti?

This workshop on micro-frontends covers topics like dependencies, communication between federated modules, team organizations, and code sharing. It emphasizes the benefits of module federation and micro-frontends in enabling continuous operation and collaboration. The workshop provides practical examples and discusses the challenges of managing breaking changes and handling conflicts. It also explores the use of React as a view rendering library and the importance of sharing data and controlling communication between feature apps.

Discover Micro Frontends with Module Federation. Learn about the benefits and pitfalls so you can decide whether Micro Frontends are a good fit for your organization.

Is Module Federation Right for You?

Grgur Grisogono

Node.js es genial: fácil de desarrollar, eficiente, fácil de escalar. Pero hay tareas que no son tan adecuadas para él, como cálculos pesados o procesamiento de datos. ¡Únete a mí y aprende cómo puedes incorporar Rust y WebAssembly en Node y JavaScript y llevar tu rendimiento al siguiente nivel!

🚀 Potencia tu NodeJS con Rust

In this Talk, Dmitry Kudravtsev discusses how to supercharge JavaScript and Node.js using Rust. He introduces NEON, an open-source library for integrating Rust and JavaScript, and explains how to use it to export Rust functions to JavaScript. Dmitry also explores the performance benefits of using native modules written in Rust and WebAssembly. He compares the two approaches and highlights the faster performance of Rust native modules. He concludes by recommending WebAssembly for its ergonomics and portability, while suggesting native modules for extending Node.js with performance code.

Node.js is great - easy to develop, performant, easy to scale. But there are tasks that are less suited for it - heavy computations or data processing. Join me and learn how you can incorporate Rust as well as WebAssembly into Node and JavaScript and take your performance to the next level!

🚀 Supercharge your NodeJS with Rust

Dmitry Kudryavtsev

¿Cuántas veces has dicho o escuchado 'esta es lógica de negocio, no debería estar aquí'?En este masterclass, crearemos una aplicación frontend moderna utilizando patrones antiguos y aprenderás cómo construir aplicaciones que tengan una interfaz de usuario y servicios desacoplados.Comenzaremos con una aplicación React que tiene toda su lógica en la interfaz de usuario. Luego, paso a paso, extraeremos las reglas y operaciones para alcanzar ese punto óptimo de independencia.

¿Deberíamos tener lógica de negocio en la interfaz de usuario?

The Workshop focused on developing a quiz game about the TV show 'Friends' using React and the Meet dependency. It emphasized the importance of separating UI and business logic, and implementing a layered architecture. The workshop also covered topics such as event handling, tracking, and audio integration. The use of typed events and the challenges of implementing game features like a lobby and character animations were discussed. Overall, the workshop provided valuable insights into software development best practices and performance optimization.

How many times did you say or hear “this is business logic, it should not be here”?In this workshop, we will create a modern frontend application using old patterns and you will learn how to build apps that have decoupled UI and services.We will start with a React application that has its whole logic in the UI. Then step by step we will extract the rules and operations to hit that sweet spot of independence.

Should we have business logic in the UI?

Samuel Pinto

Aprende las formas de la <a href="https://clinicjs.org/">suite de herramientas clinic</a>, que te ayudan a detectar problemas de rendimiento en tus aplicaciones Node.js. Este masterclass te guiará a través de varios ejemplos y te proporcionará los conocimientos necesarios para hacer pruebas de rendimiento y solucionar problemas de E/S y del bucle de eventos.

El Masterclass de Clinic.js

This Workshop focuses on using Clinic, a suite of tools for diagnosing performance issues in applications. It covers tools like clinic doctor, clinic flame, and clinic bubble prof. The workshop demonstrates how to measure server speed, diagnose performance issues, analyze MongoDB performance, and optimize code for better performance. It also emphasizes the importance of establishing a baseline, understanding user perception of latency, and using tools like Clinic Flame and BubbleProf for performance analysis.

Learn the ways of the <a href="https://clinicjs.org/">clinic suite of tools</a>, which help you detect performance issues in your Node.js applications. This workshop walks you through a number of examples, and the knowledge required to do benchmarking and debug I/O and Event Loop issues.

The Clinic.js Workshop

Rafael Gonzaga

La programación de software es naturalmente divertida, pero hacer algo físico para interactuar con el mundo en el que vives es como magia. Es aún más divertido cuando puedes reutilizar tus conocimientos y JavaScript para hacerlo. Esta charla presentará casos de uso reales de automatización de una casa utilizando JavaScript en lugar de utilizar C++ como de costumbre, y Espruino como herramientas de desarrollo y microcontroladores como Arduino, ESP8266, RaspberryPI y NodeRed para controlar luces, puertas, armarios y mucho más.

Cómo he estado utilizando JavaScript para automatizar mi casa

The Talk covers various experiments with JavaScript and C++, including controlling lights and creating a car control system. The speaker shares his experiences with home automation and the challenges of hiding wires. He explores using JavaScript with Esperino for face recognition and discusses the benefits and limitations of the platform. The Talk concludes with suggestions for using JavaScript in hardware projects and learning opportunities.

Software Programming is naturally fun but making something physical, to interact with the world that you live in, is like magic. Is even funnier when you can reuse your knowledge and JavaScript to do it. This talk will present real use cases of automating a house using JavaScript, Instead of using C++ as usual, and Espruino as dev tools and Microcontrollers such as Arduino, ESP8266, RaspberryPI, and NodeRed to control lights, doors, lockers, and much more.

How I've been Using JavaScript to Automate my House

Erick Wendel

Si tienes un instrumento de música electrónica fabricado en las últimas 3 décadas, es muy probable que admita el protocolo MIDI. ¿Qué tal si te digo que es posible interactuar con tu keytar o máquina de ritmos directamente desde tu amado navegador? Te volverías loco, ¿verdad? Bueno, prepárate para hacerlo...Con soporte incorporado en Chrome, Firefox y Opera, esta posibilidad ahora es una realidad. Esta charla presentará a la audiencia la API Web MIDI y mi propia biblioteca WEBMIDI.js para que puedas empezar a rockear rápidamente.¡Desarrolladores web, preparen sus sintetizadores!

¡MIDI en el Navegador... ¡Vamos a Rockear la Web!

MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.

If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!

MIDI in the Browser... Let's Rock the Web!

Jean-Philippe Côté

El desarrollo de aplicaciones web ha tenido muchos cambios a lo largo de la vida de la web. Desde aplicaciones del lado del servidor con un toque de JavaScript hasta aplicaciones de una sola página construidas completamente con JavaScript. Ahora estamos volviendo a donde muchos nuevos frameworks web se construyen primero de forma estática, con JavaScript agregado según sea necesario. Esta charla cubre la construcción de aplicaciones web con JavaScript a través de la lente de Astro, un generador de sitios estáticos donde la elección del framework de JavaScript es única para ti. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

La próxima ola de frameworks web es BYOJS

The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.

Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

The Next Wave of Web Frameworks is BYOJS

Brandon Roberts

La omnipresencia del software de código abierto y la baja barrera de entrada en npmjs están sirviendo como catalizador para los incidentes de seguridad en la cadena de suministro que están impactando continuamente a los desarrolladores de JavaScript. ¿Qué podemos hacer para protegernos?

Controles de seguridad en la cadena de suministro de JavaScript

This talk discusses the security challenges in the JavaScript ecosystem, including supply chain security, lock file tampering, and arbitrary command execution. It highlights the risks of blind upgrades and hidden comments in code. The talk also covers dependency confusion attacks and the importance of establishing a threat model for node applications.

The omnipresence of open-source software and low-barrier of entry on npmjs are serving as a catalyst for supply chain security incidents that are continuously impacting JavaScript developers. What can we do to protect ourselves?

JSNation 2022

The main JavaScript conference of the year

Taz Singh

Lera

Sophie Kolbe

Ioana Sauleac

Peter-Paul Koch

Lera

Daria Shabala

Stephen Cooper

Batuhan NARCI

David Pugh

Harshil Agrawal

Zoltan Kochan

Mark Dalgleish

Nikolay Advolodkin

Lukas

Ricardo Machado

Barbara Ferreira

Petar Kuzmanov

Christian Bayer

Demezhan Marikov

Alex Hayton

Ian Sutherland

Aman Beg

Denis Radin

Pieter BOERBoom

Darko Raguž

Rishi Narang

Vitor Barbosa

Hannes

Simon Golms

Total attendees