React Summit 2024

The state of frontend development last couple years is in an odd place for the uninitiated web developer and expert alike. Server Components? Resumability? Hydration? Waterfalls? Islands? Why so much focus on water? And why are we even talking about this? In this talk, SolidJS creator Ryan Carniato explores the landscape of modern web development to understand how we got here and what these solutions really solve.

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.

No more loaders, no more errors - Suspense has revolutionized the way developers handle asynchronous operations.But have you ever wondered what magic enables Suspense to work? How does Suspense know it has to display a fallback because a query is going to happen in a component below?In this talk, we’ll explore the inner workings of Suspense to uncover the magic that empowers one of the most beloved components of React.

SolidStart is the full stack Meta-Framework from the SolidJS ecosystem. It brings multiple tools and libraries together in a composable fashion to offer highly performant, understandable, and scalable foundations for web applications. Let's explore how SolidStart solves common UX and DX for building better apps.

This talk offers a gentle introduction to a new paradigm of durable workflows by walking the audience through a common use case: user onboarding email campaign. I’ll show how the DIY approaches tend to be slow and unreliable — or require significant investment of resources. Instead, by embracing background jobs you can deliver a great User Experience and stress-free ops. More and more companies favor short development cycles and lean approach to headcount. Being able to own entire business workflows end-to-end turns (formerly) front-end teams into empowered product teams.

Did you know introducing useEffect solved a whole class of performance issues? Did you know <Suspense> was designed to make hydration several times smoother without you even noticing anything? 
React has changed a lot. Many of these changes were driven by a desire for better architecture. But under the hood, each of these changes also pushed us to write faster apps – often, without us even noticing that.
In this talk, let’s look at some rarely known React performance details almost nobody knows about:
- useEffect, and how it’s faster than componentDidMount- Batching, and how it improved from version 0.4 to 0.12 to 18- Suspense, and some of the less obvious effects of using it- and possibly even more

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.

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.

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.

Managing state in React 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 harder than it should be. 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 "call the OpenAI API and hope for the best". You will learn how you can leverage AI in your existing React apps to create the best UX possible, and peer into the future of AI agents.

We'll delve into the intersection of web development and NFT (Non-Fungible Token) technology. As the digital landscape continues to evolve, developers are constantly seeking innovative ways to enhance user experience and security. From authentication to user permissions. NFTs offer a decentralized and secure solution that can reshape the way we interact with web applications.

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!

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.

Explore the integration of OpenAI's GPT into React applications to create dynamic, intelligent user interfaces. This session offers practical insights into leveraging GPT's powerful NLP capabilities for chatbots, content generation, and personalized user experiences. Dive into the technical setup with Next.js 14, LangChain, Vercel's AI SDK, and MongoDB's Vector Search to optimize and customize your applications. Join us to transform your React projects with AI.

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 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.

What would a backend look like if it was designed with modern React applications in mind? What could the database do if it followed core React principles? Learn about a new approach to building fullstack apps with a reactive database in this lightning talk.

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.

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.

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

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"

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.

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.

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.

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

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.

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.

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.

Artificial Intelligence (AI) is now a must-have in software development, and the demand for AI engineers is rising through the roof. As a React developer, it is a good chance to grow and expand. Many React developers might wonder: “What do I need to know about AI? and do I have what it takes?” With AI reshaping industries, the pressure to adapt and expand our skillisets is palpable. The question isn’t just about staying relevant; it’s about seizing unprecedented opportunities in development and automation. What if learning AI could help you do more with React? Think about using AI to help with coding, or to make smarter apps faster. This talk will show you how to start. in this talk, we’ll demystify the role of an AI engineer and outline the essential skills React developers need to transition into this evolving field.

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.

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.

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 .

Setting up a project has previously been quite cumbersome including gluing libraries to work together. This talk will dive into revolutionizing project setup using Create T3 App and the flexibility of modular selections to get you started in minutes.

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. 

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.

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.

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.

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.

This 20 min talk will discuss how to use Oracle 23ai in a full stack development environment. It will discuss the different layers of the stack, Oracle 23ai as the database, Parse Server as the Backend and React Native for Front End development. The talk will also discuss the new features offered to developers such as Vector Search, Property Graphs, JSON Duality and JavaScript Stored Procedures.

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.

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.

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. 

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.

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.

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!

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.