We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.

Everything old is new again. But this time we have the lessons of the past to guide us into the wild unknown. Sunil wants to revisit a few older ideas, and mix them up with the new capabilities of the edge and the web platform, and see if we can 10x the applications we build today.

Accessibility is often left as an afterthought in the software development cycle. However, with 5 simple techniques, we can build accessibility in our apps from the get-go. In this talk, I will talk about how to test for accessibility, aria tags you need to know, and how to use them. We will see a walkthrough of how jarring a non-accessible app can be for users, and how to fix it. We will also look at how Slack has built an accessible app while going above and beyond.

Writing fluid user interfaces becomes more and more challenging as the application complexity increases. In this talk, we’ll explore how proper scheduling improves your app’s experience by diving into some of the concurrent React features, understanding their rationales, and how they work under the hood.

Conditional rendering issues in JSX, forwardRef, serveral ways to create refs, render props (yeah they still exist), higher-order components (do they still exist?), act, non-extendable classes, SuspenseList (well, maybe in 10 years), React.FC and of course our good old friend useEffect.

All these weird things are part of our favourite library (not a framework™) and yet we still use and love it. Why actually? Let's talk about. Disclaimer: This is not a very serious talk, mostly …

Typically I talk a lot about deeply technical concepts like TypeScript, type systems, (im)mutability, MobX, Immer etc. But this time it's going to be personal and I'll share lessons, good and bad, about growing as an engineer. I've been leading open source projects, short lived projects as a freelancer and I went through the transition of engineer to tech lead twice. Both at a young startup and at Meta. This talk will be about personal experiences, unpopular opinions and even actions, and anything else that might be counterintuitive. Join for some take-aways for anyone aiming at an engineering focused career. Probably I will be wrong about most things, so don’t miss the opportunity to follow up afterwards!

Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.

A look at the open source tooling created by the UI Engineering group at JP Morgan to streamline the developer workflow of building and deploying apps in isolation while still delivering a single unifying micro-frontend based portal to the end user, leveraging the use of native support for ES module imports in the browser.

Error state, loading state, awkward breakpoint, bad data, poor formatting, browser support. Every component can result represent hundreds or thousands of discrete visual states. How do you test it? Manually disable the network — temporarily. Insert bad code — just for a minute. Paw at the edge of your screen. Hack local database fixtures to bits.

Frontend development has so many dimensions. Time and variation result in an infinite number of UI possibilities. In this talk, we'll use Storybook to progressively develop, test, and document our work — automating the grunt work of UI development.

CodeSandbox Projects is the new version of CodeSandbox that enables the workflow of CodeSandbox today, but for projects of any size. During this talk, Ives will share the story of how Projects was created, and how we made it technically possible to build Projects.

Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice.

In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.

Micro-frontends help break up monolithic front-end applications into independently deployable loosely-coupled apps. This architecture helps us scale projects as an organisation scales, however it's also an increase in complexity. How can we leverage this architecture without having to face its upfront cost?

In this talk, I'll show some of the risks associated with micro-frontends, and what patterns and libraries we can use to benefit from this architectural style without going full-on micro-frontends.

When working on component library for a specific company, you want to make it easy as possible for developers to follow the recommended path quickly. Sometimes, that’s not easy. But, when there’s a way, there’s a will! Come see some hacks I have added to our codebase to enable a good API

Mentorship has a reputation of taking a lot of time and work. But what if it wasn't? Here are ways to get a mentor, be a mentor, and how to navigate it.

I have always worked on getting mentors in every corner of my engineering career. I have mentors that do not even know they are my mentor. But I like it that way. I will go into how to get a mentor at any stage of your engineering career and how to be a good mentor/mentee.

From the perspective of shipping countless React Native apps over the last seven years, React Native has grown and continues to evolve. There are some major changes coming! Most people have heard of "the React Native bridge", but have you heard of TurboModules, Fabric, and codegen? This talk is a fast-pass to the front of the line in React Native’s upcoming new architecture and how it's going to recast cross-platform development. We will review what you need to know.

At the end of 2021, we successfully rolled out the New React Native Architecture in the Facebook app.

Now, it’s time to empower every React Native developer on the globe to use the New React Native Architecture, both the new Fabric renderer and the new TurboModule system.

But migrating an entire ecosystem to a New Architecture is no easy task.

To support the whole community in this endeavour, we lined up a set of tools and materials that will help both app and library developers to join us in this journey.

In the talk, we will present how the New React Native Architecture looks in the OSS space. We will discuss the impact this will have on developing React Native projects. Lastly, we will cover what we learned from the React Native New Architecture migration at Meta, and how you can tackle your migration in your organization.

The React Native new architecture has been "coming next year!" since 2019 - but, this time, it’s actually here! So… what now? What do we actually need to do, to benefit from this all new shiny tech? In this talk, I want to provide some insights and in-depth analysis of the current state of the migration path to the new architecture, to help you and your team evaluate and estimate when and how and how long it will take you to get to the next level!

Developing for each platform individually is so 2010s. These days, with React Native’s component system providing base-level UI constructs, we can efficiently develop for every platform while not sacrificing any particular platform’s uniqueness. Taz will review the approach they’ve taken while developing Guild, and the creation of their Mondrian cross-platform responsive design system as well as how they’ve accommodated the differences in navigational experiences across platforms to accomplish a codebase that can be 95+% shared across every platform.

Any interaction faster than 100ms is imperceptible to users - what if all website interactions, including loading were 100ms or less? Let's explore strategies and how Fresh & Deno can help

Love linking lines? Join me in considering the humble arrow as both a programming problem and a user experience challenge.

In this talk, I'll present the many complex problems and solutions that I've encountered when working with arrows in my open source library perfect-arrows and later in tldraw (tldraw.com). With a narrow scope and plenty of animations to guide the way, we'll look at intersections, arrow heads, arrow head angles, and all of the different user interface issues behind authoring and adjusting arrows between shapes, other shapes, and points.

React is a library for """"rendering"""" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like """"rendering"""", """"reconciliation"""", """"Fibers"""", and """"committing"""" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates?

In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at:

• What """"rendering"""" actually is
• How React queues renders and the standard rendering behavior
• How keys and component types are used in rendering
• Techniques for optimizing render performance
• How context usage affects rendering behavior|
• How external libraries tie into React rendering

How better to learn about the capabilities of a technology than to do something it was expressly not designed for? What can we learn about the square peg as we mercilessly shove it into the triangular hole? In an attempt to rebuild Age of Empires 2 using React we'll learn about the limitations and possibilities of the tool we use everyday.

What makes a component library good? In order to create a component library that people want to use you need to navigate tradeoffs between extensibility, ease of use, and design consistency. This talk will cover how to traverse these factors when building a component library in React, how to measure its success, and how to improve adoption rates.

In this talk we will learn what is Slots and what does it mean to the React ecosystem, what's the current state and the future.

The transition from a monolithic architecture to a service based approach began a number of years ago. The advantage of a service based approach is to increase agility and shorten the build and release development cycle. And more recently the rise of micro frontends means that this approach not only encompasses backend application but also frontend development. However one side effect is increased complexity of the codebase. Resulting in challenges in terms of visibility into how components relate, who owns a component and the impact of activities on dependent components. This session will touch on these challenges and what is needed to maintain individual developer velocity.

TypeScript and React are inseparable. What's the secret to their successful union? Quite a lot of surprisingly strange code. Learn why useRef always feels weird, how to wrangle generics in custom hooks, and how union types can transform your components.

With React 18 the long awaited concurrent features are now available to the public. While they technically do not introduce new restrictions about how we build our components, there are many patterns that previously worked but might now introduce subtle bugs in your apps.

Let's re-learn the rules of React so that we can stay safe in this new concurrent world.

Server components is an exciting new feature introduced in React 18. It lets us leverage the fast performance of the server by offloading work behind a component to the server. Why would we want to do that? because server has direct access to data source .so fetching data, making aPI calls would be really fast on the server.

The most amazing thing about RSC is that they add 0 kb to the client bundle. So not only RSC reduces the bundle-size but will also improve page load times, eventually providing better user experience.

In this talk I will be talking about what react server components are, why do we need them . RSC is often confused with SSR but we will see how they are fundamentally different.

We will create a small react application using server components and see the performance benefits. We will also see the challenges we might face when we use RSC in our normal react application. Finally we deep dive into React’s brain and see how things are happening under the hood.

Can React and TypeScript applications run on different platforms (app shells) with minimal source code changes ? Yes !!! with the Micro-frontend strategy in Multiplying architecture. I’ll be presenting a new dimension of Micro-frontend, that paved a way to decouple the components of a larger monolithic React application using a new framework called Multiplying architecture. The framework is highly flexible and scalable for code development, also aiding the business and community.

An introduction to the emerging islands architecture which can significantly improve the performance of your apps.

We all used open source projects every day such as npm packages, editors, web applications, and even operating systems... Have you ever thought of building one of your own? In this talk, I will share my journey building jest-preview, from when it was just a vague idea, to currently a well-adopted library to help frontend engineers write tests faster. I will share with you how to come up with an idea for a project to work on, what is the struggles you have to overcome as an author of an open source project, how to manage time efficiently, and how you get attention from engineers around the world.

Are you afraid of animations? Well, you shouldn't be, React Native Reanimated got you covered. Your mobile application can share a story through animations, can help users through micro-interactions and differentiate your app from the others.

How do you start your app on your simulator in the morning? Do you always run react-native run-ios? If so, you might be wasting a lot of time. Let’s check out together what a React Native app looks like under the hood. It will help us to be more efficient on a daily basis. We’ll identify the shortest steps to execute daily actions, like starting our apps as fast as possible (no more unnecessary compilations of native modules!), or dealing with pesky red errors that metro throws at us.

"Hi, my name is Lenz and two years ago I was diagnosed with ADHD (attention deficit hyperactivity disorder)." Well, this is not going to be a self-help-group, but I think it is important to talk about this wildly underrepresented topic.

Since my diagnosis, I have spent a lot of time talking to other developers about it - and many of them also have ADHD, often a late diagnosis. It seems that we are quite the vulnerable population - or rather, it seems like a lot of ADHD people are drawn towards a developer job.

In this talk, I want to tell you about myself, how ADHD affected me and how the late diagnosis changed my life. But it didn't only change my life - it also affected everyone around me. As colleagues, we have found a new level of understanding with each other that helped us more than any team-building event. And in the end, made us more productive since we now know how to better use our individual strengths, instead of trying to meet social expectations.

I will also talk about general ADHD symptoms and try to give you a rough overview on the topic - what kinds of treatments exist, what kind of coping strategies there are and where the line between "everybody is a bit forgetful" and "ADHD is an illness" lies.

You might recognize yourself in this. Or just a close friend or colleague. Either way, this talk will give you awareness & insights how the mind of a neurodivergent person can work differently - or it may even be an important wake-up-call.

Disclaimer: while I have an interest in the topic and am personally affected, I am not a trained professional on the topic and everything you hear here can only be an inspiration, but never medical advice.

As developers we love to dive into performance metrics, benchmarks, compare one solution to another. Whether we enjoy it or not, we’re often required to fix performance issues in our React and React Native apps. But this process is not sustainable and prone to regressions, especially as the app and team grow. What’s worse, those issues are often discovered by your users, making their experience miserable. In my talk I’ll introduce you to Reassure—a performance regression testing library for React and React Native— which happens to be a missing piece in our automated testing and performance suites. Spotting problems before they hit production.

If you think that static rendering is limited to generic and public content that is the same for every user of your website, this talk is for you.

Segmented Rendering is a new pattern for the Jamstack that lets you personalize content, statically, without any sort of client-side rendering or per-request Server-Side Rendering.

Get the best possible performances for use cases such as theming, internationalization, A/B testing, multi-tenancy, and start treating your users right!

The bigger they are, the slower it gets. I am talking about your applications and the bundling process. Fortunately, there might a be better future - the one without bundlers. This talk will be about JavaScript modules, Vite and how we built Ladle - a speedy tool for your React stories.

Learn how to instrument Node and client applications using OpenTelemetry and popular open-source observability tools like Prometheus and Grafana.

The most common misconceptions about accessibility are that it is time-consuming or can be easily left as the last thing to be added. But, of course, this is not the case. We’ll look at how easy and quick adopting accessibility as a First-Class Citizen and, on the contrary, how difficult and time-consuming it is to add accessibility to an existing project.

Creating web applications can be challenging. Creating accessible ones - even more so. However the real challenge lies in maintaining accessibility in your project since it requires knowledge and skills beyond those of traditional web development. To make this happen, one must choose the proper tools to keep the accessibility level high when code gets refactored, monitor the accessibility status and test it automatically during CI.

To tackle these challenges, I’ll introduce a different approach that intertwines accessibility into the gut of the web application by creating an accessible React components library. I’ll discuss the principles, tools and techniques I use to test and maintain the accessibility level over time, and provide you with the initial recipe to drive the accessibility change in your organization.

React is so powerful that it can be used for more than frontend development. E.g. creating UI programmatically in the backend using a rule-based system or machine learning is another use case where React can serve as the best fit. Similarly, documentation earlier used to have only .md files but now it also includes .mdx file that contains React code. To fulfill such use cases, developers need to understand the internals of React and the tooling around it. Some great sources are popular codebases such as create-react-app, Next.js, etc.

In this talk, I will share the lessons we learnt while creating a framework that achieves more than web development using React.

Firstly, I will cover how create-react-app codebase is the best codebase to understand how webpack, babel, eslint, typescript etc. can be used alongside React.

Secondly, I will share how Next.js teaches us to create a js framework where we can write backend and frontend in the same file and still be able to separate the two during calls.

Thirdly, I will share how our framework supports plugins, i.e. the React code resides in multiple repositories but all of this code can share a single React runtime inside the browser. This is a very advanced use of React that cannot be achieved by code splitting using React.lazy.

This talk will enable developers to use React for more than frontend development.

The Great British Public Toilet Map is an open source, community driven project dedicated to helping people find toilets across the UK, with around 14,000 loos recorded and counting. In 2021 we took on the challenge of migrating the project from a SPA React app written in JavaScript to NextJS and Typescript. Together we'll discover why we decided it was time to migrate, the myriad technical challenges we faced along the way, how this work benefits our users, and the many exciting plans we have for the future.

Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.