October 20 - 23, 2023
React Advanced
London, UK & Online
React Advanced Conference 2023

We will be diving deep

Ag GridSourcegraphKontent.aiStoryblokSentryContentfulAblyFocusReactiveHygraphCallstackBloombergStreamLocofyCausalyGluestack (GeekyAnts)Auth0 by Okta
27 min
Simplifying Server Components
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.
23 min
Opt in Design – The New Era of React Frameworks
Picking up a new technology, developers stick with defaults. It's a fact that every tool from JQuery to NextJS has needed to face. At their worst, defaults ship hundreds of wasted JS kilobytes for routing, state, and other baggage developers may never use. But at their best, defaults give us a simple baseline to start from, with a clear path to add the exact set of features our project demands. This is the magic of opt-in design.
Let's see how smart defaults guide modern frontend tools from Astro to React Server Components, and why this new era reshapes your workflow, and performance metrics, for the better.
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
29 min
How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
For many app developers, GraphQL is instrumental in building great user experiences. With the introduction of React Suspense, developers have an ergonomic way to orchestrate loading states to improve upon the status quo. In this talk, the Apollo Client team will show you how we built a non-trivial application using Apollo Client’s new Suspense features, GraphQL features like the @defer directive, and how to combine them to build great user experiences in your own apps.
35 min
Leveraging the Event Loop for Blazing-Fast Applications!
Some weeks ago I made my own implementation of signals, capable of updating 300k times the DOM in circa 600ms. Leveraging the Microtask Queue, I was able to bring that number down to 6ms, effectively improving performances by 100x. I wanna share how the Microtask Queue works and how you can leverage the Event Loop to improve performances.
28 min
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
If you use the Next.js app directory, you might not even have noticed it, but you are not only using React Server Components, but you are also using the new streaming SSR feature of React.That means that on first page load, your Client Components will now be server-side rendered, suspense boundary by suspense boundary, and constantly streamed to the client, where they are rehydrated piece-by-piece.
If you combine that with suspense for data fetching in your client components, you will suddenly be facing hydration mismatches - as your client components will start fetching data on the server, but the data will not be transported to the client.
In this talk, I will go over the rocky journey that we had to go through to support suspense for data fetching in Streaming SSR with Apollo Client, looking at all the curious timing problems that come up with these technologies, and how we try to solve them as best as we can - always with the best possible user and developer experience in mind.
29 min
All You Need Is a Contract…
How many times have you had to wait for your backend team to finish building the API so you can start your tasks? What if all you needed to move that task to in progress was the API contract? What if there was a library that did this for REST and GraphQL APIs and, at the same time, taking your tests to the next level? Join me and prepare to enhance your developer experience while learning all the battle-earned experiences of using one of my favorite libraries: Mock Service Worker.
32 min
The State of The State In The App Router
NextJS 13.4 changed the game with the App Router and React Server components. The change to the state management model looks simple to start, but gets complex very quickly as you try to create the practical every-day user experiences that were straightforward in the pages model. We'll talk about the different state management models, how they work in the App Router, and how to decide which you should use.
31 min
Building Better React Debugging with Replay Analysis
React's component model and one-way data flow give us a great mental model for building our apps, but debugging React apps can still be confusing. React's internals are a black box, and it's often hard to understand why components rendered or what caused errors.
The Replay time-travel debugger makes it easier to debug React apps by letting you inspect what's happening at any point in time. But what if we could go beyond the usual debugger features, and build new debugging features that tell us more about what React is doing? Let's see how Replay's API makes that possible.
28 min
How Popovers Are About to Become a Whole Lot Easier to Build
You've probably build one of these before: tooltips, date pickers, menus, teaching UI… they're all examples of “popover” content. Good news: it's going to get a whole lot easier to build these, with some proposed web platform features. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, when to use modality and access to the top layer.
29 min
Jazz: Build Real-Time, Local-First React Apps With Sync & Secure Collaborative Data
Users have come to expect real-time collaboration from best-in-class apps like Notion or Figma. But widely available tools and infrastructure for building multiplayer apps are only just emerging. In this talk, we’ll explore the open-source framework Jazz and the two new ideas powering it: Conflict-free Replicated Data Types (CRDTs) and verifiable permissions. By building a whole app with nothing but React and Jazz, we’ll see how this new approach radically simplifies building not only real-time multiplayer apps, but any kind of app in which users interact.
26 min
Hydration, Islands, Streaming, Resumability… Oh My!
Our ecosystem can be overwhelming! First, we had the rise of SSR and SSG—and each had its own gigantic pile of frameworks and tools. Then partial hydration enabled us to hydrate only some of our components on the client, which we've seen in React Server Components. 
But what about islands? Do they relate at all to Streaming SSR? Moreover, what is resumability, and why do I keep hearing about it? […] Oh, did anyone say rendering on the Edge?
Well… There are many approaches out there, and all of them argue that their philosophy is best. In this session, we’ll go over these architecture/rendering patterns, to help shed some light on how some are implemented and the concepts behind them.
30 min
Thinking Differently About a11y – Accessible Website Design for the Neurospicy
Did you know that approximately 1 in 7 people are neurodivergent? Within that group there is an entire spectrum of people whose brains process information differently. However, as frontend engineers we often forget to take these idiosyncrasies into account, or choose to simply apply industry standards such as WCAG 2.1 AA without digging deeper. In this talk, Steph shares some of the ways you can create better web experiences for the neurodivergent.
15 min
Speeding Up Your React App With Less Javascript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
27 min
Code on Demand: The Future of Code Collaboration
What if you could use code the same way you use Netflix or Spotify? 
Imagine your entire code base organized as small components on the cloud, where you can import only what you need into any workspace. In fact, you can create an ad hoc workspace where you can use and modify only the components you need and export them back.
In order to use code on demand, components need to be independent entities, which means that they have to include their source code, configuration and dependencies. This allows you to version them independently and import them into small dynamic workspaces which are then made much easier to navigate, setup and build. Independent component versioning also makes for independent teams, because this separates publishing updates from consuming them. 
When all your organization’s components are in the cloud, teams can discover them, discuss changes and visualize relationships, making collaboration between teams much simpler. 
Alongside its many advantages, this paradigm shift brings about considerable challenges, which may explain why this is not the standard way to manage code today. This talk is about the tools and methodologies required to overcome these challenges. 
23 min
Superpowers of Browser’s Web API
When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code.
In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀
All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers.
So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more!
20 min
Zod === TypeScript, but at Runtime in Your React Applications
Many Javascript developers have added typescript to their projects in the last few years. But how many of them are sure of their types at runtime? Can types be guaranteed on runtime too?
Using Zod that can be realized! Let's see together how we can use Zod to improve the awareness of our code during its execution and prevent strange mistakes or a bad user experience.
28 min
Usability Testing Without a UX Specialist
Ask nearly anyone about the process of developing software, and somewhere in the answer they’ll (hopefully) mention the users. User research, user testing, user feedback – the end user is at the heart of everything that we build. However, for many companies, making conversations with real users actually happen is a real challenge – especially if you don't have a UX specialist on your team! If this is all sounding familiar to you, then I have a recommendation: take it into your own hands. In this session, we'll talk through setting up a basic user testing program and growing it, so you – the developer – can feel empowered to start usability testing for your own product!
24 min
How to NOT use useEffect?
Are you using React in your project? If so, you must used useEffect! Actually, it’s essential for many use cases, but there are instances where it might not be the best solution, and avoiding it can improve your application's performance.
In this talk, we will learn from experience which is the missing piece of the puzzle to master useEffect. Taking a look at the incorrect cases and trying to improve their performance helps us to have a deeper understanding of it.
23 min
Concurrent React Made Easy
UI’s are composed of fast parts, and slow parts in terms of how responsive they are to user interaction. React's concurrent renderer decouples the fast parts from the slow parts by allowing us to render the slow parts in the background without blocking the fast parts, so that each part can respond to user interaction at its own pace. In this talk, we'll explore Concurrent React, understand what problems it solves, how it works and how to leverage it through the use of concurrent features.
41 min
Automating Accessibility Testing for Your Component Library
Are you a developer tired of manual accessibility testing and the long feedback loops it entails? Do you want to efficiently audit and test the accessibility of your components while saving time and effort? Look no further! In this talk, we’ll explore how Storybook, a widely-used open source tool to document your UI components, can be used to automate accessibility testing.
23 min
Nested Interactive Elements: An Nightmare in Accessibility
There have been numerous remarkable new UX experiences developed over the years, such as cards displaying an array of products and clickable list items with dynamic menu options, among others. However, only a few are aware of the challenges involved in building these structures with accessibility in mind, and unfortunately, some of them are completely inaccessible. 
In today's talk, we will explore some of these prevalent web UX patterns and delve into the hidden challenges they present. While we may be able to mitigate some of these issues, others serve as cautionary tales in accessibility.
16 min
Simplifying Data Management in React With React Query
This talk is about how React Query can simplify data management in React applications. The talk covers the basics of React Query, including its features for fetching and updating data, handling optimistic updates, composing queries and mutations, and managing errors and retries. By the end of the talk, attendees will have a clear understanding of how React Query can improve the user experience and reduce boilerplate in their React applications.
24 min
“Microfrontends” for Mobile in React Native
Scaling has always been an issue in software development. Architects have been grappling to solve this problem on many layers. In the early 2000s, a concept of “micro-services” started popping up - a system could be split up by business domain into a number of smaller loosely-coupled services. 
More recently, this concept has started being adopted by the frontend community. An app could be split into multiple sub-apps, each with their own teams, technologies, and codebases. Companies like Spotify, Amazon, and Microsoft have adopted this approach and it has helped them scale even faster.
In the world of mobile development, the question arises: “Can we create Microfrontends for mobile apps?”.
20 min
I Run Code From the Internet!
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? Sure. Control if a package can access network or file system? Yup, that too. And no more install scripts or prototype pollution.
20 min
Micro-Frontends With React & Vite Module Federation
From my experience one of the hardest things is to share information between microfrontends, so in this talk I would like to explain various ways on how to share a design system to ensure uniformity to the application. Another difficult thing is sharing dependencies, fortunately with module federation it can be done, but how can I use different versions of the same library and how does it work behind the scenes?
I'm the creator of module-federation/vite library, with React and this library, I'd like to show you how you can achieve these results by configuring everything correctly.
21 min
Figma to React With AI, Are We There Yet?
What if we could generate production-ready React components (including props, responsiveness, CSS styling, TypeScript typings, and more) from Figma designs, automatically? This seemingly impossible task is becoming a reality thanks to the latest advancements in AI (such as ChatGPT).
In this talk, we’ll discuss some of the techniques we are using at Anima to automate the boring parts of frontend development, generating React components from Figma designs. We’ll cover some algorithmic techniques, processes and deep-learning based approaches that could help you speed up your day-to-day frontend work.
11 min
Harnessing the Power of Messagechannel and Broadcastchannel
Delve into the world of Web API's - MessageChannel and BroadcastChannel. Explore how these powerful APIs facilitate seamless communication in web workers, iframes, and across tabs. Join us as we uncover the techniques to enhance web interactions and unlock new possibilities. Discover the key to smoother collaboration and improved connectivity in your web projects!
27 min
Technical Documentation - How Can I Write Them Better and Why Should I Care?
Gathering pieces of information for a task or a project is a wasteful act and could result in duplicated work done by different people.Onboarding, your ability to maintain code or infrastructure and systems handover - Documentation plays a crucial part in all these processes.So... how can we write technical docs in an easy way & why should we even do it?
In this talk, I’ll show you a structured way to write technical docs, without being a technical writer - So you will deliver highly valuable information to your audience, to your best ability.I’ll explain why should you care about these docs, how do they serve your best interests (Yes, there’s more than one!) and what a wide impact it could make on employees and even on your entire organization.
7 min
Hacking an e-Reader with React
I wanted to have a tea menu to show guests and for my own reference. Turns out e-Readers use so little power and can render HTML! I'll share how to generate an e-book with all your drinks with React using Deno, as well as rendering a custom cover page with SVG. Wow your friends by turning an old device into a smart home tea menu, and learn how to write your next book with React.
6 min
Implementation of Schedules and Timelines
Planby is a React based component for a quick implementation of Schedules, Timelines, Electronic Program Guide, Music/Sport events, Calendar Planner  and many more ideas.  It uses a custom virtual view which allows you to operate on a really big number of data. The component has a simple API that you can easily integrate with other third party UI libraries. The component theme is customised to the needs of the application design.
29 min
Local-First Software With ElectricSQL
Local-first is a new paradigm for developing apps, where your components talk to a local embedded database and you get instant reactivity, multi-user sync and conflict-free offline support built in. ElectricSQL is a new, open-source, platform for local-first development from the inventors of CRDTs. This talk introduces local-first development and shows how you can develop real-world local-first apps today with React + ElectricSQL.
6 min
React Code Reviews in Open Source: Ensuring Quality and Collaboration
In this lightning talk, we will explore the significance of code reviews in open source projects, specifically within the React ecosystem. We'll discuss the benefits of code reviews for maintaining code quality, encouraging collaboration, and upholding project standards. By emphasizing effective feedback, respectful communication, and the use of relevant tools, participants will gain practical insights on conductingimpactful React code reviews. Join me to learn how code reviews can enhance the development process, encourage knowledge sharing, and contribute to the success of open source projects in the React community.
7 min
Flashlight, a Lighthouse for Mobile Apps
The promise of Lighthouse is pretty cool, right? Visit any website, and with only a few clicks, you can get a performance score for it!Wouldn’t it be grand if we had the same thing for React Native apps? 
Well, you’re in luck! let me present our new open source tool called Flashlight 🔦 (cause you know, a Flashlight is basically a very small “mobile” lighthouse, right?)
21 min
Winning the Performance Race
Over the past two years, we’ve dramatically improved Wix Website performance, beating all of our competitors in Core Web Vitals. This project was a company-wide effort to finally solve the number one user complaint in the company – live site performance. 
In this talk, I will take a deep dive into the design changes that were implemented to achieve this significant improvement, and explain why and how those solutions could be applied in any web application to achieve similar results.
11 min
Measuring Coverage of React Design System
Design systems are becoming increasingly popular in modern front-end development. However, measuring the usage and coverage of these design systems is often challenging. In this lightning talk, I'll discuss about a tool that we're working on which uses react-scanner and Abstract Syntax Tree (AST) with custom scripts to generate component usage data for a React design system. 
The talk will cover how we generate this data and how it is rendered in a dashboard to provide valuable insights on the coverage of the design system.
- Introduction to  react-scanner- Measuring Component Usage- Identifying Native HTML elements and Styled Components- Showing Tree structure of Page in terms of Components- Highlighting Anti Patterns- Benefits / Use Cases for this tool
6 min
Shield Your Next.js App With a Content Security Policy
Learn why you should care about Content Security Policy (CSP) and how to implement it in a Next.JS application to level up your security layer. Understand CSP basics, directives, and their role in thwarting web attacks. Moving on to Next.js, the session will delve into implementation details, covering the "nounce" hashes for inline scripts using middlewares and common strategy pitfalls. By the end of the session, participants will be equipped with the knowledge and skills to implement and evaluate a robust CSP policy in Next.js, leveraging its latest features from version 13, effectively safeguarding their web applications against online attacks.
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.
26 min
Remix: Embracing Web Standards to Redefine Modern Web Development
Discover the power of Remix, a groundbreaking full-stack framework that embraces web standards to redefine modern web development.As developers grapple with complex tools and frameworks, creating performant and maintainable applications becomes increasingly challenging.What if there's a solution that leverages core web principles to streamline development? Enter RemixIn this talk, learn how Remix harnesses web standards, such as URLs, Fetch API, HTML, and HTTP caching, to elevate developer and user experiences, ultimately empowering you to become a better developer!