Our React Native EU Conference is back
REGISTER
.svg)
We had been struggling with React Native application performance until we met Callstack. With the assistance of their experts and a professional process, our application performance had a significant improvement. Thanks, and I highly recommend it to anyone who has been in a similar situation.
Introduction
MoMo is proud to be the number 1 e-wallet in Vietnam with more than 23 million trusted users. With MoMo Wallet, you can safely pay and transfer money on mobile anytime, anywhere.
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.
Migration process step by step
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:
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).
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.
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.
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:
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:
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:
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.
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:
Need help with React or React Native? Let us know!
I hereby agree for sending me by Callstack.io Sp. z o.o. with seat in Wrocław, by means of electronic communication to the e-mail address indicated by me, commercial information, within the meaning of the Act of 18 July 2002 on the provision of electronic services. For details see our Privacy Policy.
