React Summit 2023

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.