MoMo Improved Performance of Their Super App and Mini Apps by Migrating Their Architecture to Re.Pack

Challenges

We were asked to migrate the existing MoMo platform (super app) and their mini apps to a separate repository with the help of the Re.Pack library. Also, we created their in-house development platform available for third-party developers to work on MoMo’s mini apps. 

Finally, we’ve prepared a whole documentation of the migration development platform and conducted a workshop for MoMo developers upskilling them in migrating mini apps with Re.Pack.

At the beginning of our cooperation with MoMo, we did a huge research to first find out what needs to be done to successfully proceed the migration process. As a result, we divided the project into four main deliverables:

Migration of platform (super app) and one mini app to Re.Pack

In this part, we had to prepare a proper environment for the migration what required from us, among others, the following challenges:

- Create a chunk manager.

- Integrate chunk manager with current manager.

- Create working assets loading mechanism for mini apps.

- and many more (detail below in the Approach section).

Creation of the in-house development platform

In this part, we focused on:
- Research how to integrate a mini app with the development platform.

- Setup Re.Pack to build mini apps’ bundles.

- Handle RN debugger support, hot module reloading and dev tools support.

Prepare documentation of the migration

It seems to be self-explanatory so, in short - in this deliverable we created docs describing Chunk loader with the use of typedoc and ReadMe doc with the documentation of the migration process. 

Prepare and conduct an upskilling workshop for the MoMo developer team

At the end of the cooperation, we were supposed to prepare the upskilling workshops for the MoMo dev team to show them how to conduct the migration process on their own.

Approach and work done

As described above, at the beginning of our work, we decided to divide the project into 4 parts called deliverables. Our goal was to move with MoMo mini apps from this structure:

to this one:

Deliverable 1 - Migration of the main platform (super app) and one mini app to Re.Pack

In this part, we created a solid ground for the migration process focusing on the following tasks:

1. Create a chunk manager by implementing a secure chunk loader

We used Re.Pack’s chunk manager for loading bundles from MoMo’s mini apps and also created a mini apps manager that was using Re.Pack’s chunk manager. To do that, we used the functionality that already existed in the project - downloading zipped bundles from the Internet and unzipping them. 

2. Integrate chunk manager with current manager - working platform with 2 independent mini app loading mechanisms.

Mini apps that were migrated to the new architecture are using “our” mini app manager. 

3. Handle assets loading by creating working assets loading mechanisms for mini apps.

Now, the only way to load working assets is inlining them to base64 format.

4. Research mini app security and develop clearly defined security solutions for the chunk loader. 

Mini apps aren’t able to control each other. Only the main superapp has the ability to load and register new mini apps. Mini app can only register or deregister itself. 

The main superapp contains the register of mini apps responsible for holding mini apps data but, the mini apps have limited access to these data resources and can only register/deregister themselves. 

5. Make the migrated mini app compatible with chunk loader

We used mini apps registry to register mini apps on the platform by using MoMo Core package and adjusted mini app configuration to use Re.Pack (webpack config). 

6. Create support for Hermes engine with Re.Pack for both platform and mini app.

In this case, Android was out of the box and we didn’t change that. 

‍

As a result of this deliverable, we:

• Created MoMo core package which is crucial for our solution based on dll plugins for Re.Pack,
• prepared a benchmark report with comparison of the platform and mini app performance (before and after migration),
• made MoMo’s library compatible with their solution

Deliverable 2: Creation of the internal development platform.

In the second phase of the cooperation with MoMo, we focused on creating their inhouse development platform that would be available also for third-party developers (outside MoMo). To achieve that, we took the following steps:

1. Research how to integrate mini app with the dev platform and create detailed  diagram for dev platform architecture with focus on chunk loading.

From now on, every single mini  app is being embedded to MoMo's internal development platform and works on that platform.

2. Setup Re.Pack to build mini apps bundles and develop minimal working dev platform.

From now on, every single mini app has its own config thanks to which developers can build the mini app as a standalone one. Then, the host app can “read” the mini app and make it work properly. 

3. Handle RN debugger support and create working debugger on dev platform that allows users develop mini apps.

Now, React Native debugging support works only on local development and won’t work on the mini apps’ remote chunks. 

‍4. Handle hot module reloading by working Hot Module Replacement on the dev platform that allows users to develop mini apps.

Hot module reloading is provided by Re.Pack and works out of the box. 

5. Handle devtools support that depends on DevPlatform architecture and create a working devtools tab on dev platform. 

All the devtools from the browsers are working properly. 

‍

During this deliverable, we managed to:

• develop working sandbox development platform (independent from MoMo platform) created in a separate repository
• adjust the communication module to single bridge architecture as a part of the MoMcore package. 

Deliverable 3: Documentation

After finishing work on deliverables 1 and 2, we prepared a tech documentation of the created chunk loader and end-to-end app migration process. 

Deliverable 4: Upskilling MoMo team 

At the end of our cooperation, we prepared a workshop (led by Tomasz Krzyżowski (@TMaszko), Callstack developer who worked on the whole migration process) in which we taught MoMo developers how to proceed and maintain the migration process with the Re.Pack library on their own.

Outcome and benefits

Finally, after facing all the challenges described above, we managed to bring the migration process to a satisfying finish that can be concluded in these four major outcomes of the project:

• MoMo Platform and their mini app has been successfully migrated to the separated repository with the help of Re.Pack features. 
• We’ve created a working sandbox development platform for MoMo available also for the third-party developers (outside MoMo).
• We’ve prepared a whole documentation for the chunk loader and end-to-end mini app migration process.
• We helped in upskilling the MoMo dev team by organizing a workshop session focused on migrating mini apps with Re.Pack.