• Maximize the ability to distribute
• Balance performance
• Establish well separated / stable / sustainable boundary

• Development costs depend on many different factors, so they are not included in proposal. This document only provides a technical assessment.
• SuperApps are ecosystems, not individual applications. The evaluation must be based on it

• Native: IOS native, Android native
• Interpreted Native: Flutter, React native…
• Web Hybrid: Cordova, Ionic…

=> Interpreted Native is best for Super App

• All release versions must be distributed through AppStore/PlayStore
• Users have full control which version to update and use
• ‘RuntimeLoader` mechanism does not really exist, only allow downloading application components that are available on the AppStore/PlayStore.
• It does not allow updating ore replacing individual components, to update, you must to through the Store

• In official, Flutter team do not allow dynamic loader at runtime flutter/flutter#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. React native is best choice for runtime loader & environment for running miniApp

To be precise, React Native is the most suitable choice for the MiniApp runtime environment.

• Architectural Agility: Development teams typically do not choose an app’s architecture with full awareness of longer-term requirements. But new requirements invariably emerge based on changing business needs, or previously unanticipated requirements surface that are suddenly a high priority. When this happens, development teams might find that the current chosen architecture fails to meet these evolving requirements. Some architecture profiles can absorb these shifts in requirements more easily than others. For example, web hybrid apps enable most application logic to be changed without app store approval, and — subject to app store terms and conditions — allow for better integration with CI/CD pipelines.
• Super apps are not built entirely on React Native. This is a Native application, but there are some modules that allow loading miniapp runtime - as multi-modules, multi-features
• In this time, we have chosen React Native as our runtime environment. And we can completely add other runtime modules in the future through Dynamic Features. Such as Flutter, Unity..etc

Mechanism for distributing new Bundle packages

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

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
• JS Bundle Loader: Management JsBundle, version up…
• Hermes(recommend) or V8/JavaScriptCore

Use for vendors to develop their mini apps

• Common UI: 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

• Integration with existing app
• Mini App & Permission
• Multiple Bundle/Mini apps
• Move special engines(Unity, React native) to Dynamic features
• MiniApps & MainApp Trust Mechanism
• T.B.D

• Reference: https://reactnative.dev/docs/integration-with-existing-apps​

• 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

• https://github.com/varunon9/react-native-multiple-bundle
• https://re-pack.dev/

• JS Runtime module: Mini app runtime environment(React Native, Flutter, Unity..etc)
• Dynamic Feature module: Downloaded on demand through the Dynamic Feature mechanism of Android
• Static module: Pre-installed when installing the app from the store

Note: Special engines such as ReactNative, Flutter, Unity, etc., need to be placed in dynamic features, not added directly to the App Module.

• Reference: https://github.com/baka3k/super-app/tree/main/feature/feature_react

• Do NOT use GuardedAsyncTask(com.facebook.react.bridge.GuardedAsyncTask)
  • AsyncTask is Deprecated
  • Can not cancel, may be block other task if thread pool is full
• Apply Coroutine - Kotlin / Java – Executors
• Allow a maximum of 1 thread for each module

• Permission types
  • Normal permission
  • Dangerous permission
  • Temporary permission
• Permission groups

Need to be considered for balance:

• Volume of components
• Complexity of dependencies
• Technical feasibility, quality of available resources, and deployment time

Required to strictly comply with DI

Recommended development steps for developers who want to develop a super app from an existing app

• IDE: Android Studio Jellyfish | 2023.3.1 Canary 6
• Android Gradle Plugin: 8.2.1
• React: 0.73.2
• Hermes: 0.64.2

Before using the Runtime Loader module, you'll need to install the necessary Node module.

cd baka3k-react-native
npm install

• Obtain an Access key from https://developer.themoviedb.org/docs/getting-started.
• Update the MOVIEDB_ACCESS_KEY value in the secrets.defaults.properties file.