June 2 - 6, 2023
React Summit
Amsterdam & Online

React Summit 2023

The biggest React conference worldwide

The biggest React conference worldwide.

This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website.
React Performance Debugging Masterclass
170 min
React Performance Debugging Masterclass
Top Content
WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Speeding Up Your React App With Less JavaScript
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
React Concurrency, Explained
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Designing Effective Tests With React Testing Library
151 min
Designing Effective Tests With React Testing Library
Top Content
Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application 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 DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Debugging JS
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Principles for Scaling Frontend Application Development
25 min
Principles for Scaling Frontend Application Development
Top Content
Watch video: Principles for Scaling Frontend Application Development
This Talk discusses scaling front-end applications through principles such as tearing down barriers, sharing code in a monorepo, and making it easy to delete code. It also emphasizes incremental migration, embracing lack of knowledge, and eliminating systematic complexity. The Talk highlights the use of automation in code migration and the importance of removing barriers to enable smoother code migration.
React at Scale with Nx
145 min
React at Scale with Nx
Top Content
WorkshopFree
Isaac Mann
Isaac Mann
We're going to be using Nx and some its plugins to accelerate the development of this app.
Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components
Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component
Video Editing in the Browser
23 min
Video Editing in the Browser
Top Content
Watch video: Video Editing in the Browser
This Talk discusses the challenges of video editing in the browser and the limitations of existing tools. It explores image compression techniques, including Fourier transform and Huffman encoding, to reduce file sizes. The video codec and frame decoding process are explained, highlighting the importance of keyframes and delta frames. The performance bottleneck is identified as the codec, and the need for specialized hardware for efficient video editing is emphasized. The Talk concludes with a call to create a simplified API for video editing in the browser and the potential for AI-powered video editing.
Server Components: The Epic Tale of Rendering UX
26 min
Server Components: The Epic Tale of Rendering UX
Top Content
Watch video: Server Components: The Epic Tale of Rendering UX
This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.
The New Next.js App Router
27 min
The New Next.js App Router
Top Content
Watch video: The New Next.js App Router
Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.
How Not to Build a Video Game
31 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Back to the Roots With Remix
106 min
Back to the Roots With Remix
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
You Can’t Use Hooks Conditionally… or Can You?
28 min
You Can’t Use Hooks Conditionally… or Can You?
Top Content
Watch video: You Can’t Use Hooks Conditionally… or Can You?
The Talk discusses the use of the Use hook in React and its ability to be used conditionally. It explains the concept of the fiber tree and how hooks values are stored in memory. The Talk also delves into the conditional use of useContext and how it differs from useState. It explores the process of updating context values and optimizing context rendering. The role of the provider in managing context values and rendering is emphasized.
Thinking in React Query
22 min
Thinking in React Query
Top Content
Watch video: Thinking in React Query
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.
Config Driven UI using ReactJS
7 min
Config Driven UI using ReactJS
Top Content
Watch video: Config Driven UI using ReactJS
This lightning talk introduces config-driven UI in ReactJS, a technique for creating dynamic and customizable UIs without hard coding. It covers the implementation of different types of components and how they can be nested to create complex layouts.
Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
137 min
Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
Top Content
WorkshopFree
Sam Sycamore
Siriwat (Jun) Kunaporn
2 authors
Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI.
Table of contents:- Introducing our project and tools- App setup and package installation- Constructing the dashboard- Prototyping, styling, and themes - Joy UI features- Filtering, sorting, editing - Data Grid features- Conclusion, final thoughts, Q&A
Should You Use React in 2023?
31 min
Should You Use React in 2023?
Top Content
Watch video: Should You Use React in 2023?
Tru Narla
Jordan Gensler
2 authors
React is a popular choice, but there are claims that it's dead and should be replaced. React has good out-of-the-box performance and is suitable for most applications. React Native allows code sharing between React and React Native. When considering a migration from React to Svelte, there are trade-offs to consider. React offers a standardized way of working and easy onboarding.
7 TypeScript Patterns You Should Be Using
19 min
7 TypeScript Patterns You Should Be Using
Top Content
Watch video: 7 TypeScript Patterns You Should Be Using
This Talk introduces 7 essential TypeScript patterns for React development, including children, spreading props, either-or, generic components, and context. The speaker demonstrates various implementations and provides examples using a fictional dog grooming salon application. Other interesting ideas include using omit and make required types, creating components with either-or interfaces, and using generics, memorization, and context in React. The speaker also introduces the Recontextual library for context management.
Federated Microfrontends at Scale
31 min
Federated Microfrontends at Scale
Top Content
Watch video: Federated Microfrontends at Scale
This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
0 to Auth in an hour with ReactJS
56 min
0 to Auth in an hour with ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.
React Myths And Legends
22 min
React Myths And Legends
Watch video: React Myths And Legends
This talk discusses myths and misconceptions in React that can impact re-renders. It covers unnecessary re-renders and the misconception that props trigger re-renders. The talk also explores the role of memoization and context in reducing re-renders. Additionally, it highlights the importance of using the key attribute correctly to optimize rendering. The talk concludes by discussing the separation of state and API in context and the use of state management tools like Redux.
Deploying React Native Apps in the Cloud
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS
28 min
Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS
Watch video: Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS
GraphQL is a strongly typed, version-free query language that allows you to ask for specific data and get it in JSON format. It simplifies data retrieval and modification by allowing the server to handle all necessary operations. Serverless architectures, such as AWS Lambda, are scalable, cost-effective, and good for event-driven applications. Event sourcing and CQRS are techniques that ensure consistency and separate reading and writing parts of an application. Building a GraphQL API with commands and queries can be achieved using AWS AppSync and DynamoDB. This approach offers low latency, scalability, and supports multiple languages. Challenges include application complexity, data modeling, and tracing, but starting with simplicity and making something work first can lead to success.
Building Blazing-Fast Websites with Next.js and Sanity.io
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
Improving Developer Happiness with AI
29 min
Improving Developer Happiness with AI
Watch video: Improving Developer Happiness with AI
GitHub Copilot is an auto-completion tool that provides suggestions based on context. Research has shown that developers using Copilot feel less frustrated, spend less time searching externally, and experience less mental effort on repetitive tasks. Copilot can generate code for various tasks, including adding modals, testing, and refactoring. It is a useful tool for improving productivity and saving time, especially for junior developers and those working in unfamiliar domains. Security concerns have been addressed with optional data sharing and different versions for individuals and businesses.
Overcoming Performance Limitations in React Components for Low-end Devices
9 min
Overcoming Performance Limitations in React Components for Low-end Devices
Watch video: Overcoming Performance Limitations in React Components for Low-end Devices
This Talk discusses overcoming performance limitations in React components for low-end devices, focusing on app launch time and scrolling performance. The speaker shares techniques for improving app launch and scrolling performance, such as pre-rendering, generating HTML at build time, and using the Virtual List component. The Virtual List component recycles dominoes and uses Translate3D function for improved performance. Delegating scrolling to the browser in NativeMode and supporting scrolling via remote control keys are also mentioned. Overall, the Talk highlights the importance of optimizing performance for low-end devices and provides practical solutions for achieving better performance in React components.
How Grafana Uses React to Power the World of Observability
7 min
How Grafana Uses React to Power the World of Observability
Watch video: How Grafana Uses React to Power the World of Observability
Grafana uses React to power its open source platform, leveraging its vast ecosystem, improved performance, and community contributions. The choice of state management tool depends on the team's problem space. React Hooks have posed challenges but have also been a powerful tool for developers. The new Scenes library simplifies development and reduces the learning curve. Despite challenges, React remains a powerful tool for complex frontends, and Grafana will continue to use it.
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!
Development History of Zustand
19 min
Development History of Zustand
Watch video: Development History of Zustand
This talk provides an overview of the development history of Zestand, a state management library for React, and the speaker's involvement in it. It also introduces Jotai, another state management library developed by the speaker, and compares it with Zestand. The talk highlights the unique features and goals of both libraries, as well as the challenges of monetizing open-source software.
Reactivity: There and Back Again
12 min
Reactivity: There and Back Again
Watch video: Reactivity: There and Back Again
The Talk discusses the cyclical nature of technology evolution, with examples from civil engineering and software development. It explores the shift from serverless to client-side frameworks and the recent move back towards server-side processing. The evolution of technologies and states is examined, highlighting the progression from mutability to immutability and the introduction of observable immutability. The future and next generation of reactivity are also explored, with a focus on the blurring boundary between server and client and the importance of embracing uncertainty and avoiding dogma.
Moving on From Runtime Css-In-Js at Scale
29 min
Moving on From Runtime Css-In-Js at Scale
Watch video: Moving on From Runtime Css-In-Js at Scale
This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.
Modern Approaches for Creating Extremely Fast Websites
24 min
Modern Approaches for Creating Extremely Fast Websites
Watch video: Modern Approaches for Creating Extremely Fast Websites
The Talk discusses performance optimization in software development and engineering. It covers topics such as optimizing requests, anticipating future needs, and comparing single-page apps to multiple-page apps. It also explores the advantages of single-page apps and the use of Remix for building pages. The Talk emphasizes code splitting, optimizing data fetching, and solving client-side state. It concludes with a discussion on pre-rendering, Remix adoption, and prerendering with React.
Code Signing React Native Apps
7 min
Code Signing React Native Apps
Watch video: Code Signing React Native Apps
Code signing is a critical step in preparing React Native apps for mobile devices. Generating a signed bundle requires different credentials for Android and iOS. Automating signed builds using a cloud CI-CD provider like AppFlow simplifies the process. AppFlow handles native iOS and Android builds in the cloud, including managing signing credentials. It allows for on-demand builds, automated workflows, and deployment to app stores.
Building Pixel-Perfect UI Components Using CSS Variables
9 min
Building Pixel-Perfect UI Components Using CSS Variables
Watch video: Building Pixel-Perfect UI Components Using CSS Variables
CSS variables and their possibilities for UI developers, MUI's history and understanding of developer needs, Joy UI's focus on developer experience and use of CSS variables for consistency and future-proofing, the elimination of manual calculations and JavaScript with CSS variables in JoyUI, and the availability of playgrounds and a stable release for exploration.
Supercharged Code Refactoring via Abstract Syntax Trees
29 min
Supercharged Code Refactoring via Abstract Syntax Trees
Watch video: Supercharged Code Refactoring via Abstract Syntax Trees
This Talk explores the power of Abstract Syntax Trees (ASTs) in software development. It covers the use of ASTs in maintaining React examples, automating dependency identification, and introducing generic typing. The Talk also discusses using ASTs to reason about and generate code, as well as their application in building ESLint plugins and code mods. Additionally, it highlights resources for exploring ASTs, testing AST scripts, and building Babel plugins.
GraphQL in 2023 - Still Relevant?
24 min
GraphQL in 2023 - Still Relevant?
Watch video: GraphQL in 2023 - Still Relevant?
Lenz Weber-Tronic
Jerel Miller
2 authors
Today we'll discuss whether GraphQL is still relevant in 2023, exploring its benefits and unique features. We'll cover caching data on the client, data normalization, and reducing redundancy. We'll also look at updating data with mutations and upcoming features like the defer directive. Additionally, we'll explore the power of GraphQL Federation and how it allows for observing changes and making informed decisions.
Scaling React-Three-Fiber Applications beyond the Hello World
20 min
Scaling React-Three-Fiber Applications beyond the Hello World
Watch video: Scaling React-Three-Fiber Applications beyond the Hello World
WebGL has evolved from showcasing technology to being used in everyday applications like Google Maps and Figma. React and 3.js can be used together to build WebGL applications, allowing for reusable components and declarative development. Building complex 3D graphics applications requires efficient data structures, algorithms, and rendering techniques. The Flux CAD editor uses React, 3.js, and React ReFiber to handle complex engineering documents and optimize GPU utilization. Optimizing the render loop and GPU performance is crucial for improving WebGL application performance. Instance rendering can be used to optimize text rendering in WebGL applications, achieving efficient rendering of thousands of 3D characters.
Zod === Typescript, but at Runtime in Your React Applications
8 min
Zod === Typescript, but at Runtime in Your React Applications
Watch video: Zod === Typescript, but at Runtime in Your React Applications
Today's Talk discusses how Zod, an NPM library, can guarantee the TypeSystem at runtime, providing all the benefits of TypeScript. Zod's parse method allows for checking if objects match the schema, creating a validation layer between applications and APIs. By combining TypeScript with Zod, developers can ensure type safety at both runtime and build time, preventing code execution with incorrect data and improving the user experience.
Improve Your Website's Speed and Efficiency with Partytown
20 min
Improve Your Website's Speed and Efficiency with Partytown
Watch video: Improve Your Website's Speed and Efficiency with Partytown
Today's Talk discusses improving site speed and efficiency using PartyTown, a tool that runs third-party scripts from a web worker, minimizing their impact on the main UI thread. The inclusion of third-party scripts in webpages should be carefully considered due to their potential impact on performance. Real-world testing is crucial to identify performance issues that may not surface during development. PartyTown offers features like white-listing script capabilities and supports various frameworks for easy integration. It was built by the team at builder.io to ensure websites can scale without sacrificing performance.
Making Impossible States with fp-ts and TypeScript in a React Application
8 min
Making Impossible States with fp-ts and TypeScript in a React Application
Watch video: Making Impossible States with fp-ts and TypeScript in a React Application
The Talk introduces TypeScript and FPTS in a React application, highlighting the benefits of static typing and functional programming. It discusses the concept of impossible states and how to prevent them using type checking. The importance of defining smart constructors and functions around data types is emphasized. Overall, the Talk explores the combination of JavaScript, TypeScript, and FPTS to create robust and error-free applications.
It's 2023 and I Can Finally Talk About Atomic CSS
30 min
It's 2023 and I Can Finally Talk About Atomic CSS
Watch video: It's 2023 and I Can Finally Talk About Atomic CSS
Today's Talk discusses the traditional problems of scaling CSS and the advantages of Atomic CSS, including better performance and handling media queries. Concerns about HTML bloat and the breaking of separation of concerns can be addressed. Tailwind CSS has limitations in class detection and can lead to excess markup. Challenges include component exploration and querying, as well as tweaking CSS. Type safety is now addressed with tools like Tailwind CSS ClassNames and TypeWind. Style sheet composition and Atomic CSS and JS are important for building UI kits. Considerations for Tailwind CSS include its suitability for component-driven development and potential limitations with Web Components.
Supercharging React Apps with WASM
25 min
Supercharging React Apps with WASM
Watch video: Supercharging React Apps with WASM
WebAssembly is a fast, secure, and portable technology that challenges JavaScript's dominance on the web. It allows for the use of legacy code and expands the scope of functions that can be performed on various devices. WebAssembly can be used for image processing and machine learning, and it has potential applications in UI component libraries. Startups are already incorporating WebAssembly into their web applications, and optimization and performance are key advantages of this technology.
Optimising Images in Web and Native
21 min
Optimising Images in Web and Native
Watch video: Optimising Images in Web and Native
This Talk focuses on optimizing images for mobile and web. It emphasizes the importance of image dimensions in optimizing images and shares a story about crashes encountered in a mobile app due to heavy image content. The Talk discusses image rendering and sizing, using dimensions and pixel density, optimizing images for different devices and screen sizes, and the importance of image size and format optimization. It recommends tools like Cloudinary for image optimization.
Off with Their Heads: Rise of the Headless Components
25 min
Off with Their Heads: Rise of the Headless Components
Watch video: Off with Their Heads: Rise of the Headless Components
Headless Components are efficient for app development, but there's a lot of work involved, especially for menus. The customizability wall is a problem with component libraries, but it can be solved through reverse engineering and design. Headless Components offer no markup or basic markup to be overwritten, providing flexibility in code and design quality. Radix and React ARIA are recommended stylus component libraries with different APIs. Kodaks' experience with headless components highlights the ability to mix and match easily and the potential for market gaps in the headless space. Radix is a popular choice for headless components due to its well-documented and user-friendly API. Headless components aid in testing, distribution of design systems, and accessibility. MUI is a self-consistent and rich library, while Radix focuses on accessibility and default accessibility. Kodaks integrates well with headless libraries and welcomes feedback through Discord.
Meet Your New BFF: Backend to Frontend without the Duct Tape
7 min
Meet Your New BFF: Backend to Frontend without the Duct Tape
Watch video: Meet Your New BFF: Backend to Frontend without the Duct Tape
Noam, the creator of Remalt, explains how this Open Source remote framework can simplify the process of writing a Node.js backend for a React app. He demonstrates using Remalt for full-stack development by adding card capabilities to a front-end to-do app. He shows how Remalt can handle server-side sorting, filtering, and real-time updates. Noam also discusses the importance of data validation and access control, and how Remalt can provide a unified approach to these concerns. He invites viewers to visit the Grimmult website for tutorials and examples.
How To Build a Chrome Extension Using React
18 min
How To Build a Chrome Extension Using React
Watch video: How To Build a Chrome Extension Using React
This Talk is about building a Chrome extension using React. It covers the setup, permissions, and behaviors of the extension, as well as calling external services and running the extension locally. The Talk also discusses the process of publishing the extension and includes a demo of an email management system. Overall, it provides a comprehensive overview of building and deploying a Chrome extension using React.
No CRA? What now?
7 min
No CRA? What now?
Watch video: No CRA? What now?
React docs suggest using production-grade frameworks like Remix, Next.js, or Gatsby. But if you want to start with a simple pure React app, you can use Vite or Parcel as generic bundlers. Nx provides facilities to set up a workspace similar to Create React app with modern features. You can modularize and scale your project using Nx libraries. Consider upgrading to a Monorepo structure and adding Next.js or Remix applications. Migration strategies are available for existing React apps.
From Idea to Production: React Development with a Visual Twist
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Omer Kenet
Omer Kenet
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A
Secrets in Source Code - How Your JS Code is Exposing Your Credentials
11 min
Secrets in Source Code - How Your JS Code is Exposing Your Credentials
Watch video: Secrets in Source Code - How Your JS Code is Exposing Your Credentials
This lightning presentation discusses the issue of secrets leaking in code and how it can expose digital authentication credentials. GitGuardian scanned over 10 million secrets in public repositories on GitHub, with Python being the top language for leaked secrets. The exposure of secrets can occur in both public and private repositories, and it is important to avoid hardcoding secrets and store keys securely. Best practices for handling keys and secrets include using a centralized place for storing keys, using tools like .env for loading secrets, and implementing vaults and secrets managers.
Making Interactions Accessible to All Users
30 min
Making Interactions Accessible to All Users
Watch video: Making Interactions Accessible to All Users
Today's Talk explores making web interactions accessible to all users. It emphasizes the importance of accessibility and the various ways users interact with the web. The Talk covers common accessibility issues with buttons, links, forms, and dynamic information. It also discusses the use of ARIA labels, error handling, and models. The importance of convincing upper management for accessibility and the limitations of automated testing are highlighted. The Talk concludes with recommendations for screen readers and considerations for icon buttons.
Our Journey Into μFrontends
11 min
Our Journey Into μFrontends
Watch video: Our Journey Into μFrontends
Welcome to our journey into micro-frontends. We integrated products using a dependency called the card tracker. The manual process between teams raised questions about version control. Microfrontends provided a seamless developer experience and allowed for the cleanup of technical debt. The approach also paved the way for a microservices approach in the backend.
useMachineLearning… and Have Fun with It!
9 min
useMachineLearning… and Have Fun with It!
Watch video: useMachineLearning… and Have Fun with It!
Nico, a freelance frontend developer and part of the Google Developer Experts program, provides an introduction to machine learning in the browser. He explains how machine learning differs from traditional algorithms and highlights the use of TensorFlow.js for implementing machine learning in the browser. The talk also covers the use of different backends, such as WebGL, and the conversion of audio into spectrograms for model comparison. Nico mentions the use of overlay for improved detection accuracy and the availability of speech command detection and custom model training with TensorFlow. Overall, the talk emphasizes the benefits of using and training machine learning models directly on the device.
Canaries in the CloudFront
12 min
Canaries in the CloudFront
Watch video: Canaries in the CloudFront
Today's Talk covers designing frontend CI/CD systems, integrating CDNs, and the impact of business type on frontend teams. The speaker shares their experience with CDN integration and its impact on their CI/CD strategy. They discuss canary releases and the challenges of pushing canary deploys to production. Additionally, they highlight the importance of integration testing for shift left and detecting issues before merging to the develop branch.
Extending React Using Astro
24 min
Extending React Using Astro
Watch video: Extending React Using Astro
Astro is an all-in-one framework built for speed that allows for flexibility and customization. It supports file-based routing, dynamic pages, and easy integration with popular frameworks like React. Astro's client directives enable selective hydration and optimization of websites. It also supports fetching data from APIs and using Markdown. With features like style preprocessors, CSS support, and deployment adapters, Astro stands out as a framework for SEO, developer experience, and performance.
Crash Course Into Astro, Kontent.ai and Portable Text
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.
10x Your Teamwork Through Pair Programming
7 min
10x Your Teamwork Through Pair Programming
Watch video: 10x Your Teamwork Through Pair Programming
Selena Small
Michael Milewski
2 authors
In this Talk, Selina discusses the implementation of a delete functionality in a software project. She explains how the app component is responsible for triggering the delete action and passing it down to the list component. Selina also emphasizes the importance of writing tests to ensure the proper functioning of the delete feature. Additionally, she highlights the benefits of effective pairing sessions, such as using ping pong pairing and taking breaks to improve collaboration and productivity. Overall, this Talk provides valuable insights into software development practices and teamwork strategies.
Localizing Your Remix Website
154 min
Localizing Your Remix Website
WorkshopFree
Harshil Agrawal
Harshil Agrawal
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps
Synthetic Monitoring and E2E Testing - 2 Sides of the Same Coin
9 min
Synthetic Monitoring and E2E Testing - 2 Sides of the Same Coin
Watch video: Synthetic Monitoring and E2E Testing - 2 Sides of the Same Coin
Carly Richards discusses the challenges of using different tools for synthetic monitoring and end-to-end testing, emphasizing the need for a unified approach with playwright and Elastic Synthetics. The Playwright API and Elastic Synthetics can be used together to create tests and monitoring tools, ensuring consistent user experience and documenting application features. By bringing development and SRE teams together and using a common tool, collaboration and defect identification can be improved.
How (The Heck) Did We End Up Here?!
6 min
How (The Heck) Did We End Up Here?!
Watch video: How (The Heck) Did We End Up Here?!
Web development has evolved significantly over the past 25 years, with the introduction of JavaScript and PHP. The choices for IDEs were limited, but local development was made easy with XAMP and deployment was as simple as FTP. Modern web development involves selecting a UI library or framework, deploying the front-end to platforms like Vercel or CloudFlare, and using serverless providers for persistent data. ORMs and query builders like Prisma and Drizzle facilitate communication with the database. Companies should prioritize delivering products over custom solutions to avoid unnecessary devops issues.
How to Become a Fintech Developer in Seven Minutes
7 min
How to Become a Fintech Developer in Seven Minutes
Watch video: How to Become a Fintech Developer in Seven Minutes
RAPID is a globally integrated FinTech system that abstracts all the integrations into a single platform, eliminating the need for merchants to manage multiple integrations for payments, payouts, fraud detection, and compliance policies in different jurisdictions. RAPID offers various use cases, including e-commerce, online gaming, and marketplaces. With RAPID, merchants can easily handle payments, payouts, and fund transfers. Let's create a hosted checkout page through RAPID by signing up to the client portal, copying authentication keys, and following simple steps. After making a payment on the hosted checkout page, you can view payment details and transferred funds in the client portal. Congratulations, you're now a fintech developer!
Giving Superpowers to Your React Apps with Machine Learning
11 min
Giving Superpowers to Your React Apps with Machine Learning
Watch video: Giving Superpowers to Your React Apps with Machine Learning
Welcome to my lightning talk at React Summit 2023 where I discuss integrating machine learning capabilities in React apps using JavaScript libraries like TensorFlow.js and ONNX.js. These libraries allow for better privacy, lower cost, and lower latency by leveraging system hardware. Examples include using TensorFlow.js and CocoaSSIST to classify images and Ermine.ai for live audio transcription. React developers can now integrate machine learning without needing extensive knowledge of Python or other frameworks.
WHOA, I Wrote This React App With My Voice!
9 min
WHOA, I Wrote This React App With My Voice!
Watch video: WHOA, I Wrote This React App With My Voice!
Today we're going to build a React application with just our voice using GitHub Copilot, an AI peer programmer powered by OpenAI Codecs. It's important to be specific in your comments to get accurate suggestions from Copilot. Prompt engineering tips can be used to create different applications, such as a basic markdown editor and a simple to-do app. The application was tested successfully by adding and deleting to-do items using voice commands.
Bringing Controversial Ideas to React
8 min
Bringing Controversial Ideas to React
Watch video: Bringing Controversial Ideas to React
This Talk discusses bringing controversial ideas to React, building a plugin architecture, and using Redux without the Connect method. It explores the implementation of plugins that inject functionality into the UI and the use of MobxStateTree. The Talk also highlights the challenges of connecting everything to Redux and the benefits of implementing custom re-renders for better performance. It emphasizes the importance of exploring new territories and embracing controversial ideas for new perspectives.
The Rise of Modern Transactional Stack
7 min
The Rise of Modern Transactional Stack
Watch video: The Rise of Modern Transactional Stack
Today's Talk explores architectural shifts in transactions, highlighting the dominance of JavaScript in the modern transactional stack and the elimination of the frontend-backend divide. The use of serverless and component-driven toolings allows for scalable infrastructure provisioning and removes the need for DevOps teams. Additionally, workflow engines play a crucial role in orchestrating async functions in the serverless native world.
Tired of Tech? Hit Reset with a Sabbatical or LOA
8 min
Tired of Tech? Hit Reset with a Sabbatical or LOA
Watch video: Tired of Tech? Hit Reset with a Sabbatical or LOA
Between burnout, toxic workplaces, the pandemic, the economic downturn, hustle culture, and constant upskilling, let's enjoy the journey instead of slogging through it. Introducing the idea of taking a mini-retirement while working, starting with a sabbatical. Companies offer sabbaticals as a perk, allowing personal development and a chance to return to work. Many companies have publicly stated sabbatical programs, like Adobe. Requirements are guidelines, not set in stone. And they offered it to me anyway by way of apology. Everything worked out, our mini-retirement lasted six months. In fact, the benefits of extended time off are something the rest of the world seems to understand, but the US hasn't gotten the memo. What about those of you who don't have access to a sabbatical? Is there another kind of mini-retirement you could pull off? Absolutely. You can check if you have the ability to request an unpaid personal leave of absence. Unlike a sabbatical, there's no guarantee you'll have a job waiting for you when you get back, but you can request it for any reason at any time. Great, but how can you do this? So let's talk logistics. A mini retirement is within reach for a lot of people. Here's a worksheet to help you plan your mini retirement. Determine your cash in and cash out to calculate your savings rate. You can choose how many months you want to take off and calculate the amount of money you need to save. Your savings rate reveals important information about your finances. Saving 10% to 20% can cut the time needed in half, and saving 30% per month allows you to work from September to May and save for your summer off. There are some considerations, such as paying for benefits out-of-pocket and pausing contributions to retirement accounts. Now, go take a mini retirement and explore more resources on personal finance and lifestyle design.
Go From Zero To Hero: Be Cross-Platform Devs With React Native
10 min
Go From Zero To Hero: Be Cross-Platform Devs With React Native
Watch video: Go From Zero To Hero: Be Cross-Platform Devs With React Native
Cross-platform development allows you to build apps compatible with multiple devices or operating systems, reusing 50 to 80 percent of your code. React Native has a wide range of third-party libraries for using APIs. Code examples cover React Native standalone case and with content management system, exploring built-in core components and third-party library APIs. Content management systems simplify content editing and asset swapping, allowing real-time editing and easy asset uploads. The importance of knowing built-in APIs for mastering cross-platform technologies and building scalable, easy-to-maintain applications is highlighted.
The Path Through Legacy: Delicate Balance Between Tolerance and Phobia
8 min
The Path Through Legacy: Delicate Balance Between Tolerance and Phobia
Watch video: The Path Through Legacy: Delicate Balance Between Tolerance and Phobia
Legacy can refer to ancient architecture or old code, and it is important to acknowledge and address legacy issues. Legacy code can be disorganized and outdated, making it difficult to update and extend. The goal is to leave the code base in a better condition than before, prioritizing code that is easily modifiable by others.
Tuning Retro Video Archives for Display on the Modern Web using WebGL in React
31 min
Tuning Retro Video Archives for Display on the Modern Web using WebGL in React
Watch video: Tuning Retro Video Archives for Display on the Modern Web using WebGL in React
Travis Tykemany3 McGeehan, a full-stack developer at Gordon Food Services and an administrator for the TaskBot team and ambassador from Task Videos, discusses preserving retro game footage from the TAS scene for modern viewers with WebGL. He explains the role of TaskBot, a player piano for retro game consoles, and how the TaskBot team translates tool assisted speedruns to create the fastest possible sequence of inputs. He also highlights the core problems in video game footage archival, including chroma subsampling and stretched aspect ratios in small resolutions. Challenges in retro game footage preservation include storing records at the original, unstretched resolutions and avoiding bilinear interpolation. Different algorithms, such as point and Area, produce distinct effects when scaling up images. Techniques used on rgbscaler.com to preserve crisp footage of low-resolution GameBoy games include the use of the area algorithm, AV1 and H265 encoded videos, and the ability to play videos with CRT effects. The AV1 and H.265 video codecs are used to support lossless footage and proper upscaling of pixel art footage. A custom canvas with custom controls is created using React to blow up the video in WebGL, and the area scaling algorithm is used instead of bilinear. The WebGL texture updates using a render loop, and the shader logic recreates the mask and scan lines based on pixel position. The React RGB Scaler library enables syntax highlighting for the vertex shader and the fragment shader, making development easier. The RGB scaler site demonstrates the value of improving video quality while using significantly less bandwidth than YouTube.
I Run Code From the Internet!
12 min
I Run Code From the Internet!
Watch video: I Run Code From the Internet!
Today's Talk covers the risks of running someone else's code, the use of supply chain security tools, and the automation of package analysis with SocketDev. It also introduces the concept of Hardened JavaScript and Lockdown for creating secure environments. The mention of LavaMode and its bundler, as well as the application example using Cookiemonster, showcases the practical applications of these tools. The speaker also offers assistance in implementing Lavamote for projects.
Visual CMS… cool for React devs? Now’s the time!
8 min
Visual CMS… cool for React devs? Now’s the time!
Watch video: Visual CMS… cool for React devs? Now’s the time!
The Talk discusses the need for a revolutionary product that will change the way people edit websites. It highlights the challenges faced in visual editing and the limitations of existing CMSs. The Talk also emphasizes the benefits of headless CMSes for developers but acknowledges the sacrifice of visual editing. Ultimately, a solution is sought that caters to both content editors and developers.
Get Rid of Your API Schemas with tRPC
11 min
Get Rid of Your API Schemas with tRPC
Watch video: Get Rid of Your API Schemas with tRPC
This talk introduces TRPC, a tool that eliminates the need for API schemas and simplifies communication between server and client. It explores the use of TRPC in a Next.js application, showcasing how TypeScript and Prisma are utilized. The immediate feedback and backend debugging capabilities of TRPC are demonstrated, highlighting its advantages and drawbacks. Resources for further exploration are also provided.
Is My React Web App Ready for Launch?
11 min
Is My React Web App Ready for Launch?
Watch video: Is My React Web App Ready for Launch?
Today's Talk discusses the production readiness of React web applications, emphasizing the importance of user experience, reputation, security, and cost. The checklist for production readiness includes testing key journeys, optimizing performance, ensuring security through code review and penetration testing, and ensuring scalability. Non-functional requirements, performance testing, and monitoring are also crucial for application launch. The iterative process of launching an application involves trade-offs and the consideration of an MVP or phased rollout.
Using PKCE to Communicate Between React and Native Mobile SDKs
8 min
Using PKCE to Communicate Between React and Native Mobile SDKs
Watch video: Using PKCE to Communicate Between React and Native Mobile SDKs
The Talk discusses communication between React apps/web apps and native applications/SDKs. It explores the challenges of embedding web code in a WebView and proposes running the browser in an embedded mode. The use of deep links and the Pixie protocol is highlighted as a solution for securely exchanging data between the web code and native applications. The Pixie protocol involves generating an authorization code and comparing it with the original key for secure data exchange.
The Future is Composable: Where to Start in Building for It
9 min
The Future is Composable: Where to Start in Building for It
Watch video: The Future is Composable: Where to Start in Building for It
The Talk discusses the future of the web and composability, emphasizing the benefits of using a composable architecture. It provides tips for building composable experiences, such as federating the content layer and starting with small projects. It also suggests using front-end orchestration and edge functions for personalization, localization, and authentication.
Pushing Boundaries To The Edge
9 min
Pushing Boundaries To The Edge
Watch video: Pushing Boundaries To The Edge
The Talk discusses the concept of the Edge and its role in content delivery networks (CDNs). CDNs are designed to improve the delivery of static content but cannot distribute dynamically generated content. Edge computing is a distributed network architecture that processes data close to the source or users, enabling personalization, geolocation-based dynamic content, AV testing, and content authentication. Frameworks like NexGIS, Bercel, Netlify, AWS, and Remix offer edge computing capabilities through edge functions or middleware, allowing execution of server-side logic closer to end users.
Introduction to Library Marketplace
12 min
Introduction to Library Marketplace
Watch video: Introduction to Library Marketplace
The Talk discusses selling NPM packages and React libraries in a marketplace, including earning money, building UI libraries, and using the marketplace dashboard. It explains how to publish packages on Pref.js and verify them. The Talk also mentions the ability to sell packages individually or offer subscriptions, sell to organizations, and offer volume packages on the Pref.js marketplace.