Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Unleash the full potential of your website with Partytown! Say goodbye to sluggish pages and low Lighthouse scores caused by clunky third-party scripts. With Partytown, your main thread is dedicated solely to your code, freeing it up to run smoother, faster, and more efficiently than ever before. Empower your website with lightning-fast performance by moving all non-critical scripts to a web worker, where they’ll run seamlessly in the background.

Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3.

In this talk, I'll explain React Query from a different perspective. After having maintained React Query for over two years and having answered many questions (often the same ones multiple times), I feel like there might be a fundamental understanding missing about the lib. I'll start with a quick introduction about my journey into open source and how I got to know React Query, followed by showing which mindset change is beneficial when working with React Query - how to "think in React Query". I'll have 3 major takeaways: 1) React Query is not a data fetching library It's an async state manager, we'll quickly talk about what makes a state manager, why React Query is one and what "async state" means.

A lot of recent talks at other conferences have talked about how to start using React and THREE.js to create 3D experiences on the web. In my career I've built several complex applications using those technologies, including a big Figma-like 3D editor, and I've learnt a lot of patterns and tricks on how to make it actually fast and scalable. Unfortunately, though, nobody is also talking about those tricks an what it really takes to build an rendering engine similar to the one that Figma uses.My goal with this talk is to give people an overview of the challenges that may arise when you try scaling your application, and what are some lesser known tricks to overcome them: instancing, memory usage reduction techniques, SDF-based text rendering, GPGPU and tree data structures. Everything of course done with Javascript, React and THREE.js.

With fetching libraries like TanStack Query, swr, or RTK Query becoming more widespread, some of the immediate “selling points” of GraphQL clients seem to be less unique - so it might be a good idea to take a step back and ask the question “is this even still relevant?”. And to already take the answer away - it is “yes”. The unique selling points of GraphQL go far beyond having a smooth data fetching experience by solving many inter-team and architectural problems. While it might not always be immediately evident as a benefit for us as Frontend Developers,  GraphQL gives us a lot of freedom and makes us less dependent on backend teams implementing a Backend-for-the-frontend for us.

Libraries like Tailwind became quite popular and their utility-first—aka atomic classes—approach was an interesting paradigm shift in CSS. Many developers love it, and it's understandable why.However, we tend to forget that the core of this technique isn't new. Way before Bootstrap, we all had our small CSS snippets copied from project to project with similar classes.In this session, we'll discuss the evolution of scalable CSS, walk through the limitations and drawbacks of Atomic CSS, and also figure out where this concept can be beneficial.

We'll start out by taking a look at Astro; What is Astro, why does it exist and what problems does it solve. How can we optimise our React application / components by using Astro? Let's do some live coding and start out exploring Astro in combination with React! Main talking points: - What is Astro - Astro integrations - React in Astro - Partial Hydration - Server Side Rendering vs Server Side Generation

- Background on why retro video archives need custom scaling - Implementing a WebGL video player canvas in React with custom hooks - Bundling WebGL shaders from separate files for GLSL syntax highlighting - Live Demonstration of applications for footage from retro video game consoles, VHS tapes, etc

In this talk, I will talk about how I joined the development of Zustand. It started with another library of mine, which is similar to Zustand. My involvement was from Zustand v3 and it's currently v4. Philosophy of Zustand is being small, and we improve it with keeping the philosophy.

We at Microsoft are rethinking the way we use ReactJS as frontend devs, traditional React UI Design patterns results in redundant code, making code maintainability cumbersome. By making UI Config driven we supercharged React components by making config file a single source of truth, The above approach made it easier to onboard new UI scenarios quickly and with minimal regression in the old UI Flows, resulting in a significant reduction in dev efforts, the best part is all the code was kept in Typescript only no XML or other declarative languages were used.

Last year, as part of my work at Bloomberg, I was tasked with building a Chrome Extension, and persuaded my team to let me build the extension in React instead of vanilla JavaScript. This had several advantages, such as making the code more maintainable and easier to understand, as well as enabling us to use a pre-existing component library for consistent styling across the company, reducing the amount of CSS code we had to write. In my presentation, I will show you a sample Chrome Extension for personal use that I built using React and Material UI that auto-responds to emails sent in Gmail and allows you to take notes regarding the conversation. I will also share steps to build your own Chrome Extension using React, and lessons learned along the way!

In this talk, we will be going over a number of common useful and best-practice-proven TypeScript patterns to use in React 18. This includes how to correctly type component properties, children and return types, using React's built-in types, typing contexts, and the usual enum rant (but constructively).

The talks explore various misleading patterns and concepts in React, that seem to be “common knowledge”, but which a lot (if not most) developers either get wrong or are just not aware of those. Some examples, covered in the talk (and more):* that “react component re-renders when its props change” (this is not true)* that wrapping a component in React.memo will prevent its re-render (not always true)* that use of Context causes re-renders and is bad for performance (not always true, sometimes Context can actually reduce the number of re-renders in the app)* that creating an element like this `const A = <Child />` is when the Child's render lifecycle is triggered (not true)

Have you ever imagined writing code without even touching the keyboard? In this talk, I'll show you how I wrote a React app with my voice. But more importantly, I'll demonstrate how this technology can developers with disabilities to write code with ease and efficiency. Together, we'll explore the ways in which voice-activated AI assistants can revolutionize the way we think about coding.

In this session, I will discuss our experiences in overcoming performance limitations while developing React components for web apps on low-end embedded devices such as Smart TVs. I will share actual application cases from the development of millions of webOS Smart TVs and show how we improved user input response and app launch time. The ideas and techniques shared will be beneficial to developers facing similar challenges.

While the technology goes further and further, web development tries to get closer to the user. CDNs and web servers are evolving, and they now offer us the possibility to execute server-side logic without depending on a unique data center located in a specific place in the world. Let’s present the concept of The Edge. We will see how it works, and we’ll talk about Edge Functions.

You've built a React Native app and now it's time to get it in the hands of your users. If you're used to web, dealing with mobile-specific deployment issues can be a struggle. There are native build hardware and config requirements, signing certificates, app store approvals, app versions, pushing updates, and more. You also have to consider all the tooling options -- do you manually deploy on your own, use a React Native-specific solution, or try to configure web CI/CD for mobile?

We know if we have the fundamental of JavaScript and React knowledge, we can build cross-platform apps. But how many of you have tried out? Learning once and shipping for several operating systems sounds so cool. Don’t you want to experience how it’s easy to transfer your JS & React knowledge and powerful built-in APIs to extend your dev skills?

Have you ever questioned whether Javascript is a viable alternative to Python or R for creating machine learning models? After all, a 2019 survey by Stack Overflow found that Javascript is the language that developers use the most. Given that machine learning models like neural networks require a lot of computational power and that javascript was not intended for high-speed computing, this approach seems unreasonable. But hold on, this not entirely true, as javascript libraries like Onnx.js and Tensorflow.js are here to save the day!

1. A brief history of web content management since 1996, with alternating code and visual tools:   - The “FTP” era: Code editors > FrontPage/Dreamweaver   - The “monolithic” era: CGI/ASP/PHP simple CMSs with gray tables > WordPress visual > WordPress with ACF   - The “current” era: Headless CMSs <> Visual tools like Wix and WebFlow2. Why now’s the time we need a new kind of CMS3. What is React Bricks4.

Why does Grafana use React for its frontend?How we leverage React’s features at GrafanaWhat are some pain points we have ran into with using React at GrafanaWhat are lessons learned from adopting React for the past 5+ years?

* intro to DB application architecture (gateway + backend, multi-module react app + component library, etc)* Deep dive into CI/CD pipeline to do component library build + publish, app deploys pre canary (branch, dev, staging, prod), Lambda@Edge role* Side  note - multi module applications, enabling the right level of modularity, and B2B SaaS vs B2C* First canary problem - run full FE regression against stable (release candidate) backend early and often - before FE release candidates are cut* Second canary problem - run pointed FE regression even earlier - before MRs are even merged* Third canary question - what does this look like in production? Once again, B2B SaaS vs B2C * End result - Canaries in the CloudFront!

In this talk, I want to show how we can use Zod to guarantee the type in a React Application at runtime. Environment variables, HTTP requests, forms and so on could create troubles in our applications, mainly if they contain unexpected types. Using Zod, we can create schemas to guarantee the types expected in our editor at runtime. In this way, we can react quickly when an environment variable misses or when someone changes the API contract without informing us.A small validation layer in our applications can prevent a bad user experience and notify us immediately, so we can fix the problem as soon as possible and mitigate the visualization of wrong data.

Tech is tiring. Whether you’re trying to stay upskilled on the latest JavaScript framework or wading through toxic work swamps, it feels like burnout is constantly looming on the horizon. Sabbaticals and leaves of absence (LOAs) are two benefits you could take advantage of to catch a much-needed (and overdue) extended break. I’ve taken both, one time to live abroad in France for 6 months and the other time to take the summer off for 10 weeks, both at different Fortune 500 companies and each time they moved my career forward, not backward.

Over the last few years, there has been a great focus on shifting tests left to earlier in the software development cycle. It's great that the emergence of trends such as e2e testing has enabled us to validate the user workflow earlier. However, they do not eliminate the need to monitor this workflow against a live production system. I have seen that the segregation of development and support teams leads to both teams using different tools to build similar automation that simply targets different environments of the same software.By joining forces, we can build automated scripts that can be used both for production monitoring and testing within CI.

Building products using Test Driven Development with React and Atomic Design has become my modus operandi over the years. Some products tend to grow in complexity and it is crucial to have a good workflow to keep them healthy and scalable. The time has come to add another player to the game - enter Micro-Frontends. This talk will share a practical example of this setup, some lessons learned and the bumps that were hit to get there.

Web development has changed significantly over the past 15 years, and we'll take a satirical look at how daunting it is for newcomers to get started nowadays. In doing so, we'll discuss what is necessary to build a full web application, and I will be going over most of the technology I personally like to use for that.

Machine learning is seen by many as the next step in artificial intelligence towards a new stage of human evolution. And thus helps us find new approaches to solving real-world problems. Phew... That sounds complex… And how is that supposed to be fun?

Join me in a thought-provoking discussion on Bringing Controversial Ideas to React.js, where we will explore some of the most debated topics in the React ecosystem. This talk delves into the concepts of mutability and observability in React and compares them to frameworks like Solid.js and Svelte. We will also discuss the debate on granular updates versus Reconciler and the potential of a plugin system to extend React applications, and the impact it could have on the React community. Attendees will gain a deeper understanding of React's challenges and controversies compared to other frameworks and how the community is addressing them.

Selena and Michael will take you on a roller coaster journey of how to get started and get the most out of pair programming. Live on stage they will switch from conversational overview straight into acting out various highs, lows, do’s and don’ts of pair-programming collaboration. Laughs and tears are guaranteed as the audience connect on the difficulties and ultimately the rewards that can be reaped from teamwork through effective pairing.

Ever wanted to earn money selling those cool npm packages that you created? This talk is about how to sell your library and earn a living out of your hard work.

Databases and transactional backends are the heartbeats of our everyday lives - they power nearly every transaction in the modern world, from booking airplane tickets to ordering food on Doordash. The status quo of powering these transactions today is building on top of a microservices-heavy architecture -- by leveraging caches and queues to preserve transaction state and OLTP that guarantees idempotency and consistency. The next evolution of this stack is replacing cache/queues with a central orchestrator -- workflow engines like cadence and conductor. This all happened in what we traditionally call "the backend", but a new stack is emerging for the Javascript world: more and more greenfield projects are written only in Javascript/Typescript, and this group of projects share a unique stack unlike what we have seen previously.

If you need a launch checklist as a frontend engineer, this is the talk you should attend. Before launch of an applications one needs to make sure that load testing and performance testing, user tracking, FE error tracking, security testing for FE, along with other such checks are done and dusted. Learn about these 11th hour activities and what tool set can come handy.

Types and Functional Programming are a great combination to get feedback quickly about types that don't make sense and compose functionality to get a desired result. fp-ts is a very powerful library that provides the tools to work with types and functional programming in an outstanding way. Let’s see it in action in a React Application to make it more type safe and composable by defining impossible states that will reduce the possibility of edge cases in our application.

Even with all of the incredible frameworks available today vs. a decade ago (or even two––for devs who have been around as long as I have), it still feels like much of our work as fullstack developers is still repetitive, and held together by duct tape code we shouldn’t be writing. This is because we write a lot of duplicate and boilerplate code for everyday things such as simple database CRUD, data validation, authorization, and data-type conversions, but the majority of these tasks haven’t advanced at the pace of modern web architecture. In this live coding session we'll turn a front-end React app into a fullstack app with code that is easy to write, follow, and, most importantly - maintain with end-to-end typesafety (say no to GraphQL!), consistent and encapsulated validations, live querying, access control, secured APIs, you get the idea.

As a front-end teamlead, I was faced with the challenge of transitioning multiple legacy projects, which happened rapidly and was a painful process. One of the main issues I encountered was dealing with a legacy project that had no documentation. I had to figure out how to stabilize it, put it in order, and reduce the cost of its maintenance and development.

Composable architecture is changing the trajectory of the web as we know it. In this session, Netlify Senior Solutions Engineer Henry Smith will offer a deep dive into how adopting a composable architecture can help create more agile, adaptable and scalable web applications. He will explain why the future of the web is composable, share real-life examples of teams building dynamic web experiences, and cover common challenges in going composable and how to tackle them.

Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation.

Is it wise to run code from strangers? Well, we do it all the time and there's no backing out of it. Let's take a look at how a JavaScript project could get hacked and then defend itself from supply chain attacks. Limit access to globals for each package?

Secrets like API keys are constantly leaking through source code. The 2021 State of Secret Sprawl report found over 6 million secrets in public git repos. This presentation reviews the new, unreleased, 2022 State of Secrets Sprawl report focusing on how JavaScript source code specifically leak secrets.