How we migrated the TV cross-platform app from Cordova to React Native
We have a client providing Video streaming solutions, real-time TV and video on demand in the mobile app. The existing app was built with Cordova and Angular (not Ionic Framework) and custom build process scripts.
As the app was started as a Proof of Concept (PoC) and grew to the minimum viable product (MVP) using the starter PoC architecture. It became hard to maintain the existing app or proceed with new features, hard to upgrade the core libraries like Angular or Cordova, etc. We also had to customize plugins like Video player to provide a more stable connection for the HLS streaming and the customization needed support.
Our customer wanted to create a custom mobile app version with partial functionality to share with several clients.
It’s a great time to do a quality migration!
For these purposes, we did the investigation, developed a pros/cons plan, and elaborated a set of needle plugins and libraries.
Our main aim was to:
- Define the app features list based on the existing mobile app, features dependencies;
- Define the minimum viable features (MVF) of the Product from the features list;
- Discuss with the customer and define the MVF and a minimum viable product (MVP) to determine the bulk development scope;
- In parallel with point #3, we discussed the customer design updates;
- Prepare all the libraries, dependencies, versions and compatibility needed for the MVP, update the development scope, and sync with the customer;
- Prepare the development, testing and release plans and provide them to the customer;
- Do the development and testing phases;
- Do the demo for the customer and discuss the needle app updates;
- Do the final updates and final testing;
- Update/create the project documentation;
- Do the release phase.
For this project, we used React Native and the following libraries:
- react-native-tvos template template as it supports Android TV and tvOS navigation and special improvements for TV devices. It saved a lot of time to support TV devices out of the box;
- react-native-video to play the HLS stream and recorded mp4 videos;
- react-navigation with native integration for navigation across app screens;
- redux, redux-saga, redux-persist and async-storage to store all the needed user, video, and tv information from the API;
- react-native-svg for the SVG logos and player controls.
It took us 4 weeks to develop the new app version:
- The new app version has partial viable features;
- No need to redesign, we used the same UI/UX, colours, app launch screen icons, banners, and splash screen images;
- Network configuration was defined initially for the previous app, we reused the logic;
- The API methods were well-known and described in the existing app, we reimplemented new logic with sagas and redux;
- As it’s a new version of the existing app, it has the same Bundle ID and incremented version. And you don’t need to sign new certificates, new provisioning profiles, or register a new app in markets;
- The testing process is not so complicated as the documentation for the smoke and regression testing existed and needed minor upgrades.
What did we get as a result of migrating the partial app from Cordova to React Native?
The new improvements for the app included a video player with a more stable network connection control, replacing a “moment.js” with a more lightweight “Intl” for dates formatting, a performant FlatList with rendering only visible on the screen list items and more.
The customer is happy and excited with the new app version. It works faster, has responsive and more “native” UI, and the app logic was written from the scratch and is clear and structured.
We also plan to migrate the most viable features to the new app during 2-3 next releases and be able to start with new ideas and improvements for our customer.
In the next article, I’ll describe how we did the build automation with testing and rollout to the markets’ beta streams every 2 weeks.
Who am I?
My name is Aleksei, I am a Co-Founder at Appelian Software.
15+ years in the software development. Experienced Delivery Manager.
Appelian Software plans, designs, and develops MVPs ready to enter the market and be prepared for funding. On top of that, we help to migrate software to a new tech stack or improve the performance of the product.
Let's discuss your project
Your questions and requests are welcome
15+ years in the software development. Experienced Delivery Manager.