JSNation US 2024

Media streaming is ubiquitous... We listen to our favourite songs while running, or sitting on the train. We are absorbed by audiobooks written by our favourite authors. We watch TV series or movies with our family and friends. Media streaming is everywhere.. Nowadays, with the increasing number of devices and content, providers must keep pace and provide the most efficient and smooth playback to all users, no matter where they are, no matter what devices they use. They also have to stay compliant, so that no content can be distributed without producers' consent and knowledge.
In this talk, we are going to learn how to stream media on the Web. We will learn about the common technologies such as segmentation, adaptive bitrate (ABR) and DASH protocol used to provide an efficient and smooth playback. We will look into details of how decrypting licensed content works thanks to Encrypted Media Extensions (EME). Last but not least, we will see all of these in action, during the demo, at the end of the presentation.
If you are interested in learning how the world's biggest streaming companies stream their content, join me for this session.

When was the last time you peeked inside the dist folder to inspect the JavaScript generated by your framework or bundler?
The reality of modern JavaScript development with it's reliance of bundlers, frameworks and compilers is that the JavaScript you write is not the same as the JavaScript that runs on your browser. Tools like TypeScript and compilers like Babel allow you to support a variety of older browsers, environments, and runtimes while writing modern, maintainable code, but it can be hard to tell what is going on in that final bundle. It's crucial to understand and optimize the generated JavaScript produced during your build process so that you maximize performance.
Join Abhijeet Prasad, maintainer of Sentry's open source error and performance monitoring JavaScript SDKs as he walks through the performance and bundle size implications of generated JavaScript and techniques you can use to optimize it. He'll walk through transpilation nuances, tree-shaking, minification, and loading strategies so you can understand how to deliver better experiences for your users.

A cryptic videotape haunting its viewers, a shape-shifting entity haunting a research station, or an astronaut unknowingly carrying an alien onto a spaceship —do these scenarios sound familiar? These horror movie plots share similarities with scenarios in web security you have already encountered.Join me on a chilling journey through web security as we explore the most common vulnerabilities through the lens of horror movies. From the sinister injection flaws reminiscent of "Alien" to the terrifying specter of broken authentication akin to "Unfriended". But don't worry, we'll also shed light on solutions in web development, turning these security nightmares into tales of triumph. If you dare, join us and learn how to conquer the darkness invited by your web applications.

Micro Frontends are everywhere - on the client, on the server, and on the edge. Quite often the scalability of micro frontends is determined by the freedom and independence of the teams using them. This can lead to problems as potentially arbitrary code enters the applications at runtime asking the question of what potential vulnerabilities exist and how to mitigate them.
In this session, you'll hear about some of the most frequent vulnerabilities that appear in real-world projects using micro frontends. You'll see what you can do to get rid of them and avoid mistakes leading to security issues. The quest for this talk is to deliver at speed and scale, but do it without compromises on security.

Retrieval augmented generation (RAG) provides large language models with up to date information and helps them hallucinate less. But how does it all work beneath the covers?
In this live coding session we'll build the components of a RAG system from scratch in JavaScript. (Aside from the LLM, there probably isn't time for that!) By building our own, we'll understand vectorisation, similarity search, and the role of embedding models and vector databases. We'll then plug it all together to see our augmented bot in action.
You'll get a good grounding in the components of successful chatbots and why they work.

Everybody loves talking about Rewriting in Rust, but rewrites are hard. It’s far too easy to fall into second system effect, shipping delays, and end up losing all your users. How can you move to Rust while still shipping features and keeping your users happy? Easy, instead of rewriting, port! In this talk, we’ll go over how we ported Turborepo from Go to Rust using three different strategies: a Rust shim that wrapped the existing Go code; a Rust-Go-Rust sandwich to incrementally port dependencies; and finally a completely parallel Rust implementation. We’ll talk about why we chose these strategies, how we went about implementing them, and how we shipped them to users.

This talk explores the relationship between personal career development and contributions to open-source projects. We'll look at the skills developers can level up, the visibility they can gain in the tech community, and the doors that can open through regular contributions to open source. Attendees will leave with tipson how to start contributing, how to choose projects that align with your career goals, and how to document your contributions for career growth.

Since JavaScript releases new features every year now, you might miss some of the cool updates to built-in objects like Array and Intl. We'll explore new methods and objects like Array.fromAsync() and Intl.Segmenter, and show you how to navigate browser support for new features so you can remove external libraries or transpiling steps. 

In today's fast-paced digital world, real-time event-driven applications are at the heart of delivering dynamic and responsive user experiences. This session will delve into the technical intricacies and immense potential of building such applications using JavaScript.

Together, we will explore the core concepts of event-driven architecture (EDA) and its implementation in JavaScript. Key topics will include a technical overview of the event loop and non-blocking I/O, WebSockets, and Message Brokers.

We will further our journey with a look at how to apply these technologies into different use cases such as live data feeds, and collaborative applications while ensuring low latency and fault tolerance.

Implementing autocomplete in a web app is actually quite tricky if you want to do it right. A good implementation includes de-bouncing input, loading / error state, aborting requests in flight and more!
Solving these problems across various front-end frameworks presents unique problems and interesting solutions.
In this talk I will showcase the 1000 (that's 8 in binary 😉) ways I implemented this across React, Solid, Preact, Svelte, Vue, Angular, HTMX and Vanilla JS. I will compare and contrast these solutions, showcase some of the common patterns that emerged and also highlight frameworks that make this easier than others.
Attendees of this talk will walk away with new tricks to try in their favorite framework as well as perspective on how things are done in the current front-end framework landscape.

Whether you're a seasoned developer or new to AI, this hands-on guide will provide you with the tools and knowledge to enhance your app architecture. We'll cover the basics of using AI functions and Retrieval-Augmented Generation (RAG) within your existing tech stack. Learn how to add AI capabilities to make your applications smarter and more efficient, and gain practical insights into best practices and tips for optimizing your projects. Join us to see how integrating AI can transform your app development and improve user experience.

Virtual scrolling is a clever way to reduce rendering overhead, and is especially helpful as the complexity of websites increases. Although there are many plug-and-play libraries which support virtual scrolling in various frameworks, rolling your own is surprisingly easy. In addition, this allows one to maximally optimize each viewport for its content, unlocking additional performance savings.

In this talk, you will learn how to create a flexible virtual scrolling viewport from scratch, and make it performant using concepts from functional programming. We will be following an implementation of a virtual scrolling viewport using web components from start to finish, including variable element heights, skeletons, asynchronous child component rendering. We will then optimize it using memoization, wrapping more-performant imperative constructs in a functional layer, and using element recycling to significantly reduce render churn when using stateless child components.

Finally, we will touch on the state of the art in virtual DOM rendering, and how this approach compares to the use of the new `content-visibility` CSS property.