The biggest React conference in the cloud

Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!

Synchronizing multiple streams, particularly multiple live streams, and especially when the audio is critical too, can be incredibly difficult. How, then, could you build an experience where you have a few camera angles and you want a viewer to be able to seamlessly pick one? We'll walk through a hack technique that allows you to do just that without ever having to worry about synchronization.

When the burden of rendering is removed from WordPress, it becomes an open source API platform. With a few plugins like WPGraphQL, you can create an extensible backend for your React apps to consume which enables modern architectures and development practices in WordPress.

GraphQL is being used in some really interesting ways in parts of the developer ecosystem that you may be surprised to hear about, including Ethereum as well as for building comprehensive graphs from various third party APIs. In this talk, I'll show how to use a similar approach to build a cloud programming interface into AWS with GraphQL and why using this approach makes sense coming from a front end developer looking to leverage their existing skillset.

Most of us have heard that tests should be isolated, composable, or deterministic, but what does that mean in practice? How do you write a good test and how does the rest of your codebase change once you do? What effect does it have on your developer experience? In this talk I'll walk through a hand full of properties good tests have, show how we can write tests that follow these guidelines in JavaScript, and discuss when to consider bending the rules a bit.

In 2020, Rangle partnered with the Survey Monkey team to migrate a legacy codebase to React. Survey Monkey’s best-in-class digital products were being held back fragmentation and complexity, which created a lot of rework and wasted effort for their engineering teams. Working together, we implemented a number of process and architecture changes that cut the complexity and improved workflows, letting our blended team deliver results with speed and consistently, even early in the engagement. These were not one-size-fits-all solutions, but solves that were unique and fitted to the needs of the engineering and product teams. The success of the project was due to Survey Monkey’s motivated teams that were: 1) Ready to embrace change; 2) Able to keep a firm focus on the outcomes; and 3) Readily understood the complexity of the project.
This allowed us to co-create some non-intuitive solutions that engineers at similar enterprise-level companies should know about.

If your React project requires rich text editing functionality, there are a number of libraries to consider. In this session we'll look at the features of some of the key players so that you can help judge which is the best fit for your requirements.

Put up your thinking caps with Suspense and Concurrent mode! In this talk, I would discuss how to improve the existing user experience with the magic of React’s Suspense and Concurrent mode for non-blocked rendering. The talk would highlight the best practices and guidelines for the same.

As developers, we release features daily – but how do you ensure those features are working properly in production before you release them to all your users? If you ask me, the answer is feature flags! Feature flags are beneficial because they allow you to test your code in production, perform canary releases, and even conduct A/B testing. The power of React makes it easy to implement these flags. We will walk through how to easily create a feature flag in the UI, install dependencies with npm, and implement your feature flag in your react app.

Introduction to Remotion, a new library with which we can turn React code into MP4 videos, create our motion graphics programmatically and server-side render them. I give an overview of the priciples, the philosophy and of course we are going to code a video!

React provides a great ecosystem for React developers, but challenges often arise for multi-team organizations who get to pick the technology of their choice. As teams and projects scale, and technologies change over time, being able to provide a universal component library as a design system for an entire organization proves to be difficult.
Stencil was created to help address this issue, most notably for Ionic, which is a UI library for mobile app development using web-technologies. In this talk we’ll walk through how Ionic is able to create an Ionic React library, using custom elements (web components) as the lowest level. Using the Stencil compiler, the Ionic team is able to generate various bindings for each of the frameworks, such as React, Angular, and Vue.
The benefit of this allows the design team to focus on maintaining one codebase, while the Stencil compiler does the heavy lifting to generate the various output targets. Additionally, end-users of each framework binding get to interact with their traditional component model they’re familiar with. React developers use @ionic/react no differently than any other React component, and the same goes for Angular and Vue.

Learning 100 different languages is challenging, but architecting your React app to support 100 languages doesn't have to be. As your web application grows to a global audience, multilingual functionality becomes increasingly essential. So, how do you design your code such that it is flexible enough to include all of your international users? In this talk, we will explore what it means and what it looks like to build a React app that supports internationalization (i18n). You will learn several different strategies for locale-proofing your application with React contexts and custom hooks.

When users directly manipulate onscreen objects instead of using separate controls to manipulate them, they’re more engaged and more readily understand the results of their actions. Subtle animations can give people meaningful feedback to help clarify the result of their actions. But, the devil is in the details. What often seems simple can be complex to get right, especially when you care about accessibility. Sid shares the lessons he has learned building interactive UIs.

Learn how we built Argo, a powerful extensibility framework that allows developers to seamlessly extend Shopify's apps on every platform. Argo provides developers with APIs to execute behaviour on the main app and a component library that renders native UI identical to Shopify's own component whether it's on iOS, Android or Web. Behind the scenes, Argo uses web workers and an open sourced library called remote-ui to create a sandboxed execution environment for external scripts.

With the growing community and great tutorials, it's fairly easy nowadays to start building web applications with React. However, the vital aspect of accessibility is often missing which leads to web applications creating exclusions. Nothing in React prevents us from building accessible web experiences, but we need to learn to harness its power in the right way while dealing with some unique challenges caused creating web pages with JavaScript. This talk will focus on how to solve these issues in the context of React. It'll also emphasis why it is important to build accessible web apps. In the end, I will also share some cool stuff and tools in order to make your web app more accessible.

Blockchain is arguably a future technology that can be somewhat confusing to get started. Even though there are plenty of resources scattered across the web, but to get started developing distributed apps in React on the blockchain can sound intimidating. In this talk, Vladimir Novick will share how we can get started and what you should know about blockchain architecture. If you always wanted to get into Blockchain development and didn't know where to start, this talk is for you.

In 2019, our frontend engineers were asking hard questions about the future of our frontend build system. As new engineering teams continued to spin up new frontend microservices, our custom-built platform grew increasingly fragmented. This led to more headaches for our teams, who were struggling to keep up with maintenance patches and security updates. What could we do to get ourselves out of this mess?
Come join us as we discuss how we built a new platform with Next.js at its core to solve the challenges we faced. With the momentum of the Next.js community, we were able to extend this framework with a unique plugin architecture that allowed our engineers to hot-swap new packages and tools while allowing us to upgrade entire swaths of the stack at once. At the same time, we've multiplied the productivity (and happiness) of every frontend engineer at Lyft. We'll end with some great things to share that can be taken with you to address the challenges you face scaling your own frontend platforms!

React helped popularize the use of components to develop websites and apps. It’s a fantastic philosophy, but while components have made our websites better, the workflow for creating components hasn’t improved much. Let’s get rid of the tedious parts like wiring your components to your CMS, and let developers focus on the important parts. With Prismic Slice Machine, we’re giving developers the best workflow for creating components. In only a few minutes we’ll create a React component, wire it to our CMS, add it to Storybook, and push the component live on our site!

Fabulous secret powers were revealed to me the day I discovered Jamstack and said "By the power of Headless, I have the power!"
Find out the key features of any CMS and why the headless is the new buzzword, which everybody wants to use. I will take you on the journey through the land of headless CMS and show you why you should consider headless CMS for your next project.

Learn about state modeling with state machines and statecharts can improve the way you develop your React applications, and get a sneak peek of never-before-seen upcoming visual tools that will take state management to the next level.

When we started building the Cleo app, we noticed that a lot of functionality, design and types were shared between web (React)
&
mobile (React Native). We investigated whether these could be shared within the codebase too… join me to find out what we discovered.

Applying the React principle of “UI is a function of state” to SVGs and Graphic Design. We will talk about using systems of componentization and state management to create and manage SVGs. Viewers will leave the session with a firm understanding of creative coding practices and a new viewpoint for building systems in JavaScript.

Improve the development process of React applications applying BDD
&
TDD methodologies. These testing methodologies make you be confident when refactoring a codebase and improving existing code while avoiding side effects and shipping faster.

I'm going to showcase the React Native architecture we use in our new mobile app at Product Hunt. What we learned, among the way. How we moved what we know from web to mobile. Topics will be designing reusable React components, GraphQL, routing in the app, application lifecycle, keyboard controls, toast messages, and others.

In this talk, I will show you how to avoid a monolithic codebase, how to modularize your React app and how that might even help you speed up your CI builds: thus help you scale development as your team grows. We'll be doing this in a very concrete and practical way, using Nx as our toolkit.

How to build a UI that LEARNS? Being able to learn and predict the behavior of users has many powerful applications, one of them is the chance to boost the UI performance prefetching code
&
resources before the user reaches them. In this talk, we describe a high-level implementation of an intelligent prefetcher, using ReactJS and TensorFlow.js. We use neural networks to learn the user's behaviour, and leverages React's lazy-loading API to prefetch components according to predictions. There is a chance for Frontend developers to explore the powerful combination of UI and AI.

As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static.

You want to know if your RN app has the best performance? Check out the slow rendering UI stat on the play store, if your numbers are not so good, come to this talk! I will present Systrace, a tool that can be daunting to use at first glance, but a fantastic tool, once you learn how to master it. I will show how it helped us detect and solve performance issues in our app.

We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code.

When people ask me the most important skill I can learn to become better at my job and get promotions, I always tell them: The art of communication and human interaction. When working as engineers we are interacting with many people on daily basis. It is crucial for us to learn how to negotiate and persuade people. In this talk, we will cover 3 main techniques to become a better negotiator. these techniques can help us interact with others more effectively, get our projects approved, get promoted easier and even help us in our life.

In this talk, Taley'a will be discussing how design system enables the consistency among the products, you will explore the core components of the design system, along with the key benefits and challenges while building the design system.

With React 16.0, Facebook has released an update to the React core reconciliation algorithm which was named ""Fiber"". Fiber allows React to break the limits of the call stack and pause/start rendering work at will.
In this talk, we will explore why Fiber was necessary, cover some of the internal implementation details of Fiber, and see Fiber in action with React's experimental Concurrent Mode.

Are dev blogs dying out? No, they're not! Blogs are making a comeback. But sadly, most of them are lacking personal style. So, what can developers do to make their blogs unique and prettier? In this talk, I’ll show you how SVGs (as React Components) can help you take your blog from dull to awesome.

Have you heard about Atomic Design? How about Extreme Programming and Test Driven Development? For sure you have heard about React - a few things, I bet. In this talk you will get some insight on leveraging the power of Atomic Design to build the right product (using React, duh!) and capitalize on Extreme Programming and Test Driven Development to build it right ( exploring the React Testing Library).

In this talk we will discuss how to combine the power of D3 as a math library with React's rendering capabilities. How can we encapsulate animation for reuse with React functional components? How can we deal with restrictions in data structures to create interesting visualizations? How to approach performance issues when there are multiple animated elements on the screen? These are some of the questions that will be addressed as we dig deeper into techniques applied to real-world examples.

Since React Summit last year, React Query has already become one of the most popular and powerful data fetching libraries for React. To celebrate, we'll be going behind the scenes to see how React Query actually works and even build our own useQuery hook in just 150 lines of code.

Introducing Spectate, an open source library that generates your React state logic using the tests you write.

It has never been easier for React developers to build native iOS and Android apps. In this talk, we'll see how quickly you can ship your app with Expo open source tools, Expo Application Services (EAS), and React Native. We'll also discuss some of the recent improvements we've made and what's coming up next.

TypeScript is great, but migrating an existing app to it can be a pain. Codecademy took multiple existing React apps and converted them to TypeScript. We'll cover how to make those kinds of conversions successful from both cultural and technical standpoints.

New fullstack frameworks like Blitz.js and RedwoodJS are ushering us into a new era for fullstack development. They are mixing old concepts and ideas with cutting edge technologies to make fullstack developers more productive than ever. Watch this talk to go on a journey through time and get excited about what lies ahead.

In this talk we’ll explore a variety of techniques one can employ to ensure that their apps are running at peak performance. With a couple of small tweaks, you can make perf a built-in.