Name: JSNation US 2024
Start: 2024-11-18T14:00:00.000Z
End: 2024-11-21T22:30:00.000Z

Join the Nation`s space program! The conference to get updates from the authors and core teams presenting on the West largest dome screen.

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.

JSNation US 2024

FocusReactive

Hygraph

Storyblok

Bloomberg

Squid

Storyblok is a CMS that works with all modern frameworks and platforms so you are completely free to choose the best option for your project. Kickstart a new CMS project with your favorite technology in a matter of minutes, and for free.

FocusReactive will help you architect, build, and lead technically advanced websites focusing on performance and scalability. Partners and <a href="https://focusreactive.com/next-js-expert-agency/" target="_blank" rel="noopener noreferrer">experts in Next.js/Vercel</a>, Storyblok, Sanity, Contentful, Shopify Hydrogen, and other Headless eCommerce platforms.Whether you seek <a href="https://focusreactive.com/headless-cms-expert-agency/" target="_blank" rel="noopener noreferrer">expert Headless CMS agency</a> services or an expert agency with deep experience with platforms like Headless <a href="https://focusreactive.com/react-cms/" target="_blank" rel="noopener noreferrer">React CMS</a> &amp; <a href="https://focusreactive.com/nextjs-cms/" target="_blank" rel="noopener noreferrer">NextJS CMS</a>, FocusReactive is the one to help you scale.

As a special perk, we're offering a complimentary <a href="https://focusreactive.com/nextjs-performance-audit/" target="_blank" rel="noopener noreferrer">NextJS audit</a> designed to pinpoint areas for optimization, improve performance, and ensure you're following the best practices for SEO and security.&nbsp; Our expert team will closely examine your implementation, provide actionable insights, and help you leverage the full power of NextJS.

Free NextJS Performance and SEO Best Practices Audit

Next.js, Headless CMS and eCommerce expert agency

Wes Bos

Addy Osmani

Rich Harris

Miško Hevery

Carson Gross

Debbie O'Brien

Jessica Sachs

Building Bridges: How Open Source Contributions Enhance Your Web Development Career

Pachi Parra

Build RAG from Scratch

Phil Nash

Tero Piirainen

From the Crypt to the Code: Web Security Explored Through Horror Movies

Ramona Schwering

Micro Frontends and Security

Florian Rappl

Porting Turborepo to Rust

Nicholas Yang

The Performance Impact of Generated JavaScript

Abhijeet Prasad

Modern & Secure Adaptive Streaming on the Web

Katarzyna Dusza

Unlocking the Potential of Real-Time Event-Driven Applications With JavaScript

Jarred Utt

What's New in Vite 6

Dominik Göpel

Modern JavaScript: Leveling Up Arrays and Intl

Mariko Kosaka

1000 Ways to Autocomplete

CJ Reynolds

Integrating AI into Your App Architecture

Yossi Kahlon

Fast, Flexible Virtual Scrolling With Functional Programming

Adam Niederer

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.

Get ready to take your front-end development skills to the next level with our hands-on workshop. In this four-hour session, you will learn the ins and outs of test-driven development using Playwright, a powerful tool that will revolutionize your web development workflow. Are you tired of spending endless hours debugging issues in your web applications? Dive deep into writing tests before writing code, ensuring top-notch quality and functionality in your web applications. Say goodbye to manual testing and hello to automated tests that catch bugs early in the development process. Join us for an interactive and fun workshop where you'll gain the confidence to elevate your front-end development game and build web applications like a pro. Don't let common pain points like inconsistent UI behavior or regression issues slow you down - learn how to effectively use Playwright to avoid these pitfalls and streamline your development process. Don't miss this opportunity to unlock the full potential of test-driven development with Playwright – sign up now and get ready to uplevel your skills!

Building Robust Web Applications with Test-Driven Development and Playwright

Maurice de Beijer

In this hands-on workshop, you will be equipped with the tools to effectively test the security of web applications. This course is designed for beginners as well as those already familiar with web application security testing who wish to expand their knowledge. In a world where websites play an increasingly central role, ensuring the security of these technologies is crucial. Understanding the attacker's perspective and knowing the appropriate defense mechanisms have become essential skills for IT professionals. This workshop, led by the renowned trainer Gregor Biswanger, will guide you through the use of industry-standard pentesting tools such as Burp Suite, OWASP ZAP, and the professional pentesting framework Metasploit. You will learn how to identify and exploit common vulnerabilities in web applications. Through practical exercises and challenges, you will be able to put your theoretical knowledge into practice and expand it. In this course, you will acquire the fundamental skills necessary to protect your websites from attacks and enhance the security of your systems. Join us with your laptop and actively participate in this practical and engaging workshop.

JSNation US 2024

JS stars in the US biggest planetarium