Elevating User Experience: The Power of MakeMyTrip’s Component Library

- By Frontend UX Team

In the world of rapid software development, managing multiple applications efficiently is crucial. As MakeMyTrip grows its software ecosystem, maintaining a smooth and effective development process is more important than ever.
In this blog post, we will explore why the Common Library is essential, navigate adoption challenges, discuss its execution process, and seamlessly integrate it across various applications.

Speeding MMT’s development through strategic React component sharing

With MMT’s services spanning flight bookings, hotel reservations, holiday packages, grounds, etc, the portfolio of applications has grown significantly. However, this growth came with a challenge — the replication of a handful of components across various applications. This manual replication led to inconsistencies and maintenance difficulties. As MMT’s commitment to a seamless user experience deepened, a more robust solution was needed.

Introducing Shared Libraries for Reusability

To address the need for a better way to handle components, the idea of a “common library” has become important. This means creating a single place where we gather a bunch of components that we can use again and again. This becomes a central point that everyone in the organization can refer to. In React, this library becomes like a super valuable collection of different components that can be easily shared and used across many different parts of our projects.

Navigating Adoption Challenges

Implementing Common Library was a big step forward, but it wasn’t without its hurdles. Here’s a glimpse into the challenges we tackled along the way:

1. Change In Thinking: Going from creating unique components to using shared needed clear communication and motivation. Gaining support from product and design teams for consistent designs across apps was crucial for a better user experience and brand integrity.
2. Version Balancing to keep things in sync: Managing updates across apps led to conflicts. To tackle this, we introduced version control and implemented rigorous testing.
3. Accommodating Diverse Use Cases: Adapting to various app requirements was tough. We used a modular approach with adaptable components, allowing developers to customize updates based on specific needs.
4. Ensuring Backward Compatibility: Balancing improvements with backward compatibility was hard. We handled this with planned transitions, support for old features, and clear communication. This ensured a smooth user experience through changes.

Step-by-Step Walkthrough for Implementing Common Library

1.1) Reshaping MMT’s Frontend Architecture

High-Level Diagram

The common library resides on a Nexus server, functioning as a central repository for shared packages. Teams can seamlessly incorporate these packages into their projects by adding them to package.json files.

1.2) Version Tracking to Maintain Consistency and Compatibility

High-Level Diagram

Version control ensures that all components, libraries, and dependencies work seamlessly together. By closely monitoring versions, teams can avoid conflicts and ensure a smoother experience. This practice also fosters a cohesive development process, reducing the risk of compatibility issues down the line. Overall, version tracking serves as a vital pillar for maintaining consistency and compatibility within the project ecosystem “ in a simple word without duplication”

1.3) How to utilize the Shared Library Across Applications

Integrating the common library into your applications is remarkably straightforward.

Add the package to your dependencies using npm or yarn.

npm install --save packageName or yarn add packageName

npm install --save @MMT_UI_Lib/DrumRollCalendar

Example:

import React from 'react';
import DrumRollCalendar from "@MMT_UI_Lib/DrumRollCalendar"

const DrumRollComponent = () => {

return (
     <DrumRollCalendar
        minYear={new Date().getFullYear() - 70}
        maxYear={new Date().getFullYear()}
        initialDate={initialDate}
        initialMonth={initialMonth}
        initialYear={initialYear}
        showWrapStyle={false}
        calendarTitle=""
        onSave={(date, month, year) => confirmPress(date, month, year)}
        scrlContainer={styles.columnWidth}
        btnContainer={styles.libBtnContainer}
        selectedDateClr={TEXT_COLORS.CYAN_BLUE}
        unselectedDateClr={TEXT_COLORS.BLACK}
        initialScroll={Platform.OS === 'web'}
        showInfiniteScroll={false}>
        <Button 
          buttonPressHandler={() => {}} 
          label={btnLabel} 
          showGradient 
          disabled 
          buttonContainer={styles.buttonContainer} 
          textStyle={styles.btnTxtStyle} 
        />
      </DrumRollCalendar>
  )
}

export {DrumRollComponent};

1.4) Highlighting Common Components across LOBs

Transforming Development: MMT’s Common Library in the Spotlight

Conclusion

This approach boosts reusability, consistency, and efficiency, crafting great user experiences. As MakeMyTrip moves forward, these shared libraries guide success in the ever-changing app world.

“Uniting code, unlocking creativity — where innovation meets efficiency and takes flight.”

Tell us your reusability story — what obstacles have you encountered? How have you solved them? What opportunities for further improvement do you see?
Let’s continue the conversation and explore the diverse ways in which reusability is shaping the landscape of modern software development.

Thank you for reading. Stay tuned for more insightful content on optimizing software development at MMT.