Turbo Module ใน React Native — คืออะไร การทำงานของ JSI และสถาปัตยกรรม

Turbo Module คืออะไร?

Turbo Module คือส่วนประกอบของสถาปัตยกรรมใหม่ React Native ที่แทนที่ Bridge แบบคลาสสิกสำหรับการสื่อสารระหว่าง JavaScript และโค้ดเนทีฟ แตกต่างจาก Bridge ที่ข้อความทุกข้อความถูกซีเรียลไลซ์เป็น JSON และส่งแบบอะซิงโครนัส Turbo Module ใช้ JSI ซึ่งเป็นเลเยอร์ที่อนุญาตให้ JavaScript เรียกใช้ฟังก์ชันที่เขียนด้วย C++ ได้โดยตรง

สถาปัตยกรรม Turbo Module ถูกนำเสนอโดยทีม Meta ในงาน React Conf 2021 ซึ่งเป็นส่วนหนึ่งของการปรับโครงสร้างครั้งใหญ่ของ React Native ภายใต้รหัส «The New Architecture» นอกเหนือจาก Turbo Module แล้ว สถาปัตยกรรมใหม่ยังรวมถึง Fabric (เรนเดอเรอร์ใหม่), Codegen (เครื่องมือสร้างโค้ด) และ JSI (อินเทอร์เฟซการโต้ตอบ) ส่วนประกอบเหล่านี้ร่วมกันแก้ไขปัญหาประสิทธิภาพที่สะสมใน React Native ตั้งแต่ปี 2015

Turbo Module แก้ปัญหาสำคัญสามประการของโมดูลเนทีฟแบบคลาสสิก: ความไม่ประสานเวลา (การเรียกทั้งหมดต้องผ่านคิว), การซีเรียลไลซ์ (ทุกการเรียกต้องแปลง JSON) และการโหลด (โมดูลทั้งหมดถูกเริ่มต้นเมื่อเริ่มต้นแอป) ด้วย Turbo Module เมธอดเนทีฟจะถูกเรียกแบบ ซิงโครนัส ข้อมูลถูกถ่ายโอนโดยไม่ต้องคัดลอก และโมดูลถูกโหลดตามความต้องการ

JSI ทำงานอย่างไร

JSI (JavaScript Interface) คือ C++ API ที่สร้างเลเยอร์ระหว่างเอนจิน JavaScript (Hermes หรือ JSC) และโค้ดเนทีฟ JSI จัดเตรียมโฮสต์ออบเจ็กต์ — ออบเจ็กต์ C++ ที่ดูเหมือนออบเจ็กต์และเมธอด JavaScript ทั่วไป เมื่อ JavaScript เรียกใช้เมธอดของออบเจ็กต์ดังกล่าว JSI จะดำเนินการโค้ด C++ ที่เกี่ยวข้องโดยตรงโดยไม่ต้องซีเรียลไลซ์และไม่ต้องสลับเธรด

ความแตกต่างหลักระหว่าง JSI และ Bridge คือ ไม่มีการคัดลอกข้อมูล ใน Bridge แต่ละค่าจะถูกซีเรียลไลซ์เป็นสตริง JSON ส่งผ่านคิวและดีซีเรียลไลซ์ JSI ส่งพอยน์เตอร์ไปยังข้อมูลในหน่วยความจำ ทำให้สามารถทำงานกับข้อมูลปริมาณมากได้โดยไม่สูญเสียประสิทธิภาพ จากการทดสอบของ Meta การเรียก JSI ทำงานเร็วกว่าการเรียกเทียบเท่าผ่าน Bridge 5–10 เท่า

HostObject และการเรียกแบบซิงโครนัส

JSI กำหนดอินเทอร์เฟซ HostObject — คลาส C++ ที่ React Native ลงทะเบียนในสภาพแวดล้อม JS เป็นออบเจ็กต์ทั่วไป เมื่อโค้ด JS เข้าถึงคุณสมบัติหรือเรียกใช้เมธอดของ HostObject JSI จะสกัดกั้นการเรียกและดำเนินการโค้ด C++ ซึ่งช่วยให้ดำเนินการแบบซิงโครนัสได้โดยไม่ต้องรอคิวของ Bridge

// ตัวอย่าง JSI HostObject — การเรียกเนทีฟแบบซิงโครนัส
class ImageCompressorHostObject : public jsi::HostObject {

    jsi::Value get(
        jsi::Runtime& rt,
        const jsi::PropNameID& propName
    ) override {
        auto name = propName.utf8(rt);
        if (name == "compressImage") {
            return jsi::Function::createFromHostFunction(
                rt,
                jsi::PropNameID::forUtf8(rt, name),
                2,
                [](jsi::Runtime& rt,
                   const jsi::Value& thisValue,
                   const jsi::Value* args,
                   size_t count) -> jsi::Value {
                    return jsi::Value(rt, compressNative(
                        args[0].asString(rt).utf8(rt),
                        args[1].asNumber()
                    ));
                }
            );
        }
        return jsi::Value::undefined();
    }
};

โค้ดด้านบนแสดงให้เห็นว่า JSI HostObject จัดการการเรียก compressImage จาก JavaScript อย่างไร ฟังก์ชันรับอาร์กิวเมนต์สองตัว (สตริงพาธและหมายเลขคุณภาพ) เรียกฟังก์ชันเนทีฟ compressNative และส่งคืนผลลัพธ์ — ทั้งหมดแบบซิงโครนัส ไม่ต้องใช้ Bridge ไม่ต้องใช้ JSON นี่คือข้อได้เปรียบสำคัญของ JSI เหนือสถาปัตยกรรมดั้งเดิม

JSI เป็นส่วนหนึ่งของ รันไทม์หลักของ React Native และไม่ขึ้นอยู่กับเอนจิน JavaScript เฉพาะใด ๆ มันทำงานได้ทั้งกับ Hermes และ JavaScriptCore (JSC) โดยให้อินเทอร์เฟซแบบรวมสำหรับการโต้ตอบกับสภาพแวดล้อมเนทีฟ

Turbo Module vs Bridge: เปรียบเทียบ

การเปรียบเทียบระหว่าง Turbo Module และ Bridge แสดงให้เห็นวิวัฒนาการของสถาปัตยกรรม React Native Bridge ถูกออกแบบมาสำหรับการเปิดตัว React Native อย่างรวดเร็วในปี 2015 แต่เมื่อความซับซ้อนของแอปพลิเคชันเพิ่มขึ้น ข้อจำกัดของมันก็กลายเป็นปัญหา Turbo Module แก้ไขปัญหาเหล่านี้ในระดับสถาปัตยกรรม

ในทางปฏิบัติ ความแตกต่างจะเห็นได้ชัดที่สุดเมื่อมีการเรียกเมธอดเนทีฟบ่อยครั้ง — เช่น การประมวลผลสื่อหรือการทำงานกับ GPU สำหรับการเรียกที่หายาก (ครั้งละหนึ่งครั้งต่อเซสชัน) ความแตกต่างด้านประสิทธิภาพไม่มีนัยสำคัญ Turbo Module ยังช่วยให้ทำงานกับข้อมูลไบนารีขนาดใหญ่ — รูปภาพ วิดีโอ โปรโตคอลไบนารี — ได้ง่ายขึ้น ซึ่งใน Bridge ต้องใช้วิธีแก้ปัญหาชั่วคราวกับระบบไฟล์

ตัวอย่างการสร้าง Turbo Module

การสร้าง Turbo Module เริ่มต้นด้วยการกำหนดสเปก TypeScript Codegen จะสร้างอินเทอร์เฟซ C++ และสตับ Objective-C/Java โดยอัตโนมัติตามสเปกนี้ ซึ่งเปลี่ยนแปลงแนวทางการพัฒนาอย่างสิ้นเชิง — นักพัฒนาอธิบาย API เพียงครั้งเดียวและ Codegen จะสร้างทุกอย่างอื่น

// ImageCompressor.ts — สเปก Turbo Module
import type { TurboModule } from 'react-native';
import type { Double } from 'react-native/Libraries/Types/CodegenTypes';

export interface Spec extends TurboModule {
  compressImage(
    imagePath: string,
    quality: Double
  ): Promise<string>;
}

การสร้างโค้ดผ่าน Codegen

Codegen วิเคราะห์สเปก TypeScript และสร้าง C++ HostObject, โปรโตคอล Objective-C และอินเทอร์เฟซ Java นักพัฒนาเพียงแค่ต้องimplement ตรรกะเนทีฟเท่านั้น แนวทางนี้รับประกันว่าชนิดข้อมูลในฝั่ง JavaScript และฝั่งเนทีฟจะตรงกันเสมอ ช่วยขจัดข้อผิดพลาดจากการแมปด้วยตนเอง

// การimplement TurboModule สำหรับ iOS (สตับที่สร้างขึ้น)
@interface ImageCompressorModule ()
    RCT_EXPORT_MODULE(ImageCompressor)
@end

@implementation ImageCompressorModule

RCT_EXPORT_METHOD(compressImage:(NSString *)imagePath
                  quality:(NSNumber *)quality
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
    NSData *compressed = [ImageProcessor compressAtPath:imagePath
                                                    quality:quality.doubleValue];
    resolve([NSString stringWithUTF8String:compressed.UTF8String]);
}

@end

ข้อได้เปรียบที่สำคัญคือ การโหลดแบบ Lazy Turbo Module ไม่ได้ถูกเริ่มต้นเมื่อเริ่มต้นแอป แต่จะถูกสร้างขึ้นเมื่อมีการเข้าถึงครั้งแรกจาก JavaScript เท่านั้น ซึ่งช่วยลดเวลาเริ่มต้นแอปได้ 30–50% เมื่อเทียบกับแนวทางดั้งเดิมที่โหลดโมดูลเนทีฟทั้งหมดทันที

การย้ายจาก Bridge ไปยัง Turbo Module

การเปลี่ยนจาก Bridge ไปยัง Turbo Module ไม่จำเป็นต้องเขียนแอปพลิเคชันใหม่ทั้งหมด React Native 0.73+ รองรับสถาปัตยกรรมทั้งสองแบบควบคู่กัน — โมดูล Bridge ยังคงทำงานต่อไป และโมดูลใหม่สามารถสร้างเป็น Turbo Module ได้ ซึ่งช่วยให้สามารถย้ายได้ทีละโมดูลอย่างค่อยเป็นค่อยไป

เพื่อเปิดใช้งานสถาปัตยกรรมใหม่ในโปรเจกต์ React Native 0.76+ ให้ตั้งค่าแฟล็ก newArchEnabled เป็น true ในไฟล์ react-native.config.js หลังจากนั้น โมดูลเนทีฟที่มีอยู่ทั้งหมดยังคงทำงานผ่าน Bridge และโมดูลใหม่สามารถสร้างเป็น Turbo Module ได้ Codegen จัดการทั้งสองตัวเลือกโดยอัตโนมัติ

// react-native.config.js — เปิดใช้งานสถาปัตยกรรมใหม่
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

ขอแนะนำให้เริ่มย้ายจากโมดูลที่ถูกเรียกจาก JavaScript บ่อยที่สุด — โมดูลเหล่านี้จะได้รับประสิทธิภาพเพิ่มขึ้นมากที่สุด โมดูลที่ถูกเรียกน้อยครั้ง (ครั้งละหนึ่งครั้งต่อเซสชัน) สามารถคงไว้บน Bridge ได้โดยไม่สูญเสียประสิทธิภาพอย่างมีนัยสำคัญ

• Codegen — ใช้สเปก TypeScript สำหรับการสร้างอินเทอร์เฟซเนทีฟโดยอัตโนมัติ
• การทดสอบ E2E — ตรวจสอบการทำงานของโมดูลบนสถาปัตยกรรมทั้งสอง โดยเฉพาะหลังอัปเดต React Native
• แผนสำรอง — หากมีปัญหากับ Turbo Module สามารถกลับไปใช้ Bridge ชั่วคราวผ่านแฟล็กการกำหนดค่า