BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Expedia Speeds up Flights Search with Micro Frontends and GraphQL Optimizations

Expedia Speeds up Flights Search with Micro Frontends and GraphQL Optimizations

This item in japanese

Expedia made flight search faster by up to 52% (page usable time) by applying a range of optimizations to web and mobile applications. To support these improvements, the company improved the observability of its applications. Expedia Flights web application has been migrated to Micro Frontend Architecture (MFA) to allow flexibility, reusability, and better optimization.

Flight searches represent a large portion of Expedia’s user traffic. As the company can’t directly control the latency of 3rd-party APIs, it decided to optimize network calls and its progressive web application (PWA) to improve user experience.

The team improved observability across the frontend and backend components to support and guide performance optimizations. Engineers identified and started tracking multiple metrics, including page usable time (the load time of the React component), non-supply overhead (overall backend call latency, excluding 3rd-party API calls), first contentful paint (FCP), time to interactive (TTI), etc.

Reduction in Latency (Source: Expedia Technology Blog)

One of the fundamental steps that altered the structure of Expedia Flights PWA was adopting the Micro Frontend Architecture (MFA). The team broke down the application into independent shareable packages, which allowed for better code ownership, flexibility, reusability, and package-level optimizations. Additionally, the team enforced the package-size limit with a Git commit hook using GitHub Actions to promote small packages, which is key to improving user experience on slower networks.

GraphQL query optimizations, including horizontal and vertical slicing and asynchronous query execution, achieved big latency gains. Instead of executing a single, expensive GraphQL query for search result combinations that returned a huge payload, developers used a series of smaller queries to obtain the list of search offers in chunks. Additionally, fetching offer details was extracted into a separate query, only executed when the user selects the offer.

Further improvements included prefetching JavaScript and CSS static resources, executing flight searches preemptively based on search criteria selected on the homepage, and optimizing how search results are retrieved from the backend caching layer built on top of Apache Cassandra. After applying all these enhancements, the team observed a 52% reduction in page usable time (90th percentile) and a 40% reduction in non-supply overhead (90th percentile).

InfoQ contacted Heena Gupta, software engineer at Expedia Group, to explore the flight search optimization initiative.

InfoQ: You achieved impressive improvements to the flight search application's responsiveness. What were the most challenging aspects of the project?

Heena Gupta: Thank you for the appreciation! Initially, the Flights architecture was brainstormed to figure out the potential scope where the performance could be improved. Once the areas for improvement were diagnosed, working with cross-geo teams and collaborating across diverse teams helped speed up design discussions.

Another challenge faced was around canary automation, in which we automated alerts on performance degradation and also ensured noisy alerts could be minimized as much as possible.

InfoQ: GraphQL and Micro Frontend Architecture (MFA) are gaining adoption within the industry. What advice would you give to teams considering adopting these solutions?

Heena Gupta: GraphQL is very powerful to act as a contract between frontend and backend. While working with GraphQL, developers oftentimes end up passing redundant fragments, which makes the Apollo response payloads bigger. It’s important to consume those GraphQL nodes that the platform actually needs. When designing the schema via GraphQL, it is crucial to think in terms of how the schema could be standardized to serve the purpose in general for reusability.

Micro frontend architecture surely helps to improve the frontend architecture. While micro frontend architecture helps write the code for each of the sub-modules efficiently, the number of package owners increases as well, along with maintaining each of the modules independently. However, giving each of the modules the freedom to write code independently acts as a benefit with micro frontend architecture.

About the Author

Rate this Article

Adoption
Style

BT