October 21 - 24, 2022
React Advanced
London & Online

React Advanced 2022

We will be diving deep

Get ready for an annual deep dive into the latest trends in React and Web development. Learn from engineers behind the framework ecosystem and early adopters at the main React Conference in the UK.

The concept of the event is both about covering all you need to catch up on in the React ecosystem, combined with deep technical exploration of the latest architectural trends, new feature adoption, and efficient ways to solve complex problems.

Engage in discussion rooms, hallway track with experts, hands-on practical workshops, and tens of insightful talks. Engineers of any level are welcome but be prepared for hardcore.



This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website.
A Guide to React Rendering Behavior
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Using useEffect Effectively
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Understanding React’s Fiber Architecture
29 min
Understanding React’s Fiber Architecture
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
TypeScript and React: Secrets of a Happy Marriage
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.
Best Practices and Advanced TypeScript Tips for React Developers
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Workshop
Maurice de Beijer
Maurice de Beijer
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Monolith to Micro-Frontends
22 min
Monolith to Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.
A Career As Software Engineer
24 min
A Career As Software Engineer
Code will be imperfect and perishable, so testing and debugging are crucial. Building relationships and being generous with code reviews are important for teams. Code ownership should belong to the team, not individuals. Prioritizing functionality over consistency can lead to more efficient development. Growing into a tech lead role requires building relationships and coaching skills.
Deep Diving on Concurrent React
29 min
Deep Diving on Concurrent React
The Talk discussed Concurrent React and its impact on app performance, particularly in relation to long tasks on the main thread. It explored parallelism with workers and the challenges of WebAssembly for UI tasks. The concepts of concurrency, scheduling, and rendering were covered, along with techniques for optimizing performance and tackling wasted renders. The Talk also highlighted the benefits of hydration improvements and the new profiler in Concurrent React, and mentioned future enhancements such as React fetch and native scheduling primitives. The importance of understanding React internals and correlating performance metrics with business metrics was emphasized.
End-To-End Type Safety with React, GraphQL & Prisma
95 min
End-To-End Type Safety with React, GraphQL & Prisma
WorkshopFree
Sabin Adams
Sabin Adams
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
How to Build Your Own Open Source Project
16 min
How to Build Your Own Open Source Project
Hello my friend, in this talk, I wanna share with you how to build your own open source project. Building an open source software project can be challenging. I receive a lot of things randomly in a day, like thank you messages for making my life easier, which motivates me. To choose an open source project to work on, pick one you use every day. Your software is being used when people report issues and send pull requests.
Introducing FlashList: Let's build a performant React Native list all together
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Slots: a New Way of Composition
21 min
React Slots: a New Way of Composition
Top Content
Today's Talk introduces React Snots, a new way of composition for design systems. The configuration way provides flexibility but can lead to uncontrolled use cases and wrong patterns. React Slots RFC was created to address the limitations of React's support for web components and slots. It introduces createHost and createSlot APIs to enable component composition and solve previous problems. React Slots RFC allows for flexible component styling and the creation of complex structures without rendering them to the browser.
Building Age of Empires 2 in React
22 min
Building Age of Empires 2 in React
Top Content
This Talk discusses the process of recreating Age of Empires II in React. The speaker shares their inspiration for the project and explores different approaches to game development using React. They demonstrate how to create an isometric grid, enable scrolling, and render units. The Talk also covers handling unit clicks and implementing right-click movement, as well as techniques for making React render more consistently. The speaker concludes by highlighting the value of exploring different tools and approaches in software development.
Using ES Modules Based Micro-Frontends to Enable Distributed Development
28 min
Using ES Modules Based Micro-Frontends to Enable Distributed Development
JP Morgan is using modern web technologies like the UITK and Modular to address challenges in their large-scale development environment. They employ micro front-ends with ES modules for dynamic loading and sharing theming using CSS variables. The applications are built using modular, which allows for scaffolding and creating new applications from templates. They rely on an opinionated approach to app creation and use a CDN for efficient deployment and caching. The host application handles user authentication and communication between micro front-ends, while platform services like authorization and authentication are provided by the digital platform.
How I Test a Million UI States with Every Merge — Visual Testing with Storybook
29 min
How I Test a Million UI States with Every Merge — Visual Testing with Storybook
The Talk discusses the need for more robust tools for visual testing in UI development. It explores the challenges in building UIs, including multiple views, variants, and breakpoints. The importance of component extraction and interactions is emphasized. The Talk also covers story derivation from components and interactions, UI testing with the test runner, and visual regression testing with Chromatic. Automating tests using GitHub Actions and common mistakes in using Storybook are discussed. The Talk concludes with a Q&A session.
React Native Animations Should Be Fun
28 min
React Native Animations Should Be Fun
This talk is about animations in React Native, specifically focusing on React Native Reanimated. It covers the use of interpolations and extrapolations in animations, animating items in a carousel or list, sticky elements and interpolation, and fluidity and layout animations. The talk provides valuable tips and tricks for creating performant animations and explores the use of math formulas for natural movements.
Dealing with ADHD as a developer
27 min
Dealing with ADHD as a developer
This talk focuses on raising awareness and empathy towards individuals with ADHD, emphasizing the importance of understanding different thinking styles. The speaker shares their personal experience of being diagnosed with ADHD and challenges faced in school and work. They discuss the diverse range of hobbies and skills they developed, as well as the impact of the pandemic on their executive function. The speaker highlights the positive effects of ADHD medication and encourages seeking professional help for diagnosis and treatment. The talk concludes by emphasizing the value of embracing neurodiversity and supporting each other in software development.
Getting Started with AG Grid and React – The Best Javascript Grid in the World
140 min
Getting Started with AG Grid and React – The Best Javascript Grid in the World
WorkshopFree
Brian Love
Brian Love
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Zero Bundle Size Server Components
17 min
Zero Bundle Size Server Components
React Server Components is a recent feature introduced with the React team and launched with Next.js 12. They allow for rendering components on the server, improving performance and data fetching. Server components can be used alongside client-side rendering and provide direct access to server resources. However, they are still in the experimental stage and have some limitations, such as not being able to use hooks or event handlers. Challenges include importing server components in client components and making third-party API calls.
Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️
9 min
Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️
Ankita explains how to build a lightning-fast site using Next.js, GraphQL, and Tailwind. Next.js offers rendering techniques for improved performance and SEO, as well as support for dynamic imports and deferring non-essential scripts. Next.js also provides performance benefits like layout stability and improved lighthouse score, along with server-side rendering and caching. GraphQL allows for efficient data retrieval, Apollo Client handles caching, and Tailwind simplifies CSS. The future goal is to make UI development easier and faster with React server components and Tailwind CSS.
Developing and Driving Adoption of Component Libraries
22 min
Developing and Driving Adoption of Component Libraries
Logan Ralston
Lachlan Bradford
2 authors
Today's Talk discusses the importance of a good component API and the balance between rigidity and flexibility. The demo showcases the gradual evolution of a component's configurability while maintaining ease of use. Measuring the effectiveness of a component library involves factors like adoption rate and component coverage. Collecting data and embracing breaking changes are crucial for continuous improvement. Ensuring consumers are updated and on the cutting edge is a responsibility of the library provider.
Building Figma’s Widget Code Generator
19 min
Building Figma’s Widget Code Generator
This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.
Astro & Fresh - Understanding the Islands Architecture
21 min
Astro & Fresh - Understanding the Islands Architecture
The islands architecture is a new way to build websites with low or no JavaScript, using libraries like Astro and Fresh. Server-side rendering improves SEO and loading times, but can still result in large JavaScript payloads. Hydration allows for islands of interactivity, loading only necessary JavaScript. Astro is a framework for implementing the islands architecture, supporting multiple libraries like React and SolidJS. It enables progressive migration between frameworks and integration of different libraries in the same project.
The New Architecture Is Here… What Now?
22 min
The New Architecture Is Here… What Now?
The Talk discusses the new architecture in React Native, highlighting its benefits such as native interoperability, concurrency, faster startup, better memory management, and improved code quality. The migration process to the new architecture involves refactoring, codegen, and extending native interfaces. Challenges include typing, configuration, and migrating third-party libraries. React 18 introduces automatic batching and compatibility with the new architecture. Microsoft is expanding React Native to target desktop platforms and has a dedicated open-source tooling repository. The Talk emphasizes the importance of open-source contribution and setting healthy boundaries.
Automated Performance Regression Testing with Reassure
16 min
Automated Performance Regression Testing with Reassure
Today's Talk introduces Reacher, a performance monitoring tool for React and React Native codebases. It highlights the need for catching performance regressions early in the development process and identifies JavaScript misusage as a common source of performance issues. ReaSure, developed by Covstack, is presented as a promising library that integrates with existing ecosystems and provides reliable render time measurements and helpful insights for code review. Considerations for operating in a JavaScript VM are discussed, including JIT, garbage collection, and module resolution caching. Statistical analysis using the z-score is mentioned as a method for determining the significance of measurement results.
Server-Side Rendering Using WebAssembly
12 min
Server-Side Rendering Using WebAssembly
Shivai Lamba presents server-side rendering using WebAssembly. Learn how to enable server-side rendering with WebAssembly using a Create React app. See the changes in the app before and after enabling server-side rendering. Support for React 18 and the ability to create streaming applications using WebAssembly. Connect with me on Twitter at TheCloudWeb for more information on WebAssembly.
The Weird Things About React
33 min
The Weird Things About React
Today's Talk covered various interesting aspects of React, including using the Keyprop to remount components, the flush sync trick for committing updates to the DOM, the evolution of React's composition story, the benefits of using hooks and React Lazy, the improvements in React's type system, the code mod for fixing breaking changes, dealing with annoying warnings, and the introduction of React-reduced stress. The speaker also encouraged readers to explore the new React documentation, join the working group, and contribute to the React community.
Adopting Micro-Frontends Without Micro-Frontends
30 min
Adopting Micro-Frontends Without Micro-Frontends
Today's Talk explores the adoption of micro frontends without actually implementing them. The main benefits of micro frontends are business scalability and the ability to independently deploy and compose frontend applications. The process of breaking up a monolith into smaller parts can be done using LEAN principles and composable apps. State management and data sharing in micro frontends are complex topics that require careful consideration to avoid coupling and maintain loose coupling.
Platform Freedom with Micro-frontends
31 min
Platform Freedom with Micro-frontends
This talk explores Microfrontend strategies and the benefits of using the multiplying architecture to deploy applications on multiple platforms. It discusses the concepts of platform freedom, microfrontend implementation, and Backend for Frontend (BFF). The talk also highlights the challenges of debugging and styling in larger microfrontend applications and introduces the multiplying architecture as a solution. It explains the core elements of the multiplying architecture and how it enables communication between different tech stacks. The talk concludes by showcasing the use of embedded lists, federated modules, and Webpack configuration to achieve efficient code sharing and deployment across multiple distributions.
Building for Web & Mobile with Expo
161 min
Building for Web & Mobile with Expo
Workshop
Josh Justice
Josh Justice
We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms.In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!You will know:- Setting up drawer and stack navigators with React Navigation, including responsiveness- Configuring React Navigation with URLs- Setting up React Native Paper including styling the React Navigation drawer and headers- Setting up a custom color theme that supports dark mode- Configuring favicons/app icons and metadata- What to do when you can’t or don’t want to provide the same functionality on web and mobile
Prerequisites: - Familiarity with building applications with either React or React Native. You do not need to know both.- Machine setup: Node LTS, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/
Creating an Accessible Web Together in 5 Simple Steps
31 min
Creating an Accessible Web Together in 5 Simple Steps
The Talk covers the importance of accessibility in web development and provides practical tips for building accessible web applications. It discusses the basic principles of accessibility, WCAG guidelines, and the use of assistive technologies. The Talk emphasizes the use of semantic HTML, tab index, ARIA attributes, and keyboard navigation for app accessibility. It also highlights the importance of testing and debugging for accessibility issues and recommends the use of accessibility tools. Overall, the Talk aims to raise awareness about accessibility and provide developers with the knowledge and tools to create inclusive web applications.
Best Practices and Patterns for Managing API Requests and States
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
Thomas Findlay
Thomas Findlay
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.
Using Feature Flags in Development
72 min
Using Feature Flags in Development
WorkshopFree
Jessica Cregg
Jessica Cregg
Ensuring your code is ready for production without enabling your features to your entire user base used to involve a lot of guesswork. By using feature flags, we can allow our development teams to preview work-in-progress features and unreleased functionality in production without redeploying our code.
In this workshop, we’ll run through the fundamentals of feature flagging on both the client and server sides. We’ll cover working with LaunchDarkly’s SDKs within the context of a React application with a node backend, flagging at different places in the stack and give an introduction to rule targeting in the platform.
Code Crimes For Good Component API
28 min
Code Crimes For Good Component API
Siddharth discusses the design of good component APIs, focusing on intuitive, accessible, and consistent user interfaces. He demonstrates the creation of various components, such as the action menu, menu button, navigation list, and navigation group. Siddharth also addresses challenges like rendering on the server, setting default values, and optimizing component rendering. He emphasizes the acceptable use of code hacks within reasonable constraints and the importance of considering code readability. Additionally, he highlights the role of feedback from developers in shaping design systems.
Introduction to React Native Testing Library
131 min
Introduction to React Native Testing Library
Workshop
Josh Justice
Josh Justice
Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain.
But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.you will know:- The different kinds React Native tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting text, image, and native code elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RNTL tests and how to handle them- Options for handling native functions and components in your JavaScript tests
Prerequisites:- Familiarity with building applications with React Native- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Native Testing Library- Machine setup: Node 16.x or 18.x, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/
Build a Product Page with Shopify’s Hydrogen Framework
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.
What Happens When You Build Your App
20 min
What Happens When You Build Your App
Today's Talk dives deep into React Native development, exploring the development process, JavaScript-native communication, and app deployment. It highlights the app building process, the React Native Run iOS command, and development gestures for efficient execution. The Talk also emphasizes the recommended process for starting and testing your app, as well as handling the 'red screen of death' error by installing missing libraries and understanding the role of the UI manager in creating native views.
React Native: 2022 & Beyond
27 min
React Native: 2022 & Beyond
This Talk covers the speaker's experience with React Native and their involvement in React Native initiatives. It discusses the challenges faced in the early days of React Native, the creation of Ignite to address app delivery problems, and the introduction of asynchronous React and synchronous React Native with React 18. It also highlights the features and bug in Gatsby, the integration of libraries through the Ignite Cookbook, and the new architecture utilizing Hermes JavaScript engine and turbo modules. The Talk concludes with the importance of community collaboration and the stability and benefits of Ignite.
Arrows (At Length)
23 min
Arrows (At Length)
This talk focuses on arrows and their unique features in diagramming tools. It explores the challenges of arrow positioning and connector selection, particularly with irregular shapes. The talk also discusses alternative arrow intersections and curved lines, as well as the challenges of creating curved arrows. The speaker presents a method for creating arrows and moving handles that always look good. The talk concludes with an invitation to try out the new version of Teal Draw and follow the speaker on Twitter for more arrow content.
Ladle: The Story About Modules and Performance
16 min
Ladle: The Story About Modules and Performance
Hello everyone, my name is Wojta Mikšu. I work at Uber as a web infrastructure engineer. Today, I will tell you about a new open tool that supercharges developing and testing your React components. This talk covers the history of JavaScript modules, the introduction of Vite and Ladle, and future predictions. Ladle is an open-source tool built on top of Vite for developing and testing React components through stories. It offers features like different viewports, component variations, event handler logging, theme switching, and more. Ladle has received positive feedback and shows improvements in dev server startup and hot module replacement.
React Native Everywhere
29 min
React Native Everywhere
Taz Singh, founder of Guild, discusses the early days of TorontoJS and the discovery of React Native. He explains the challenges of creating a cross-platform experience and the implementation of a React UI for React Native. Singh explores different React Native design systems and the challenges of navigation. He mentions Solido for managing separate web and native navigation and expresses excitement about Expo Router. Singh also discusses the future of React Native and the goal of creating an embeddable experience on every platform.
React Remixed
8 min
React Remixed
Remix is a full-stack web framework that embraces the server-client model and leverages browsers, HTTP, and HTML to deliver a fast user experience. It allows you to have a data layer and use the basics of browsers, HTTP, and JavaScript. Nested routing in Remix enables easy addition of nested sections to your application.
Treat your users right with Segmented Rendering
21 min
Treat your users right with Segmented Rendering
The Talk discusses the concept of segmented rendering for personalization in web development. It explores different rendering techniques, including server-side rendering, static seed generation, and dynamic rendering. The issue of rich guests and poor customers is addressed through segmented rendering. The implementation of segmented rendering with Next.js involves a lightweight proxy server and URL rewriting. The Talk also highlights the benefits of invisible server-side rendering and suggests a future unified API for server rendering.
Separating Separation of Concerns
7 min
Separating Separation of Concerns
My concern is to accomplish my understanding of my concern. A to do app can have more than just managing tasks. Crosscutting concerns should be co-located. Separation of concerns is an effective technique for ordering thoughts. React is not slower than JS. React may be closer to a library with a concern of scheduling. Rerendering components too often is a problem in React. React is a state management library that helps in separating concerns and states, resulting in a more efficient and readable app. Proper separation of concerns, states, and components leads to smaller, faster, lighter, and more readable components.
Building full-stack applications on the Edge
9 min
Building full-stack applications on the Edge
This Talk explores building full stack applications on the edge and the blurring line between front end and back end development. It discusses the benefits of using the JAMstack and APIs for scalable web development. The Talk also highlights the improvements in edge technology, such as serverless functions and efficient data storage, and the deployment of functions and durable objects on the edge network. Overall, the Talk emphasizes the importance of delivering high-quality experiences with low latency through edge computing.
Panel Discussion: UX and the Design/Dev Overlap
28 min
Panel Discussion: UX and the Design/Dev Overlap
Anjana Vakil
Maggie Appleton
Steve Ruiz
3 authors
The panel discusses the overlap between UX and developers, emphasizing the importance of collaboration and learning about design. The lack of decent developer and designer tooling is a big issue, and there is a need for a tool that bridges the gap between design and development. Understanding the promise and challenges of design systems and improving developer experiences requires a focus on UX and design as a discipline. Developers skilled in design can improve DX tooling, and getting involved in the design process and user testing is crucial. The language of React can help bridge the gap between developers and designers through conceptual modeling and object-oriented UX.
Crash Course Into Multilingual Websites With next.JS and Headless Content
126 min
Crash Course Into Multilingual Websites With next.JS and Headless Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
On this crash course, we'll create a new project in the headless CMS, fill it with data, and use the content to build a multilingual Next.js app. We'll spend a lot of time in code to:- Generate strongly typed models and structure for the content- Set up the site for multiple languages- Use respective language codes in content fetching and incorporate language fallbacks- Resolve multilingual content from rich text fields
You will learn:- How to work with content from headless CMS (Kontent.ai)- How content model can be leveraged to generate TS types and what benefits it brings to your project- How to add multilingual capabilities to Next.js website- How to use language fallbacks- What are the typical gotchas when working with multilingual content
AG Grid's New React Rendering Engine
6 min
AG Grid's New React Rendering Engine
AGgrid is an enterprise component with cool chart features that superpowers any application. AG Grid's React UI provides a native React experience with all the benefits of React and AG Grid's intelligence and power.
Staying Safe in a Concurrent World
22 min
Staying Safe in a Concurrent World
This talk explores the implications of the new concurrent features in React 18 and how they impact developers. It discusses the core premise of React and the importance of pure function components. The talk also addresses misconceptions about React's rendering process and the prevention of tearing in applications. Additionally, it highlights the reconciliation and commit phases in React and the challenges of dependency management in state management libraries.
Instant websites using Fresh and Deno on the Edge
33 min
Instant websites using Fresh and Deno on the Edge
The Talk discusses the concept of instant websites, aiming to minimize the time between user interaction and unblocking the user. It emphasizes prioritizing the loading of primary content and delaying the loading of secondary content to improve page loading times. Server-side rendering is highlighted as a faster alternative to client-side rendering, reducing network round trips and improving rendering times. The concept of island architecture is introduced, where only the JavaScript needed for interactive components is shipped to the client. The Fresh web framework is presented as a speed-focused framework for Deno, offering automatic CSS inlining and using Preact for client-side interactivity.
Hydrogen: An Early Look at Server Components in the Wild
7 min
Hydrogen: An Early Look at Server Components in the Wild
Hydrogen and server components are being used by big merchants in production sites to build headless storefronts quickly. React 18 introduces server components that allow for interactive rendering without adding anything to the bundle. However, not all libraries are compatible and data fetching can slow down the site, but React provides suspense to handle heavy components. Server components offer great encapsulation and fast rendering via HTML, and the future of headless is promising with technologies like Edgeworkers and hosting platforms like Oxygen. Shopify is hiring and offers a demo shop with server components at addogen.new.
The Journey of CodeSandbox Projects
25 min
The Journey of CodeSandbox Projects
Code Sandbox is an online code editor that started as a component editor. It has evolved and now has 30 million sandboxes. The creators emphasize the importance of seeking external feedback and doing fast releases. They also highlight the power of having true fans and the value of user feedback. Code Sandbox is expanding to support big projects and integrating with GitHub. It offers collaboration features, the ability to use your own code editor, and native apps for iPad and iPhone. The challenges lie in running everything in a virtual machine and enabling fast dev servers. Code Sandbox is also exploring the possibility of running other technologies like Deno, Bun, and Ruby on Rails. The talk concludes with a demo of running a Minecraft server on Code Sandbox.
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
Workshop
Richard Moss
Richard Moss
In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.
We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.
Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React
How to Get a Mentor Without Telling Them
30 min
How to Get a Mentor Without Telling Them
This Talk focuses on mentorship in software engineering and provides tips on being a good mentor and mentee. It emphasizes the importance of teaching and learning from each other, and highlights the concept of the Seagull effect in mentorship. The Talk also discusses the qualities of a good mentee and the benefits of mentorship in career growth. It explores the role of pair programming in mentorship and offers insights on managing pair programming and time management. Lastly, it suggests the benefits of having multiple mentors for diversification of knowledge and networking.
Lessons Learnt While Creating a New Framework on Top of React
20 min
Lessons Learnt While Creating a New Framework on Top of React
React is a versatile tool that goes beyond front-end development and can be used for synthesizing music. Creating a specialized framework with React requires understanding the tooling ecosystem and React's design philosophy. Examining good codebases like createreactapp can accelerate development. Handling side effects and module replacement can be achieved through techniques like dead code elimination and hot module replacement. Maintaining component state and implementing hot module replacement are important considerations for a React application.
My Accessibility Journey: the Quest for an Accessible Component Library
23 min
My Accessibility Journey: the Quest for an Accessible Component Library
The Talk discusses the speaker's journey in making applications accessible and the importance of preventing inaccessible code from being shipped. It explores the process of building and creating accessible components, emphasizing the use of appropriate HTML tags and conducting functional and accessibility testing. The Talk also highlights the benefits of automation in testing and fixing accessibility issues. Overall, it emphasizes the importance of accessibility and provides practical tips for incorporating it into software development.
Blurring the Lines Between the Web Developer Roles
7 min
Blurring the Lines Between the Web Developer Roles
This Talk provides an introduction to the framework and tools used in full-stack development, with a focus on AWS Amplify. It showcases the ability to quickly design, code, and test full-stack applications with authentication and authorization using Amplify. The deployment process is simplified with Amplify, allowing developers to easily deploy their applications to AWS. Overall, this Talk highlights the convenience and efficiency of using Amplify for full-stack development with AWS services.
Making a Splash: The Story of a Toilet Map Migration
24 min
Making a Splash: The Story of a Toilet Map Migration
The Talk discusses the migration of the Toilet Map Project from Create React app to Next.js, with plans to take it international. The project aims to address the inadequate public toilet provision in the UK. It includes publicly accessible toilets, community access schemes, and user contributions. The migration to Next.js offers benefits like server-side rendering and root prefetching. The Talk also covers the migration to TypeScript, improvements in loading speed and caching, dynamic pages, API migration, geohashing, marker clustering, chunk loading, accessibility overlay, and future plans for expansion and user contributions.
Hands-on E-commerce Storytelling With Storyblok, Gatsby, Shopify
93 min
Hands-on E-commerce Storytelling With Storyblok, Gatsby, Shopify
WorkshopFree
Alexandra Spalato
Alexandra Spalato
In this workshop, you will integrate a decoupled Gatsby Shopify website into Storyblok real-time visual editor.1. Connect Gatsby with Shopify and build the catalog2. Build the shopping Card functionality using shopify-buy3. Connect Gatsby with Storyblok4. Build editable components for the Storyblok visual editor, including Shopify products and Collections
PrerequisitesComputer ready for Gatsby.
Workshop levelReact and Gatsby intermediate.
Keep Calm and Deploy On: Creating Safer Releases with Feature Flags
7 min
Keep Calm and Deploy On: Creating Safer Releases with Feature Flags
Feature flags can be used to mitigate risk in software development by altering the visibility of features to end users. By using flags, you can protect against single points of failure and pivot to a fallback service in worst-case scenarios. Monitoring and managing complexity is crucial, and using feature flags allows for dynamic changes and adjusting values based on proven correctness. Operating in the unknown is inevitable in software development, so it's important to manage complexity and embrace learning. Collaboration is key in making feature failures less painful.
Understand Your Codebase to Innovate Faster
19 min
Understand Your Codebase to Innovate Faster
We can improve developer efficiency by helping people understand code more effectively through open source software, iterative development, cloud infrastructure, continuous integration, and service-based architecture. The software development lifecycle consists of an outer loop focused on team efforts and an inner loop for individual developers. A universal search platform helps developers understand and search code, reducing the time spent on code comprehension. Code navigation and automation tools like Sourcegraph enable developers to navigate code, adhere to best practices, and automate changes across multiple repositories.
Headless - The Future of CMS Is Here
8 min
Headless - The Future of CMS Is Here
This lightning session introduces the concept of headless CMS and the benefits of building a custom backend without extensive coding. Storyblock offers a visual editor with real-time visual editing in React, along with features like workflows, translations, and versioning. It also allows for customization through defining components, rules, and building custom plugins using React or Vue. The API provides access to content in JSON format, and JavaScript bridges can be used to incorporate components into the final product.
Back to the Future
30 min
Back to the Future
The speaker shares their personal journey in the software development field, from starting in technology after college to experiencing burnout and taking steps towards self-care. They emphasize the power of technology and accessibility, as well as the emergence of edge computing. The speaker introduces their project, the Multiplayer Development Kit, and discusses the challenges of building real-time multiplayer apps. They also highlight the importance of work-life balance and personal growth in the industry.
Killing Bugs With Kindness
9 min
Killing Bugs With Kindness
This Talk focuses on reducing bugs in a React codebase by understanding antipaths. It discusses the types of bugs identified and the guardrails implemented to prevent them. The importance of being cautious with hooks like useState and useRef is emphasized, along with the use of context for state storage. The refactoring example demonstrates how reducing useState and callbacks can improve code quality and efficiency in the framework.
Getting Started with Open Source Observability
21 min
Getting Started with Open Source Observability
Observability is a crucial tool for engineers to ship reliable websites and have a good developer experience. Metrics, logs, and traces are fundamental data types for achieving observability. OpenTelemetry is an open source standard for observability data, and instrumentation can be done manually or automatically. Data collection and transportation can be handled by packages built by the OpenTelemetry community, and the collector running can add security benefits. Grafana is used for data visualization, and it allows for analyzing web performance, exceptions, and traces. Traces capture user interactions and provide insights into user behavior and error occurrences. Leveraging these tools allows for gaining insights into various parts of the system and improving engineering goals.
Bringing the New React Native Architecture to the OSS Community
26 min
Bringing the New React Native Architecture to the OSS Community
The React Native community has been focusing on the new architecture, which aims to improve performance by rewriting internals using C++. The new architecture brings features like view flattening, CodeGen, and bridgeless mode. It also includes updates to build tools and JavaScript engine, such as Hermes. React Native 0.71 will include TypeScript types bundled in the NPM package, and Kotlin is fully supported on Android. The new architecture offers a transition from the legacy renderer and concurrent features, and there are resources available for migration and community support.
How Time-Consuming Is It to Build an Accessible Mobile App?
21 min
How Time-Consuming Is It to Build an Accessible Mobile App?
Building an accessible app can be time-consuming but can be divided into two parts: making an existing app accessible and starting an accessible app from scratch. React Native Armour can help with accessibility fixes, but manual checks are still necessary. Accessibility best practices include focusing elements in the correct order, announcing UI changes to screen reader users, and ensuring consistency in behavior and appearance. Building accessible components can streamline the process of making an app accessible.
How to Design a Sustainable Freelance/Contracting Career (from Toptal team)
Recording pending
How to Design a Sustainable Freelance/Contracting Career (from Toptal team)
Workshop
Shane Ketterman
Shane Ketterman
Ready to kickstart your freelance career or just getting started on your journey? You’re in the right spot. Learn from the world’s largest fully distributed workforce in the world.The independent talent movement is the future of work. If you’re considering leaving full-time employment for a career as a freelancer, now is the time to find your successful space in the independent talent workforce. More people are working freelance today than ever before, with the freelance marketplace now contributing $1.2 trillion to the US economy. Some of the most in-demand roles for freelancers right now are senior developers with professional experience in React, Python, Blockchain, QA, and Node.js.This workshop will help you design a sustainable and profitable full-time (or part-time) freelancing/contracting career. We will give you tools, tips, best practices, and help you avoid common pitfalls.At the end of the workshop there will be a Q&A session with a Toptal Talent (Developer) who can answer your questions and provide insights and tips into their own success.
Building GraphQL backends with SDL
91 min
Building GraphQL backends with SDL
Workshop
Jamie Barton
Jamie Barton
In this workshop we'll cover the basics of GraphQL, and then use that knowledge to build a backend using SDL. Once we've created our schema, we'll run it locally, deploy to production, and create deployment branches for any changes to our schema. We'll finish the workshop by fetching data from our backend from the frontend, as well as adding authentication to lock down data access!
Mac setup with Node, and NPM (if you wish to follow along locally). Otherwise an account with CodeSandbox would do.
A Tale of Two Codebases
139 min
A Tale of Two Codebases
Workshop
Michael Tintiuc
Michael Tintiuc
Anybody can write code that “works.” But what makes the best engineers stand out is their ability to create solutions that are clear, concise, testable and easy to understand and maintain. Join us as we explore two of React’s most powerful tools for well-architected solutions by starting with a suboptimal game codebase and refactoring it using industry best practices such as custom hooks, higher-order components (HOCs) and contexts.- Introduction of the initial implementation and description of its issues.- Presentation of the tools available to improve the code base.- The mindset behind architecting clean solutions and refactoring.- Highlevel passthrough of the code and creation of the plan.- Extraction of code into utility functions.- Extraction of state and effects into custom hooks.- Grouping behavior into HOC.- Creation of root level context and child components cleanup.- Result overview and discussion of possible future improvements.- How to keep your code clean, rules to follow and limitations to impose.
PrerequisitesA computer with git installed and a GitHub account.
Introducing Flashlist: Let’s Build a Performant React Native List All Together (from Shopify team)
Recording pending
Introducing Flashlist: Let’s Build a Performant React Native List All Together (from Shopify team)
Workshop
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.
Build a Modern GraphQL Server Using GraphQL Yoga
Recording pending
Build a Modern GraphQL Server Using GraphQL Yoga
Workshop
Jamie Barton
Jamie Barton
In this workshop we’ll build a GraphQL Yoga server from scratch, as well as cover how you can use Yoga inside of frontend applications like Next.js. We’ll also look through the plugin ecosystem of Envelop, and what can be added to Yoga to fully customize it to your needs.