Module 10 — Native Modules & New Architecture

🎯 Mục tiêu học tập

• Hiểu Bridge architecture và tại sao nó là bottleneck
• Hiểu New Architecture: JSI, Fabric, TurboModules, Codegen
• Biết khi nào cần viết Native Module và cách viết cơ bản

📖 Hướng dẫn học

⚡ Ôn nhanh

🧭 Vòng lặp học module này

📚 Lý thuyết chi tiết

1. Old Bridge Architecture

Data flow:

JS Thread                    Bridge                    Native Thread
   |                           |                           |
   |-- JSON.stringify(msg) --> |                           |
   |                           |-- JSON.parse(msg) ------>|
   |                           |                           |
   |                           |<-- JSON.stringify(res) --|
   |<-- JSON.parse(res) ----- |                           |

2. JSI (JavaScript Interface)

// Old Bridge: async, serialized
NativeModules.BatteryModule.getBatteryLevel()
  .then(level => console.log(level));

// New JSI: synchronous, direct
const level = global.__turboModuleProxy.BatteryModule.getBatteryLevel();

3. TurboModules

4. Fabric (New Rendering System)

5. Codegen

Auto-generate native interfaces (Java/ObjC/C++) từ JavaScript/TypeScript type specifications. Đảm bảo type safety giữa JS và native code tại build time.

// JS Spec file: NativeBatteryModule.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  getBatteryLevel(): number;
  isCharging(): boolean;
}

export default TurboModuleRegistry.getEnforcing<Spec>('BatteryModule');

Codegen sẽ generate native interface code từ spec này → compile-time errors nếu native implementation không match.

6. Native Module Authoring

Khi nào cần viết Native Module?

• Platform-specific SDK integration (payment, analytics)
• Bluetooth, NFC, biometrics
• Performance-critical computation (image processing, crypto)
• Access hardware APIs không có JS wrapper

Android (Kotlin) — Basic Pattern

class BatteryModule(reactContext: ReactApplicationContext) :
  ReactContextBaseJavaModule(reactContext) {

  override fun getName() = "BatteryModule"

  @ReactMethod
  fun getBatteryLevel(promise: Promise) {
    val batteryManager = reactApplicationContext
      .getSystemService(Context.BATTERY_SERVICE) as BatteryManager
    val level = batteryManager
      .getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
    promise.resolve(level)
  }
}

iOS (Swift) — Basic Pattern

@objc(BatteryModule)
class BatteryModule: NSObject {
  @objc func getBatteryLevel(
    _ resolve: @escaping RCTPromiseResolveBlock,
    rejecter reject: @escaping RCTPromiseRejectBlock
  ) {
    UIDevice.current.isBatteryMonitoringEnabled = true
    let level = UIDevice.current.batteryLevel
    resolve(Int(level * 100))
  }

  @objc static func requiresMainQueueSetup() -> Bool {
    return false
  }
}

7. NativeEventEmitter

Send events từ native → JS (push-based, không phải request-response).

import { NativeEventEmitter, NativeModules } from 'react-native';

const emitter = new NativeEventEmitter(NativeModules.BatteryModule);

useEffect(() => {
  const subscription = emitter.addListener('BatteryChanged', (event) => {
    setBatteryLevel(event.level);
  });
  return () => subscription.remove();
}, []);

8. Ví dụ thực tế: JS contract trước khi viết native

// BatteryModule.ts
export type BatteryStatus = {
  level: number;
  isCharging: boolean;
};

export interface BatteryModuleApi {
  getStatus(): Promise<BatteryStatus>;
  startObserving(): void;
  stopObserving(): void;
}

// Component chỉ phụ thuộc contract này, không phụ thuộc Android/iOS detail.

Tip: Trước khi viết Kotlin/Swift, chốt API JS/TS trước: method nào async, event nào push lên JS, lỗi trả về format gì, permission được xử lý ở đâu.

❓ Câu hỏi phỏng vấn + Đáp án

🏋️ Bài tập

⚠️ Lỗi thường gặp

🏢 Case đi làm thật

🧠 Ghi nhớ nhanh

❔ Câu hỏi tự kiểm tra

✅ Checklist tự đánh giá

📎 Tài nguyên