MoMo faced several challenges during the migration process. First, they needed to migrate their existing platform and mini apps to a separate repository with the Re.Pack library.
Then, they aimed to create an in-house development platform that would be accessible to third-party developers. Last but not least, documenting the entire migration process and upskilling MoMo's developers were crucial tasks to ensure smooth operation and maintenance.
work done
The project was divided into four main deliverables:
Migration of the main platform and one mini app
We implemented a secure chunk loader for loading mini app bundles, integrated it with the current system, developed base64 mechanisms for loading assets, adjusted the mini app configuration to use Re.Pack, and supported the Hermes engine. This led to the development of the MoMo core package, producing a performance benchmark report, and ensuring library compatibility.
Creation of the in-house development platform
We created a detailed dev platform architecture, integrated mini apps, configured Re.Pack for building bundles, and enabled debugging, hot module reloading, and devtools support. This resulted in an independent sandbox development platform and adjustment of the communication module within the MoMo core package.
Documentation
We created comprehensive technical documentation for the chunk loader and the end-to-end migration process.
Upskilling MoMo Developers
We conducted a workshop led by Tomasz Krzyżowski, focusing on teaching MoMo developers how to handle the Re.Pack migration process independently.
define
Identified confirmed/reported issues such as re-renders and created a backlog for potential improvements.
measure
Used Macro tool measurements.
ANALYZE
Selected the most promising performance changes.
IMPROVE
Implemented changes following React Native best practices.
CONTROL
Re-measured with the Marco tool and compared to the 4.58.0 native version.
Deployment
Developed the release process for both Android and iOS.
API DESIGN
Proposed an API based on the Rive Android library features.
INTEGRATION
Implemented Rive SDK integration for Android and created an example app for testing.
iOS SUPPORT
Extended the integration to iOS after successful Android testing.
AUTOMATION
Created a Github Action workflow for automated library releases.
PUBLIC RELEASE
Made the library publicly available on platforms like CocoaPods and Maven.
DEPENDENCIES
Managing dependencies, including Expo and react-native packages for each new release.
RELEASES
Automating the release process with custom GitHub Actions.
TRAINING
Providing React Native training through pair programming, code reviews, and workshops.
01
CODE REFACTORING
Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.
02
MIGRATION
Migrated the codebase to TypeScript.
03
DEPENDENCIES
Upgraded major dependencies such as Expo, React Navigation, and React Query.
04
PAYMENTS
Created two options: In-app purchase with Google Play or App Store and credit card payment.
05
linking
Sorted out links, integrated content, and implemented html rendering.
We provided full front-end support, project configuration, feature parity, and expert advice on technical and user experience. We also implemented a new design guideline, including dark mode with auto theme detection.
01
RN PAPER
Forked the React Native Paper library.
02
ci
Established continuous integration for automated code updates.
03
testing
Set up a Storybook for component testing.
04
design
Developed the basis of the design – color, layout, and typography.
Once we had the basics down, we started working on the UI library components. The components we developed included: AppBar, TextField. Button, Icon Button, Toast, which included animation and swipe-to-dismiss, Match Status, Search, and many more!
Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.
16.8s
App start time, before 48.5s
8.6s
Report screen load time, before 15.9s
2.5s
Sending a message, before 14.5s
60FPS
Average FPS on LHN
2.6s
Search screen load time, before 11.8s
01
Together
we acted as staff augmentation within Advantys’ team.
02
Engaged
in collaborative problem-solving and solution exploration.
03
supervised
by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.
01
migrating
from a custom server-side rendering (SSR) solution to Next.js
02
Focusing
on Core Web Vitals metrics
03
Optimizing
a large shared JS bundle
04
Introducing
Fast Refresh for accelerated development iterations
The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices. To find out more about the whole AutoZone project, head over to the case study on main case study title.
01
strong
architecture with professional maintenance and continuous updates
02
high
code coverage with quality-compliant unit and integration tests
03
Comprehensive
testing, including end-to-end.
04
Faster
time-to-market with mobile process automation.
05
New PoC
features like biometrics and mobile health kit integration.
Last but not least, our collaboration significantly enhanced the knowledge of Thriva's development team regarding React and React Native.
Students new to programming and React Native
Web developers unfamiliar with device APIs and native apps
Native developers exploring web app frameworks and React Native's UX potential
React Native developers prototyping and sharing ideas
Library maintainers creating examples and documentation
Users providing reproducible cases for bug reports
Speakers and workshop presenters conducting live coding sessions
RESULTS
Through our efforts, the MoMo platform and mini apps were successfully migrated to a new architecture. We developed an independent sandbox platform for third-party developers, prepared comprehensive documentation, and upskilled the MoMo development team.
This project not only improved the performance and scalability of MoMo's services but also empowered their development team to manage future migrations and developments effectively.
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.
HUỲNH CHÍ HÙNG
-
Associate Director of App Development
In brief
We optimized the client’s mobile app performance and introduced a custom tool to measure performance regressions. We set up performance tests and documentation to enable a seamless transition of knowledge with the in-house team of developers.
Client Info
Entain is one of the world’s largest sports betting and gaming entertainment groups.
Industry
Commercial gaming
Company type
Enterprise
Region
Australia, Asia & Oceania
Tech Info
Performance optimization project with the best practices, approaches & tech solutions
Technologies
React Native | Native
Platforms
iOS | Android
Stack
Redux | Tanstack | Reassure | GraphQL
Performance Boost
87.5%
In 87.5% of the screens, the number of rerenders decreased or remained the same, which affected the acceleration of the initial performance.
In brief
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.
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.
.webp)
.webp)
