Read Part 1 here! In we discussed how we may decompose a large complex React Native app into smaller (using Electrode Native), and how mini apps can be combined together to build larger apps. Mini apps allow development using , and . This also allows s** ** part I React Native mini apps separate code repositories for each mini app mini apps can be centered around a particular business feature eparate teams to work on each mini app. We also discussed when using React Native, and emerged as a viable contender. on-device data storage options Realm database We sourced various articles and forums to examine and abstract some and explored possible solutions that will mitigate this. common performance issues encountered when using React Native 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. 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 Performance Issues: In 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. Legacy Issues: brownfield development 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. Platform Access: 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 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. native module 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? , whether the project was originally an Objective-C or Swift project. Objective-C and Swift files can coexist in a single 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 ) and Remote Push Notification (using react-native-push-notification OneSignal ) How to Setup Local Push Notifications in React Native (iOS & Android) React Native Remote Push Notifications with OneSignal Further research showed that there are several open source npm libraries for local notification setup including, , , , and many others. react-native-notifications react-native-push-notifications react-native-onesignal I came across that compared OneSignal , UrbanAirship and Amazon SNS Mobile Push. another interesting article The questions now became 1. How do you incorporate push notifications in the macro app that is built using a collection of 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. The solution seemed to be to build the notification for the macro app rather than within each of the constituent mini apps. 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 using React Native Async storage and react-native-router-flux. The approach was simple article where the author implemented a simple persistent user session management 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 and . 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. separate code repositories, team separation based on business functionality ability to scale and deploy parts of a mobile app separately Mini Apps and macro apps can use 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. Async Storage or Realm database 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 ** **e and to keep this number low. passes over the React Native bridg 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. 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. Push notification implementation for mini apps can be done at the macro app level, rather than at the mini app level. 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! Read Next: The Microservices Approach to Mobile Application Development Other Articles: How to build a simple Sprite animation in Javascript Promises in Javascript Explained!
