React Advanced Conference 2022

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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

Scaling and maintaining applications can be a pain, especially when thinking of how to build to get the user experience to a level that you are proud of. With all these shifting parts to consider, it is important to abstract parts of your applications to global reliable services. In this talk, we will discuss some of the services that Cloudflare provides, and the role they play in improving the overall developer and user experience.

AG Grid is the industry standard JavaScript datagrid for building data centric Business Applications. Recently the AG Grid team redesigned the grid to implement the React Rendering Engine in 100% React code. Given the complexity of a datagrid, this was a very challenging task. Hear from Sean, Lead Framework Developer at AG Grid, about the journey of this migration including how this was achieved, lessons learned along the way, and how it will impact your React applications using AG Grid.

Web developers are forced to fit in a box. At some point you have to focus on either being a frontend engineer, backend engineer, etc. On the other hand, we are creatives and we want to explore. How can Amplify help you break out of that box and work on whatever you want, from design to deployment without losing momentum?

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.

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…

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.

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.

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!

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.

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.

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.

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.

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.

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.

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

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.

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!

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.

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.

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.

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.

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.

Next.js has grown in popularity over the past couple of years with features like server-side rendering, incremental static regeneration, image optimization, and more. Next.js is known as the production ready framework for React. In contrast, GraphQL is known for not just returning data for what you need with good schema design practices but also a good dev experience. In this talk, I’ll talk about how one can build an app that not just scales but also has high performance with Next.js, GraphQL and Tailwind. And Lastly, the future of CSS and Frontend development is building utilities, so CSS does not feel like an afterthought. At the end of this talk, you will learn how to go from making a sample app to a highly performant production-ready application.

This talk shares how to achieve Server-side rendering using WebAssembly and WASMEdge which is a WebAssembly Runtime. The talk also covers the benefits of using WebAssembly to achieve Server Side Rendering. The talk will also cover a demo on how to launch a React application using the WasmEdge runtime.

React and the JavaScript ecosystem seems to be constantly changing. Wherever we look, there are new libraries and frameworks. These new tools always lead to learning concepts that are often non-transferable knowledge. What if I told you that by learning standard web APIs, relearning the web, and getting a bunch of transferable knowledge, you can also start using a fantastic new addition to the React ecosystem: Remix!

We all know that separating concerns is different from separating technologies. That's what react's all about. But what is a concern? What is it to separate them? Why should I be concerned about concerns, or separation?

Find out why the headless is the new buzzword everybody wants to use. I will take you on a fast ride through Storyblok, the first headless CMS with Visual ! You will learn why thousands of users love it and what benefits it brings you - the REACT community!

Creating and deploying new software is risky. We've all seen how easily bugs arise, causing software to be poorly delivered or to the wrong people. What's more, depending on how tightly we couple our systems and services, they can interact unexpectedly and unfortunately with existing software or hardware. Beyond unintended consequences, we can also find that people can use our services for nefarious purposes. It's essential to have safety nets in place when things don't go as planned or people attempt to break the rules. In this session, we'll discuss how feature flags can work in both temporary and permanent scenarios to enable you to break the quality triangle and deliver quality promptly.

In this talk, we will take a novel and original look into some of the unexpected behaviors in a React codebase and the anti-patterns that cause them. We discovered them while building a new full-stack web development framework on top of React.

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.

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.

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.

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.

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