React UI Library (Monorepo) — React, Lerna, RollUp, Storybook at MakeMyTrip (Part -1)
Larger Problems Demand Robust Solutions
As our company’s codebase expanded and integrated into the workflows of multiple teams, we faced a significant challenge. The task of keeping our code organized and optimizing for efficiency unveiled issues like redundant code, bloated code bundles, and performance bottlenecks. This complexity magnified when attempting to share similar code across various projects and teams.
Recognizing that reusability is a core principal of both React and React-Native, we traditionally managed components within a dedicated folder. However, this approach falls short in a large-scale, shared codebase environment. The solution? Treating components as packages, a method that offers a cleaner, more modular, and efficient system.
To address this, we decided to establish a unified React and React Native UI library. This repository of components, published as npm packages, aimed to enhance visibility, streamline testing, reduce redundancy, impove modularity, and simplify the refactoring process.
Architecture
What is Monorepo ?
A Monorepo, contrary to a monolithic architecture, is a strategy designed to manage multiple projects within a single repository efficiently. It facilitates maintaining independent projects under one roof without merging them into a singular entity.
At MakeMyTrip, for example, we navigate the complexities of various lines of business (LOBs) — flights, hotels, cabs, trains, and holidays. Each LOB operates with its dedicated team, making reusability and consistency a formidable challenge. Our solution? A comprehensive UI Library deployable across all LOBs, with Lerna at its core to fulfill our needs.
Advantages of monorepo
- Visibility
- Code sharing
- Improved collaboration
- Modularization
- Discoverability
- Easier refactoring
What is Lerna?
Lerna is a monorepo manager for JavaScript projects. It makes it easier to divide a sizable codebase into separate deployable packages. Lerna handles every step in the release process — from downloading dependencies, and linking packages together, to testing and publishing updated packages to the NPM registry.
Lerna Project Structure
As visible each component now has its own packge.json, now working as an independent npm module which can be installed and imported anywhere org-wide.
All you need to do after setting up Lerna environment is to publish your components.
What is RollUp?
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
This needs to be compiled into a format that can be understood by older clients and for that, we are going to use a bundler. Rollup is a good option since it has a minimal API and their docs are great to get started.
Deployment Architecture
What is StoryBook?
A playground for UI components. It enables us, to make and test individual components. The best thing about storybook is (Easy to test, Easy to document, and Easy to display).
Project dependencies won’t have an impact on component behaviour because it also operates outside of the application.
With the help of Storybook, we enhanced the basic documentation with text and a layout that prominently displays our components and their props. This enables us to design system sites, set UI library usage rules, and more.
E.g :-
Conclusion
In conclusion, our journey to creating a robust, shared UI library has not only addressed immediate scalability and efficiency concerns but has also paved the way for future innovation. By leveraging tools like Lerna, Rollup, and Storybook, we’ve established a solid foundation for our development teams to build upon, ensuring that our code remains organized, efficient, and, most importantly, reusable across various projects and teams.
Sharing my github which has a basic implementation of the UI Library
https://github.com/rishisahu20/ui-library
Thank you folks for reading, please wait for the second part of this blog with detailed implemantation.
