React Summit

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

React Summit 2023

FocusReactive

Tiny

Descope

Chromatic

Kontent.ai

React Bricks

Ag Grid

Contentful

Rangle

Rapyd

JetBrains

Shopify

GitHub

Wix Codux

The Graph

Callstack

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 <a href="https://focusreactive.com/storyblok-expert-agency/" target="_blank" rel="noopener noreferrer">Storyblok</a> or <a href="https://focusreactive.com/sanity-expert-agency/" target="_blank" rel="noopener noreferrer">Sanity</a>, FocusReactive is the one to help you scale.

As a special perk, we're offering a complimentary NextJS audit 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

<span style="font-size:10pt;font-family:Arial;font-style:normal;" data-sheets-root="1" data-sheets-value='{"1":2,"2":"Chromatic is a visual testing & review tool that scans every possible UI state across browsers to catch visual and functional bugs."}' data-sheets-userformat='{"2":1049345,"3":{"1":0},"11":3,"12":0,"23":1}' id="isPasted">Chromatic is a visual testing &amp; review tool that scans every possible UI state across browsers to catch visual and functional bugs.

The New Next.js App Router

Lee Robinson

Should You Use React in 2023?

Tru Narla

Video Editing in the Browser

Christopher Chedeau

Speeding Up Your React App With Less JavaScript

Miško Hevery

Principles for Scaling Frontend Application Development

Principles to Leading a Large Software Infrastructure 

Malte Ubl

Debugging JS

Mark Erikson

How Not to Build a Video Game

Christoph Nakazawa

Building Pixel-Perfect UI Components Using CSS Variables

Sam Sycamore

Moving on From Runtime Css-In-Js at Scale

Siddharth Kshetrapal

Reactivity: There and Back Again

Michel Weststrate

No CRA? What now?

Juri Strumpflohner

Development History of Zustand

Daishi Kato

Improve Your Website's Speed and Efficiency with Partytown

Adam Bradley

Bringing Controversial Ideas to React

Sanket Sahu

WHOA, I Wrote This React App With My Voice!

Rizel Scarlett

Optimising Images in Web and Native

Kadi Kraman

Bring Development Closer to Production with Valid HTTPS Certificates

Linda Ikechukwu

React Concurrency, Explained

Ivan Akulov

Giving Superpowers to Your React Apps with Machine Learning

Shivay Lamba

Modern Approaches for Creating Extremely Fast Websites

Brad Westfall

The Rise of Modern Transactional Stack

Yoko Li

Code Signing React Native Apps

Cecelia Martinez

React Myths And Legends

Nadia Makarevich

GraphQL in 2023 - Still Relevant?

Lenz Weber-Tronic

Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS

Slobodan Stojanović

Pushing Boundaries To The Edge

Facundo Giuliani

Go From Zero To Hero: Be Cross-Platform Devs With React Native

Arisa Fukuzaki

Brooks Lybrand 

useMachineLearning… and Have Fun with It!

Nico Martin

Making Interactions Accessible to All Users

Anuradha Kumari

Get Rid of Your API Schemas with tRPC

Giorgio Boa

Extending React Using Astro

Elian Van Cutsem

Supercharged Code Refactoring via Abstract Syntax Trees

Stephen Cooper

10x Your Teamwork Through Pair Programming

Selena Small

Server Components: The Epic Tale of Rendering UX

Nikhil Sharma

Matheus Albuquerque

I Run Code From the Internet!

Zbyszek Tenerowicz

Secrets in Source Code - How Your JS Code is Exposing Your Credentials 

Mackenzie Jackson

Michael Milewski

You Can’t Use Hooks Conditionally… or Can You?

Charlotte Isambert

Zod === Typescript, but at Runtime in Your React Applications

Luca Del Puppo

Visual CMS… cool for React devs? Now’s the time!

Matteo Frana

Scaling React-Three-Fiber Applications beyond the Hello World

Giulio Zausa‮ 

Tired of Tech? Hit Reset with a Sabbatical or LOA

Kamran Ayub

Synthetic Monitoring and E2E Testing - 2 Sides of the Same Coin

Carly Richmond

7 TypeScript Patterns You Should Be Using

Morten Barklund

Overcoming Performance Limitations in React Components for Low-end Devices

Seungho Park

Federated Microfrontends at Scale

Daniel Bolivar

Jerel Miller

Tuning Retro Video Archives for Display on the Modern Web using WebGL in React

Travis McGeehan

How (The Heck) Did We End Up Here?!

Christian Ivicevic

Is My React Web App Ready for Launch?

Aditi Verma

Meet Your New BFF: Backend to Frontend without the Duct Tape

Noam Honig

How To Build a Chrome Extension Using React

Adina Stoica

Introduction to Library Marketplace

Brendon Co

Our Journey Into μFrontends

Rita Castro

Making Impossible States with fp-ts and TypeScript in a React Application

Cristhian Motoche

Off with Their Heads: Rise of the Headless Components

Omry Nachman

How Grafana Uses React to Power the World of Observability

Nathan Marrs

Jordan Gensler

Canaries in the CloudFront

Vijay Ramesh

How to Become a Fintech Developer in Seven Minutes

Tiki Lobel

Thinking in React Query

Dominik Dorfmeister

Using PKCE to Communicate Between React and Native Mobile SDKs

Itai Hanski

Improving Developer Happiness with AI

Senna Parsa

The Future is Composable: Where to Start in Building for It   

Henry Smith

Supercharging React Apps with WASM

Mukkund Sunjii

Config Driven UI using ReactJS

Joban Singh

The Path Through Legacy: Delicate Balance Between Tolerance and Phobia

Maxim Nam

Everything old is new again. But this time it's different, promise!

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.

GitHub Copilot is an AI pair programmer that can help you write code faster and spend less time writing repetitive code.This session will cover some interesting use cases for Copilot that could shine a light on its possibilities. This ranges from prompting Copilot to suggest a function based on a comment, learning how to use a new framework, tackling a security or accessibility bug, better documenting your code, translating  code from one language to another, etc.Agenda: Introduction to CoPilot - What is Copilot - How can you use it - How it can help you write code faster - Copilot Labs experimental features I will pick examples from the React ecosystem and show how we can fix Security Vulnerabilities and Accessibility issues in some components.

As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

After spending over a decade at Google, and now as the CTO of Vercel, Malte Ubl is no stranger to being responsible for a team’s software infrastructure. However, being in charge of defining how people write software, and in turn, building the infrastructure that they’re using to write said software, presents significant challenges. This presentation by Malte Ubl will uncover the guiding principles to leading a large software infrastructure.

The talk will be a story of how Personio went from rendering through a Monolithical PHP architecture, to a microfrontend oriented Next JS app, powered by Module Federation and the NX monorepo toolchain.

React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

In this talk, Siddharth shares the challenges his team faced with optimising runtime css in js (styled-components) for performance. At GitHub, there are about 4000 React components that contain styles, Siddharth dives into the reasons for rethinking styling architecture, the challenges faced and lessons learned by migrating a big application.

It’s the hooks rule number one: “Only call hooks at the top level”. But what if I told you that this rule does not apply to every hook? One of them can actually safely be used conditionally.  To understand how useContext is different from other hooks, and why it is exempted from this major rule, we need to know why this rule exists in the first place. We will build our own mental model of react’s rendering behavior, focused on how react keeps track of data at runtime: props, states, refs… and context values.

It's safe to say that a lot of websites and apps these days are heavily reliant on images: product images, avatars, social sharing. With continued technological advances, the variety of device sizes you need to support keeps growing. How exactly are we to make the same page look great and feel performant on both a 16'' MacBook Pro with a retina display as well as a small 5 year old Android phone? We will look at some of the modern approaches to tackle just this problem on web and native - as well as what happens if you don't.

Are your websites accessible to all users? Are all the users able to interact with your application as intended regardless of their disabilities? Accessibility often remains an afterthought even today, and I am here to share how we can change that. In this talk, we will explore best practices for designing and building user interactions for websites that are accessible and user-friendly for our users. Using semantic HTML and ARIA attributes, we will cover strategies for interaction from a simple button, to navigation, to different form elements and custom components.

Next.js 13.4 recently released the stable version of the "App Router" – a transformative shift for the core of the framework. In this talk, I'll share why we made this change, the key concepts to know, and why I'm excited about the future of React.

Meta frameworks are increasingly popular. People dunk on React all the time. Are you insane for still using React? The talk is going to cover how real companies make this evaluation of which framework to choose. It's talking about the advantages of using React, primarily focusing on the positives but also offering constructive thoughts on why you might not want to.Should you use React in 2023?

In this talk is focused on performance-optimizations and standards-based approaches to achieving the fastest version of your site that you can have. We'll also talk about modern tooling and frameworks like Remix which help make your site fast with very little effort.

When refactoring large code bases, Find and Replace even with Regexes, can only get you so far. When that fails don’t fallback to painful manual updates instead reach for Abstract Syntax Trees (AST). In this session we introduce AST’s and show how they can be used to reason about / generate code. You will leave with a greater understanding of how you can automatically update code and new insights into how code linters work under the hood.

CSS variables have become so sophisticated in recent years that they now enable us to do things that aren't possible with JavaScript. In this lightning talk, I'll explain how MUI's engineers are leveraging the power of CSS variables in our new React component library, Joy UI, to deliver components that automatically adapt their style and structure to the context in which they're rendered.

WASM has taken over the web-development scene in the past few years. It is a language that can be run by the web platform alongside with Javascript. Being treated as a target language, a variety of low-level, statically-typed languages such as C++ and Rust can be compiled to WASM. Thus, a variety of complex, computationally intense applications can now be tackled through readily available web applications. Demos of 2 such applications are shown in the presentation and a side-to-side comparison is done next to JS code.

Developers play an essential role in integrating and monetizing financial services. In this lightning talk, we will explore the concept of embedded fintech and its use cases. We will then dive into a demo showing how to set up and integrate financial services using the Rapyd API. By the end of this talk, attendees will have a clearunderstanding of how to get started integrating fintech into applications. With clear instructions on how to get started, this talk will provide developers with the knowledge and resources they need to get started as fintech developers in just seven minutes.

So CRA is no more and it probably was about time. The React docs suggest Next, Remix or Gatsby...but you're not ready yet for a full-blown React Meta-Framework and really just want pure React. Any alternatives? In this talk, I'm going to explore exactly that. We've got 7 minutes, so no slides, just code where we're going to set up a new React standalone application using Nx.

It’s important to have a frictionless, secure, and performant authentication system for any app, be it web or mobile. In this lightning talk, Itai Hanski covers the importance of authentication and how the Descope team used PKCE to communicate between their React web app and native mobile SDKs.

GraphQL is a powerful and useful tool, especially popular among frontend developers. It can significantly speed up app development and improve application speed, API discoverability, and documentation. GraphQL is not an excellent fit for simple APIs only - it can power more advanced architectures. The separation between queries and mutations makes GraphQL perfect for event sourcing and Command Query Responsibility Segregation (CQRS). By making your advanced GraphQL app serverless, you get a fully managed, cheap, and extremely powerful architecture.

Aren't You Tired of Repeating Yourself? Tired of repeating the same code over and over again in your React projects? In this talk, we'll discover the power of headless components, a design pattern that separates the logic from the presentation layer, allowing you to create reusable and flexible UI components. We'll explore how headless components can simplify your development process, saving you both time and effort. We'll examine popular headless component libraries and provide tips for integrating them into your projects. Whether you're a beginner or an experienced developer, join us to discover how headless components can help you streamline your React development and create high-quality, customizable UIs.

In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

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

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

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

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

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

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

We know if we have the fundamental of JavaScript and React knowledge, we can build cross-platform apps. But how many of you have tried out? Learning once and shipping for several operating systems sounds so cool. Don’t you want to experience how it’s easy to transfer your JS &amp; React knowledge and powerful built-in APIs to extend your dev skills? In this talk, we’ll see some facts from a developer perspective and a few examples of how you can transfer your JS &amp; React knowledge.

Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach

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

1. A brief history of web content management since 1996, with alternating code and visual tools:    - The “FTP” era: Code editors &gt; FrontPage/Dreamweaver    - The “monolithic” era: CGI/ASP/PHP simple CMSs with gray tables &gt; WordPress visual &gt; WordPress with ACF    - The “current” era: Headless CMSs &lt;&gt; Visual tools like Wix and WebFlow 2. Why now’s the time we need a new kind of CMS 3. What is React Bricks 4. The experience for content editors (explained by a customer’s content editor) 5. The experience for developers (explained by a partner agency’s web developer)

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

In this talk, I'll explain React Query from a different perspective. After having maintained React Query for over two years and having answered many questions (often the same ones multiple times), I feel like there might be a fundamental understanding missing about the lib. I'll start with a quick introduction about my journey into open source and how I got to know React Query, followed by showing which mindset change is beneficial when working with React Query - how to "think in React Query". I'll have 3 major takeaways: 1) React Query is not a data fetching library It's an async state manager, we'll quickly talk about what makes a state manager, why React Query is one and what "async state" means. 2) staleTime is your best friend I've seen a bit of confusion about how to use React Query as a state manager, so I'll explain why setting staleTime is mostly all you need 3) parameters are dependencies This is important to understand to show the boundaries between client state and server state, and is essential when doing state management with React Query I will then end with a note on "separation of concerns" and about the tradeoffs of just calling `useQuery` wherever you need it in your component tree.

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

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

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

Tech is tiring. Whether you’re trying to stay upskilled on the latest JavaScript framework or wading through toxic work swamps, it feels like burnout is constantly looming on the horizon. Sabbaticals and leaves of absence (LOAs) are two benefits you could take advantage of to catch a much-needed (and overdue) extended break. I’ve taken both, one time to live abroad in France for 6 months and the other time to take the summer off for 10 weeks, both at different Fortune 500 companies and each time they moved my career forward, not backward. I’ll walk through step-by-step how to figure out if you’re eligible for these benefits, break down the implications to insurance and job security in plain language, and illustrate some strategies on bridging the income gap so you can sleep at night. By the end you’ll walk away with the confidence to finally give yourself permission to reset and get excited about tech again.

Over the last few years, there has been a great focus on shifting tests left to earlier in the software development cycle. It's great that the emergence of trends such as e2e testing has enabled us to validate the user workflow earlier. However, they do not eliminate the need to monitor this workflow against a live production system. I have seen that the segregation of development and support teams leads to both teams using different tools to build similar automation that simply targets different environments of the same software. By joining forces, we can build automated scripts that can be used both for production monitoring and testing within CI. In this talk, I will discuss the causes of this cultural divide, and why this needs to change for us to shift user testing both left and right. Furthermore, I shall show how this can be achieved using Playwright and Elastic Synthetics and also chat through the challenges you may face shifting left and right.

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

With fetching libraries like TanStack Query, swr, or RTK Query becoming more widespread, some of the immediate “selling points” of GraphQL clients seem to be less unique - so it might be a good idea to take a step back and ask the question “is this even still relevant?”. And to already take the answer away - it is “yes”. The unique selling points of GraphQL go far beyond having a smooth data fetching experience by solving many inter-team and architectural problems. While it might not always be immediately evident as a benefit for us as Frontend Developers,  GraphQL gives us a lot of freedom and makes us less dependent on backend teams implementing a Backend-for-the-frontend for us. Also, while data-fetching libraries have made it a lot easier to work with REST nowadays, GraphQL still has properties that are just not present in traditional REST APIs, and on top of that GraphQL has kept evolving. New directives like @live or @defer enable developers to create a fantastic user experience with very little work - especially when combined with React’s new suspense features.

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

React Summit 2023

The biggest React conference worldwide