React Summit 2024

We’ve been hard at work to create a first-look at data fetching, server rendering, and streaming in universal Expo Router apps.

Managing state is complicated. Humans are even more complicated. As developers, it's our job to deliver seamless and intuitive user experiences, but the sheer complexity of human behavior and the real world can make this a daunting task. In this talk, we'll explore a radical new approach to app development where language models (LLMs) and reinforcement learning (RL) can be used to handle app logic in a more intelligent and human-centric way. We're bringing artificial intelligence to state management in ways that go much, much further than calling the ChatGPT API. You will learn how you can leverage AI in your existing code to create the best UX possible, and peer into the future of AI and the path to AGI.

The design-development gap hurts your React projects: slower timelines, compromised quality, and repetitive handoffs. This talk explores the origins of this problem, the differences in language and environment, and offers solutions through processes, tools, and collaboration. Discover how including designers throughout the implementation process helps developers reduce friction, speed updevelopment, and deliver exceptional UIs.

An overview of the top 3 approaches you can apply to boost the rendering performance of HTML Canvas in your React application, based on the lessons we learned during the development of AG Charts.

In this talk, I’d like to reflect on the performance changes React went through in the past years – and hypothesize about where we’re going. Key points:React reached maturity and can now push frontend forward without reinventing the same primitives (like how all frameworks were stuck reinventing vdom for the past 10 years)Performance (past): consistent performance push you didn’t even notice (componentDidMount → useEffect and how that avoids layout thrashing; React 18 update batching). Some stuff didn’t really work out (Prepack)Performance (current): features that are available, but we need to change our habits to adopt them: startTransition (needs a habit to separate interactions into urgent and non-urgent), RSC + Server Actions (needs new patterns and approaches to data loading etc) Performance (future): React Offscreen API, React ForgetPerformance (further future, subjective opinion) – where React and other frameworks are moving: intelligent progressive enhancement, with zero JS on the client unless necessaryWhat didn’t work out:Why we can’t put frameworks into workers (answer: latency, data copying, etc.)Why react didn’t go the svelte route (inlining js instead of a single bundle)Why react didn’t go the aggressive-code-splitting-and-chunks-on-demand route

Create React App (CRA) was a game changer in garnering React adoption. Prior to the release of CRA, the experience of setting up a React app was more about configuring webpack than it was actually writing React code.Now that the React docs no longer list CRA as a suggestion on the “Start a New React Project” page, and additionally recommend you pick a React-powered framework, the getting started experience is once again fragmented.CRA was never meant to be how you built a full-featured React app anyway. It was a starting point, and a really good one. Inevitably many developers (such as myself) used CRA to build websites, and lots of them. However, a lot more goes into building a website than just using a “library for web and native user interfaces” — you need to handle routing, data fetching and mutations, styling, and a whole lot more.I believe Remix is the best framework available for taking up this mantle. Built on top of React Router, the most widely used routing solution in the React ecosystem, powered by Vite, and now with an option to build pure SPAs (like CRA), Remix is well poised as the best starting point to start React apps of all varieties.In this talk I plan to show the story of how Remix has evolved into the CRA replacement, how you can easily migrate from a CRA or React Router project, and how Remix will bring you into the future of React.

In this talk titled “Empowering Developers: Creating Cross-Framework Libraries with Native Experiences Using React,” we will explore a unified development strategy that enables software to be used across multiple frameworks without sacrificing the native experience for any user group. This approach not only extends the reach of software solutions but also optimizes development processes by allowing teams to write code in React—our framework of choice—and deploy it seamlessly across Angular, Vue, and others.

Lessons I learned on my journey to working full time on open source, as well as tips for thinking and making open source projects more successful.

Between SolidJS, Qwik and React, there's been significant innovation in the frontend development landscape. Mrina Sugosh, DevRel Manager @ CK, aims to tie it all together and assist React developers in embracing modern approaches. This talk is designed to offer valuable insights for developers keen on navigating front-end trends and making well-informed technology decisions for their projects.

How do you create a scalable application with lots of different layouts, screens, giving enough flexibility to each team to customise without adding orders of magnitude in complexity to your app? Companies like Airbnb, Meta, and Lyft approach this with server-driven UI. We’ll explore how this can work for mobile apps, challenges that it introduces, and how it’s the way forward in the age of React Server Components. 

I bet you've always used React to build websites and applications, right? What if I told you that we can also edit a movie with it! Learn how a simple render engine built in React and Node.js works to make videos using React components.Also, you will learn how to create a scalable render-farm using AWS. The main library to build the render engine is Remotion and allows to render videos programmatically.

We all intend to grow and strive to make a bigger impact until conflict shows up. We view conflict as a negative thing that gets in the way of growth when it is both necessary and vital. In this presentation, I'll share my experiences and ideas on how you can handle conflict and stay on the path toward making an impact!

Most developers closely follow the framework wars. So busy with these games, that we forget to check what new features HTML, CSS, and JavaScript offer us. Native modals, dynamic viewport units, and optional chaining are just some of the features you should use already! If you stopped following Web Platform development in 2015, it's time to refresh your knowledge. I will teach you to build applications tailored to 2024 and prepare you for the new Web Platform features that will appear in the coming years.

Domain Specific Languages (DSL) are everywhere in web development, but these languages and their qualities often get taken for granted. HTML, Regex, CSS, and SQL are all DSLs which allow you to simply declare what functionality you want, instead of having to specify all the implementation details.Taking the DSL approach to full-stack web development not only unlocks new abstractions that make building more efficient for the developer, they also assist AI-coding assistants in creating more complex, maintainable code, by handing off the creation and management of large amounts of boilerplate code to the DSL.In this talk we will explore how we built Wasp around a DSL to create a unified approach to developing full-stack web-apps.

Cloud vs. local compute is used to be a purely performance or technical decision. But as our users become more privacy aware, the granularity of data and where it's stored is evolving from a technical performance decision to a human emotional decision. One that is shifting how we should think about compute.

React started as a web rendering library, but its benefits and ease of use has made it find its way into many other domains, including now games! Yes, React is not what you'd traditionally use for making games, but it’s actually great for it. This talk will talk about the popular React Jam, a 10-day game jam for making games using React, and the pros/cons of using React for games. Listen in to hear how you can easily make a game using everyone’s favorite web library!

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 structures with nested interactive elements, 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.

We’ll cover the basics of how accessibility works in organizations and on teams, who is responsible for accessibility, how to push for changes without being an expert, and how to grow your skillset.

Performance has played a crucial role in ensuring the responsiveness and functionalities of the application which leads to better end user experience and user engagements. It is vital for making the application scalable and maintainable in an efficient manner. Studies have shown the negative impact mediocre performance can have on business goals. High performing applications engage and retain users better than low performing ones.  When we migrated Expedia Flights to Progressive web application, it enhanced the user experience and resulted in an increase in the demands at Expedia. However, the latency of Expedia Flights was too high, a standard monitoring of performance metrics was missing and there was a strong need to automate performance monitoring especially during releases which affected user retention and a seamless user experience.  
Expedia Group is a leading global travel platform. Flight searches are a large chunk of user traffic on our platform. Flights search is traditionally a heavy system with peak search traffic going regularly in the large range of transactions per second. There is a latency overhead associated with each request which goes all the way down to the supplier. It was noticed that the airline information obtained from third parties further added to the latency. While optimizing the third-party APIs was not controllable, the goal was to optimize the network call and progressive web application for a seamless user experience. From the product analysis we found that a bad user experience leads to a drop in conversion and a higher page load time leads to a higher bounce rate as well. Better performance leads to higher user engagement and a reduction in overhead on both client & server side.

The dream of using React for Web, Mobile Apps and beyond becomes reality. Thanks to Expo Router, we can confidently use the same routing logic for web and mobile, have it different layouts, use CSS, and with v3 even include API endpoints for Fullstack React Native apps. This talk will show you ways to go “all-in” on React Native, including other popular approaches that use Tamagui, Solito or Monorepos to build Universal Apps from one codebase.

Animations are the heartbeat of captivating web experiences but wield them carelessly, and the enchantment fades into frustration. Join Nikhil on an exhilarating journey as he reveals the secrets to crafting mesmerizing, high-performance animations in your React apps.In this dynamic talk, Nikhil delves deep into the world of animation, dissecting the common bottlenecks that threaten your app's responsiveness. Learn how to identify, debug, and eliminate these performance roadblocks, ensuring your animations are as snappy as they are spellbinding.

In this enlightening session, we'll unveil the pioneering integration of AI and ML within the Nx ecosystem. Discover how our cloud services are enhanced with intelligent algorithms to optimize performance and efficiency. We'll also take a peek into the Nx AI Assistant, our innovative tool designed to streamline navigation and utilization of Nx documentation. 

Waku is an ongoing project aimed at developing a React framework with first-class support for React Server Components. In this talk, I will provide an overview of Waku and walk you through how you can start developing a new project using Waku.

I've always avoided trying to do sales pitches for Redux, and tbh most of my time has been spent telling people when they _shouldn't_ use Redux :) But I still see lots of folks asking "_when_ should I use Redux?", and "how does Redux compare to $OTHER_TOOL?". So, I figure it's worth actually doing a talk where I cover the actual benefits and reasons to consider using Redux today.

Too many people are wondering what a JavaScript developer is doing in a robotics company , but In an era where the intersection of software development and robotics is rapidly expanding, it's not uncommon for JavaScript developers to find themselves in the midst of the autonomous robotics industry .During this talk I'll show some use cases of react in the robotics industry , showcasing how this versatile JavaScript library can revolutionize the way we approach robotic development from user interfaces for controlling robotic systems to VR teleoperation capabilities . Robotics often demands real-time responsiveness and efficient resource utilization we'll discuss the careful considerations and decisions we've made to ensure optimal performance. We'll delve into techniques such as virtual component memoization, and minimizing re-renders .

Twitter influencers would have you believe that if you just use the semantic html tag for elements instead of a div, your components will be accessible. but there’s a lot more that goes into it!Let’s zoom in on one component from GitHub (one that you’ve probably used before!) and look at all the accessibility considerations involved and interesting challenges in implementing them.

In the dynamic landscape of web development, prioritizing user privacy is paramount. In this 20-minute conference talk, we delve into the world of "Privacy-First Frontend Monitoring." We will explore strategies and technologies that empower developers to scrutinize and optimize web frontend error and performance without compromising user confidentiality. Discover how implementing privacy-centric approaches not only enhances the reliability and efficiency of web applications but also fosters user trust in an era where data protection is of utmost concern. Join me as we navigate the complexities of frontend monitoring, ensuring a seamless user experience while safeguarding the privacy of those who engage with our digital creations.

AsyncLocalStorage is a modern API which has landed in many JavaScript runtimes. It allows developers to pass a value to a callback function without needing to drill through a direct reference. In this, it is similar to React’s Context. However, although they have a somewhat related purpose, particularly in a React Server Components world, there are meaningful differences and a suitable time to use one over the other.

Have you ever wanted to break the rules and be a React troublemaker? I’ll show you how ignoring React’s best practices can improve performance, all without major rewrites to your codebase. To understand how, we’ll learn when React decides to render and how to trick it to render less frequently. We’ll build components that don’t render anything, conditionally call hooks, and even use a piece of Svelte - all to quickly fix real performance problems I encountered at Microsoft.

Everybody seems to be talking about "types" these days. From the TypeScript language to type description utilities such as prop-types and Zod, developers expect clear descriptions of the shapes of their React components, data, and hooks. Let's talk about the mindset shift that's happened over the last decade, and where types are taking us over the next one.Brief foundations: what is TypeScript, what "type safety" means, and setting up TypeScript in a React (Next.js) projectA history of how type safety has worked in React, starting with class componentsThinking in Type(s|Script): How modeling value shapes helps raise predictability and understandability, especially in the wildest and wackiest of React architectures.TypeScript's Limitations: By design, TypeScript can only act as a development-time type system and enforce what that system can represent. We'll want to go over what can't and/or shouldn't be represented in that type system.Raising the Runtime: Moving those type thoughts into your React runtime with programmatic frameworks or libraries such as tRPC and Zod - especially as they integrate with React metaframeworks like Next.js and Remix.React Specifics: How this "types-first" theory works helps improve common parts of projects in the React ecosystem: from prop-types back in the day to REST or RPC endpoints, testing, and documentation today.ESLint lint rules to catch common async and React code bugs - and why the language is designed to let you do those dangerous things in the first place.Ecosystem future: where the TC39 types-as-comments proposal will -and won't- take types at a language-level for JavaScript in general and React apps specifically.By allowing our types to be a reflection of the runtime reality, we embrace types-first thinking in designing code - making our code more clear to read and update. These better-define boundaries help in everything from better-defined React component boundaries to auto-generated client<>server API bridges. Hooray, types!

This session aims to show JavaScript developers how PHP concepts, especially those honed in Drupal development, can enrich their approach to React applications. It will cover how PHP's server-side strengths and Drupal's modular architecture can inform and enhance client-side development in React. The talk will include practical examples of integrating Drupal with React, emphasizing how PHP's backend prowess can be leveraged in a JavaScript-dominated environment. The session promises to be an eye-opener for React developers, offering them new perspectives and tools drawn from the PHP world, ultimately leading to more robust, efficient, and innovative web applications.

In this talk you will learn timeless soft skills necessary to navigate interpersonal relationships with friends, coworkers, and reports. You will learn about emotional regulation, reframing, boundaries, radical ownership, and letting the fuck go.

Have you ever fixed a TypeScript error and found yourself wondering why your solution actually worked? TypeScript often leaves us in a state of curiosity and, occasionally, confusion.In this presentation, I aim to untangle one such mystery: why TypeScript applies different typechecks to a function parameters and its return value. It's a peculiar aspect many of us have noticed but perhaps not fully unraveled. Why do these two seemingly similar aspects of functions follow different rules?TypeScript’s aim is to protect us from typing mistakes, and our aim during this talk will be understanding its purpose, using React practical examples.

Web developers learn a lot of programming techniques in the pursuit of their career but often don't realize the depth of their own skill. React Three Fiber became a sensation among thousands of developers because it demonstrated that the knowledge they possess can be harnessed to create interactive 3D graphics. However, React Three Fiber has been stuck in the mindset of websites while the future of web increasingly moves toward immersive 3D experiences.In this presentation, we will explore the new generation of React Three Fiber and the changes being made to evolve it into a framework capable of supporting complex real time apps, such as live simulations and video games. Our goal is to give web developers a new moment of recognition where they look at a video game programmed with React and think, "I can do this"

We will have a look at the mechanisms by which SolidJS empowers us to build highly performant web apps with a mental model that works just as you'd expect. This talk is a step further on the consequences of choosing fine-grained reactivity: benefits for developer experience, efficiency, and end-user performance.

How the transition to React Server Components enables better internationalization solutions.

Join me on a musical journey through the world of open source software as I share the story behind crafting from scratch an online guitar tuner with Javascript.In this talk, we'll explore the delightful intersection of mathematics and development, where a simple curiosity led to the creation of an open-source tuner using React and Next.js.I'll share insights and challenges into the implementation of the tuner, navigating through the algorithmic landscape of autocorrelation and frequency calculations.

Labeled arrows are one of the most widely used features when it comes to whiteboard, isn't it? In this talk, I will be deep-diving into the internals of labeled arrows and how they work under the hood in Canvas and SVG and I will be also sharing my experience building labeled arrows in Excalidraw - A virtual free Open-Source collaborative end-to-end encrypted canvas-based editor for sketching hand-drawn diagrams.

Progressive web apps describe a whole new set of browser features that enable completely new ways of interacting with web applications.While originally intended as an alternative to mobile apps, we are seeing more and more desktop apps that rely on the web platform. Photoshop, Visual Studio Code, Squoosh, Clipchamp and the whole Google Office Suite are just a few examples of a growing number of completely web-based desktop applications - Superwebapps!.In this talk, we will focus on some of the new and exciting browser capabilities that allow us to create powerful React applications that make our daily lives easier. Of course, including tangible examples and an outlook on the browser roadmap.

Chaos Engineering is a current trend which involves studying the behavior of a system in the face of external events that are often unlikely, but in this case provoked (server or load-balancer crash, loss of DNS, etc.).The disorder thus generated provides a wealth of information on how our systems work, enabling us to improve their robustness.But strangely enough, all the books, talks and tutorials on Chaos Engineering overlook an important component of our systems. And yet, if there's one area where unpredictability, inconsistency and the need for resilience are central concerns, it's the frontend.💥Chaos, frontend, and Japanese ancestral art 👘: 3 notions that at first glance have nothing in common, but which together open up new perspectives in the development of our applications.

Building end-to-end encrypted applications is exciting, but also intimidating. This talk is designed to lower the entry barrier, offering a clear roadmap for integrating end-to-end encryption in collaborative, real-time applications.We begin by unveiling a simple design with one shared encryption key, promptly addressing its inherent challenges. Progressively, we delve into tools like Opaque, Secsync and CRDTs to tackle the challenges we identified and enhance our application with the goal of offering a seamless user experience without compromising on security.Each segment of the talk starts with an accessible overview before diving into practical, code-based examples. This approach not only demystifies the intimidating theory and empowers attendees with the tools and knowledge to apply these principles effectively in their projects.

In our daily routines as frontend engineers, we diligently apply unit, integration, and end-to-end tests to our development processes. The primary goal of these practices is to deliver features at high velocity with confidence in the robustness of our code. It's crucial to ensure that any modifications we introduce do not inadvertently disrupt the app's functionality. However, an often overlooked aspect of software testing is the visual part. Even if your app works correctly from a functional standpoint, what if key visual elements, such as call-to-action buttons, are obscured or entirely missing from the user's view?
In this talk, we will dive into the inner workings of visual regression testing. We'll explore how it functions and what steps are taken between the start and the result of such a test. We will look into the challenges it encounters along the way as well.