Name: React Advanced Conference 2024
Start: 2024-10-25T11:00:00.000Z
End: 2024-10-28T20:00:00.000Z

Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid &amp; Charts libraries that are packed with features and provide unbeatable performance whilst being fully customizable. In this workshop, you'll learn how to get started with both AG Grid and AG Charts, learn how to use their key features. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid &amp; AG Charts into your React application.

Powerful Data Visualisation with AG Grid & AG Charts

Brian Love

Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app. Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)

AI for React Developers

Eve Porcello

Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps. - Introduction: discovering Next.js and its server-centric philosophy- Crafting a perfectly optimized multi-page website- Making sense of Next.js server-side rendering capabilities- Conclusion: how Next.js empowers you as a React developer

The Journey From React Frontend Development to Fullstack Development With Next.js

Eric Burel

Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient applications. Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints. Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic. Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!

Mastering React Server Components and Server Actions in React 19

Maurice de Beijer

If you’re a seasoned React Native developer, you may have been burned by the fact that certain React behaviours just don’t work as you’d expect. We’ve all tried to use useLayoutEffect on our RN projects, only to find that it doesn’t quite behave how the React docs describe it. All of that will change with the new event loop coming to React Native as part of the effort to bring React Native closer to Web APIs.  Strap in for a wild ride where we dig into the depths of how the event loop currently works, how it will change, and what this means practically for us as React and React Native developers.

Understanding the New Event Loop in React Native

Mo Khazali

React Query is a popular library for maintaining asynchronous state - most often state returned from data fetching. It has grown so much in popularity over the last couple of years that it is now used in almost 20% of all React applications. To some extent, this is attributed to it's ease of use and great developer experience. In this talk, React Query maintainer Dominik will walk us through some of the API design choices that were made in React Query to get to that DX. You'll hear stories about things that went well, but also about tradeoffs and mistakes that were made, and what lessons we can all learn from those.

React Query API Design – Lessons Learned

Dominik Dorfmeister

The most talked-about news in the React community this year is probably the React Compiler. Everyone is looking forward to being saved from the re-render plague and never having to write useCallback/useMemo again. But are we truly there yet? Can the React Compiler actually achieve those things? Do we need to do anything other than turning it on and enjoying a re-render-free life? I ran it on a few real-world apps to find the answer. Want to see the results? In this talk, we’ll take a look at what the React Compiler is, what problems it solves, and how it performs on simple code examples and real-world applications.

How React Compiler Performs on Real Code

Nadia Makarevich

React portals + RxJs = micro frontends on steroids.At bettermarks, we are migrating an AngularJS app to React using micro frontends. Picture a dashboard with widgets from different frontends depending on permissions and settings without coupling.We implemented a reliable solution for our micro frontends - and yes, we can embed React components within AngularJs!I'll showcase our solution and demonstrate how this can help you build more robust applications by trying to break our.

We Accidentally Built a Plugin SDK for Micro Frontends

André Bauer

More often than not, performance starts with how data is loaded in your app. Which data has dependencies? Which data is critical to the page? Which data is variable? Static? Personalized? Available offline? In this talk, we'll use Remix to explore how different data loading strategies can improve your user’s experience.

Turning It up to Eleven

Bret Little 

Discover how React's often overlooked concurrent features like startTransition, useDeferredValue, and Suspense can transform your application's performance and responsiveness. Learn practical techniques to prioritise critical updates, gracefully handle loading states, and create fluid user experiences even with complex data interactions.

React's Secret Weapon: Leveraging Concurrent Features for Top-Notch Performance

Dara Olayebi

One skill that will always be relevant is profiling. No matter the framework, no matter the version, at some point you will have to dive into why your application is not performing at its best. In this talk, we will show how you can use React Dev Tools alongside the standard Dev Tools to identify and resolve performance and memory issues. There are some hidden gems within Dev Tools profiling panel that goes beyond just measuring how much time is spent executing a function and we will discover them together including new features released this year.

Perfecting Your Profiling

Stephen Cooper

Next.js deep integration between the client and the server makes developing fast JavaScript applications a breeze. And it's also the worst nightmare of your security team. Let's discover a few security patterns for server-rendering frameworks like Next.js.

Securing Server-Rendered Applications – Next.js Case

When Remix was first released in 2020, its goal was to provide framework-level features on top of React Router, simplifying server-side rendering, data fetching, state management and build tooling. Now, with the release of React Router v7, the entirety of Remix is getting merged back upstream into React Router. This is a huge step up for the React community since React Router powers roughly half of all React downloads. In this talk we'll take a look into how this happened and what this means for the future of React frameworks.

How React Router Became a Framework

Mark Dalgleish

In this talk, we'll examine how GraphQL fits into the React Server Component paradigm and how to use Apollo Client, a client-side data store, in a world of streaming SSR. Starting with a demo built with only Server Components with GraphQL, and juxtaposing it with an app using only Client Components, we'll show why a framework with a client-side data store that can also interact with RSC is the best of both worlds alongside good practices when combining it with GraphQL.

GraphQL in the World of React Server Components

Jerel Miller

Alessia Bellisario

The talk is focused on the trend in the industry towards build time operations.And aims to provide the starting point for the viewers to understand this better. Now since every major library is adopting the build time strategy to add performance gains. It's high time that everyone should understand how these things work and how to make a build time solution.

Gain Performance! Take Your Run Time to Build Time

Rohit Singh

If you’ve never heard of Maestro, I will show you why I think it's the best e2e testing tool. And if you have, I will share some tips for an effective integration into your workflow. This is an educational talk on Maestro where I’ll cover when, what &amp; how to test. I often see people re-building for each run. So I’ll also dig into some Expo specificities (such as eas update &amp; build:list) that will enable you to optimize time and cost and achieve a state-of-the-art CI/CD with Maestro.

Maestro & Expo: Crafting the Future of Efficient e2e Testing

Mathieu Fedrigo

Front-end developers often face the challenge of building UIs that need frequent updates to keep up with changing business requirements and user preferences. This can lead to slow release cycles and frustration for both developers and users. Server-Driven UI (SDUI) offers a solution by shifting UI logic to the backend, enabling rapid updates without requiring app store approvals or complex deployments. This talk will explore how SDUI, combined with React, empowers teams to build flexible, maintainable, and quickly adaptable applications that deliver exceptional user experiences.

Server-Driven UI: Building Dynamic React Applications

Dipanshu Gupta

We'll talk about how React itself is adding new features consistently and pushing the boundaries of rendering libraries. Also, about the ecosystem and how that is constantly expanding.

Is React Really Dying?

Jack Herrington

Introducing design system into mature codebase. Let me walk you through our challenges, very useful tools to understand your current situation, tools to measure the impact of design system work, tools to make it happen.

Introducing Design System Into Mature Codebase

Kasia Jastrzebska

In this talk, we will explore how we can use AI to enhance user experience by having large language models return interactive React Components that we define to our users. This way, instead of instructing users on what to do with text, our applications can present interactive user interface elements directly in response to a user query. We discuss this briefly in <a href="https://podrocket.logrocket.com/generative-ui-react-components-malte-ubl" target="_blank">this PodRocket episode</a> where the Vercel CTO says it could be game changing. In this talk, we teach developers how to implement such functionality in their applications.

React Server Components in AI Applications

Tejas Kumar

How many times have you done this: Made an API, used the data with React, and then started over, again and again? What if we could make a full stack React application that can create user interfaces on its own, without needing to write any backend code and directly chat with your data? In this talk, we'll learn how to make an app that can change the way data looks using simple text commands and smart AI changes. Let's talk with your components.

Chat With Your Components

Theodore Vorillas

The data returned from one endpoint to a frontend app should reflect the state of the world at a (recent!) point in time in the past. But it may not! And the data returned from multiple endpoints often reflects the state of the world at multiple points. What can be done, and what should be done? What's the worse that could happen, and what's the worse that reasonably, probably going to happen? Let's talk through the tradeoffs, look at how some some teams approach it, and hear how much they actually care.

Rendering Data That Disagree

Thomas Ballinger

The talk will start with a quick introduction to React Server Components and then move on to show how they're visualized in one of the developer tools we've built for RedwoodJS. This will give everyone a better understanding of where the client/server boundaries are and how ""use client"" and component imports work together to decide what code gets executed by the RSC server and what code gets executed in the user's browser. This understanding is generally applicable to any RSC enabled framework (which mostly means NextJS right now). Now, with the audience equipped with a better understanding of RSCs I'll dive into the RSC Payload (aka Flight) format explaining what it is and how it works. For this part of the talk I will use a tool we've built to record and visualize the RSC network traffic to aid me in explaining the RSC protocol. I will also show how it helps developers identify bottlenecks by showing payload sizes and request durations. After attending my talk, the audience will have a much deeper understanding of how RSCs work, all the way down to the RSC protocol level. They will also be excited and eager to explore our state-of-the-art RSC app developer tooling.

State-of-the-art React Server Components Developer Tooling

Tobbe Lundberg

When it comes to testing library code, the (usually amazing!) "Testing Library" approach quickly hits its limitations: We often need to test hot code paths to ensure additional guarantees, such as a specific order of DOM changes or a particular number of renders.As soon as we start adding Suspense to the picture, it even gets almost philosophical:- How do we count a render that immediately suspended, and how do we distinguish it from a "committed" render?- How do we know which parts of the Component tree rerendered? In the Apollo Client code base, we're using the React Profiler to create a stream of render events, enabling us to switch to a new stream-based testing method.After testing this approach internally for a year, we have released it in a library that we want to present to the world.I'll also briefly look into other "testing-related" problems far outside the norm that we've come across and share our solutions:How to test libraries that bundle different code for React Server Components, streaming SSR runs, and the Browser: Testing your growingly complex `exports` fields and ensuring all those environments export the package shape you expect.We'll even briefly look into rendering React components in different environments to test them in isolation - be it in Server Components, Streaming SSR, or simulating stream hydration in the Browser.

Beyond React Testing Library: Testing React Libraries (and library-like code)

Lenz Weber-Tronic

You've just finished building a brand-new blazing fast JS library and can't wait to publish it to NPM. But hold on a minute - what about the docs? Sure, anyone can slap together a README with some example code snippets, but have you actually thought about how to actually design the docs themselves?Join Redux maintainer Mark Erikson as we look at ways to effectively structure and write documentation to help your users learn and understand how to use your tools, based on years of experience building the Redux docs.  We'll talk about patterns for organizing categories of documentation, tips for making the docs easier to read and understand, useful tools for working with docs content, and more!

Designing Effective Documentation: Lessons Learned Building the Redux Docs

Mark Erikson

Next.js is the default choice for most teams, although there are many other solutions on the market. One of such solutions is Astro, which in certain areas, due to its eccentric approach, seems to outclass the Vercel king. During this lecture, I will present the key features of Astro, as well as the differences between it and the aforementioned Next.js. You will learn what interactive islands are, why MPA (multi-page application) is still a very good choice for content-driven websites, and much more. Who knows - maybe you will use Astro in your next project?

Astro – Island Technology in the Name of Optimization

Szymon Chmal

Expo, the official framework of choice for building React Native apps, has both a "managed" workflow (where you purely write JS, just using what the SDK offers) and a "bare" workflow (where you can write custom native code). To opt into the bare workflow, one has to "prebuild" one's apps to expose all the native boilerplate. Expo Prebuild is widely used, but it can be a little unclear exactly what it does and how it does it all (such as how it can bring your native project back up to date after you bump the Expo SDK version). In particular, its capability of generating native projects from custom templates is underused. Following this talk, though, we hope to change all that!

Expo Prebuild, Demystified

Jamie Birch

I've been developing a React framework called Waku, which focuses on React Server Components (RSC). Waku supports Server Actions, allowing us to call functions on the server from the client. In this talk, I will explain how Server Actions are implemented in the framework. To enable Server Actions, the framework transforms (or compiles) user code. While users don't need to know the detailed process of this transformation, understanding it can provide a better mental model for working with Server Actions.

How an RSC Framework Enables Server Actions

Daishi Kato

The JavaScript ecosystem has evolved significantly, with Bun.js marking a notable milestone. Built from the ground up in Zig, Bun.js is an all-in-one JavaScript runtime featuring an integrated package manager, bundler, test runner, and Nodejs-compatible environment designed for the growing demands of edge computing and server-side applications. My presentation will explore Bun.js's foundational principles, highlighting its performance benchmarks against traditional runtimes like Node.js, seamless TypeScript support, zero-configuration framework, and innovative features such as built-in hot reloading and efficient file operations.

Is Bun 'Actually' Faster?

Devlin Duldulao

For developers and designers, components are unique, flexible units to compose complete layouts. For content creators, they can trap reusable data into single-use decorations.

Prioritise Content Over Components

Simeon Griggs

Knockout had it first, Vue was always hiding it, Solid made it popular, and now Svelte and Angular are also integrating it: reactivity based on signals. If all these other frameworks lean on this special primitive, should React follow suit as well? In this talk, we will examine the less-discussed downsides of signals and explain why I believe React should stick to its current approach of plain values and functions.

Why React Should Not Adopt Signals

Andreas Roth

My presentation on React Native's Re-Architecture highlight pivotal changes in mobile app development. Focused on modularity, scalability, and improved bridge communication, it enhances app performance. With concurrent rendering and platform agnosticism, React Native remains the go-to for efficient cross-platform development.

Next Generation of ReactNative

Sota Ohara

As the momentum of web development swings back towards the server, streaming is becoming increasingly popular. Specifically, out-of-order streaming with features like React Suspense — one of the magical powers behind Server Components. Let's build our very own (simplified) version to explore how it works, what problems we are trying to solve, and what this future of web development looks like.

Let's Build Suspense 🥁

Julian Burr

Observability is the ability to measure the current state of a system. Backend engineers are becoming more familiar with the 3 pillars of observability, and technologies such as OpenTelemetry that can be used to instrument applications and diagnose issues. Yet in the frontend world, we're behind the curve. Join me as I dive into the tools and techniques we can use to instrument, monitor and diagnose issues in our production React applications. I'll cover RUM agents and React framework extensions, and the metrics and traces they provide, how to combine them with backend tracing for a holistic picture, and how Synthetic Monitoring and alerting in Observability platforms can help us be alerted to issues impacting users in the UIs we build and maintain.

Observability for React Developers

Carly Richmond

With over 1.13 billion websites worldwide, itʼs clear that cross-platform  development is popular. However, with 60.74% of people preferring mobile  devices over desktops for internet access, providing a polished UX can be  challenging when using only websites. In this talk, Iʼll demonstrate how developers can use Expo to bring their web-only  products closer to their users. Starting with a fictional web-only product, Iʼll  incrementally reuse the code and run it on iOS and Android using both the existing  web code and platform-native elements. Depending on our demo readiness during  the conference, this may include a new experimental feature of the Expo Router  called DOM Routes that helps developers in this process.

Breaking through the Browser Barrier (With Expo)

 Cedric van Putten

This is the full story behind "Make Real", tldraw's viral AI experiment that lets you turn your low fidelity drawing into a functional website. It's half startup rollercoaster ride and half moral tale about betting on React — as Make Real was only possible because of the ability to put any React component onto tldraw's canvas. Here's the full behind-the-scenes perspective, and everything we learned along the way.

Make Real: tldraw's AI Adventure

Steve Ruiz

CSS Is more powerful than we usually give it credit for. Let's see together how we can make use of CSS to build together fully functioning filtering capabilities into an emoji-picker component, improving performance while at it. We will use some old and new techniques, and combine them in creative ways to turn a slow, laggy experience into a responsive and modern searching capability. We'll learn about the advancements in CSS, and discover the untapped potential of CSS for building dynamic UIs.

CSS Is More Powerful Than You Think! Building React Search in CSS

Evyatar Alush

Ever wondered how to truly connect and collaborate with designers? Want to learn the best strategies for clear and effective communication? Curious about how to get designers to deliver exactly what you need? Discover how to refine your communication skills, integrate designers seamlessly into your workflows, and create a harmonious, productive environment for future projects. This talk aims to be your ultimate guide to mastering the art of working with designers – don’t miss it!

Tips and Tricks for Achieving Seamless Collaboration Between Developers and Designers

Dora Makszy

In this talk, we'll dive into Wix's journey towards achieving unmatched web performance through advanced code-splitting techniques in React, tackling the significant challenges posed by large JavaScript bundles and excessive main thread usage.  As Wix's application expanded, facing increased complexity and demand, traditional performance optimization methods fell short. This presentation will trace the evolution from basic dynamic imports to sophisticated strategies like React component splitting, server-side logic separation, and the adoption of modern techniques including SSR, Suspense, and React server components. Emphasizing the necessity for scalable solutions in large-scale applications, we will also discuss the implementation of the Inversion of Control (IOC) pattern for efficient feature loading.  Importantly, for each solution, I will provide code examples of both the issue and the solution, suitable for both beginners and advanced React developers.  This story not only showcases our significant performance improvement but also highlights the importance of evolving optimization strategies to align with the scale of the application, offering insights into transitioning from simple fixes to advanced, robust solutions for enhancing web application performance in React.

Scaling React Performance: From Basic to Advanced Code-Splitting Techniques

Gil Eckstein

Learn how to build fast, adaptive web applications that dynamically respond to user conditions and context in this informative talk. Discover the principles and techniques behind adaptive design, including responsive layouts and dynamic interactions, optimized for different browsers, device strengths, internet speeds, screen sizes, and user preferences. Explore the role of data-driven decision-making and user analytics in tailoring content and features quickly and efficiently based on these variables. Gain practical insights into implementing fast, adaptive web apps using various technologies and frameworks. Understand the significance of user testing and feedback loops in refining the application for a seamless and speedy user experience. Walk away with actionable strategies to create personalized, high-performance web experiences that drive engagement and success.

Building a Fast Website for Every Single Visitor

Medhat Dawoud

Discover practical strategies for expanding your influence as a staff engineer. This talk covers building technical credibility, effective communication, mentorship, and leading technical initiatives, helping you make a lasting impact within and beyond your engineering team.

Increasing Your Sphere of Influence as a Staff Engineer

Ian Schwartz

Tailwind blew in sweeping developers into two opposing camps. You have already picked your side, you’re either team pro Tailwind or you run far away. But what if I told you there is a third option?  This CSS framework should come into play only when the perfect type of project calls for gentle breezes. In this talk, with illustrative examples, we'll elaborate on how to improve the experience of working with Tailwind CSS using simple practices. I’ll challenge your preconceptions and answer the important question, for which cases Tailwind is the best solution or when it's better to choose an alternate CSS tool.

5 Best Practices for Preventing Chaos in Tailwind CSS

Nina Torgunakova

The top-selling Android phone in 2023 is 8x less powerful than high-end devices like the Pixel 8. This gap highlights a common blind spot among Android devs: we often use powerful devices and don't necessarily spot performance issues in our apps. However, traditional performance testing is often seen as a cumbersome and time-consuming task, leading many to skip it in favor of pushing out new features. But what if there was a way to simplify this process, making performance testing as straightforward as running a single command? This talk presents how we can make this dream a reality: by using AI to automatically explore our app and combine it with the proper performance measuring tools, we can essentially get automated quality audits of our apps!

Performance Testing Is Hard. Can AI Help?

Alexandre Moureaux

Diving Into Server Islands

Elian Van Cutsem

Role of Databases in React Apps

Aleksandra Sikora

Building a business is a slugfest to see who gets more customers first. You have to adopt that mindset when writing code. As an old boss told me once: Clean code won't matter if we're dead. You have to shift your mindset from best practices to getting shit done. But you can't go too wild or the tech debt will kill ya.

Scaling Fast – Engineering Lessons From ~15 Years of Tech Startups

Swizec Teller

Most developers spend a lot of time optimizing for load time performance metrics, but most of the user's experience is after load. Lets understand what INP mean to your React application, how to utilize the new tolling around interactions such as the new Long Frame API alongside the upcoming INP metric to optimize our runtime performance.

Long Frames and INP – Understanding the Post Load Performance

Vinicius Dallacqua

Get ready for an annual deep dive into the latest trends in React and Web development. Learn from engineers behind the framework ecosystem and early adopters at the main React Conference in the UK.The concept of the event is both about covering all you need to catch up on in the React ecosystem, combined with deep technical exploration of the latest architectural trends, new feature adoption, and efficient ways to solve complex problems.Engage in discussion rooms, hallway track with experts, hands-on practical workshops, and tens of insightful talks. Engineers of any level are welcome but be prepared for hardcore.

React Advanced

Get ready for an annual deep dive into the latest trends in React and Web development. Learn from engineers behind the framework ecosystem and early adopters at the main <a href="https://reactadvanced.com" target="_blank" rel="noopener noreferrer">React Conference in the UK</a>.The concept of the event is both about covering all you need to catch up on in the React ecosystem, combined with deep technical exploration of the latest architectural trends, new feature adoption, and efficient ways to solve complex problems.Engage in discussion rooms, hallway track with experts, hands-on practical workshops, and tens of insightful talks. Engineers of any level are welcome but be prepared for hardcore.

React Advanced Conference 2024

FocusReactive

Hygraph

Ag Grid

Contentful

Bloomberg

RedwoodJS

Move faster with intuitive React UI tools

Content that takes you from anywhere to everywhere

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

With 10,000+ front-end apps + one of the world’s largest JavaScript/TypeScript codebases, @TechAtBloomberg is deeply committed to using JS/TS in building the world's most trusted information network for finance pros.

React Advanced Conference 2024

We will be diving deep