React Summit US

React Summit US 2023

FocusReactive

Kontent.ai

Ag Grid

Sentry

Grafbase

Sourcegraph

Clerk

Replay.io

Cloudflare

Canva

imgix

Follow Sam Julien's Thinkster course to learn how to quickly integrate AG Grids extensive feature-set into your commercial apps for free, today!

AG Grid is a free & open-source React Data Grid with exceptional performance.

Get 3 months FREE of Sentry's business plan with code reactsummitus.&nbsp;Sign up now to monitor all your React errors and performance issues today.

From Error tracking to Performance monitoring, Sentry is essential for monitoring application code quality. 

Kontent.ai is a headless CMS with a world-class TypeScript support. Generate TS types from your content model and fetch content in strongly-typed structures to discover potential issues at build time. Avoid production errors caused by content once and for all. AI features are just a cherry on top.

Kontent.ai is a headless CMS with a world-class TypeScript support.&nbsp;Get 3 months of full-featured Kontent.ai trial.

Kontent.ai is the headless CMS that empowers all roles to deliver standout experiences.

Connect your APIs, databases and micro services and deploy a high-performance, federated GraphQL API in minutes with Grafbase.

&nbsp;It’s purpose-built for the modern web and designed to get you up and running in minutes.

Clerk is the easiest way to add authentication and user management to your React app. Get Started with Clerk's Generous Free Tier.

Clerk is the easiest way to add authentication and user management to your React app. 

All new and existing Cloudflare account holders are eligible. Once you've created your Cloudflare account, submit your account ID <a href="https://docs.google.com/forms/d/e/1FAIpQLSfO75KLJaalEiwEbXfOdkux8bHNVvER7z0RZ3COkxS0YX31eQ/viewform" target="_blank" rel="noopener noreferrer">here</a> for your chance to win! We're excited for you to get started with Cloudflare today!

Sign-up for a Coudflare account and you could win a YETI Crossroads Backpack!

Build.Deploy.Done. Build the next big React application with Cloudflare Pages. 

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

Sourcegraph: Unleash Cody, the precision code AI, and Code Search to conquer codebase exploration, migrations, and security fixes like a pro.

Replay is the only browser that lets you record and retroactively debug your application. 

Canva is a free-to-use online graphic design tool. Create stunning designs in no time with unlimited access to premium content, more powerful design tools, and AI-powered magic. Try out the Apps Marketplace, where you can get your hands on all of the amazing apps that have been built by Canva Developers.

Get a free 30 day Canva Pro trial

Canva makes it easy to create professional designs and to share or print them.

Get a demo to access a free 3-month imgix enterprise trial!&nbsp;

imgix is a powerful platform that’s designed to future-proof your images.

The Epic Stack

Kent C. Dodds

React Server Components Panel Discussion

The Whimsical Potential of JavaScript Frameworks

Josh Comeau

The Rise of the AI Engineer

Shawn Swyx Wang

Andrew Clark

If You Aren’t First You’re Last

Ken Wheeler

Three Factors That are Blocking Contributions to Your Open Source Project

Saurav Jain

Tom Preston-Werner

Gateway to React: The React.dev Story

Rachel Nabors

Modern Redux With Redux Toolkit

Mark Erikson

Opt-in design - the new era of React frameworks

React Server Components from Scratch

Benjamin Holmes

OpenAI in React: Integrating GPT-4 with Your React Application

Jesse Hall

Beyond First Load Speed with INP

Medhat Dawoud

Forget Bad Code, Focus on the System

Swizec Teller

Virtual DOM: Back in Block

Aiden Bai

Building Friendly User Experiences in Web3

Rahat Chowdhury

Want to Build an Enterprise-Grade App? Tear One Down!

Nitya Narasimhan

Authoring HTML in a JavaScript World

Tony Alicea

Type-Safe Style Systems: The Future of CSS

Josh Goldberg

R3ACT: A Frightening Look At Performance Figures

Henri Helvetica

React Concurrency × Core Web Vitals

Ivan Akulov

Beyond JavaScript: Maximizing React With Web APIs

Shivay Lamba

The Unexpected Key Value Pair in Mentoring

Sidney Buckner

Trees aren't just Foliage: ASTs and Practical Usage

Chris Griffing

Automating React Native Deployments

Cecelia Martinez

Taming the State Management Dragon

Bryan Hughes

The Messy Middle — Navigating Complexity in Large React Applications

Maxi Ferreira

Pushing boundaries to the edge

Pushing Boundaries to the Edge

Facundo Giuliani

Matt Carroll

Design Systems Carnival! One Accessible Component, Many Pretty Masks

Kathleen McMahon

Wait, You're Shipping React Native to the Web?!

Taz Singh

Alexandra Spalato

Why Redwood Adopted React Server Components

David S. Price

Anyone Can Be an Open Source Maintainer

Brittany Joiner

A11y Beyond the Theory: Integrating Accessibility Testing Into Your Workflow

Lucky Nkosi

Rendering: To Sync or Not to Sync?

Stephen Cooper

Suspense for Data Fetching: How to Fetch During Render

Robert Balicki

How to Use Suspense and GraphQL with Apollo to Build Great User Experiences

Alessia Bellisario

Kathryn Middleton 

A Nerdy Guide to the Web Trending Concepts

Daniel Afonso

Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style

Pillippa Pérez Pons

Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe

Kaleb McKelvey

How Realm by MongoDB is Testing Native Modules “on device”

Kræn Hansen

Measuring Coverage of React Design System

Karan Kiri

You's the Platform!

Jon Jensen

Building a Node.js Runtime for the Browser

Jasper De Moor

Content Security Policy with Next.js: Leveling Up your Website's Security

Lucas Estevão

Road to Zero Lint Failures: Tackling Code Quality Challenges at Scale

Chris Ng

Using the React Ecosystem With the World's First O(1) Javascript Framework?

Ruby Jane Cabagnot

Breaking the 'useEffect' Habit

Mike North

Jerel Miller

Javascript Optional: Modern React Applications That Work Without JS

Konstantin Lebedev

Heather May

React State Management with Valtio 

Niya Panamdanam

Transforming Images Using AI Without Leaving Your React App

Luis H. Ball Jr.

Superpowers of Browser's Web API

Nikola Mitrovic

Canva’s App UI Kit: Empowering Developers With Modern Web Technologies

Tom Northall-Little

Shaun Evening

A behind the scenes look at the design and development of the all-new React docs at react.dev. The new react.dev launched this year introducing new methodologies like challenges and interactive sandboxes and subtle inclusivity features, like "international tone" and culturally agnostic examples. Not only have the new docs changed how people learn React, they've inspired how we think about developer education as a community. In this talk, you will learn how the React team and some ambitious community members made the "React docs rock" for a generation of front end developers and how these new patterns and established techniques can be applied in your favorite projects.

We are observing a once in a generation “shift right” of applied AI, fueled by the emergent capabilities and open source/API availability of Foundation Models. A wide range of AI tasks that used to take 5 years and a research team to accomplish in 2013, now just require API docs and a spare afternoon in 2023. Emergent capabilities are creating an emerging title: to wield them, we'll have to go beyond the Prompt Engineer and write *software*. Let's explore the wide array of new opportunities in the age of Software 3.0!

In the 10 yrs that React has been present, we've seen an unprecedented amount of progress on the web. The browsers have grown in capabilities by leaps and bounds, tooling exploded and frameworks slowly emerged to become quotidian technology. But just as the web changed, so did users of the web AND their needs. Performance engineers have monitored the lavish and liberal use of frameworks, resulting in the disservice to users AND their user experiences. "R3ACT" is talk that will uncover and discuss some performance perils as they appear on the web, with React in mind, supported by lab and rum data.

When it comes to building whimsical interfaces, React is a surprisingly capable ally. In this talk, I'll show you how I use React to orchestrate complex interactions by digging into some examples from my blog.

At Netflix, millions of our users watch Netflix on TV Devices. How do we develop the UI for all of the different types of devices? That's exactly what I wanted to know!
I'll be sharing why it's important to take on new growth opportunities, how to navigate the difficulties of learning a whole new platform at a new company, and some of the things I've learned about how we use React to bring Netflix to your TV!

React server components (RSCs) are a huge paradigm shift for React. You might even ask if NextJS and server components are the same thing (spoiler: they're not!) This talk demystifies how RSCs *really* work outside the framework. We'll build our own Node server, hook up the RSC renderer by hand, and understand the bundling and routing logic to ship a server component to your browser. Yes, all with live coding. What could go wrong...?

Let’s dive deep into React rendering and evaluate the implication of Concurrent Rendering and automated batching on code that previously relied on the synchronous nature of v17. Does it always make things better?
With a real world case study, we evaluate useSyncExternalStore and flushSync as tools to restore synchronous rendering to avoid “visual tearing”. Working through the trade-offs of these approaches will give us new insights into React rendering and hints on how we can optimise our applications.

Have you ever tried browsing your favorite websites with JS disabled in your browser? It can feel like cutting a lifeline for the internet. Instead of welcoming user-friendly interfaces you’re faced with a blank wall that says “please enable JavaScript“ in the center of it. But it doesn’t have to be that way. In this talk, we’ll explore techniques for building modern web applications that can remain functional in a JS-free environment, and provide a full experience when JS is turned on.

<div>This talk comes with bad news. Google has launched a new metric – INP – which measures how fast page interactions are. This metric becomes a Core Web Vital in Mar 2024 – and pretty much every React app Ivan has seen so far has this metric way in red.</div><div> </div><div>The good news is React 18 shipped new features that help to solve this – notably, useTransition() and Suspense. And in this talk, we’ll look at how exactly these features work, what they do, and how we can use them to make INP green.</div>

Redwood, an open source full-stack app framework, has gone all-in on React and React Server Components. Why? Despite RSC’s early stage and complex implementation, Redwood is uniquely positioned to capitalize on RSC capabilities, enabling exciting new features, possibilities, and DX.

Image optimization libraries abstract away the hard parts of working with images so that you can focus on shipping. But these tools don’t let you do complex transformations to your existing images. Adding text, removing distracting backgrounds, or upscaling images to higher resolution all require you to download, transform, and re-upload your images. This talk will explore using AI image APIs and unpic-image to handle complex image transformations inside our React applications. We’ll remove and replace image backgrounds and use context-aware facial cropping to create responsive layouts.

This talk will be centered around improving user experiences in web3 by abstracting away blockchain interactions.

Redux Toolkit 2.0 is coming Soon (TM)! Find out what's changing and why, the work that's gone into repackaging the Redux libraries, an overview of new features and breaking changes, and the latest status on the release plans.

At Canva, we help 150 million + monthly users create and design. How do we enable developers to do the same? Intro Canva's Apps SDK, which is built to empower developers to efficiently create UIs for their Canva Apps using React. Canva recently streamlined the app creation process by compiling some of the most frequently used and requested UI components by our developers in our @Canva /app-ui-kit package. I'll be sharing how we iterated upon our Apps SDK to empower developers globally to build their brand into Canva.

This lightning talk explores how you can enrich your React projects with Web APIs. From handling data to interacting with browser features, attendees will gain insights into leveraging the power of Web APIs for an enriched and efficient React development experience to highlight the out of the box capabilities offered by Browsers.

In this talk I will be covering various strategies and techniques that you can employ to make your apps fast and keep your apps fast. From tips and tricks around measuring performance, to architectural strategy and dirty rotten tricks.

Design System components are like guests at a Venetian Carnival, enjoying the festivities. One guest — the disclosure widget — wears three distinct masks, elevating a Carnival to a Masquerade Ball. Or… is it? What kind of Carnival are you attending if those masks get mixed? In this talk, you’ll learn the secret to creating a reusable — and accessible — component that can masquerade as many and give your component library access to the most exclusive of Carnival attractions.

Prop drilling is fine. Duplication is great. Long functions are love. We talk a lot about bad complicated code because it’s easy to see the problem. But research shows engineers can work around self-contained bad code just fine. What really trips them up is something else entirely – architectural complexity. Architectural complexity makes your code hard to work with, causes 3x more bugs, halves productivity, and may even cause devs to ragequit. In this talk we explore what you can do.

Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.

Building enterprise-grade applications is challenging. So how can you learn to build one? Start by tearing one down!! Say hello to Contoso Real Estate - an open-source reference implementation featuring a composable architecture with micro-frontends and a cloud-native backend - that provides the perfect sandbox for hands-on exploration and learning. In this talk, we'll take the implementation for a spin using GitHub Codespaces as our local development environment to explore the code, build &amp; preview the application and deploy it to the cloud with one command. We'll dive under the hood to understand the project structure (monorepo), developer experience (tooling) and application insights (monitoring). Want to join me on the teardown adventure? Just bring your browser and a GitHub account!

In this talk, we will go on a journey in the future of the core web vitals potential member INP, which will help in improving the interactions in all interactions in the session's lifetime, not only the first input delay as in the FID, showing some case studies and a way to optimize your website for INP, you will go away with a bunch of recommendations to do immediately

Lint rules enable us to uphold code quality and minimize errors. It can positively impact developer productivity and happiness especially when working in a massive application with multiple teams working together. But what if your large scale application contains thousands of lint failures over the many years it has been running in production? This talk will explore actionable strategies for effectively addressing lint failures at scale so that we can once again rely on lint rules to ensure consistent code quality and streamline development processes, leading to a more robust and maintainable codebase.

What do S.H.I.E.L.D. and A.R.G.U.S. have in common with edge computing? How can Iron Man and Batman help you understand hydration, partial hydration, and resumability? What can the Watchers or the Monitors tell you about Reactivity? Join this adventure straight from the pages of a comic book as your favorite heroes and villains help you understand some of the most discussed topics on the web now.

What is suspense for data fetching in React? Why does React's model make creating network requests during render so difficult? Why does (to the presenter's knowledge) no library besides Relay support this, despite its sheer convenience?
 In this talk, Robert will discuss how React renders components (especially with regards to Suspense), and how to build a data-fetching library that functions correctly in light of those behaviors. Then, with all the pieces in place, we'll use a library, @boulton/react-disposable-state, to roll our own suspense-compatible data fetching!

Join us as we dive into the exciting world of React Server Components, an feature designed to revolutionize the way we build web applications. In this action-packed talk, we'll explore the key benefits of Server Components, such as reduced client-side code, improved performance, and streamlined development experience. Through engaging examples and live demos, you'll learn how to integrate Server Components into your React projects and harness their power to create next-level user experiences. Don't miss out on this opportunity to stay ahead of the curve and elevate your React skills!

In this talk, we will explore how Valtio can simplify your React state management by providing a minimalist and performant solution. We will cover the basics of Valtio, including how to create and update a store and how to access and modify the store from your components. We will also dive into some advanced Valtio features, such as subscribing to changes in the store, andusing memoization to optimize your components' performanc. By the end of this talk, you will have a solid understanding of how Valtio can make your state management more efficient and effective, allowing you to create scalable and maintainable applications.

The project started out great—the team was motivated, moving fast, and shipping features ahead of schedule. But little by little, complexity found its way in. Implementing small changes takes forever now, tech debt is piling up at an alarming rate, and everyone is losing confidence that the project will ever get done. Welcome to the messy middle.  Taking examples from real-world projects that shipped way too late, we'll explore the symptoms and causes of complexity in large React applications, and we'll share tips and strategies for dealing with it before it takes over your codebase.

These days everything has an app or website and users have come to expect perfection out of their UIs. With the bar so high, it can be overwhelming for those of us designing and building those experiences. Before you start building you need to choose fonts, type, spacing, and colours. What’s more, every decision you make seems to lead to even more options. Shaun will show you how to work through these tough decisions in small isolated steps that will make this massive undertaking feel like a breeze. You’ll learn how to build your colours, typefaces, and spacing into design tokens, build a theme, and develop your components in isolation using tools like Storybook.

Defeat Decision Paralysis: Building a Killer Design System in Isolation

Ready to take a thrilling ride into the world of headless e-commerce with Shopify Hydrogen? This cutting-edge solution, built on top of Remix, is the latest and greatest way to build high-performance online store. E-commerce is more important than ever, and providing a seamless customer experience is key. But building a platform that delivers can be daunting, even for experienced developers. With Hydrogen, you'll not only find it easier to build a top-of-the-line online store, but you'll also discover how much fun it can be! From creating collections and products to implementing a shopping cart, we'll show you how Hydrogen can take your developer experience to the next level.

Lightning Fast E-Commerce: Remix your Shop with Shopify Hydrogen

In this talk, we'll explore the powerful security feature of Content Security Policy (CSP) and how it can be implemented in Next.js to bolster your website's defenses against common web attacks like Cross-Site Scripting (XSS) and data injection. We'll cover the basics of CSP, its benefits, and best practices for implementing it in Next.js.  Additionally, we'll share some tools to evaluate and test your policy. By the end of this talk, you'll have a solid understanding of how to level up your website's security with CSP and protect your users from the ever-present threats of the modern web.

Most CSS developers today write visual styles in terms of what you literally see: exact color values, size numbers, and so on. But what if you could write styles as a function of how they fit into your design system? And what if you could get type safety in specifying and using those values, including in responsive props? This talk will dive into some of the key features and flaws in many design system builders today such as Chakra UI and Tailwind. We'll establish what the best next steps for design systems should be with type-safe TypeScript APIs and performance both for prebuilt pages and at runtime.

You don't have to be a senior React developer to create a project and open source it! I'll show you how I built an event website with React and EUI, then shared it with the world for contributions and mentored folks who helped improve it.

Do you or a loved one suffer from the all to common practice of 'useEffect'? Have you re-rendered more times than you can count? Are you ready to revolutionize your React code? Explore how to optimize performance, streamline your code, and reduce errors by challenging the conventional use of 'useEffect'. Inspired by the React Docs themselves, this talk will guide you through common 'useEffect' scenarios, demonstrating powerful alternatives to enhance your codebase. Embrace simplicity and elevate your React development skills with us! "You might not need an effect... Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone." Believe it or not, that intro is taken straight from the React Docs!

When talking about contributing to open-source projects, it’s crucial to understand from a maintainer point of view what factors are stopping new contributors from contributing to your project. Whether your codebase is very overwhelming to the contributors for the first time or it  lacks good first issues and enough responsive response to their problems.  In this talk, I will explain how I built a campaign at Amplication that scaled the contributors from 30 to 200 in just one year and how it solved every problem I mentioned above.

Finding mentorship when beginning your professional journey can be hard, yet it is so vital to have this support to build confidence, and grow at each stage of the process.  5+ years ago, Sidney reached out to me on LinkedIn with questions about bootcamps.  I was finishing my first year at Stitch Fix and from that first GoogleMeet call, we have now met nearly every month and followed and supported each other throughout our respective journeys in engineering.  We have never worked together, and we’ve never met!  Join us as we meet for the first time in person and talk about how vital our pairing has been!

We'll walk through what it takes to build a Node.js runtime for the browser, the challenges we discovered along the way and solutions we built to those challenges.

ASTs are prevalent in everything we do. ESLint, Typescript, etc allow us to dive into our source code in a way we might not be familiar with. Let's take a look at how some modern tools use ASTs to improve our lives as developers. Some of the tools to be covered include: TS-Morph, Typescript, TreeSitter, and ESlint. Depending on time, I can dig into various tools and patterns for working with ASTs and how they can fit into any modern developer workflow.

What if you can use the fastest JavaScript framework along with React? What if you can build applications that feel fast regardless of application size?Let's see how incredible Qwik is along with React.

Running tests on Node.js is common practice for app and library developers. But when your library is integrating more deeply with the platform, operating system or JS engine, you need to run tests “on device” increases. The Realm JS team at MongoDB is faced with this challenge, as we’re maintaining a React Native library with native modules. In this talk I’ll share the “mocha-remote” package which we’ve built to help us run tests “on device” while getting reporting and remaining in control from the comfort of our terminals.

In this talk, attendees will learn how to integrate OpenAI's GPT-4 language model into their React applications, exploring practical use cases and implementation strategies to enhance user experience and create intelligent, interactive applications.

In this talk Cecelia will walk through some options for integrating automation into your React Native deployments, including configuration, testing, code signing, and app store uploads. Whether you are just getting started with automation or want to build a full CI/CD pipeline, this talk will have tactical examples you can start using for your own React Native app.

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.

The virtual DOM is generally regarded as a necessary evil, a performance tax that we have to pay for the convenience of declarative UIs.Until now.In this talk, we'll take a deep dive into what the block virtual DOM is (an new, innovative approach to VDOM), and how Million.js can help you improve the speed of your React applications. This talk will also provide a helpful overview of how the React virtual DOM works. By the end of this talk, you'll have the knowledge to not only start improving your React apps' performance with Million.js, but understand the underlying internals that make it so fast.

A practical look at automating core accessibility testing and integrating it into your workflow.

Design systems are becoming increasingly popular in modern front-end development. However, measuring the usage and coverage of these design systems is often challenging. In this lightning talk, I'll discuss about a tool that we're working on which uses react-scanner and Abstract Syntax Tree (AST) with custom scripts to generate component usage data for a React design system. The talk will cover how we generate this data and how it is rendered in a dashboard to provide valuable insights on the coverage of the design system. - Introduction to react-scanner - Measuring Component Usage - Identifying Native HTML elements and Styled Components - Showing Tree structure of Page in terms of Components - Highlighting Anti Patterns - Benefits / Use Cases for this tool

We spend a lot of time discussing which state library we should use, and fair. There are quite a few, from the common one everyone uses and loves to hate on, to that one quirky alternative, to several up and comers. However, discussing which library is best puts the cart before the horse. When figuring out how to handle state, we should first ask ourselves: what different categories of state do we need? What are the constraints of each category? How do they relate to each other? How do they relate to the outside world? How do we keep them from becoming a giant, brittle ball of yarn? And more. This might sound overwhelming, but never fear! In this talk, I'll walk you through how to answer these questions, and how craft an approachable, maintainable, and scalable state system. And yes, I will talk about how to pick a state management library too.

In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.

As web developers, it's sometimes easy to see "The Platform" as this thing we can't really change that does things for reasons we can't really understand. But that's not true! Browsers and specs are built by developers just like you and me, and the entire process is open source, which means we can do it too! Let's take a journey through a real web platform improvement from start to finish, learning how the WHATWG and browser vendors work. By the end you'll know how to update a spec, write web platform tests, land a change in major browsers, and document your shiny new feature on MDN!

When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code. In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀 All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers. So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more!

For many app developers, GraphQL is instrumental in building great user experiences. With the introduction of React Suspense, developers have an ergonomic way to orchestrate loading states to improve upon the status quo.  In this talk, the Apollo Client team will show you how we built a non-trivial application using Apollo Client’s new Suspense features, GraphQL features like the @defer directive, and how to combine them to build great user experiences in your own apps.

This talk focuses on building a production-grade consumer social application - https://guild.host . If you visit that site, would you be able to tell it's built using React Native just by looking and using it? At a high level, Taz talks about what makes that possible and how the audience should consider application architecture. At a lower level, Taz focuses on: - How React's component composition model makes accommodating multiple platforms easy - How large applications should use a Design System, and the Tamagui Design System comes with an optimizing compiler that outputs straight platform-specific code while the developer still writes high-level UI that happens to utilize React Native's components - How to Server-Side Render a React Native Web application, and what considerations Guild made when choosing to create a custom SSR engine on top of Cloudflare Workers - In order for Guild to exist anywhere, they need to embed themselves into other experiences. This involves Third-Party React Native on the Web and other platforms - The future of this architecture, where Third-Party UI is the same as First-Party UI

TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects. You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.

React Summit US 2023

The biggest React conference in the US