Migrating a Mobile Application to React Native from Swift/Java and Refining it for Web Deployment
Our client partnered with This Dot Labs to upgrade and modernize their flagship mobile application, and bring their offering to the web.
Overview
Our client partnered with This Dot Labs to upgrade and modernize their flagship mobile application, and bring their offering to the web.
The legacy application was built in native Swift and Java, leading to significant costs for upgrading both applications in parallel.
This Dot Labs consolidated the business logic of these separate apps to develop a single modernized mobile app in React Native, using Expo.
Additionally, the client wanted to create a web offering of the product for users not using iOS or Android devices, or those that do not want a mobile application, by creating a web offering of the product that operates in the browser.
The client had the following requirements:
- Migrate deprecated mobile applications from Swift and Java to React Native
- Create a web offering of the product that operates in the browser
- White label the app for multiple brands. Three distinct brands for both platforms, making six build targets in total
- Existing .NET backend that would be rewritten in a future step of the process. but needs to remain operational and up during the transition and further
Services Provided
Using a combination of React Native and the Expo platform, the team at This Dot Labs migrated and refined the client’s flagship mobile application, and created a version of the application that works not only for iOS and Android, but also in the browser.
Tech-stack
Expo
React
Android
NodeJS- Expo: A platform for building applications that work across devices
- React Native: A JavaScript-based mobile app framework that allows developers to build natively-rendered mobile apps for iOS and Android
- Serverless Framework: A web framework for building and deploying AWS Lambda based APIs using Node.js
- Legacy .NET application that needed to remain in service
This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.
We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.
The client is a publishing company specializing in custom quick reference information directories in a tiered format.
The company specializes in users to be able to access their organization's custom emergency operations plan, and other information.
Protecting Data with a New Authentication Strategy
The resources provided by the mobile application are served via Cloudfront to the client applications for speed and cost purposes.
However, these plans are private to the organization in which they belong and need to be secured from the public domain. As such, This Dot Labs created a Cloudfront-based authorization strategy that relies on a AWS Lambda validator to generate unique authorization keys for retrieving the data.
This ensured data was secured and only accessible to the users who could provide the appropriate credentials as the application itself has no authentication system but the Cloudfront resources are password protected.
Utilizing Expo for long-term maintainability
The team at This Dot Labs used React Native with Expo to consolidate the code for all platforms into a single codebase for easy upgrades, and to ensure feature parity across the stack.
This allowed the team to use the same core codebase to build the iOS, Android, and web applications, and share all the needed business logic.
As a result, updates and upgrades now take hours instead of weeks to complete and ship to production, setting up the client to either better self manage upcoming maintenance, or reduce costs for future development efforts.
Migration
Going through the code base for both native mobile apps, iOS and Android, they were far enough out of date they would each take a considerable amount of time to bring current.
This, in conjunction with the desire to redesign the user interface to something fresh and modern added considerable time to the project.
Leveraging a mobile hybrid solution (React Native), we are able to minimize the time to accomplish the redesign by only having to do it once for both platforms. The mobile app is also able to share the network stack and data modeling, again saving significant time and redundant effort.
Doing each app natively was estimated at roughly 16 weeks each, for a total of 32 weeks of work. Going with a hybrid model, we were able to deliver a newly designed app, built from the ground up for both platforms in 20 weeks.
There was also a bonus! Because the build tool chain for the app existed as a JavaScript that had a target output to iOS or Android, we were also able to white label the mobile application with specific branding needs, and separate App Store publishing schedules as part of the process.
Let's innovate together!
We're ready to be your trusted technical partners in your digital innovation journey.
Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.