React Summit US 2023

The Talk discusses the journey of improving React and React Native documentation, including the addition of interactive code sandboxes and visual content. The focus was on creating a more accessible and engaging learning experience for developers. The Talk also emphasizes the importance of building a human API through well-designed documentation. It provides tips for building effective documentation sites and highlights the benefits of contributing to open source projects. The potential impact of AI on React development is mentioned, with the recognition that human engineers are still essential.

This Talk on web performance and React explores various metrics such as time to first bite, largest contentful paint, cumulative layout shift, and first input delay. It highlights the challenges of JavaScript in impacting total blocking time and user experience. Mobile usage and device performance are discussed, along with the importance of measuring and improving page performance. The speaker also mentions the abundance of technologies in today's web and emphasizes the need to prioritize user experience over sending excessive JavaScript.

The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.

This Talk explores the journey of a software developer in unraveling the mysteries of Netflix TV UI. It emphasizes the importance of continuous learning in TV UI development and discusses the use of React and the TV signup process. The Talk also highlights the significance of widgets, navigation, and the TVUI Explorer app in building TV UI. It delves into the TVUI dev process, testing layers, and the value of continuous learning and fresh perspectives in the tech industry. The Talk concludes with insights on job opportunities, resources for TV development, and the Netflix hiring process.

This Talk introduces React Server Components and provides a step-by-step guide on building and rendering them. It explores the capabilities of server components, including interactivity and streaming. The Talk also covers the process of incorporating client-side rendering and the challenges of bundling and mapping client components. Additionally, it discusses the importance of supporting React Server Components and the ongoing efforts to integrate them with different bundlers.

This Talk discusses rendering and synchronization in React 18. It addresses issues such as flashing rows and wiping out when scrolling. The use of usync-externalstore for concurrent reads and the potential misuse of APIs are explored. Debugging techniques using React Profiler and flush-sync are discussed. The talk also covers performance considerations for different machines and the importance of testing and considering alternative solutions.

In this Talk, the speaker discusses the concept of building JavaScript optional applications, focusing on the use of tools like React server components, Next.js, remix, React Router, Astro, SolidStarts, and Weld. They explore various aspects such as building eCommerce apps, pagination, adding items to cart without JavaScript, and implementing features like card previews using HTML and CSS. The speaker also highlights the trade-offs and considerations when disabling JavaScript, maintaining cart items, and combining old and new ways of building applications.

The Talk discusses the InteractionToNextPaint metric, which measures the speed of clicks or keyboard inputs on a page. It explores the impact of slow interactions and slow React renders on user experience. The Talk also covers optimization techniques for React rendering, including the use of concurrent features and the StartTransition function. React 18 introduces changes to the rendering process that improve interaction speed. Concurrent rendering and suspense boundaries are highlighted as features that can enhance the performance of React apps.

Web 3 is about decentralization, using blockchain, cryptography, and consensus algorithms. It allows users to have more control over their data and assets. The current state of Web 3 is complex and frustrating, but efforts are being made to improve usability. Layer 2 chains and account abstraction are improving scalability and user experience. Web 3 provides financial solutions for all and enables transactions in restrictive environments.

Mark Erickson discusses the changes and challenges in Redux Toolkit 2.0, including addressing ES Module Common JS Compatibility and shipping new features. The release includes modernized build output, smaller bundle sizes, and new features like combined Slices API and dev mode checks in Reselect. The current test version is beta4, with plans to ship by the first week of December. RTK 3.0, focusing on RTK query updates, is expected to be released next year.

Welcome to the Canva Tech talk where the Canva tech stack, React component structure, and UI kit for developers are discussed. Canva uses Java, Go, Bash, TypeScript, and React for development. TypeScript, MobX, and React were chosen to enable hundreds of developers to work on the code base productively. Canva's internal component library was explored and released under a semi-open source license, allowing for quick delivery and sharing of improvements with the community. The developer community has added numerous app integrations accessible to Canva's 150 million monthly active users.

This Talk explores how to use browser and web APIs to enhance React applications, covering categories such as Fetch API, Device APIs, Storage APIs, Audio and Video APIs, and Shape API. It explains how web APIs are implemented in React applications and suggests using native JavaScript functions or NPM modules like React Speech Recognition. The Talk demonstrates the use of Battery and Face Detection APIs in a React application, including features like getting battery percentage, live coordinates, and speech-to-text functionality. It also mentions the possibility of creating augmented reality face filters with the face detection API. The conclusion highlights the availability of resources on Mozilla docs and a GitHub repository for further learning and code samples.

Performance is a puzzle that requires different approaches for different problems and sites. User feedback is crucial in evaluating performance, rather than relying solely on metrics like Lighthouse scores. Measuring performance and identifying issues can be done through tools like the performance tab and user timings. Understanding the main thread and using tools like React Profiler and Chrome Tracing can provide insights into performance problems. Optimizing performance involves doing less work, avoiding main thread blocking, and considering options like virtualization and Canvas. Communicating the impact of optimization to leadership and exploring different uses of Canvas are also important topics discussed in the Talk.

The Talk discusses the concept of design system Carnival and its relation to masks. It emphasizes the importance of accessibility in design systems and provides guidelines for implementing the Disclosure So Hide pattern. The Talk also covers topics like focus management, mouse interactions, and extending the disclosure widget. It warns against mixing different roles and complexity in design systems, using the example of a carousel. Overall, the Talk highlights the challenges and considerations in creating effective design systems.

Setting up the system and separating concerns are important in software development. Modular construction and prefab units are a new trend that makes construction quicker and easier. Architectural complexity can lead to a drop in productivity and an increase in defects. Measuring architectural complexity can help identify natural modules in the code. Best practices for avoiding architectural complexity include organizing code by business domain and using prop drilling. Atomic design and organizing a monorepo are recommended approaches for managing architectural complexity.

Nithya Narasimhan discusses how to build an enterprise-grade application by deconstructing a reference implementation. The development environment includes GitHub Codespaces, devcontainer, and GitHub Copilot Chat. The Contoso Real Estate app provides a fully functioning experience in the browser. The Composable Enterprise pattern and API-first design are key components. Deployment is facilitated through infrastructure as code and an azure.yml file.

The Talk discusses the Core of Vitals and IMP, which are metrics used to measure user experience in browsers. IMP measures multiple actions such as tab, click, and key press until the next screen updates. It also addresses the issue of rage clicks and their impact on user experience. The Talk emphasizes the importance of optimizing for IMB by avoiding blocking the main thread and suggests using multiple tasks and yield to main thread for optimization. Additionally, it mentions the use of navigatorScheduling.isInputPending to handle user input, with a caveat that support may vary across browsers.

This Talk discusses the journey from thousands of Lint failures to zero in a codebase at Linton that is over 80 years old. The approach involved implementing rules, incentives, and tooling to address the issue. The tool called Checkup was used to visualize ESLint failures by team and lint rule, providing accountability and responsibility. The efforts resulted in cleaning up over 6,000 lint failures, with 55 contributors, and a 30% increase in perceived code quality.

This Talk is about using comic book stories to explain complex software development concepts. The first part introduces the speaker and the purpose of the Talk. The second part explores the concept of hydration using Iron Man as an example. Hydration is a solution to make server-side rendered code interactive. The Talk then moves on to discuss resumability, which allows for immediate interactivity by encoding extra information into the HTML. The concept of resumability is further explained using a story with Iron Man. The Talk concludes by inviting suggestions for future topics and thanking the audience.

This talk discusses the best practices for fetching data during the initial render of a component in React. It emphasizes the importance of fetching in advance and avoiding fetching twice. The talk also highlights the need for an external cache to store information about API calls and the use of a cleanup function to avoid memory leaks. Additionally, the speaker mentions their library, react-disposable-state, which can be used for making side effects during render.

This is a short presentation on VALTEO, a proxy-based state management system that uses JavaScript's native idea of proxies to create observable and immutable state. The proxy tracks changes to the object and nested proxy objects, only re-rendering the component when a specific key changes. There is a gotcha with proxies in Valtio - avoid reassigning the proxy to a whole new object. Valtio integrates with Redux DevTools, making it even more powerful and convenient.

Managing complexity in large React applications is a challenge, as it tends to grow exponentially over time. Component composition is a key technique that allows for flexibility in React applications, but too much composition can make components harder to use. Managing complexity and reducing cognitive load is crucial, and strategies such as controlling abstraction evolution and minimizing information needed for simple changes can help. Simplicity is difficult, but important in slowing down the growth of complexity.

Defeating decision paralysis when building design systems by letting tools make some decisions. Using design tokens to express design decisions as data, including colors and typography. Alias colors to give them more specific names and define typography with a type scale. Use existing spacing scales and build components in isolation to test different states. Start with the basics, use existing tools, and have fun with it.

Today's Talk is about Shopify Hydrogen and how it simplifies the development of headless Shopify stores. The Talk covers topics such as mixing Storyblok and CMS data, code and data manipulation in Hydrogen, creating products and collections, handling SEO, building a performance server-side cart, setting up and managing the cart, and displaying cart and raffle information.

This Talk explores the evolution of CSS and the development of style systems in software engineering. It discusses the limitations of CSS and the need for frameworks, pre-processors, and JavaScript to enhance styling capabilities. The Talk highlights different approaches to CSS styling, including libraries like Tailwind and Chakra UI. It also introduces innovative style systems like Vanilla Extract and Rainbow Sprinkles, which offer optimized CSS classes and type safety. The speaker emphasizes the importance of design systems and encourages developers to explore and consider the strengths and weaknesses of different style systems.

Hey, everyone. Today, I want to talk about how anyone, even junior developers, can be an open-source maintainer. Let me share my journey of learning to code and becoming a maintainer. I made a website for an internal conference straight from code and made it open source. Participating in Hacktoberfest helped me connect with other developers and learn from them. Becoming an open-source maintainer increases your confidence, helps you make connections, and enables you to share cool tools with the world.

Mike North discusses breaking the use-effect habit in React and explores alternative approaches to improve maintainability, flexibility, and code simplicity.

Welcome to the best talk of React Summit USA. This talk is about three factors that block contributions to open source projects. Application is an open source dev tool platform that eliminates repetitive tasks in creating NodeJS backends, increasing developer productivity. I will discuss the challenges faced by first-time contributors and how to overcome them. If you want to contribute for the first time, we welcome you. Being proactive and engaging with the community can attract long-term contributors.

This Talk discusses the unique mentorship journey of the speakers, who found each other through Coding Dojo and LinkedIn. They highlight the power of mentorship, emphasizing the value of having another woman in tech for support and guidance. The impact of mentorship is also emphasized, with the speakers encouraging others to be mentors and share their knowledge. They describe the mentor-mentee relationship as wonderful, inclusive, and supportive.

ASTs, or abstract syntax trees, are used by popular tools like Babel, TypeScript, ESlint, and Prettier to improve the developer experience. They have various use cases including compiling and code analysis. Editor tooling and writing tools can be enhanced using ASTs, with examples including formatting with Prettier, type annotations in JetBrains editors, and code mods for framework upgrades. Ts-morph is a useful tool for code transformations, while Tree Sitter is a portable tool that supports many languages and can be used to build IDEs or text editors in the browser.

AI is revolutionizing application development and can enhance React applications. Advancements in AI include batch AI, real-time AI, and generative AI. Language models have limitations in accessing real-time data. Retrieval Augmented Generation (RAG) uses vectors to enhance language models. Vector search capabilities improve GPT models by providing up-to-date information and access to private data. Technologies like Next.js, OpenAI, Lankchain, Versel AI SDK, and MongoDB are used to build smarter React apps. An AI-powered documentation site can be built using custom data and vector search. The talk concludes by emphasizing the importance of integrating AI seamlessly into user-centric platforms like React-based projects.

This Talk discusses the benefits of automating React Native app deployments and explores tools like Trapeze for automating configuration updates and GitHub Actions for automating the build process. It also highlights the use of signing credentials tooling and cloud credentials management tools like Fastlane Match or AppFlow for more complex builds. The Talk emphasizes the automation of build upload and testing using tools like App Store Developer APIs, Fastlane, Bitrise, or AppFlow, with a specific focus on Fastlane's ability to increment build numbers, build the app, and upload it to TestFlight.

CDNs were introduced to improve website performance by bringing web content closer to users. The concept of the edge addresses the limitations of CDNs by processing client data close to the source. The edge combines serverless functions and CDNs, allowing for server-side logic execution without web server configuration. Use cases for the edge include personalization, geolocation-based content delivery, AV testing, and implementing security logic.

Hi, I'm Annembae, the author of MillionJS, a fast virtual DOM replacement for React. The virtual DOM can be slow depending on the components it powers. The block virtual DOM introduces an O(1) optimization to the traditional virtual DOM, resulting in faster updates with fewer DOM manipulations. MillionJS and the Block Virtual DOM offer a faster alternative to existing virtual-dom libraries like React. It has the potential to revolutionize the way we write React applications.

Ntandala Kengose, a software developer, emphasizes the importance of accessibility in software development and the responsibility it carries. The Web Content Accessibility Guidelines (WCAG) provide technical guidelines for making web content more accessible. Ntandala shares various accessibility testing tools and highlights the need for automation in testing. Tools like Pelly CI and GitHub Actions can be used for automated accessibility testing and CI integration. The X-Accessibility Ginter and Husky are tools that provide insights and ensure accessibility in development.

The Talk discusses the majoring coverage of the Reduzon system and the journey of migrating from design-system-3.0 to design-system-4.0. It introduces React scanner, a tool that statically analyzes code and extracts React component and prop usage. The Talk explores the options and custom functions in React scanner, as well as the processors and AST used by the tool. It also discusses exploring AST using astexplorer.net and showcases the usage of react-scanner. Finally, it mentions the importance of component restructure and introduces Omelet, a tool for component analytics.

This Talk discusses various aspects of state management in software development. It covers different types of state, such as bootstrap data, lazily loaded data, and reactive data. The Talk also explores the concept of locality in state management, including local, global, and regional state. It introduces libraries like Recoil and Jotai that challenge the single global store concept and provide better locality. The Talk emphasizes the importance of setting up state management systems for success and creating reliable systems to focus on user satisfaction.

This Talk by Tony Alicia focuses on authoring HTML in a JavaScript world. The speaker challenges developers to change their approach to building React components by starting with HTML first. By authoring HTML in a semantic way, readability and maintainability can be improved. Well-authored HTML provides better understanding of content and improves accessibility. It also has performance benefits by reducing DOM size. Investing time in HTML can save time and make applications more future-proof.

The Talk discusses the web platform and the speaker's experience with Remix. It covers issues with mutations and form data submission, fixing bugs, and discovering missing features. The speaker also talks about working on JS DOM and web standards, opening a pull request and making progress, and working on Chromium, Gecko, and Firefox. The Talk concludes with discussions on time to GA and documentation, as well as the speaker's contributions and takeaways.

Today's talk covers Web API, including exotic and not commonly used APIs that can enhance web applications. The IntersectionObserver API allows for lazy loading images and infinite scroll lists. The Screen Wake Lock API prevents devices from locking, ensuring uninterrupted usage. The Wake Lock API is useful for various scenarios, but browser and device support varies. Background Sync and Broadcast Channel APIs enable offline functionality and communication between contexts. Lastly, the impact of code on the planet is highlighted, emphasizing the need for more efficient web development.

Today's Talk is about using suspense and GraphQL with Apollo Client to create smooth user experiences. The Talk covers the introduction and power of suspense, the new Used Suspense Query hook in Apollo Client, updating components with suspense, using suspense boundaries and tradeoffs, optimizing playlist fetching with GraphQL, loading more tracks and using transitions, and concluding remarks and future developments.

Guild is a platform that needs to exist on all platforms, using React Native to orchestrate them. React Native and Expo provide components that work across platforms. Building applications with React Native involves composing components and using a design system. Choosing the right server-side rendering solution is important for unifying mobile and web codebases. Embedding React Native allows for optimization and embedding in any application. Bridging the gap between UI and API with embeddable experiences is key to supporting communities on every platform.