Bridge cũ (Legacy):
- Gọi native = serialize args thành JSON → đẩy vào queue async → native deserialize → execute → trả result qua queue ngược lại.
- Async-only, batched mỗi 5–10 ms.
- JS không thể giữ tham chiếu trực tiếp tới object native — chỉ giao tiếp qua module ID + method name.
JSI (JavaScript Interface): C++ API exposed bởi engine (Hermes/JSC):
// C++ side — đăng ký function lên JS
jsi::Function::createFromHostFunction(runtime, propName, paramCount,
[](Runtime& rt, const Value& thisVal, const Value* args, size_t count) {
return jsi::Value(42)
})// JS side — gọi như function thường, sync
const result = global.myNativeFn() // = 42Khác biệt cốt lõi:
- Sync call: global.x() chạy ngay, return value ngay, không Promise.
- HostObject / HostFunction: native expose object/function trực tiếp lên global JS.
- Không serialize: truyền tham chiếu object qua C++ — Buffer, ArrayBuffer, String chia sẻ memory.
- Hỗ trợ tất cả engine: Hermes, JSC, V8 (custom build) đều implement JSI interface.
Hệ quả thực tế:
- Reanimated 3 chạy worklet trên UI thread, đọc shared value đồng bộ → animation 120fps.
- VisionCamera gửi frame buffer (camera preview) sang JS không serialize.
- Database adapter (WatermelonDB, Op-SQLite) query 1000 row 10× nhanh hơn AsyncStorage.
- TurboModules dùng JSI cho mọi method call.
Legacy Bridge:
- Calling native = serialize args to JSON → push into an async queue → native deserialize → execute → return via the reverse queue.
- Async-only, batched every 5–10 ms.
- JS cannot hold direct references to native objects — communication is via module id + method name.
JSI (JavaScript Interface): a C++ API exposed by the engine (Hermes/JSC):
// C++ side — register a function on JS
jsi::Function::createFromHostFunction(runtime, propName, paramCount,
[](Runtime& rt, const Value& thisVal, const Value* args, size_t count) {
return jsi::Value(42)
})// JS side — call it synchronously
const result = global.myNativeFn() // = 42Core differences:
- Sync calls: global.x() runs immediately and returns immediately — no Promise.
- HostObject / HostFunction: native exposes objects/functions directly on the JS global.
- No serialization: object references are passed through C++ — Buffer, ArrayBuffer, String share memory.
- Engine-agnostic: Hermes, JSC, custom V8 builds all implement the JSI interface.
Real-world consequences:
- Reanimated 3 runs worklets on the UI thread, reading shared values synchronously → 120 fps animation.
- VisionCamera ships frame buffers (camera preview) to JS without serialization.
- Database adapters (WatermelonDB, Op-SQLite) query 1,000 rows 10x faster than AsyncStorage.
- TurboModules use JSI for every method call.