October 22 - 25, 2021
React Advanced
Online

React Advanced 2021

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.
Don't Solve Problems, Eliminate Them
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Design Systems: Walking the Line Between Flexibility and Consistency
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
Concurrent Rendering Adventures in React 18
132 min
Concurrent Rendering Adventures in React 18
Top Content
WorkshopFree
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
(Easier) Interactive Data Visualization in React
27 min
(Easier) Interactive Data Visualization in React
Top Content
This Talk is about interactive data visualization in React using the Plot library. Plot is a high-level library that simplifies the process of visualizing data by providing key concepts and defaults for layout decisions. It can be integrated with React using hooks like useRef and useEffect. Plot allows for customization and supports features like sorting and adding additional marks. The Talk also discusses accessibility concerns, SSR support, and compares Plot to other libraries like D3 and Vega-Lite.
React, TypeScript, and TDD
174 min
React, TypeScript, and TDD
Top Content
WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
145 min
Web3 Workshop - Building Your First Dapp
Top Content
WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Automating All the Code & Testing Things with GitHub Actions
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
We will learn how to automate code and testing with GitHub Actions, including linting, formatting, testing, and deployments. Automating deployments with scripts and Git hooks can help avoid mistakes. Popular CI-CD frameworks like Jenkins offer powerful orchestration but can be challenging to work with. GitHub Actions are flexible and approachable, allowing for environment setup, testing, deployment, and custom actions. A custom AppleTools Eyes GitHub action simplifies visual testing. Other examples include automating content reminders for sharing old content and tutorials.
Cracking the Concurrent Mode
30 min
Cracking the Concurrent Mode
Sudhanshu Yadav discusses the incremental concurrent feature in React 18 and the need for concurrent mode to provide a better user experience. Time slicing is the key pattern enabling concurrent features. Background rendering and unit of work are used to achieve asynchronous rendering and eventual consistency. Concurrent mode introduces a new pattern called differing for immediate rendering and adjusting based on available resources. React provides APIs for deferred updates and transitions. Implementing concurrent mode APIs can be complex, but it offers benefits like avoiding update starvation and reusing work. Scheduling and slots are used to control execution and dynamic FPS control. Handling multiple transitions can be challenging, but the React 18 working group discussions provide insights into the team's efforts to improve the user experience.
Accessibility at Discord
22 min
Accessibility at Discord
This Talk discusses the accessibility efforts at Discord, focusing on keyboard navigation and the challenges faced with implementing focus rings and outlines. The speaker showcases a unified focus ring system and a saturation slider to address accessibility concerns. They also highlight the implementation of role colors and the use of CSS filters for accessibility improvements. The Talk concludes with insights on runtime accessibility checking and the development of a performant core runtime system for checking accessibility issues.
Living on the Edge
36 min
Living on the Edge
The Talk discusses the future of React and introduces new APIs, including streaming rendering and server components. React Suspense allows for asynchronous loading of components and data fetching. The use of serverless computing, specifically Cloudflare Workers, is explored as a way to improve performance. The Talk emphasizes the potential for simplifying the React ecosystem and the excitement about the new API.
React Query and Auth: Who is Responsible for What?
19 min
React Query and Auth: Who is Responsible for What?
Top Content
This talk introduces React Query and Auth, discussing how React Query maintains server state on the client and handles mutations and data updates. The day spa app example demonstrates the use of React Query to fetch data and handle user authentication. React Query is also useful for managing user data and ensuring accurate data from the server. The talk highlights the importance of addressing the three main players in user data: React Query, Auth Functions, and persistence across sessions.
Full-stack & typesafe React (+Native) apps with tRPC.io
6 min
Full-stack & typesafe React (+Native) apps with tRPC.io
Top Content
Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.
From Blender to the Web - the Journey of a 3D Model
27 min
From Blender to the Web - the Journey of a 3D Model
Top Content
This Talk is about Blender, a free and open-source 3D software, and integrating 3D models into websites. The speaker discusses exporting 3D models to the web using the gltf format and compressing them using gltf transform and draco compression. They also cover integrating the 3D model into a website using React and React 3 fiber, troubleshooting installation and error issues, and working with refs and frames. The Talk explores rendering, lighting, mathematics, and experimentation in 3D, as well as interaction and rendering effects. The speaker also mentions their favorite creation in Blender.
Killing BFFs with GraphQL and Next.js
21 min
Killing BFFs with GraphQL and Next.js
Top Content
This talk discusses the challenges and benefits of using Backend for Frontends (BFFs) and microservices in software development. It highlights how Next.js can simplify the creation of BFFs and unify the gateway for microservices. The talk also emphasizes the advantages of Next.js API routes in simplifying the development, deployment, and maintenance of APIs. It showcases the implementation of a BFF using Next.js and API routes, and the extension of API routes in an executable way. The speaker also mentions launching a course on using Next.js API routes for building a serverless GraphQL API.
Using React to Build Performant Game UIs in Minecraft
25 min
Using React to Build Performant Game UIs in Minecraft
Top Content
This Talk introduces the use of React and web technologies for building UIs in Minecraft. It discusses the challenges of onboarding new developers to the current tech and the benefits of using open standards. The speaker explains the use of Gameface, a solution for building game UIs with React and Webpack. The Talk also covers state management in a game environment and the use of facets for performance optimization. It concludes with an overview of the Oryui brand and the availability of resources on GitHub.
Advanced Patterns for API Management in Large-Scale React Applications
20 min
Advanced Patterns for API Management in Large-Scale React Applications
Top Content
This Talk covers advanced patterns for API management in large-scale React applications. It introduces the concept of an API layer to manage API requests in a more organized and maintainable way. The benefits of using an API layer include improved maintainability, scalability, flexibility, and code reusability. The Talk also explores how to handle API states and statuses in React, and provides examples of canceling requests with Axios and React Query. Additionally, it explains how to use the API layer with React Query for simplified API management.
Using MediaPipe to Create Cross Platform Machine Learning Applications with React
21 min
Using MediaPipe to Create Cross Platform Machine Learning Applications with React
Top Content
MediaPipe is a cross-platform framework that helps build perception pipelines using machine learning models. It offers ready-to-use solutions for various applications, such as selfie segmentation, face mesh, object detection, hand tracking, and more. MediaPipe can be integrated with React using NPM modules provided by the MediaPipe team. The demonstration showcases the implementation of face mesh and selfie segmentation solutions. MediaPipe enables the creation of amazing applications without needing to understand the underlying computer vision or machine learning processes.
Visualising React: Metaphors, Models, and Spatial Mediums
31 min
Visualising React: Metaphors, Models, and Spatial Mediums
Top Content
This talk explores the use of visuals in programming to make concepts more accessible and understandable. It discusses the limitations of text in programming and the benefits of visualizing programming concepts. The talk also delves into the use of visual metaphors in React and the advantages of using spatial principles and visual representations to understand program behavior over time. It concludes with suggestions for advancing visual programming efforts and leveraging existing metaphors in programming languages and frameworks.
Building Cross-Platform Component Libraries for Web and Native with React
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.
Asynchronous UX
21 min
Asynchronous UX
Top Content
Today's Talk covers the importance of building Asynchronous UX with React and single-page applications, providing code and UX examples. It explores data fetching, adding progress indicators, handling errors, and user-initiated actions. The Talk also discusses handling component unmounts, multiple actions, idempotency, and context loss. Finally, it touches on considerations for optimistic updates and the use of CRDT or other technologies for collaborative applications.
MDX in React-Native!?
21 min
MDX in React-Native!?
Top Content
This Talk is about the development of MDX, a combination of Markdown and JSX, by a freelance full stack JavaScript developer. MDX is a powerful technology that allows for the creation of interactive content within blog posts and supports React components. The speaker developed RnMDX, a proper and polished MDX library for React Native, which can be dropped into any React Native app. RnMDX provides solutions for common issues with Markdown content in React Native and allows for the rendering of MDX content into native views. Bringing MDX into native apps is now easier, and it can be used for various purposes, such as serving the app layout from a CMS or creating interactive online magazines or blogs.
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
27 min
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
Top Content
The Talk discusses optimizing rendering of big tables using Flipper, a new version that is ten times faster with improved user interaction and richer data. It explores optimizing rendering with React, virtualization, filtering, sorting, and windowing techniques. The introduction of the Flipper Datasource packet simplifies handling updates, inserts, and removals. The performance of the Flipper data source package is excellent, even in a debug build of React, with minimal CPU usage. The Q&A session covers incremental sorting, dynamic row height, and the potential for two-dimensional virtualization in the future.
Let Me Show You How React Applications Get Hacked in the Real-World
22 min
Let Me Show You How React Applications Get Hacked in the Real-World
Top Content
React's default security against XSS vulnerabilities, exploring and fixing XSS vulnerabilities in React, exploring control characters and security issues, exploring an alternative solution for JSON parsing, and exploring JSON input and third-party dependencies.
The Worlds Most Expensive React Component and How to Stop Writing It
23 min
The Worlds Most Expensive React Component and How to Stop Writing It
Top Content
Today's Talk discusses expensive React components and API design, with a focus on the cost of coordination and overcoming imposter syndrome. The speaker shares a story about a cat trying to fix salted coffee, highlighting the importance of finding simple solutions. The billion dollar component on ReactJS.org is examined as an example of an expensive component. Techniques for customizing messages, improving accessibility, and using polymorphic props are discussed. The Talk concludes by emphasizing the cost of communication and the need to evaluate if props and components are the right tools for the job.
How do Localise and Personalize Content with Sanity.io and Next.js
8 min
How do Localise and Personalize Content with Sanity.io and Next.js
Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.
Micro-Frontends Performance and Centralised Data Caching
27 min
Micro-Frontends Performance and Centralised Data Caching
Micro front-end architecture, like microphone tents, can help scale applications by applying microservices principles to the front-end. Microphone tents can be beneficial for performance, depending on the implementation. They can reduce bundle sizes, avoid duplicated dependencies, and ensure independent deployments. The shared API and module federation are powerful features that allow for dependency management. Micro front-ends can improve developer experience and user experience while addressing organizational and scaling issues.
Efficient State Management With Hookstate
10 min
Efficient State Management With Hookstate
This Talk introduces hook state as a flexible and simple state management solution for React. It demonstrates how hook state can be used for global state management, as well as for managing state within individual components. The speaker highlights the ease of using hook state for tasks such as adding, updating, and removing tasks. The conclusion encourages further exploration of hook state for efficient state management in React applications.
React Server Components - Under the Hood
19 min
React Server Components - Under the Hood
This talk provides an overview of React Server Components. It explores rendering the root element, using react-read-in-a-tree to read the webpack manifest, and performing work and JSON serialization. The talk also discusses the drain handler and client-side components, as well as challenges and future improvements in React Server Components.
Limitless App Development with Expo and React Native
27 min
Limitless App Development with Expo and React Native
Watch video: Limitless App Development with Expo and React Native
Today's Talk discussed building cross-platform apps with React Native and Expo, addressing challenges such as setting up the native runtime and managing dependencies. Expo provides a pre-built runtime, native APIs, fast iteration speed, and integrated cloud services. EAS build simplifies app deployment by handling native code signing and validation. Over-the-air updates allow instant updates to JS and assets. Custom native code can be added using auto-linking and config plugins, and Expo supports both Managed and Bare workflows.
Building Dapps with React
30 min
Building Dapps with React
The Talk discusses building decentralized applications (DApps) with React and explores the benefits of smart contract technology. It highlights the characteristics and infrastructure of Web 3 applications, including decentralized indexing, off-chain data storage, and decentralized file storage. The Talk also covers identity in Web 3, with a focus on self-sovereign identity and the use of blockchain for identity verification. The process of building a DApp with React and Hard Hat is explained, along with deploying contracts and interacting with them. Overall, the Talk provides insights into the world of DApps and the technologies involved.
How Typed is Your Framework?
25 min
How Typed is Your Framework?
Today's Talk focused on the importance of TypeScript in preventing runtime errors and its integration with popular frameworks like Vue.js, Angular, and React. TypeScript provides error assistance and typing boundaries between components, ensuring correct usage. It also allows for the creation of generic components, leveraging TypeScript generics to define contracts between unknown properties. The Talk highlighted the use of TypeScript in various scenarios, such as working with React Node, and provided resources for further learning and exploration.
On the Origin of React
22 min
On the Origin of React
This Talk explores the evolution of React components, starting from version .12. It discusses the introduction of class components and the deprecation of mixins. It highlights the emergence of higher-order components as a better option for code reuse. It also covers the introduction of hooks in React 16.8 and mentions potential future branches of evolution, such as server components and function components in hooks.
Track Slowdowns and Crashes in your React apps
8 min
Track Slowdowns and Crashes in your React apps
Sentry is a tool for code observability that supports multiple languages and frameworks. It allows monitoring of errors and performance in applications, such as React apps in an ecommerce site. With Sentry, developers can easily investigate errors using developer tools and get a summary of the error. It also provides human-readable stack traces that highlight the exact line of the error.
setState, We Need to Talk!
20 min
setState, We Need to Talk!
In this Talk, the speaker discusses the importance of planning and maintaining UIs in React using state machines. They highlight the need to consider user experience and plan for performance and maintainability. The challenges of handling multiple UI states are addressed, and the benefits of using finite state machines are explained. The speaker demonstrates how to implement transitions and update the UI using a React state machine. They emphasize the benefits of state machines in handling errors, avoiding state explosions, and improving collaboration between designers and developers.
How Coinbase Rewrote the App in React Native
30 min
How Coinbase Rewrote the App in React Native
Last year, the Coinbase app was rewritten from native to React Native due to the complexity of the app's architecture. The Android app was chosen for the rewrite and a Brownfield approach was taken to integrate existing Android engineers. The project started in March 2020 and had successful launches for both Android and iOS. The transition to React Native was successful, with increased engineering resources and feature development. Recommendations for React Native include considering the app's requirements, and the best question was about the split between native and React community modules.
We Don’t Know How React State Hooks Work
28 min
We Don’t Know How React State Hooks Work
This talk explores how useState works under the hood and why it's important to understand. It addresses the common confusion around the callback to setState and provides insights gained from exploring React hooks source code. Knowing how useState works is important for learning patterns, debugging, and gaining confidence in our code. React manages the current value of hooks in a linked list and performs updates sequentially. React optimizes rendering by caching computations and performing shallow renders when the state doesn't change.
How to do Good Without Doing Anything
32 min
How to do Good Without Doing Anything
Accessibility is about making sure everyone can participate on the web, regardless of disability. Automated tools like Lighthouse and React Axe help identify accessibility errors and provide guidance on fixing them. Unit tests validate ARIA attributes and keyboard navigation, while integration and end-to-end tests focus on outcomes and simulate user experiences. Cypress.io is an open-source testing framework with excellent accessibility support. Implementing small changes leads to a deep understanding of web accessibility and bug resilience.
Taking Component Driven One Step Further
20 min
Taking Component Driven One Step Further
React was built for component-driven development. Challenges of component sharing include the inability to easily share components across applications. Monorepos have benefits but can also present challenges such as slow IDE performance and merge conflicts. Onboarding developers and the deployment process can be time-consuming. Bit solves these challenges by allowing isolated and versioned components in a monorepo, providing easy component search, filtering, and versioning, and enabling component-driven development.
Gaining Confidence with Cypress Tests
23 min
Gaining Confidence with Cypress Tests
Welcome to React Advanced London where we'll learn about gaining confidence with Cypress tests. We'll explore browser testing, including tests for specific units of work, business services, APIs, and components using different tools. Cypress provides selectors for easy object selection in tests. We learned how to select objects in our tests and rerun them to check for successes and failures. We also discussed best practices for Cypress tests, including using data-cy elements, commands, mocks, and fixtures.
End-to-end i18n
26 min
End-to-end i18n
Thanks for joining my talk on end-to-end internationalization. I'll walk you through internationalizing a React app, covering translated strings, currency and date formatting, translator management, and injecting translated strings back into the app. The constants used throughout the app define localization settings and translations. The React Intel library is used for managing translations, and custom functions are created for consistent date and number formatting. The translation process involves extracting strings, using tools like PO Edit, and compiling the translated strings into JSON files for the React app.
How Hopin is Moving 10x Faster: Microfrontends at Scale
25 min
How Hopin is Moving 10x Faster: Microfrontends at Scale
This Talk discusses how Hoping uses micro frontends to improve development speed and create boundaries between applications. They break up apps into smaller, independently deployable apps owned by small teams. They use webpack and module federation to integrate dependencies at runtime and have a lightweight store for sharing state. The Talk also addresses performance concerns and the importance of explicit contracts and namespace styles to avoid conflicts between micro frontends.
How to Edge Cache GraphQL APIs
29 min
How to Edge Cache GraphQL APIs
The speaker discusses their experience with edge caching GraphQL APIs, starting with the struggles they faced with a poor database choice. They found success with GraphQL, which helped their servers scale and led to an acquisition by GitHub. The speaker delves into the key piece that enables GraphQL caching, the __typename metafield. They also address challenges with caching at the edge, including authorization and global cache purging. The speaker shares a success story with GraphCDN and mentions the ongoing challenge of handling cache for lists with pagination.
Debugging a Non Reproducible Crash
20 min
Debugging a Non Reproducible Crash
The Talk discusses a vicious bug that caused 20,000 crashes in a JS application. The bug was an array index out of bounds exception in the SimplePool class. The team used a debugger to analyze the bug and discovered a race condition caused by an upgrade to React Native SVG. They collaborated with React Native contributors to fix the issue and deployed a patched version. The Talk emphasizes the importance of using a crash reporting tool, monitoring release health, and learning from bugs and source code analysis.
To Mock or Not to Mock - That's the Question
25 min
To Mock or Not to Mock - That's the Question
This Talk discusses the SDC's approach to software development using agile methodologies and extreme programming. It highlights the benefits of pair programming and the use of atomic design in React components. The importance of test-driven development and the React testing library is emphasized, along with the implementation of code, navigation, and form validation using Formik and Yup. The talk also touches on the abstraction layers in software development and the testing of user journeys and accessibility in the BookKeeper app.
Coming in React18: startTransition
8 min
Coming in React18: startTransition
Start Transition is a new API in React 18 that allows us to keep our applications interactive and responsive even while big updates are happening behind the scenes. In React 18, we have concurrency rendering, which allows us to differentiate between urgent and less urgent updates. By using the Start Transition API, we can mark less urgent actions as transitions and prioritize more urgent actions, improving the user experience. Implementing the Start Transition API in React 18 is easy and doesn't break existing code. It's worthwhile to start transitioning in your projects for improved user experience.
Components, Patterns and sh*t it’s Hard to Deal with
29 min
Components, Patterns and sh*t it’s Hard to Deal with
This Talk discusses modular architectures, patterns, and components in software development. It explores the concept of creating components and pattern libraries, as well as the challenges and benefits they present. The Talk also delves into managing code for flexible pattern usage and the responsibility of modules. It addresses issues such as class name injection, specialized patterns, and modifying components. Additionally, it emphasizes the importance of communication and collaboration with designers, testing UI complexity, and organizational responsibility for UI.
Using Next.JS and Redux for Epic Noscript Web Apps
21 min
Using Next.JS and Redux for Epic Noscript Web Apps
This Talk explores developing web applications that work without JavaScript enabled in the browser, while still enjoying the benefits of modern web technologies. The speaker demonstrates converting an existing application to work without JavaScript by wrapping buttons in a form and preventing the default submit event. React helpers are introduced to handle async actions and the speaker shows how to make a counter app work without JavaScript by removing unnecessary callbacks and changing buttons to a button component. The talk also covers adding a form and a surprise feature, and emphasizes that by leveraging forms and an event-based store, applications can seamlessly work with or without JavaScript.
Remote Team Collaboration Techniques
24 min
Remote Team Collaboration Techniques
Welcome to Remote Team Collaboration Techniques. Telecommuting has led to professional isolation and a lack of networking and mentoring. Companies are encouraged to adapt their work policies to the new reality of telework. Remote work has impacted stress levels and employee autonomy, but not productivity. GitHub and Jamstack are effective collaboration tools. Mob pairing promotes learning and progress in projects. Engaging in fun activities and taking breaks from work can boost team morale.
Infrastructure as Code for React Application on AWS Written in TypeScript
30 min
Infrastructure as Code for React Application on AWS Written in TypeScript
This Talk covers infrastructure as code using Terraform and CDK. The speaker demonstrates how to build infrastructure for a React application, including an S3 bucket and connecting to a real domain. They also discuss configuring cache behavior, CloudFront, and remote backends. TypeScript is highlighted as a powerful language for infrastructure as code, and the importance of automation and well-documented code for global-scale infrastructures is emphasized.
Visualize your music with React, a sound design experiment
9 min
Visualize your music with React, a sound design experiment
Claudia Bressi, a senior front-end and mobile developer, combines music and computer science in her sound design project using React and the Web Audio API. The project supports different audio file formats and utilizes powerful methods for analyzing and visualizing sounds. Custom hooks are used for modularity and code reuse. The project is divided into four areas: shape, color, animation, and playback. Future improvements include making it a progressive web app, adding ML algorithms, server-side rendering, and optimizing performance with workers.
Vite - The Next Generation Frontend Tooling
20 min
Vite - The Next Generation Frontend Tooling
VIT is a build tool that solves the problem of slow feedback loop speed by leveraging native support for ES modules in modern browsers. It allows you to write code as native ES modules and handles the parsing and serving of modules for you. VIT supports JavaScript, CSS, SAS, React, TypeScript, and TSX out of the box. It also allows for quick migration from CRA to VIT and can be used as a middleware in an existing Node.js server to enable server-side rendering.
The Legendary Fountain of Truth: Componentize Your Documentation!
24 min
The Legendary Fountain of Truth: Componentize Your Documentation!
Welcome to this session about documentation in a command-driven era. The Data Axis framework provides a comprehensive approach to documentation, covering different areas of the development process. Component-driven development and MDX syntax enable faster development, simpler maintenance, and better reusability. Embedding components in Markdown using MDX allows for more advanced and useful documentation creation. Tools like Storybook and Duxy with MDX support are recommended for documentation solutions. Embedding documentation directly within components and migrating to MDX offer a comprehensive documentation experience and open up new possibilities for embedding and improving documentation.
Reusing App State in React Native with Recoil
24 min
Reusing App State in React Native with Recoil
Recoil is a minimal and easy-to-learn state management library for React and React Native. It supports distributed and incremental state definition, React suspense, and provides hooks like useRecoilValue and useRecoilState. Recoil can be used in both React and React Native applications, allowing for easy reuse of state configurations. Testing Recoil is straightforward, with the ability to observe state changes and compare snapshots. Overall, Recoil is an experimental but promising alternative to Redux.
Supercharging Developer Productivity With Advanced Code Search
10 min
Supercharging Developer Productivity With Advanced Code Search
Developers can use Sourcegraph to easily search for code using literal, regular expression, and structural patterns. Sourcegraph allows searching through open source and private code indexed across GitHub and GitLab, and supports searching for unstable batch API in React.js. It also enables searching with regular expressions, finding dependencies and usage patterns. With structural search, developers can search for specific blocks of code and narrow down their search using keywords. Sourcegraph is essential for developer velocity, helping teams quickly search through repositories, find references to shared systems, and providing powerful search parameters.
Build a Custom Storefront on Shopify with Hydrogen
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.
Magic with Babel Macro
20 min
Magic with Babel Macro
Babel macros allow for code transformation without multiple plugins, providing a solution to the downsides of regular Babel plugins. Understanding AST is crucial for developers working with transpilers, and exploring its structure and representations can help derive code. Babel started as a transpiler but has evolved into a tool for live code transformation. Babel macros are supported in various React-based frameworks and can be used for track translation and CSS to React Native macros. However, macros have limitations, such as being synchronous and evaluated at compile time.
The Forest for the (Abstract Syntax) Trees
8 min
The Forest for the (Abstract Syntax) Trees
Hydrogen is an opinionated React framework and SDK for building fast and dynamic Shopify-powered custom storefronts. With Hydrogen, developers can leverage compilers to easily compose common operations and improve developer experience. The framework focuses on image performance, request caching, server-side rendering, and React server components. It also provides auditing for accessibility, security, web vitals, and framework violations. The Hydrogen CLI offers a powerful and fun developer experience for bootstrapping, enforcing best practices, ongoing maintenance, and testing.
Gatsby v4's New Rendering Modes
24 min
Gatsby v4's New Rendering Modes
Gatsby V4 introduces deferred static generation (DSG), combining the benefits of static site generation (SSG) and server-side rendering (SSR). This approach allows for faster builds and a more deterministic cache. Gatsby V4 also includes features such as parallel query running and LMDB for enhanced performance. The focus is on integrations and improving the developer experience (DX) in the future.
Build Fullstack Apps in Record Time with Blitz.js
67 min
Build Fullstack Apps in Record Time with Blitz.js
Workshop
Simon Knott
Simon Knott
Blitz.js is the Fullstack React Framework. It's heavily inspired Ru on Rails and is focused on making you as productive as possible. It's built on Next.js and adds all the missing pieces you need for building a fullstack app with a database. By far the biggest innovation of Blitz is the new "Zero-API" data layer that abstracts away the API so you don't have to mess with REST or GraphQL APIs!

Simon will introduce all the important parts & guide you through getting started with Blitz, so you'll know if you might want to use it or not.
Automated Application Security Testing with StackHawk
9 min
Automated Application Security Testing with StackHawk
StackHawk is a dynamic application security testing tool that runs active security tests against running applications. It integrates with CI platforms, provides scan results in Slack or Datadog, and allows for issue triaging and integration with JIRA. The StackHawk scanner identifies security issues like SQL injection and cross-site scripting, provides detailed findings, and offers remediation guidance. Start a free trial to improve software quality and integrate StackHawk into your development process.
Incremental Static Regeneration: Static Sites on Steroids
22 min
Incremental Static Regeneration: Static Sites on Steroids
Incremental static regeneration is a feature in Next.js that allows for static generation on a per-page basis without rebuilding the entire site. It helps with headless content management systems and persists between deployments. The example demonstrates how server-side rendering, static site generation, and incremental static regeneration work together. The real-time visual editor allows for immediate changes to be seen. Visit the NetJS website for an e-commerce demo and learning platform.
Fullstack Type-Safety with GraphQL and Hasura
203 min
Fullstack Type-Safety with GraphQL and Hasura
WorkshopFree
Jesse Martin
Jesse Martin
In this workshop, we’ll learn how to build a type-safe chain from API to the client with generated TypeScript tooling. Creating a type-safe environment for development reduces the number of bugs that get shipped to production, but also creates faster feature development once the ground-work is in place.

This will be a fast-paced workshop covering an opinionated stack of features, but in the end, you’ll have a functioning framework for eloquent and type-safe development.

Table of contents

- We’ll begin creating a GraphQL API on Hasura Cloud and define some basic access controls and actions.
- Then we’ll scaffold a TypeScript-ready framework with NextJs.
- With the framework and API in place, we’ll generate an SDK using GraphQL Zeus.
- Lastly, we’ll generate some type-safe state management wrappers with easy-peasy for implementing a basic login and authentication flow.
Forms Don't Need to Suck
20 min
Forms Don't Need to Suck
Andy Richardson, a software engineer at GraphCDN, introduces Fielder, a project aimed at simplifying form creation in React. Fielder allows for decentralized form schema and onSubmit logic, making it easier to handle async validation. It eliminates the need for hoisting conditional logic and simplifies rendering and validation. The Fielder library is recommended for exploration but not yet stable for production. The speaker emphasizes the importance of being truthful and addresses the performance and re-rendering capabilities of Fielder.
Designing A Sustainable Freelance Career
145 min
Designing A Sustainable Freelance Career
WorkshopFree
Alexander Weekes
Rodrigo Donini
2 authors
Would you like to pursue your passions and have more control over your career? Would you like schedule and location flexibility and project variety? Would you like the stability of working full-time and getting paid consistently? Thousands of companies have embraced remote work and realize that they have access to a global talent pool. This is advantageous for anyone who has considered or is currently considering freelance work.>> Submit your interest on becoming a freelance engineer with Toptal and get a call with Talent Acquisition specialist <<

Freelancing is no longer an unstable career choice.

This workshop will help you design a sustainable and profitable full-time (or part-time) freelancing career. We will give you tools, tips, best practices, and help you avoid common pitfalls.
Table of contents

Module 1: Dispelling common myths about freelancing
Module 2: What does freelancing look like in 2021 and beyond
Module 3: Freelancing choices and what to look for (and what to avoid)
Module 4: Benefits of freelancing from a freelancer + case study
BREAK
Module 6: How to get started freelancing (experience, resume, preparation)
Module 7: Common paths to full-time freelancing
Module 8: Essentials: setting your rate and getting work
Module 9: Next steps: networking with peers, upskilling, changing the world
Module 10: Freelancer AMA
Let's talk about Web Components
32 min
Let's talk about Web Components
Web Components are a suite of technologies that allow you to create reusable HTML elements, combining the fun of React with regular HTML. Custom elements and the shadow DOM are key features of Web Components, allowing you to define new elements, encapsulate functionality and styles, and interact with a separate DOM. HTML templates serve as placeholders for content to be rendered later in custom components. Custom elements and HTML templates are cross-framework compatible and can be used in React, Angular, Vue, or any other framework.
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
159 min
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
Workshop
Daniel Madalitso Phiri
Daniel Madalitso Phiri
In this workshop, we'll build out a fully functional website and integrated blog with Next.js and Strapi.

Table of contents:
- An introduction to Headless CMS and supported architectures
- Getting up and Running with Strapi and Next.js
- Integrating Blog functionality into a Next.js app
- Deploying your Next.js and Strapi Apps Bonus
- Implementing content previews with Next.js

Prerequisites:Basic React Knowledge Basic knowledge of Node.js and npm Basic Web Concepts.


Building a Sentry: 7 years of open-source React
69 min
Building a Sentry: 7 years of open-source React
Workshop
Evan Purkhiser
David Wang
2 authors
Join Sentry’s Evan Purkhiser and David Wang as they walk through Sentry’s 230k LoC Typescript/React codebase. They’ll tell war stories of the good, the bad, and the ugly. Gaze in wonder at their modern usage of Typescript, react hooks, and styled components. Recoil in disgust at their legacy Reflux usage and perplexing Webpack configuration. Step away from the workshop with a working knowledge of techniques to keep a large-scale frontend codebase modern and maintainable.
Your Second Source of Truth
8 min
Your Second Source of Truth
Rachel Neighbors discusses the importance of documentation as a second source of truth for developers. She shares insights from improving the React Native documentation, including the need for refresher material, visual content, and interactive examples. Neighbors emphasizes the power of documentation in empowering communities to build reliable content and highlights the React documentation as a successful example. She invites feedback on the latest iteration of the React documentation.
So Now You Know: Learnings on People, Product and Culture from Hypergrowth at Snyk
8 min
So Now You Know: Learnings on People, Product and Culture from Hypergrowth at Snyk
Sneak, a software company, has experienced significant growth since its founding in 2015. They face challenges in culture, hiring, and scaling but focus on communication and transparency to manage change. Sneak emphasizes building a strong culture and supporting communities of practice. They hire based on key values and provide support for new hires to thrive. The concept of 'giving away our Legos' is embraced to scale effectively.
A New Kind of Abstraction
7 min
A New Kind of Abstraction
Abstractions in software development build on top of other things and provide utility or make development easier. They can be low-level or high-level, and the smaller the abstraction, the closer it is to the lower level. Abstractions can operate in different environments and their level determines how the code operates and is approached. It's important to evaluate the abstractions used, their portability, and their distance from the low level.
How to create editor experiences your team will love
168 min
How to create editor experiences your team will love
Workshop
Lauren Etheridge
Knut Melvær
2 authors
Content is a crucial part of what you build on the web. Modern web technologies brings a lot to the developer experience in terms of building content-driven sites, but how can we improve things for editors and content creators? In this workshop you’ll learn how use Sanity.io to approach structured content modeling, and how to build, iterate, and configure your own CMS to unify data models with efficient and delightful editor experiences. It’s intended for web developers who want to deliver better content experiences for their content teams and clients.
GraphQL Security Testing Technical Workshop
119 min
GraphQL Security Testing Technical Workshop
Workshop
Zachary Conger
Zachary Conger
We’ve all heard the buzz around pushing application security into the hands of developers, but if you’re like most companies, it has been hard to actually make this a reality. You aren’t alone – putting the culture, processes, and tooling in place to make this happen is tough – especially for sophisticated applications like those backed GraphQL.

In this hands-on technical session, StackHawk Senior DevOps Engineer, Zachary Conger, will walk through how to protect your GraphQL APIs from vulnerabilities using automated security testing. Get ready to roll-up your sleeves for automated AppSec testing.
Security Testing Automation for Developers on Every Build
108 min
Security Testing Automation for Developers on Every Build
Workshop
Oliver Moradov
Bar Hofesh
2 authors
As a developer, you need to deliver fast, and you simply don't have the time to constantly think about security. Still, if something goes wrong it's your job to fix it, but security testing blocks your automation, creates bottlenecks and just delays releases...but it doesn't have to...

NeuraLegion's developer-first Dynamic Application Security Testing (DAST) scanner enables developers to detect, prioritise and remediate security issues EARLY, on every commit, with no false positives / alerts, without slowing you down.

Join this workshop to learn different ways developers can access Nexploit & start scanning without leaving the terminal!

Table of contents:

- What developer-first DAST (Dynamic Application Security Testing) actually is and how it works
- See where and how a modern, accurate dev-first DAST fits in the CI/CD
- Integrate NeuraLegion's Nexploit scanner with GitHub Actions
- Understand how modern applications, APIs and authentication mechanisms can be tested
- Fork a repo, set up a pipeline, run security tests and look at the results