React Summit US 2024

Get ready for an exciting journey through the latest in Chrome DevTools and React DevTools as we dive into the State of the Union for 2024. We'll explore the powerful tools and features that continue to empower developers to craft high-performance web experiences. We’ll also touch on the latest in React debugging including updates like React Compiler support. Whether you're a veteran user or new to the DevTools magic, this session will equip you with actionable tips and insights to level up your development process.

Influence isn't tied to having "Manager" in your job title; it's about the connections you build and the legacy you leave. This session will teach you the skills necessary to build influence within your organization whether you're an IC or EM.

Join us for a fast paced introduction to TanStack’s full stack client-side first React framework. Based on TanStack Router, it’s jam packed with Type Safety, server functions, SSR, powerful URL state management and couple more awesome surprise features that make building apps easy, fast and fun again!

I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit. RAG is a hot topic in chatbot development and allows for creating chatbots with a deeper understanding of specific use cases. Rag offers a versatile AISDK that allows for easy model switching, augmentation, and fine-tuning. Entity resolution is important for resolving entities across multiple points of data, with use cases in personalized marketing, healthcare, and fraud detection.

Anyone can publish a library to NPM. But what happens when that library is used by millions of developers? How do you juggle the complexities of publishing one of the most widely used packages in the ecosystem, and also deal with supporting and maintaining a community?

We'll look at the mindset and and approach to dealing with these challenges and what it means to be a "maintainer" today, including practices for providing user support across platforms, keeping a "devrel" mindset, designing documentation, designing features and APIs, how to consider package versioning and compatibility, when to ship breaking changes, technical challenges with publishing packages, and keeping up with the ever-evolving ecosystem.

As React continues to dominate the web development landscape, securing the vast ecosystem of open source dependencies has never been more critical. In 2024, the challenges around React and JavaScript security have evolved, and the risks associated with software supply chain attacks are more pronounced than ever.

In this talk, we’ll explore the current state of JavaScript security, highlighting recent high-profile supply chain attacks and their impact on the development community. We’ll discuss the latest trends, tools, and best practices for managing and securing your JavaScript dependencies.

Key topics will include:
•        An overview of recent supply chain attacks and lessons learned
•        Effective strategies for mitigating risks from malicious dependencies
•        How modern tools and standards are improving the security landscape
•        The role of developers and organizations in fostering a secure open source ecosystem

Join Feross Aboukhadijeh, a seasoned open source maintainer and security expert, as he shares insights and practical advice on navigating the complex world of JavaScript security in 2024. This session is essential for developers, security professionals, and anyone invested in maintaining a secure and resilient software supply chain.

And it's not the way you think!

React 19 introduces Actions, a new way to simplify form management by simplifying form handling, adding loading states, and making data retrieval easier. This hands-on talk explores transitioning to React 19 using Form Actions, with code demos of managing form submission, displaying loading indicators, and retrieving form data efficiently.

React 19 introduces a huge number of new capabilities and APIs. So, what do you need? What can you implement today? And what should leave for framework authors to integrate?

Even if you don't plan to embrace Server Components, there are new capabilities in React 19 to improve speed, clarify code, and even eliminate long standing dependencies.

In this practical and progressive overview, you'll learn everything you need to be prepared for a React 19 upgrade.

If you had the same goals as React Compiler, what kind of React component would you write? In this talk Tony and the audience imagine they are React Compiler, rewriting a React component in the exact same way the compiler does. Along the way, we'll gain a deeper insight into React internals, to fully grasp how the compiler works, why it works that way, and how to decide if you should use it.

Attendees will dive into the world of creative coding with p5.js, a powerful JavaScript library designed for producing interactive art and dynamic visual experiences. The talk will begin by covering the foundational concepts of creative coding, guiding participants through the essentials needed to create sketches and manipulate visuals using JavaScript. From there, we’ll explore how p5.js can be seamlessly integrated into a React environment, unlocking the ability to combine React’s declarative power with the creative potential of p5.js. By the end of the session, attendees will not only have a solid grasp of how to get started with p5.js and React but will also feel empowered to embark on their own creative coding experiments, applying these tools to build immersive, interactive web experiences.

Maintaining a unified design language contract between Figma and code is crucial in today's fast-paced product development environment. Without this alignment, the disconnect between designers and developers can lead to inconsistencies in product design, failing to achieve pixel-perfect precision.

Hello and namaste, New York. I'm excited to talk about building scalable multi-tenant applications with Next.js. We'll cover what multi-tenancy is, its advantages, key considerations, and how Next.js aids in development. Before starting multi-tenancy, let's understand what a tenant is. In multi-tenant architecture, all tenants share the same app but have different access, roles, and permissions. Easy maintenance, efficiency, scalability, and cost-effectiveness are some of the benefits of multi-tenancy. However, challenges include scalability, isolation, security, and customization. Next.js allows for easy organization of different domains and paths. Dynamic routing in Next.js enables the customization of layouts for each tenant, ensuring a personalized look and feel. Next.js API routing allows for isolating data fetching for different tenants. Middleware can handle request validation and provide features like authentication, authorization, server-side redirects, conditional redirects, and data isolation. Next.js offers scalability through caching, a component-based and modular approach, load balancing, serverless functions and platforms, and different types of rendering. Next.js continues to evolve and is a popular choice for multi-tenant architecture.

Thank you for joining my session on untangling your dependencies. I encountered errors when trying to update dependencies in the project, leading to a tangled mess of issues. Managing dependencies can be like working with a ball of yarn, trying to knit a project. I'll share my favorite practices for managing dependencies and provide some background about myself. Leonardo da Vinci said, 'art is never finished, only abandoned,' and this applies to software as well. I'll share tricks and tips for managing complex dependency management systems and understanding different types of dependencies. Working with dependencies often comes with challenges, especially when using React Native. Examples of tools that assist with managing dependencies include yarn upgrade interactive, NPM check updates, and React Native upgrade helper. When encountering issues, breaking them down into smaller chunks helps find solutions. To tackle dependency issues, focus on one platform at a time and choose the right tools. Tools like NPM why and Clip can help identify unnecessary dependencies and unused files. Monorepos and tools like Yarn workspaces and npm shrinkwrap are useful for managing monorepos. Bleeding edge branches and dependency updates allow for incremental and broken commits. Regular updates are recommended to stay aligned with platform changes.

If you suffer from: Writing SQL to express your product logic, trying to remember esoteric authorization DSLs, fighting your frontend cache, fighting your backend cache, slow backend deployments, inconsistent or stale UI state, lack of end-to-end type safety, lack of transactional guarantees, low database write throughput, database cold starts or unpredictable database read performance - then tune in to this talk and let me show you the light at the end of the tunnel.

This talk covers seven steps to secure React apps, including dependency management, validation, secrets management, code exposure, content security, security implementation, and additional security measures. It emphasizes the importance of understanding dependencies and risks, using tools like NPM Audit and Socker.dev. It also highlights the need for dependency validation and package namespace, as well as input validation using libraries like Zod and Valobot. Secrets should be managed using tools like .env and a secrets manager, while code exposure can be minimized by separating server-side and client-side code. Content security policies and tools like Next Safe and Helmet are recommended for implementation. Additional measures include deep code analysis, code execution monitoring, and strict content security policies.

We'll be going over the use cases of Node.js native add-ons and how they are written with NodeAPI. ABI stability allows swapping out older versions of a library for newer ones without recompiling the rest of the app. Node API enables the use of the latest Hermes regardless of React Native Windows. NativeScript is a library for calling native APIs from JavaScript, eliminating the need for dealing with native code. To initialize the addon in React Native, we modified the approach by auto-linking the native script XC framework. We can read the battery level using inline JavaScript and make view changes like setting the background color. React Native reanimated can be used to work on the UI thread. Support for Node.js native add-ons and completion of the official ABI stable Hermes API would open up the ecosystem.

Ever wonder how React can "update" a page while it's still loading? We've gotten so lost in the discussion of things like Next.js, Suspense, Signals, Server Components, and Server Actions, that most React devs have totally missed one of React's most recent pieces of magic: Out Of Order Streaming.

At Knock we power real-time in-app messaging experiences via our React SDK, enabling product teams to drop in components and have fully featured in-app notification feeds, modals, banners, and more instantly available. In this talk, we'll take a look at how we structured our React library in a composable way, giving teams the power to use our components out of the box, override styling with their own tokens, or bring their own UI components via hooks. We'll dive into how we structured our SDK to provide maximum flexibility for engineering teams, while preserving ease of maintenance.

My name is Aurora, a web developer from Norway. Today, I'll be teaching you how to elevate speed, interactivity, and user experience with React components. I'll be coding a project task manager and improving it using Next.js, Prisma, Azure SQL, and Tailwind CSS. We will review the code, starting with the important layout component. We will also learn how to improve navigation and data fetching, enhance visual stability and user experience, fix search functionality, and add category filters with loading states. Additionally, we will explore the use of React 19 hooks to enhance interactivity. Finally, we will optimize rendering and achieve improved Lighthouse scores for better performance. Overall, this Talk covers a range of techniques and tools to enhance React projects and deliver a better user experience.

Let's talk about writing your first Vip plugin. VIT, rollup, and Vip plugin are important tools in front-end development. Rollup is a bundler that can bundle JavaScript files into a single file. VIT goes through all the plugins and transforms files to JS modules. VIT and rollup have similar plugin architectures, allowing the use of existing rollup plugins in VIT. I'll discuss three plugin properties: resolve ID, load function, and more. Let's take a deeper look at the transform function. The resolve ID function determines the ID of the file or module, and the load function reads the file or module and returns its content. The transform function actually transforms the file or module into something else. For example, it can modify the code depending on the file extension. We can transform the result object into code by using object keys and map. This allows us to extract specific data and include it in the output. By making the code flexible, we can add additional information like 'built at' and utilize it for various purposes, such as displaying branch name or commit hash during deployment. You can implement various functionalities in the Vip plugin, such as reading Markdown files, implementing file-based routing, and creating domain-specific languages.

Hi everyone and welcome to my talk about the women in the history of computer science. I want to pay tribute to women who have done fantastic work in computer science. The history of computer science begins in 1840 with Ada Lovelace, who invented the concept behind the analytical engine and provided the first algorithms. Women played a significant role in early computing, such as the programmers of the ENIAC. Grace Hopper made significant contributions to the field, including the development of COBOL. Women have made significant contributions to artificial intelligence, such as Karen Spike Jones and her development of the TF-IDF method. It is important to highlight women in the tech field and provide role models for young girls. The talk aims to inspire and encourage.

While Refs are considered an escape hatch there are times when you might just need to use them.In this talk, with the help of real world examples, we will look at what Refs can do for us in terms of code clarity and also performance gains. Think along the lines of minimising renders and avoiding flickering UIs. We will cover the restrictions for safe usage and for those of you already using these patterns make sure you are prepared for the changes coming in React 19.

Welcome to Accelerating Value with HubSpot's deployment process and team structure. HubSpot is a leading growth platform that empowers businesses of all sizes to scale and succeed in the digital age. HubSpot's customer-centric approach focuses on value delivery, prioritizing the user experience, and building trust through consistent interactions. The front-end tech stack includes TypeScript, React, Redux, Styled Components, and GraphQL. HubSpot utilizes various developer tools to streamline workflows and reduce the technical burden on engineers. The testing philosophy at HubSpot emphasizes comprehensive testing, with a focus on unit, integration, and acceptance testing. HubSpot prioritizes customer-centricity, fosters innovation with small teams, and enhances developer efficiency with custom tooling.

Welcome to the session on microfrontends. Microfrontends allow for independent implementations and local development. It is possible to develop and integrate microfrontends locally using an emulator and achieve automatic updates. Fine-tuning modules and user experience can be done using a discovery service. Rules can be created in the discovery service to selectively load microfrontends for specific browsers. AI can be leveraged to generate AI-enhanced variants and compare them with the original implementation. Microfrontends are highly portable and can be used in different applications. Code isolation and enhanced performance are important considerations in microfrontends. The benefits of microfrontends include improvements in file name changes and performance overhead. The Netflix application is a case study for microfrontends. Overall, microfrontends offer various benefits and opportunities for architectural discussions.

Welcome to the session on communicating technical information to non-technical audiences. Today, we will explore how to apply your existing communication skills to share technical jargon. Understanding your audience through asking questions, making observations, and doing research is key to successful communication. When communicating with non-technical audiences, consider their baseline knowledge and avoid making assumptions. Use jargon when it is understood by all and explain unfamiliar terms when necessary. Analogies and stories can be effective in explaining complex concepts. Visual aids and experiences can enhance presentations. Clarify the purpose of communication to avoid misunderstandings. Utilize resources like written communication, podcasts, and videos to educate team members. Include others in technical conversations to learn and build something bigger. Effective communication requires context and understanding. Utilize the course 'Technical Communication for Non-Technical Audiences' on Pluralsight for further guidance.

Hi, my name is Kirill and I have a little obsession with UI components. Let's talk React, specifically React 19 Server Components. I will show you how to build a polymorphic data table using server components. We explore mixing server and client components and applying the composition pattern. We discuss polymorphic components and separating client logic to render custom components without breaking client functionality. The component can be used in different environments, morphing into server or client components accordingly. This talk focuses on building a polymorphic component with minimal bundle size and access to both server and client APIs.

I'm excited to talk about React UI accessibility on TV. Enact is a React-based framework designed for TV UI components. Keyboard navigation is the minimum requirement for accessibility. The Enact framework has a module called Spotlight for TV remote direction keys. All attributes and roles are supported in JSX. Practical cases include reading a Dingbae font icon with no text, handling range widgets, alert popups, and virtual components. Testing on actual devices is important. Useful tools for accessibility development include custom message announcements, static analysis with JSX A11y, and accessibility testing with Chrome DevTools.

We're going to talk about making React work in Chrome extensions. We started building Chrome extensions during our freshman year and have learned a lot along the way. Chrome extensions have two parts: the content script and the background script. Our story begins before React, and we created the UT Registration Plus extension to simplify class registration. We initially built the extension using HTML strings and then tried using jQuery, resulting in unmaintainable code. When building Octoshop, we chose React for its support and package system, but integrating it with Ibotta's Vue extension led to a messy codebase. We centralized our code and managed Chrome's state using React portal and hooks, improving maintainability.

Hi everyone! I'm Rohit, a founding engineer at Tria. We are working on bringing the world to Web3 using names. My talk is about gaining performance and taking runtime to build time. There is an upward trend in libraries towards build time optimization, especially in React. Build time optimization improves performance, reduces bundle size, and provides more predictable software. Babel is a free and open source JavaScript transpiler that allows leveraging latest JavaScript features and moving computationally heavy logic from runtime to build time. Building a Babel plugin involves checking for a style prop inside an HTML tag and searching for aliases or token values. The visitor pattern is used to define the JSX type of node and access its path and attributes. The plugin can be customized for different utilities by defining aliases and tokens in a config file. Helpful resources for understanding and building custom Babel plugins include the Babel handbook, Babel docs, astexplorer.net, and the speaker's Twitter account.

Hi, welcome to Shining Offline. I'll share how using the offline first approach saved us in the mobile urban lighting system. We'll discuss Kismet, the Bayless system, and the transition to a progressive web app. The system handled work orders, but the manual process caused unnecessary effort. In 2015, we built a native iOS app, but faced challenges with updates and communication. Eventually, we convinced the client to switch to a progressive web app. The new PWA's design improves usability and uses maps and services from the city's own infrastructure. Implementing the offline-first principle addressed many issues, and providing offline maps required using MapLibreGL app protocol. Offline communication with the iOS app endpoint and managing conflicts were also discussed. Offline-first requires significant effort but leads to user satisfaction. iPads are the devices of choice.

Today's Talk discusses type-safe app configuration and its benefits. It explores how app configuration can accelerate software development using the example of a SaaS company called Potion. The Talk highlights the use of feature flags to control app discounts and the advantages of decoupling discount control from the engineering team. It also covers the ability to run A-B tests, personalize discount messaging, and optimize for upgrades using an AI loop. The Talk emphasizes the flexibility of the app configuration system, allowing for managing multiple overlapping discounts and controlling various aspects of the app. Lastly, it mentions the necessary components of building a flexible app configuration system and how Hypertune offers these features.

Design workflows can sometimes be at odds with development—but establishing common patterns between disciplines can set the foundation for automation and enable teams to design and ship faster. Figma allows you to get what you need from design and get back to writing code—whether that’s building front-end for the first time, or building with a reusable design system in your code base.

Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.

Welcome to Beyond 1.0, a talk about scaling and maintaining design systems. A design system is a collection of reusable components, principles, constraints, and best practices governed by clear standards. We have expanded our design system over six and a half years to include over 70 components and support over 50 developers. To maintain a maintainable code base for your design system, enforce a singular code style across your entire code base through a linter. Use Next.js for a comprehensive and custom design system documentation site built with Markdown. We've improved our design system documentation by using react.gen typescript to dynamically parse out component props, allowing for more interactive and maintainable documentation.

I'm Richard Kerrigan and I'll show you how to add multilingual support to your React apps. We need a way to support other languages on our websites and web apps without affecting team productivity. We'll explore a low-cost solution using AI and automation. When my team started tackling this problem, we looked at Azure and found the Azure AI Translator service, which offers both ad-hoc text translation and document translation. Key features include language support for over 100 languages and dialects, a generous free tier, Neural Machine Translation for accuracy, and the ability to use custom glossaries. Designing workflow for translating JSON content at runtime or incorporating translation process into CICD workflow for HTML or Markdown files. Exploring how to translate HTML files within a CICD pipeline. Translation service and storage account setup. Function app building and deployment. Configuring translation to Spanish with a glossary in CSV format for file translation. Sending a request to the translator and receiving the translated file. Discussing the problem of websites not offering content in additional languages. Highlighting the benefits of Azure AI Translator and its alternatives. Showcasing different versions of the app for translating JSON, HTML, and markdown content. Checking the progress of the workflow, deployment of Azure resources and function, and translation of markdown files. Quick explanation of infrastructure as code and deployment options. Changing languages shows translated title and excerpt while maintaining original formatting.

Hello, React Summit. Welcome to this talk, a retrospective on four years in the making of our React Native video player. We will cover what went well, what didn't go well, and the lessons learned. We used React Native Video 5.2.1 and custom components to optimize the player. Streaming HLS, subtitles, and transcripts worked well. iOS performance was good, but the Android player and background audio management caused issues. Different media players and syncing audio players were challenges. Managing dependencies and versions was difficult. Upgrading React Native Video to version 6.4 improved stability and added notification features. Future updates will include DLL support and player-control separation.

In the rapidly evolving landscape of technology, Artificial Intelligence (AI) stands out as a game-changer our industry. But what are the implications for accessibility and building compliant and inclusive experiences?

In this talk, we will discuss AI and accessibility in all its nuances. From significant advancements that improve experiences for all users to major concerns around the ethics and organizational investments in accessibility, we will cover it all. Either way, AI is here and we got a lot to talk about to ensure accessibility remains at the forefront of our work.

We make websites with React. We make apps with React. But how do we make games with React? In this presentation I will build up show you how to build up a React game engine tecstack using Poimandres libraries, explain the core concepts and, yes, even build a game.

At Evinced, the mission is to make the web more accessible for everyone. Accessibility issues are common despite intentions. Today's Talk focuses on coding in an accessible way using TDD to catch defects early. Unit tests can be written to ensure accessibility requirements are met. Testing Library provides utilities for testing accessibility. The ATDD approach allows continuous creation of tests for compliance. Unit testing is valuable for complex components. Advanced has developed an SDK called the Unit Tester for automating accessibility tests.

Thank you for coming to React Summit! I wanted to create clarity around React Hooks and provide tools for troubleshooting React issues. Functional components in React are different from class components in terms of their lifecycle. Understanding the creation and destruction of objects in JavaScript is crucial to comprehend the behavior of functional components. Creating functions and objects that are not used can lead to memory waste and system resource consumption. Storing references to variables can keep them in memory, so it's crucial to ensure there is a direct path from window to the variable. This talk discusses creating objects and storing them in React components using useState and useMemo. It emphasizes the importance of using useCallback in cases where a callback is going into a component with a large state tree to avoid unnecessary renders. The talk also explores different approaches to handling data retrieval and update in React components, highlighting the use of useRef as a solution to access and update data in server-side data sources. Overall, the talk provides insights and tools for troubleshooting issues in React functional components.

Love React? In this talk, we’ll explore modern SDKs that let developers focus on the front-end experience by taking care of back-end data orchestration and data modeling. Using familiar languages like JavaScript or TypeScript, these tools enable quick integration of customizable, powerful analytics into React apps. By reducing backend complexity, developers can prioritize building dynamic, data-rich UIs without the hassle of managing infrastructure.

Hey, everybody, I'm Graham, and I'm really excited to give you a talk today on feature flagging with React server components. We're going to give examples of how you can deploy feature flags in your application, and how feature flagging interacts with React's rendering strategies. Feature flags are conditional logic that allows you to control the state of a feature independent from the code deploy. This separation of code deployments from feature releases is critical for large product organizations. It enables frequent commits without exposing changes to users, conditional release of features, and easy rollback in case of unexpected bugs. Using FeatureFlag gives you a kill switch where you can turn off your feature. It allows you to do A-B testing and measure the impact of new features. You conditionally release the feature to different sets of users, allowing you to control for externalities and changes to your product. A FeatureFlag is used to get the state and conditionally show a component. The flag state can be stored in a file or using environment variables. However, environment variables have limitations in terms of complexity. A more complex example uses growth book syntax, allowing for advanced control over feature rollout. Building your own system can be tricky, but feature flagging platforms offer fully-featured solutions with two main advantages. Feature flagging applications have a nice UI for controlling feature releases and an SDK that integrates with the code. React poses complications in using feature flags due to its rendering strategies. Static site generators like Next.js have limitations in user targeting and require redeploy for updates. Client components are not async, requiring the use of React primitives. These approaches have their own challenges in implementing feature flags. To initialize the SDK, instantiate the SDK outside of the app and use a user effect hook to download the feature flag payload and update the user data on the SDK. The growth book provider builds context for evaluating feature flags, allowing components to easily access feature flag states. However, there may be a slight flicker in the UX due to the time it takes to initialize the SDK and download the feature flag state. Network optimization can help reduce flickering, but the client's network connection is beyond your control. There are some workarounds for flickering, like showing a loading spinner while rendering in the background. Using feature flags for SEO is not ideal as the initial HTML payload doesn't include all the contents. Server components in React 19 provide an async solution without the need for complicated useEffect and state. react.cache allows caching expensive operations scoped to the current request. The getSdk function call retrieves the value of the feature flag from the cache, providing faster subsequent calls. Our SDK has its own in-memory cache. Dynamic rendering can be expensive in terms of requests, rendering, network calls, and running React on the service side. It can also be slow, and tracking events may be challenging. The server-client hybrid approach combines the advantages of the previous strategies without the downsides. By making the outer app a server component and caching the feature flag payload, we can achieve no-flicker client-side feature flagging. The client component can use the UseMemo hook and the initSync method with the payload already in memory. Passing the SDK instance and wrapping the main app in a provider allows us to have the best of both worlds. Although it may be slightly more complex to set up, using Next.js with React server components offers a cool and modern approach to feature flagging with high performance.

Hey, React Summit! Today I want to share my thoughts on creating a generic React application using TypeScript. I'll discuss the Type Build concept, generic application routing, and provide an example. What is the type build? It is a test that uses the characteristics or properties of an object to determine its type. Duck typing brings flexibility and simplicity, allowing for loose coupling and shorter code. Type guards are used to implement duck typing in TypeScript, enabling custom logic to determine the type of an object. This approach ensures type safety and better error checking. We use a switcher component to render components based on the CMP variable type. When working with React, create components as you would for any application. Use routers for dynamic routes with IDs to handle different pages. The outlet receives the valid page ID from the parents and uses a map to render components based on type. The object result can be seen in the next slide. Create a menu in your application with valid pages. This is an extensible approach for handling complex forms. Find the sample app on my GitHub.

Hello, everyone. I'm Hina from Expedia Group. This talk is about making Expedia flights faster. We will focus on performance initiatives on the Flight Search page, including prefetching and preemptive search. Monitoring is crucial with custom metrics like page usable time and non-supply overhead. Prefetching fetches JS bundles beforehand for faster CDN path retrieval, while preemptive search predicts Flight Search responses before the user lands on the page. The page performance improved up to 50% on both web and native. Preemptive search and microqueries were implemented to improve path and performance. Async loading and loaded query optimization resulted in an 8% improvement. Micro-front-end architecture improved bundle size and component reusability, leading to significant performance gains.

A monorepo might sound like a big, intimidating thing, but we're going to break it down to just the bare essentials. A monorepo helps you better manage the relationships that already exist between your projects. Once we understand those relationships, we can use tools to very quickly define them and pull them together into a more cohesive whole.