54VIE Super App Architecture

Overview

54VIE Super App is built using a Micro-Frontend architecture with Re.Pack's Module Federation. This enables:

• Dynamic Loading: Mini-apps are loaded dynamically at runtime
• Independent Deployment: Each mini-app can be deployed independently
• Shared Dependencies: Common packages are shared between host and mini-apps

┌─────────────────────────────────────────────────────────────┐
│                      54VIE Super App                         │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────┐   │
│  │                    App Host                          │   │
│  │  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐   │   │
│  │  │  Auth   │ │  Nav    │ │ Bridge  │ │Registry │   │   │
│  │  └─────────┘ └─────────┘ └─────────┘ └─────────┘   │   │
│  └─────────────────────────────────────────────────────┘   │
│                            │                                 │
│                     Bridge Protocol                          │
│                            │                                 │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐          │
│  │Dashboard│ │ Booking │ │Shopping │ │  News   │  ...      │
│  │Mini-App │ │Mini-App │ │Mini-App │ │Mini-App │          │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘          │
├─────────────────────────────────────────────────────────────┤
│                    Shared Packages                           │
│  ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐        │
│  │ kit │ │ api │ │analy│ │store│ │devic│ │ ... │        │
│  └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘        │
└─────────────────────────────────────────────────────────────┘

Main Components

1. App Host

App Host is the main React Native application, responsible for:

• Authentication: Managing login, tokens, sessions
• Navigation: Routing between screens and mini-apps
• Bridge Handlers: Processing requests from mini-apps
• Mini-Program Registry: Managing the list of mini-apps from backend

// App Host Structure
app-host/
├── src/
│   ├── auth/              # Authentication module
│   │   ├── services/      # AuthService, SSOService, BiometricService
│   │   ├── hooks/         # useAuth, useSSO, useBiometric
│   │   └── utils/         # TokenManager, SessionManager
│   │
│   ├── providers/
│   │   └── AppProviders   # Root providers + 17 bridge handlers
│   │
│   ├── services/
│   │   ├── MiniProgramRegistry  # Dynamic mini-program fetching
│   │   └── BundleManager        # Bundle download & extraction
│   │
│   └── components/
│       └── MiniProgramLoader    # Dynamic mini-app loading

2. Mini-App System

miniapp-sdk

SDK providing APIs for mini-apps to communicate with the host:

import {
  useHostAuth,      // Authentication state
  useHostDevice,    // Device info
  useHostNetwork,   // Network status
  storage,          // Persistent storage
  analytics,        // Event tracking
  push,             // Push notifications
} from '@54vie/miniapp-sdk';

miniapp-runtime

Runtime managing the lifecycle of mini-apps:

• Loading: Loading mini-app bundles
• Lifecycle: Mounting/unmounting mini-apps
• Bridge: Handling communication between mini-app and host
• Permissions: Managing access permissions

3. Shared Packages

Package	Function
@54vie/core	Shared dependencies, presets
@54vie/kit	UI components, theme
@54vie/api	HTTP client, caching, WebSocket
@54vie/analytics	Event tracking, A/B testing
@54vie/storage	MMKV persistent storage
@54vie/device	Device info, network, haptics
@54vie/location	Geolocation, geocoding
@54vie/media	Camera, gallery, processing
@54vie/push	FCM/APNs, local notifications

Module Federation

How It Works

1. Build time: Each mini-app is built as a remote module
2. Runtime: Host app loads mini-apps dynamically from CDN or locally

// rspack.config.mjs (Host)
new Repack.plugins.ModuleFederationPluginV2({
  name: 'host',
  shared: {
    react: { singleton: true },
    'react-native': { singleton: true },
    '@54vie/kit': { singleton: true },
    // ... other shared packages
  },
})

// rspack.config.mjs (Mini-app)
new Repack.plugins.ModuleFederationPluginV2({
  name: 'dashboard',
  exposes: {
    './App': './src/App.tsx',
  },
  shared: { /* same as host */ },
})

Dynamic Loading

// MiniProgramLoader.tsx
const MiniProgramLoader = ({ appId }) => {
  // 1. Fetch mini-program info from registry
  const info = await MiniProgramRegistry.getMiniProgram(appId);

  // 2. Download bundle if needed
  await BundleManager.installBundle(info);

  // 3. Load remote module
  const App = await loadRemote(`${appId}/App`);

  // 4. Render
  return <App />;
};

Bridge Protocol

Host and mini-apps communicate via serviceRouter:

// Host: Register handler
serviceRouter.register('storage', {
  get: async ({ key }) => storage.get(key),
  set: async ({ key, value }) => storage.set(key, value),
});

// Mini-app: Call via SDK
import { storage } from '@54vie/miniapp-sdk';
const value = await storage.get('my-key');

Available Bridge Services

Service	Methods
auth	getUser, isAuthenticated, getAccessToken, requestLogin
storage	get, set, remove, clear
api	request, registerApi, unregisterApi
analytics	track, screen
push	getToken, requestPermission, scheduleNotification
device	getInfo, getDeviceId, isEmulator
network	isOnline, getConnectionType
location	getCurrentPosition, geocode
media	takePhoto, pickImage, cropImage
ui	showToast, showAlert, showActionSheet
haptics	impact, notification, selection
clipboard	getString, setString
share	text, image

Data Flow

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Mini-App   │────▶│   Bridge    │────▶│    Host     │
│             │     │  Protocol   │     │   Handler   │
└─────────────┘     └─────────────┘     └─────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────┐
│                  Native Services                     │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐   │
│  │ Storage │ │ Camera  │ │Location │ │  Push   │   │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘   │
└─────────────────────────────────────────────────────┘

Security

Permission System

Mini-apps must declare permissions in their manifest:

{
  "appId": "com.54vie.shopping",
  "permissions": [
    "storage",
    "location",
    "camera"
  ]
}

Token Isolation

• Each mini-app has its own namespace for storage
• Access tokens are injected via bridge, not directly exposed
• API requests are proxied through the host with rate limiting

Performance Optimizations

1. Bundle Caching: Mini-app bundles are cached locally
2. Lazy Loading: Mini-apps are only loaded when needed
3. Shared Dependencies: React, React Native are shared
4. Preloading: Popular mini-apps can be preloaded