The Microservices Approach to Mobile Application Development (Part II)

Read Part 1 here!

In part I we discussed how we may decompose a large complex React Native app into smaller React Native mini apps (using Electrode Native), and how mini apps can be combined together to build larger apps. Mini apps allow development using separate code repositories for each mini app, and mini apps can be centered around a particular business feature. This also allows s**eparate teams to work on each mini app.**

We also discussed on-device data storage options when using React Native, and Realm database emerged as a viable contender.

We sourced various articles and forums to examine and abstract some common performance issues encountered when using React Native and explored possible solutions that will mitigate this.

In part II we will explore some deeper implementation issues in building mini apps with React Native, and focus on

Integrating React Native with existing native code
Push Notifications (Remote and Local) and Amazon SNS Mobile Push
Persistent Session Management
Leveraging other MBaaS tools provided by AWS for React Native apps

The aim is still to achieve a microservices approach to building mobile applications, thereby allowing separate teams to work on different parts of a mobile application, and a loosely coupled mobile app that may be deployed in separate increments, rather than a single monolithic mobile app.

Integrating React Native with existing App code?

React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.

Also, when building apps using React Native sometimes it may be required to access the native platform API or simply to interact with some native code. This may be due to a number of reasons.

Performance Issues: to keep the number of passes over the React Native JS bridge low it may be a better approach to implement a certain part of the mobile application within native
Legacy Issues: In brownfield development where you already have an existing mobile app, and are creating new parts of the mobile application in React Native, you may need to use some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript React Native.
Platform Access: In some cases you may beed access to the platform API like the iOS calendar API or the Photos API, from within the React Native javascript code.

React Native comes with a feature called Native Modules using which it is possible for React Native javascript code to have access to the full power of the underlying native platform. Note that any such modules will have to be written separately for each of the platforms and we trade some of the cross platform code parity for performance efficiency and native flexibility.

The TL:DR; of Native Modules in React Native

A native module is just an Objective-C class that implements the RCTBridgeModule protocol. In addition to implementing the RCTBridgeModule protocol, your class must also include the RCT_EXPORT_MODULE() macro. React Native will not expose any methods of CalendarManager to JavaScript unless explicitly told to. This is done using the RCT_EXPORT_METHOD() macro.

For example, you can create an Image component that is a bridged native component that uses SDWebImage under the hood, so that we can share an image cache for thumbnails with the native side of the app. It works by:

Declaring a JavaScript component to represent your native component
Letting React Native know you mean to reference native code for your component
Creating a native view with the same interface as your props
Using bridging macros to expose your interface to JavaScript

Swift doesn’t have support for macros so exposing it to React Native requires a bit more setup but works relatively the same.

Can you use Objective C and Swift in a single project file in iOS?

Objective-C and Swift files can coexist in a single project, whether the project was originally an Objective-C or Swift project.

Whenever you mix Swift and Objective-C in an iOS project, you will need an additional bridging file, known as a bridging header, to expose the Objective-C files to Swift. Xcode will offer to create this header file for you if you add your Swift file to your app through the Xcode File>New File menu option. You will need to import RCTBridgeModule.h in this header file. Care should be taken when mixing the two languages in Xcode as the bridge can be leaky if not properly implemented.

Push Notifications (Remote and Local) and Amazon SNS Mobile Push

Push notifications are hard and presents a unique problem in React Native apps. This is another segment of React Native that may need to be customized for the particular platform one is using.

While researching Push Notifications in React Native i came across two awesome tutorials by Spencer Carli on Local Push Notification (using react-native-push-notification) and Remote Push Notification (using OneSignal)

Further research showed that there are several open source npm libraries for local notification setup including,react-native-notifications, react-native-push-notifications, react-native-onesignal, and many others.

I came across another interesting article that compared OneSignal , UrbanAirship and Amazon SNS Mobile Push.

The questions now became 1. How do you incorporate push notifications in the macro app that is built using a collection of mini apps.

The solution seemed to be to build the notification for the macro app rather than within each of the constituent mini apps. However here we are venturing into the rarified atmosphere, since many of these features of React Native and Electrode Native are still new and evolving and i have yet to come across teams that have confidently implemented this approach. Although connecting the pieces in this fashion seems to be the logical approach.

2. Can one use Amazon SNS Mobile Push vs OneSignal or other competing products, as the MBaaS for Push Notifications to React Native Apps.

Here research showed that Amazon released its support for push notifications for React Native Apps in late 2017. This meant that you can create a mobile end point for the React Native app within the Amazon SNS Mobile Push (by using the iOS credentials for iOS support and Google Firebase Registration ID for Android support).

Thus using Amazon SNS Mobile Push as the service to push to the macro app (built using constituent mini apps) seemed to be a viable approach to implementing push notifications within apps built using the microservices approach. Keep in mind though that at this point this is merely conjecture and our teams have not implemented this as a thorough test. These technology platforms and paradigms are relatively new, however connecting them in this way seems to be a possible viable approach.

Persistent User Session Management in React Native Apps

Persistent user session is a common feature in mobile apps, where a user must login to access protected content within the app. The user session must be properly managed by the app for a seamless user experience, so that the user is not logged out every time they launch the app.

I came across the following article where the author implemented a simple persistent user session management using React Native Async storage and react-native-router-flux. The approach was simple

Present the user with an authentication page, where a user will be prompted with a username and password and will be able to sign up or log in
Allow a user to sign up or log in using a backend API, possibly using OAuth2.
Store and recover an identity token from the phone’s AsyncStorage
Allow the user to get content from an API’s protected route using the id token
Verify the id token’s existence to create the persistent user session
Allow user to access a protected homepage, where the user will be able to get protected content from the API or log out.

This approach is elegant for its simplicity and can be used within the macro app, with Async or Realm database as the underlying persistent storage. The persistent user session and token can also be used by the mini apps to access protected content within individual mini apps.

Another possible alternative is to use AWS mobile hub IAM management service to manage user sessions. This of course uses Amazon Cognito as the authentication backend.

Summary

Mini Apps in React Native are a viable approach to developing mobile apps that implement the microservices paradigm. In addition to the cross platform benefits that React Native provides, mini apps allow for separate code repositories, team separation based on business functionality and ability to scale and deploy parts of a mobile app separately. It is possible also to Code-pushify(now Visual Studio App Center) an app that is built using React Native, which allows for the app to be updated on the users phone without having to go through the app store. This can be useful when pushing out hot fixes or for A/B testing or canary releases.

Mini Apps and macro apps can use Async Storage or Realm database for on-device data persistency. This may be leveraged for persistent user session management, to avoid having the user to login every time the app is opened on the phone.

Understanding the nuances of React Native is important to get the most out of React Native performance. To this end it is important to identify the number of **passes over the React Native bridg**e and to keep this number low.

In case of brownfield development React Native allows interfacing of React Native code with already existing native code, and native modules allow developers to access native platform API from the JS code.

Push notification implementation for mini apps can be done at the macro app level, rather than at the mini app level. There are several libraries that allow for local notification implementation in React Native and platforms like OneSignal that allow for remote notifications, however this implementation is still relatively new and uncharted waters.

Amazon SNS Mobile Push along with npm libraries can be used to implement push notification services. It is important to note that platform specific code will need to added to React Native, and APNs will be used in case of the iOS implementation of the App and GCM or Firebase for the Android implementation. The backend pipes can be connected to Amazon SNS Mobile Push as a mobile end point, which can in turn be connected to the Amazon SNS publisher or triggered from AWS Lambda services or other SQS services if required.

Found this post useful? Hit the 👏 button below to show how much you liked it :)

Follow me on Medium for the latest updates and posts!

Other Articles: How to build a simple Sprite animation in Javascript

Promises in Javascript Explained!