EXPEDIA GROUP TECHNOLOGY — ENGINEERING
Creating Shareable Experiences in the Tech World
Understanding Expedia Group’s shared UI components
In this blog, I will share the exciting experience I had during my eight-week internship at Expedia Group™️ (EG) and what I learned throughout the journey.
My journey with Expedia Group began in September 2022 when they visited my college, VIT, Vellore, for campus selections. The interviewers showcased profound knowledge of both the travel and tech industry, encouraged me to think creatively and provided valuable insights and guidance throughout the selection process.
My first week at Expedia Group was filled with immersive onboarding sessions. We delved into various tools like JIRA and Slack, to gain familiarity with the technology landscape. I also had the privilege of working with exceptional individuals such as Arun Dutta, Vice President and Managing Director of India, and meeting the talented team I was going be spending my internship with.
Experience API
During the first weeks, we focused on learning about the diverse frameworks, system architectures, and lines of business (LOBs) employed at Expedia Group. To gain familiarity with these aspects, we devoted some time to reading and studying relevant documentation.
In order to comprehend the intricacies of working with the Progressive Web Application (PWA), we delved into understanding the architecture of the Expedia Group Experience API. More specifically, comprehending the functioning of the experience layer.
In the above diagram, data retrieval involves querying the experience layer (EL) via GraphQL, which determines the appropriate micro-service to handle the query. The micro-service processes the request and returns the queried data back to the EL. Subsequently, the EL forwards the information to the front end, which displays it to the user.
The experience layer (EL) plays a pivotal role in the system and offers several advantages:
- It centralizes business logic on the server and alleviates the need for clients to handle it
- It facilitates the delivery of responses in a server-driven UI format
- It determines the user experience by selecting which content or features to present
Server-driven UI
The diagram presented below illustrates two distinct UI architectures: fully client-driven UI and fully server-driven UI. In the fully server-driven UI approach, client-side logic is minimized by relying on an API to provide data, ensuring consistency across various client platforms such as web, iOS, and Android.
Why server-driven UI?
- Consistent UI: all the clients will display the data as it is provided by the common server.
- Easier to maintain: any changes to the data can be made directly in the server and it will easily and instantly be in the production environment.
Since the EL API acts as the designated server, it supplies the client with essential content. In the current state, Expedia Group occupies a position in the middle of the diagram, wherein the EL provides the content along with some information on how it should be presented on the front end.
Shared UI components
To make the current UI more server-driven, Expedia Group developed shared UI components that utilize SDUI (server-driven UI) approach to create complete components to:
- Gain efficiencies by sharing code and components across multiple platforms, pages, views, and clients
- Provide an intermediate framework that acts like the middleman between Experience API, custom-built UI components and client apps
- Thin out our client codebases by sharing central repositories
Once a Shared UI component is developed, it becomes accessible to the front end, which then utilizes it to query data from the experience layer.
To illustrate, let’s consider the Recommendations carousel as an example from the “things to do” page. All the necessary logic for this carousel is implemented within the shared UI component and utilizes data from the experience layer based on the queries requested by the front end.
Our goal
Our objective was to enhance the existing UI by adopting a more server-driven approach. To achieve this, we set out to create a new component that would encapsulate all the display logic within it. This component would encompass elements such as carousels, lists, banners, and more. The server would then determine the order in which these items are rendered on the website, resulting in a more server-driven interface. Through this approach, we aimed to improve user experience and performance.
So, how did we achieve it?
Schema changes
We began with making certain modifications to the existing GraphQL schema. As per GraphQL documentation, the following is the definition and use of the querying language:
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, etc.
We introduced a new field to the existing query, creating a union of two types — Carousel and List — which were internally rendered components.
union searchResultGroups = Carousel|List
type Carousel {...}
type List {...}The Carousel and List types were further defined to have a heading, body (carousel/list), and a see more link/button.
Creating the component
Once the schema was generated and defined in Kotlin, we started creating our shared UI component, SearchResultsGroups. After thoroughly reviewing the documentation, we decided to create SearchResultsGroups as a Public component, which can be published directly to npm and consumed by the front end.
While SearchResultsGroups served as a public module, the Carousel and List components were developed as private fragments within it, as they held no individual purpose outside the scope of SearchResultsGroups. This approach of utilizing fragments instead of creating separate internal components proved to be valuable learning throughout the project.
Upon generating the queries using “graphql-codegen”, we employed Apollo Client functions to access the relevant data. These queries were then integrated into the ReactJS component that was enabled with Typescript. Nupur Rathi worked on the list and I focused on the Carousel fragment and the SearchResultsGroups public module, ensuring that the fragment was rendered as expected through comprehensive testing using Cypress component testing and visual tests.
Below, is the final implementation of the SearchResultsGroups component, which can be effortlessly incorporated into the front end as a standard ReactJS component.
In the future, more fragments, such as banners, will be added to SearchResultsGroups and appropriate data mapping between the EL and the frontend will be done to make use of this component in the Search Results Page.
Key takeaways
Throughout my internship, I had the privilege of acquiring several valuable lessons:
- Technical growth: engaging in this comprehensive project built on a diverse tech stack, provided me with valuable insights into industry-standard code development and the systematic approach to application development.
- Supportive culture at Expedia Group: the uplifting atmosphere at Expedia Group, where individuals were recognized and appreciated for their exceptional accomplishments, served as a driving force, motivating me to consistently strive for excellence in my work.
- Team collaboration: daily standups and team meetings revealed the importance of collaboration and meticulous planning to ensure smooth operations. Tools like retro boards emphasized the significance of learning from one another and fostering a culture of appreciation within the team.
- Networking: establishing connections with my team members, fellow interns, and mentor proved to be an invaluable experience that helped broaden my horizons and fostered a sense of camaraderie.
Working at Expedia Group has rewarded me with unforgettable memories that will be etched in my heart forever. I feel deeply grateful to have spent the summer working among and learning from immensely talented individuals. The lessons and experiences gained during my internship will undoubtedly shape my future endeavors. 😊 🥳
Shoutout to Nupur Rathi for working on this project & blog with me!
