Mobile framework Decision : Native? Cross platform or HybridPlatform? for Super App

Super apps are all-in-one mobile applications that integrate a wide range of services and functions into a single platform. Initially popularized in Asia, super apps like WeChat, Gojek, and Grab combine features such as messaging, social networking, e-commerce, ride-hailing, food delivery, financial services, and more.

This multifaceted approach aims to provide users with a seamless, convenient experience by reducing the need to switch between multiple apps. By offering diverse services within one ecosystem, super apps enhance user engagement, increase convenience, and can significantly boost customer loyalty.

We will discuss what are key area’s we need to look into when we are building super app’s.

1. Architecture ​

Scalability: The ability to handle a growing number of users and services without compromising performance. Super apps must support millions of users and transactions simultaneously.

Modularity: Designing the application in a modular fashion to allow independent development, deployment, and scaling of various components or services.

Microservices Architecture: Utilizing microservices to enable independent and efficient development, deployment, and scaling of individual services within the app.

Performance Optimization: Ensuring the app performs efficiently under varying loads, with fast response times and minimal latency.

2. Mobile Framework Evaluation

SuperApps are ecosystems, not individual applications. The evaluation must be based on it

Cost : Due to the numerous factors influencing development costs, they are excluded from this proposal. This document solely presents a technical assessment

Mobile framework decision :

Native? Cross platform or HybridPlatform?

Defining Criteria and priority will be a essential task when we evaluate the framework / platform for our application, below shared some criteria mapping for each priority.

these priority will change depeding on organization needs , but below table shows optimal priority selected for an Super App.

Interpreted Native is best for Super App: Analysis table above show clear winner as Interpreted Native with most of the priority and are in upper range.

3. Glance on best of each mobile framework

Native iOS / Android ?

Disadvantages:

1. All release versions must be distributed through AppStore/PlayStore

2. Users have full control which version to update and use

3. ‘RuntimeLoader` mechanism does not really exist, only allow downloading application components that are available on the AppStore/PlayStore.

4. It does not allow updating ore replacing individual components, to update, you must to through the Store

Flutter or React native?

• In official, Flutter team do not allow dynamic loader at runtime https://github.com/flutter/flutter/issues/14330
• There are unofficial code push services such as Shorebird and Chimera, but they are not as reliable as the official service. https://github.com/ChimeraFlutter
• https://shorebird.dev/

React Native is currently the best choice for developing Super apps.

4.Super App Architecture

1. MiniApp:

• Separate application by modules and based on Business Core SDK for developing screen UI & logic for each module. It’s JsBundle

2. Security Layer:

• Manage mini module app permission
• Verify signature, encrypt data, jsbundle
• Provide Biometric: Fingerprint…

3. Native View:

• Provide common native view to ensure performance: RecycleView, TableView, Canvas view, Chart view..etc…

4. Business CoreService:

• Core service of application, such as Account, Loyalty, Payment..etc

5. JavaScript Runtime:

• In charge of loading mini-apps into the application through Jsbundle packages at runtime
• Management JsBundle, version up…
• Hermes(recommend) or V8/JavaScriptCore

6. Core Service SDK

• Accelerator library for all native resource-intensive use cases
• Pure Native code iOS/Android.
• helps accelerate development by providing core SDK for cross-functional teams.

5.Mini App SDK

Mini app’s consists of all js-code where all business logic of each of module is implemented and shipped regularly as a component or bundle.

• Common UI (Style Kit ): UI elements shared between many modules, ensuring uniformity in theme, font, and color.
• Core Service: Provides an interface that allows mini apps to use the core business logic of the main app.
• Security: Provides the following features: bundle validation, main app validation, checking and requesting permissions to the main app.

Note: Mini apps are not allowed to interact directly with each other, and their interactions are also limited, All Interactions must go through the Main App

Application — Dynamic deployment

we can distribute new Bundle packages using code push in react native.

What’s best bundle server

Developers can use push code without restrictions, as long as they comply with the app store’s guidelines

• https://microsoft.github.io/code-push/faq/index.html
• https://learn.microsoft.com/en-us/appcenter/general/platform-limits

CodePush is a service provided by Microsoft’s App Center that allows React Native developers to deploy mobile app updates directly to their users’ devices. It helps to bypass app store approval processes for minor updates, such as bug fixes, small feature additions, and performance improvements.

Link CodePush SDK:

npx react-native link react-native-code-push

Modify App.js

import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import codePush from 'react-native-code-push';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Welcome to My Sample App with CodePush</Text>
      </View>
      <View style={styles.content}>
        <Text style={styles.contentText}>This is a simple React Native app using CodePush.</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5fcff',
  },
  header: {
    padding: 20,
    backgroundColor: '#6200ee',
  },
  headerText: {
    fontSize: 20,
    color: '#ffffff',
    textAlign: 'center',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  contentText: {
    fontSize: 16,
    color: '#333333',
  },
});

const codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

export default codePush(codePushOptions)(App);

Configure CodePush Keys:

• Obtain your deployment keys from the App Center.
• Add the keys to your app’s configuration in android/app/src/main/res/values/strings.xml for Android and ios/MyApp/AppDelegate.m for iOS.

<!-- android/app/src/main/res/values/strings.xml -->
<string name="CodePushDeploymentKey">YOUR_ANDROID_DEPLOYMENT_KEY</string>

// ios/MyApp/AppDelegate.m
#import <CodePush/CodePush.h>

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
#if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
    return [CodePush bundleURL];
#endif
}

Release an Update:

appcenter codepush release-react -a YOUR_APP_CENTER_OWNER_NAME/YOUR_APP_NAME -d Production

This setup ensures that your app can receive updates instantly without waiting for app store approval, providing a seamless experience for both developers and users.

Open Technical points.

• Mini App & Permission
• Multiple Bundle/Mini apps

Mini App & Permission

App Permission Module:

• Has database to store status of permission of mini-app app permission module will define list permission mini-app can request
• When Mini app request permission, app Permission module will double check on native app to ensure supper app was grant permission and return to Mini app
• MainApp app just work with white list Mini app

Multiple Bundle/Mini apps

• Reference: https://github.com/varunon9/react-native-multiple-bundle