How we built “Become a host” feature at MakeMyTrip using Android dynamic feature module
Do you own a villa in Shimla or probably a cottage at Coorg? Or, you might be having a spare apartment in Bengaluru, that you are willing to rent out occasionally & earn few extra bucks. You are not a professional hosting provider, but a casual one. Go-MMT already has a dedicated app for hosting business — IngoMMT, but for casual hosts like you & me, we wanted to build hosting funnel inside MakeMyTrip app itself. This funnel is dedicated to Homestays hosting and in few minutes, one can list his/her property on Goibibo & MakeMyTrip.
Brainstorming on solutions
While we had clear objective of what to build, we started pondering on potential solutions. MakeMyTrip’s android app has hybrid structure i.e. It has business verticals (LOBs) built in native as well as react-native. Our flights & hotels verticals are totally written in native (Java & Kotlin) whereas Trains & Buses verticals are driven from react-native.
We thought of building HostApp in same way as other react-native verticals but we had some unique constraints-
- We didn’t want to increase app size due to HostApp vertical (Become a Host feature). Only a few percentage of our users would be interested in hosting and for that we didn’t want to put size burden on all.
- We wanted to make it a plugin feature so that we could inject it easily in Goibibo app as well (android + ios).
- HostApp team was new and we wanted to keep our codebase separate for rapid development & easy maintenance.
We chose react-native as our tech stack as it can work on android as well as ios. It can be as performant as native codes and Go-MMT already has react-native development ecosystem. However, to deal with additional size constraint, we didn’t club it with base react-native bundle. We kept it separate and tried to figure out a way to load it dynamically (Over the Air).
Loading HostApp react-native bundle Over the Air
Our initial thought was to load HostApp bundle at runtime i.e. when user clicked on “Become a host”. We did a quick POC and found that it’s feasible. We could load JS bundle once and then store it in device. However, it had few challenges-
- We will have to develop infrastructure to
- support versioning of bundles
- chunking of bundle for network optimisation
- partial roll-out support
2. Since we use Hermes bundle (binary), we’ll have to deal with PlayStore & AppStore policies regarding downloading & installing 3rd party executable code.
During the same time, we came to know about Dynamic Feature Delivery on Android. That was exactly what we were looking for.
Dynamic Feature Module
You must already be knowing about Android App Bundles. Google Play uses it to generate and serve optimized APKs for each user’s device configuration. Play Feature Delivery uses advanced capabilities of app bundles, allowing certain features of app to be delivered conditionally or downloaded on demand. To do that, first we need to separate these features from our base app into feature modules. We made HostApp as a feature module.
Feature Module Delivery Options
Feature modules support different delivery options such as-
- Install-time delivery: Modules will be downloaded at app install.
- Conditional delivery: Modules will be downloaded at app install only if device meets certain requirements e.g. hardware features, locale minimum API level etc
- On demand delivery: App can request and download feature modules as needed.
Since we wanted our feature to be downloaded only when user shows interest in hosting properties, we opted for On demand delivery. When a user clicks on hosting tab or “Become a host” menu, we show a loader and meanwhile fetch HostApp module. This is only one time activity, next time onward app already has feature module downloaded so there will not be any delay in transition.
Challenges Faced
Main challenge while building HostApp was taking care of libraries compatibility issues. HostApp react-native libraries (feature module) had to be in sync with base app react-native verticals. We upgraded few libraries of base app and tweaked few in feature module as per our requirements. To use as less libraries as possible, we developed in-house design components named Canvas as per our own Design Principles. Thanks to our amazing Design team.
One unique issue that we faced was, no support of local resources (drawables) generated by react-native into feature module. Our HostApp images were not getting loaded as they were not being referred correctly internally. We opened one issue on react-native repository — https://github.com/facebook/react-native/issues/31626. To solve this, we decided to use font file to render single color icons & load from network for multi color images (Firebase Storage).
Some Analytics data
We released first version of HostApp on MakeMyTrip android app in December, 2021. Till date, we have gotten few thousands properties created so far on our platform out of which few hundreds properties are live. This is all organic traffic and we are yet to officially promote this feature. To help our hosts in listing their properties, we have setup dedicated support team. Meanwhile, our super duper Product team is going through all the feedback & metrics to make HostApp even more smooth and friendly.
Conclusion
It took us roughly two quarters to realize this product from PRD to live on PlayStore and oh boy, what a journey it was! There were multiple refinement of features, multiple brainstorming on Design Principles and Components, multiple tech POCs and endless effort by all the stakeholders. We got tears of joy, the day when our first homestay property was onboarded via our newly launched feature — Become a Host.
This feature is now available on both MakeMyrip android + ios platforms and we’ll be soon releasing this on Goibibo. Kudos to awesome Product team, Design team, Tech team and all our visionary leaders.
