Native to React Native Migration: How We Cut Costs & Improved Performance
Client Overview
The SCAND team was asked to develop a no-code app management platform that would help publishers, content owners, and OTT providers promote their content under various brands. At a certain stage in the platform's development, its owners faced the problem of high costs for developing and supporting native mobile applications, which reduced the budget for marketing and promotion.
Approach
Given the fact that the platform was initially built with native apps, SCAND was tasked with finding an alternative solution. We proposed switching to React Native, as its use would provide the following advantages:
- Cross-Platform Support: React Native allowed us to write one codebase for iOS and Android, which would automatically reduce development and support costs.
- Hot Reloading: Hot reloading sped up the development process, as well as allowed us to make changes and see immediate results.
- Wide Ecosystem: We got access to plenty of ready-made libraries and tools for integration and support from an extensive community of developers and major sponsors, including Microsoft, Expo, Callstack, and Infinite Red.
- Performance: We were able to maintain performance close to that of native applications through the use of virtual DOM, native components, JavaScript Bridge, and Hermes.
As the main approach to switching to React Native, we took a hybrid approach, which means gradually replacing native screens and modules with RN components. To make new components work with the existing native code, we applied a special method called the Bridge design pattern.
Development Process
The transition process included the following stages:
- Analysis of the current architecture and selection of the optimal migration strategy to determine the most reasonable migration path.
- Determining the list of native modules that can be rewritten in React Native without losing the required functionality.
- Gradual transfer of UI components and logic
- API compatibility testing to prove an agreement between the new React Native components and existing APIs.
- Integration of third-party SDKs
Major Features Implemented
The migration had some important advantages:
- By conducting testing at all stages, we eased the transition and reduced risks during the transition process.
- Thanks to using optimized native modules, we made certain that our app performance would not suffer during migration.
- React Native gave enough freedom to adapt to potential platform growth.
- Parallel work on iOS and Android (i.e., a single code) helped us deploy new features and updates more rapidly.
Result
The migration has been an enormous change for the platform. By bringing iOS and Android development into a single team, we have lowered costs and greatly simplified maintenance.
With a common code base, in turn, it is now much faster to roll out new features. The platform is also now very versatile and can be extended to Smart TVs and web platforms. And because it's supported by an active Facebook group, it will remain up-to-date and receptive to the future.