React — A Migration Journey at Scale
Let me tell you about a journey of one of the biggest travel platform of India. A journey that helps ~100k Hotel Partners get the best out of selling on two of the biggest OTA brands of India — Goibibo & MakeMyTrip. Journey that began with the sole intention of providing the best experience possible while also keeping upto date with the latest advancements in technology. This is the journey of one of the best Hotel B2B portal of India — InGo-MMT.
Oct 2018
This journey started all the way back, about 4 years back, when we slayed the monolith which was holding both Frontend & Backend code. I don’t think we need to go over the reasons over why we chose ReactJS. It’s been extensively covered already like here. We created a new microservice, which was built on a custom setup powered by Create-React-App which was a golden standard at that time. We had to build custom tooling so that we were able to keep a hybrid app running both React code as well as pre-existing jQuery code running hand-in-hand, bringing the same goodness that CRA provides to our legacy code as well.
With this initial start, we created our new microservice and we began our journey of progressively converting the whole webapp into React. And we did this progressively since as much as the developer inside us wants to sit & migrate all at one go, we also wanted to keep providing our Hotel Partners better experiences, newer ways of engaging with our platform and sell their Hotel experiences better.
Our custom setup included things that were unheard of before, like:
- Keeping & using multiple HTML files loaded into a SPA
- Writing conditional logic inside index.html
- Keeping legacy code as it is by keeping them out of src folder and setting up building & versioning legacy code
You can read all about the initial start here: https://tech.goibibo.com/django-unchained-literally-fa90697dc37e. This could also help you in kickstarting migration of your legacy applications as well. Thank me later :)
2018–2022
This has been the most exciting tech journey of our lives. We have seen the complete ins and outs of what it takes to go from a basic MVP to becoming one of the best applications in the travel B2B space. Here are some of the key highlights:
- We went from React in jQuery app → jQuery in React app → React app
- We went from an app with about 20+ modules & features → an app with 100+ modules & features
- We went from building in-house component library to using Material-UI and StorybookJS for building our component library
- We had tried out multiple libraries to finally settle on react-hook-form for forms, react-day-picker for calendars, moment for Date manipulations (oh btw, it tree-shakes well 🧐), recharts for charts and react-table for tables.
- We have used different approaches in building the UI — Config Driven UI, BE template driven UI, Windowing, Lazy Loading etc.
- We religiously keep our dependancies upto date every quarter. And for instance, we put react-hooks to production on the day the stable version was released.
- Our CSS approach went from plain CSS → SASS → Styled components → CSS-in-JS (via MUI) → Tailwind CSS
In the same timeframe, our team grew from 1 frontend engineer (me 🧑💻) to a team of 12 FE Engineers 👭🧑🤝🧑, 4 QA Engineers 🕵️️ & 4 designers 🧑🎨.
The best part about this journey is that we have created a culture of collaboration, exploring different approaches, experimenting with ideas, trying out different libraries, figuring out the best way to do things in a democratized manner which takes opinions & feedbacks from everyone involved. We have evolved our tech stack & coding standards and scaled that to get the best out of our big team of developers. And all of this is done with a very clear focus on what’s best for our customers — the Hotel Partners.
You can also read a bit about the initial journey, challenges we faced & how we overcame here: https://tech.goibibo.com/modernising-legacy-web-app-51ba952e7630.
The Destination
After almost 4 years of development, in which new functionality & enhancements for our Hotel Partners always took the first priority, and the tech migration progressed at a snail pace, we have completely migrated to a 100% ReactJS webapp.
What started with 250 files, 80K lines of code repo has now grown to ~2000 files, >270K lines of code.
The best part is hearing the same from our Hotel Partners on how their experience is.
Using the InGoMMT after a very long time, I was surprised by the completely new and fresh look and the ease of use. It is now comparable or even better in some cases compared to the other platforms. Keep up the good work.
Let’s talk Performance
Obviously when working on building such a humongous webapp and continuously shipping new features, the primary focus is not on Performance. But we solve for it in 3 important ways —
- The architechtural choices like code splitting at route level, having a proper pre-defined Data flow, always using pre-defined components and using common utils & hooks which are already optimized.
- Rigorous testing & very detailed code-review process for every new change ensures that we not just deliver the functionality but keep it performant.
- Periodic review on the performance by monitoring bundle sizes, checking Lighthouse and observing trends in Analytics. And fixing issues.
The final cleanup
To complete the migration process and doing the final cleanup of all legacy code, we also took up the another round of optimization along with it. Our legacy code powered all the analytics logging across entire codebase. That was one of the last big dependancy of the old code. Here are the things we did in the final cleanup & optimization.
- Remove all of legacy code, legacy libraries like jQuery, BackboneJS, underscore and all the custom tooling we had setup for legacy code.
- Move the core analytics logging utility inside src and update references across 1000+ files using custom codemod script via jscodeshift 😎
- Restructure all the assets (icons, illustrations) and reused code into properly segregated shared_logic folder so that common chunk doesn’t bloat up. (saved about 250Kb gzipped size from common chunk 🔥)
- Just running npm dedupe saved about 50Kb gzipped size overall 🤯. For those who don’t know, it removes multiple versions of same library dependancies. Best done along with updating all libs to latest version.
- Also added a bunch of useful scripts — script to make sure assets added to project are properly utilized, added script for logging consolidated size of website assets along with custom performance budgets, script to compare two lighthouse reports (exported as JSON).
- Moving to Vite JS 3.0 which would require another blog post to go into details. This saved another 160Kb gzipped size across all JS chunks 🥳.
The impact
As you can see from our script output here:
- The overall gzipped size of our application went fown from 1500Kb to 950Kb. An amazing 36.7% reduction. 🥳🥳
- Our main JS chunk went down from 756Kb to 420Kb. A sick 44.4% reduction. 🤓 While our unused JS (on load) reduced by 50%.
- Script evaluation time saw a good 31.5% reduction & Script parsing saw a jaw-dropping 90% reduction.
This is a comparison of best of 10 lighthouse reports of both before-optimization and after-optimization run in incognito mode.
A New Journey begins
After completing this journey of migration, our work doesn’t end here. We will continue to strive to bring useful features, smooth experience for our hotel partners. Here are some of the things that excites us looking ahead:
- Setting up Real-User Monitoring — Currently analytics data gives just an indicative measurement & trends on how the performance is. We want to be correctly measuring the performance for a SPA.
- Completing our migration to Tailwind CSS from existing SASS
- Completing our tech debts in few of the early modules to bring it to the latest established coding standards.
- NextJS is also in the plan with an eye out for the stable release of React Server Component :)
If this journey has taught you something, don’t hesitate to show your appreciation on the like button so that we can grow together in this journey and encourage us to share more learnings like this. 🧑💻🧑💻
