JSNation 2024

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

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

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

The Oxidation Compiler project is creating a collection of high-performance JavaScript and TypeScript tools written in Rust. It offers fundamental components like parsers and resolvers for developers to utilize, along with CLI applications such as linters and formatters. This talk will introduce the project and explore the impact of a strong focus on performance engineering.

Discover AWS's experimental JavaScript runtime, LLRT (Low Latency Runtime), designed specifically to address the growing demand for fast and efficient Serverless applications.

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

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

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

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

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

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

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

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

The introduction of ChatGPT, Whisper API, and its orchestration tool such as Langchain, Semantic Kernel brings in a lot of hype over AI and what we can build with AI, such as a document assistant. But are we ready to scale our AI project to meet further requirements and broader scenarios, such as handing multiple processes within a document question and answer flow, or offering industry-specific answers with the existing codebase? How can we, as developers, leverage these tools to offer a better experience in documentation for developers as our users? Join my talk and let's find out.

As a DJ, I use many techniques to mix and create new sounds that get peoples’ hands in the air. In this talk I’ll describe AI algorithms based on Neural Networks which have the ability to break down music into elements. I’ll cover how our brain differentiate between dozens of different sound signals when we listen to music. Can we instruct AI to do so? The cool part: live DJing on stage using AI algorithms.

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

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

Monorepos have proven to be handy when it comes to developing and publishing related NPM packages. They offer a unified development experience while still enabling the distribution of more fine-grained packages for easy consumption. In fact, many popular OSS libraries follow such an approach such as Vue, Angular, React, Vite, Tanstack and RxJS (just to name a few). However, the publishing process within monorepos introduces unique challenges, particularly when dealing with multiple interdependent packages. And yes, there are solutions out there for versioning and releasing packages, but they often fall short when it comes to monorepos. Nx recently introduced a "release" command tailored for these scenarios.In my talk, I'll explore how we can setup a publishing process, covering versioning, changelog generation, and releasing to platforms like NPM and GitHub (including provenance support). Join me to discover more.

In today's world, prioritizing your application's security is crucial. All the data stored in it should be kept safe and protected, just like the inhabitants of a fortress that rely on high walls for their defense. However, history and movies have shown that even the most robust walls can't withstand an attack if weak points can be exploited. This is also true for VueJS applications.
Join me for a concise, practical session on fortifying your Vue.js apps against security threats and implementing best practices.

Earning money for your content on the web has historically been a challenging endeavor, requiring a substantial user base and navigating complex payment processes. Ads, as a primary income source for content platforms, raise privacy concerns for creators and consumers alike.
However, the new W3C Standard proposal, Web Monetization, leverages the Interledger Protocol to empower developers, especially JavaScript enthusiasts like you, to monetize your work seamlessly. In this talk, we delve into the world of Web Monetization, a friendly JavaScript API poised to revolutionize how the web can be monetized. 
We explore open payments, microtransactions, and the Interledger protocol, unveiling a more efficient and inclusive path to monetize web content, ultimately paying the web forward. Learn how to create payment pointers and seamlessly receive payments in your preferred currency, breaking down barriers and connecting with a global audience.
Join me on this journey as we navigate the landscape of Web Monetization, empowering developers to harness its capabilities and redefine the process of building applications that are inherently web monetized.

Do you know that meme of Homer Simpson trying to hide in the bushes? That's how I would feel when my coworkers would discuss asymmetric encryption, certificate signing, salting, and crazy-sounding acronyms like PBKDF2.After years of trying to ignore this problem, I finally decided to do something about it. But rather than digging into the subject via textbooks and pseudo-code, I decided to research the massive amount of functionality that is offered by Node.js' built-in `crypto` module. Then I worked my way backwards to understand what each function does, what underling security best-practice it's based on, and when it's appropriate to use it.So if you're like me then step out of the bushes, and join me in this talk to learn the fundamentals of protecting information in a practical way with Node.js.

This talk is a case study on using WebAssembly to power sandbox.bio, a platform for command-line tutorials for bioinformatics. We'll focus on how WebAssembly helps us provide interactive tutorials, and how it makes our application scalable and cost-effective by running computations on each user's browser instead of our servers. We'll discuss alternative architectures, their pros & cons, and lessons learned using WebAssembly.

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

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

We often assume that everyone has a good internet connection and hardware with high specifications. While this might be true in some regions, it is not the case worldwide. I want to draw attention to Africa, where many countries struggle with poor 3G connections that are costly, depending on the amount of data consumed. This is due to the continent's limited infrastructure, leading to a reliance on mobile connections. 
Given these circumstances, efficient data usage with a good web performance becomes a priority. So our session will focus on the challenges faced by African users and developers, and how downloading large amounts of JavaScript is exacerbating data consumption and performance issues. We will explore how existing frameworks tried to solve the problem and how Qwik did with its innovative approach to resumability, presents a transformative solution to these challenges. Unlike traditional SPAs, Qwik's resumability drastically reduces the initial JavaScript payload, enabling applications to become interactive more quickly, even on slow connections.

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

In this talk, Kevin Hou will explain how Codeium is working to unlock a 10x productivity gain for all developers. Today, Codeium's in-IDE autocomplete and chat help hundreds of thousands of developers write almost half of their committed code. Kevin will showcase the technical challenges behind building Codeium and how we've trained our own AI models to make full file edits, search across millions of lines of code, and generate code faster than any other AI tool on the market.

Performance plays a crucial role in ensuring the responsiveness and functionalities of an application. A deeper knowledge on prefetching, preemptive search, faster caching and frontend optimisations and many other performance initiatives will be learnt. 

With Emanuele, lead maintainer of Biome, we will explore the internals of Biome's analyzer, which fuels its linter. You'll learn how lint rules are made, what tools the analyzer can give and how to use them.

JSR, a modern package registry for JavaScript and TypeScript, is designed to be fast, simple, reliable, and work across many JavaScript runtimes. Come learn how using JSR can simplify your developer experience.

Have you ever wondered how screen readers interact with browsers to provide accessible experiences? You may have heard terms like "accessibility APIs", “accessibility tree” or "accessible name computation". But what do they refer to, really? In this talk, we will demystify the process in which browsers generate and update the accessibility tree. We will look into its key elements, and how HTML elements and ARIA attributes map into it. Lastly, we will explore how web developers can leverage it for effective debugging. Let's dive into the inner workings of screen readers-browsers interactions!

Are you being asked to create more frequent release with higher quality, but the team in the other office is constantly breaking your features? Microfrontends might be the answer for you! During this flight, we will fly over the pros and cons of microservices and frontend architectures, navigate the turbulent airs of migrating products to new architecture, and finally land at our destination of scalable software.

gsplat.js is an easy-to-use, general-purpose, open-source library for gaussian splatting. This talk will go over how it works, what it's being used for, and plans for the future.

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

AI chatbots are closest to a human conversation model which makes communication effortless and accurate. It can be powerful tool for translating smaller chunks of text presented in common languages. Learn how compelling chatbot prompts can revolutionize your communication and translate hundreds of documents enriched with HTML text formatting and code blocks in one chat.

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

Breathe a sigh of relief — you don’t need to learn Rust to use WASM! WebAssembly has its own human readable language: Web Assembly Text format (WAT), and it’s surprisingly easy to use. In this talk we’ll discuss using WAT as a first-class language for enhancing JavaScript performance.

Embark on a journey beyond console logs! This session unveils the power of observability in the world of JavaScript, offering practical insights and real-world examples to supercharge your development workflow. From pinpointing elusive bugs to optimizing user experiences, discover the art of making your code transparent, traceable, and resilient. Elevate your JavaScript craftsmanship with the mastery of observability.
JavaScript development is evolving, and so should your approach to understanding and optimizing code. This session arms you with the knowledge and tools needed to stay ahead in the ever-changing landscape of web development.

Like it or not, those days lots of things around us run on JavaScript. Web, mobile and desktop apps, TVs, fridges and space rockets - you name it! I will talk about how to put this to good use by utilizing the forbidden craft of "disassembling". We'll also talk about not knowing things, trusting facts and becoming a better engineer.

As technology continues to advance at an unprecedented rate, it is becoming increasingly important for those in the tech industry to understand the ethical implications of their work. The decisions that engineers and tech leads make can have far-reaching consequences for individuals, communities, and even entire societies. Without a solid understanding of computer ethics, it is all too easy for technology to be developed and deployed in ways that harm rather than help.
In this talk, we will discuss the importance of computer ethics in  tech and why it is crucial that engineers and tech leads receive training in this area. We will cover a range of topics, including ethical considerations surrounding data collection and privacy, algorithmic bias and fairness, and the ethical implications of emerging technologies such as AI and robotics. Drawing on both my own experience as a software engineer and relevant case studies, we will review examples of how ethical considerations have played out in real-world scenarios. Finally, we will discuss how engineers and tech leads can integrate ethical considerations into their work.  
Computer ethics is an important and relevant topic that deserves more attention. As technology continues to evolve and become more intertwined with our daily lives, it is essential that we ensure that those responsible for designing and developing these technologies understand the ramifications of their work. 
In the fast-evolving tech world, grasping computer ethics is vital. Tech choices impact people and society profoundly. This talk stresses ethics training for engineers, covering data privacy, bias, AI, and real-world cases. It's essential as tech becomes integral to daily life.

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

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

Dive into the exciting world of WebXR in my talk about bringing Virtual Reality (VR) and Augmented Reality (AR) directly to web browsers. As a developer, I've seen how technology can spark creativity. 
In this session, I'll introduce the A-Frame framework, showing how easy it is to create amazing and interactive experiences on the web. 
This isn't just a tutorial; it's an invitation for you to break away from the ordinary and explore the endless possibilities of making engaging web applications.

Which technology stack to choose? What to do to get rid of legacy applications? And how the heck can we structure our teams to support our efforts? Let's talk about the big problems that can arise during a large-scale modernization effort, offering solutions and preventative measures to ensure a successful migration.
We delve into the intricacies of transitioning from a hodgepodge of diverse projects and technologies to a more streamlined architecture. Let's explore leveraging Domain-Driven Design (DDD) to structure teams, their responsibilities, and project boundaries, creating a more efficient and effective tech environment.