Codegen: คืออะไร การสร้างโค้ด และสถาปัตยกรรม Fabric

Codegen คืออะไร?

Codegen (ย่อมาจาก Code Generator) เป็นยูทิลิตี้บรรทัดคำสั่งที่รวมอยู่ใน React Native ซึ่งสร้างโค้ดเชื่อมต่อสำหรับการโต้ตอบระหว่าง JavaScript และแพลตฟอร์มเนทีฟ (iOS, Android) โดยอัตโนมัติ Codegen เป็นส่วนสำคัญของสถาปัตยกรรม React Native ใหม่และใช้ทั้งสำหรับ Fabric (เรนเดอเรอร์) และ TurboModules (โมดูลเนทีฟ)

แนวคิดหลักของ Codegen คือการแยกความรับผิดชอบ: นักพัฒนาอธิบายว่าฟังก์ชันควร «ทำอะไร» (ลายเซ็นของมัน) และ Codegen สร้างว่าจะ «ส่งผ่าน» ไปยังฝั่งเนทีฟอย่างไร ซึ่งช่วยลดความจำเป็นในการเขียน wrapper C++ สำหรับ JSI, stub Objective-C สำหรับ iOS และคลาส Java สำหรับ Android ด้วยตนเอง แหล่งความจริงเดียว — ข้อกำหนด TypeScript — รับประกันว่าชนิดข้อมูลตรงกันในทุกระดับ ซึ่งขจัดข้อผิดพลาดทั้งคลาสที่เกี่ยวข้องกับความไม่ตรงกันของชนิดระหว่าง JS และโค้ดเนทีฟ

Codegen เปิดตัวพร้อมกับเวอร์ชันเสถียรแรกของสถาปัตยกรรม React Native ใหม่ (0.70+) และตั้งแต่นั้นมาก็กลายเป็นเครื่องมือบังคับสำหรับการสร้างโมดูลเนทีฟ หากไม่มี Codegen นักพัฒนาจะต้องเขียน JSI Host Objects ด้วยตนเอง ซึ่งต้องใช้ความรู้เชิงลึกเกี่ยวกับ C++ และความเข้าใจโครงสร้างภายในของ เอนจิน JavaScript

วิวัฒนาการ: จากบริดจ์แบบManualสู่การสร้างอัตโนมัติ

ก่อน Codegen การพัฒนาโมดูลเนทีฟสำหรับ React Native มีสามขั้นตอน: การเขียนอินเทอร์เฟซ JavaScript, การใช้งานโมดูลเนทีฟใน Java/Objective-C และการเขียนบริดจ์ด้วยตนเอง เมื่อลายเซ็นของเมธอดเปลี่ยนไป ไฟล์ทั้งสามต้องได้รับการอัปเดตพร้อมกัน Codegen ทำให้ขั้นตอนประจำนี้เป็นอัตโนมัติ: การเปลี่ยนแปลงจะทำเฉพาะในข้อกำหนด TypeScript และทุกอย่างอื่นจะถูกสร้างขึ้นใหม่

การรวมเข้ากับระบบบิลด์

Codegen ผสานรวมเข้ากับกระบวนการบิลด์ของ React Native ผ่าน Metro และ CocoaPods เมื่อเริ่มต้นบิลด์ Codegen จะวิเคราะห์ข้อกำหนด TypeScript สร้างไฟล์ C++ และแพลตฟอร์ม และวางไว้ใน ไดเรกทอรีบิลด์ ซึ่งหมายความว่าโค้ดที่สร้างขึ้นจะตรงกับข้อกำหนดปัจจุบันเสมอและไม่ต้องการการอัปเดตด้วยตนเอง

Codegen ทำงานอย่างไร?

ขั้นตอนการทำงานของ Codegen ประกอบด้วยสามขั้นตอน: การแยกวิเคราะห์ข้อกำหนด, การสร้างการแสดงผลระดับกลาง และการสร้างไฟล์เป้าหมาย แต่ละขั้นตอนถูกแยกออกจากกัน ซึ่งช่วยให้เพิ่มการรองรับแพลตฟอร์มใหม่หรือภาษาในการสร้างได้ง่าย

ในขั้นตอนแรก Codegen จะอ่านไฟล์ข้อกำหนดในรูปแบบ TypeScript หรือ Flow ข้อกำหนดจะอธิบายอินเทอร์เฟซของโมดูลเนทีฟ: ชื่อเมธอด, ชนิดพารามิเตอร์ และชนิดที่ส่งคืน Codegen รองรับชนิดพื้นฐาน (number, string, boolean) รวมถึงชนิดที่ซับซ้อน — ออบเจกต์, อาร์เรย์, Promise และ Callback ข้อกำหนดจะถูกเก็บไว้ในไฟล์ .ts หรือ .js ในไดเรกทอรีพิเศษของโปรเจกต์

ในขั้นตอนที่สอง Codegen จะสร้างแผนผังไวยากรณ์นามธรรม (AST) จากข้อกำหนดที่แยกวิเคราะห์แล้ว AST แสดงถึงโครงสร้างข้อมูลในรูปแบบที่เป็นกลางซึ่งไม่ยึดติดกับภาษาในการสร้างใดโดยเฉพาะ ซึ่งช่วยให้สร้างโค้ด C++ สำหรับ Fabric, Objective-C สำหรับ iOS และ Java สำหรับ Android จาก AST เดียว — ไม่จำเป็นต้องทำงานเพิ่มเติมเพื่อรองรับทุกแพลตฟอร์ม

ในขั้นตอนที่สาม Codegen ใช้เอนจินเทมเพลต (บนพื้นฐาน Mustache) เพื่อสร้างไฟล์ของแพลตฟอร์มเป้าหมาย แต่ละเทมเพลตรับผิดชอบไฟล์ประเภทใดประเภทหนึ่ง: ส่วนหัว C++ (.h), การนำไปใช้ (.cpp), โปรโตคอล Objective-C (.h) หรือการนำไปใช้ (.mm), คลาส Java เทมเพลต มาพร้อมกับ React Native แต่สามารถปรับแต่งตามความต้องการเฉพาะของโปรเจกต์ได้

แผนภาพการทำงานของ Codegen

// NativeCalculator.ts — native module specification
import { TurboModule, TurboModuleRegistry } from 'react-native'
import { Double } from 'react-native/Libraries/Types/CodegenTypes'

export interface NativeCalculatorSpec extends TurboModule {
    add(a: Double, b: Double): Double
    multiply(a: Double, b: Double): Double
}

export default TurboModuleRegistry.<NativeCalculatorSpec>('NativeCalculator')

ในตัวอย่างนี้ ข้อกำหนดอธิบายโมดูล NativeCalculator ด้วยสองเมธอด: add และ multiply ทั้งสองรับ Double และส่งคืน Double สตริง 'NativeCalculator' ใน TurboModuleRegistry ระบุชื่อโมดูลที่จะใช้บนฝั่งเนทีฟ Codegen จากข้อกำหนดนี้จะสร้างไฟล์ที่จำเป็นทั้งหมดสำหรับ Fabric และ TurboModules

Codegen ในสถาปัตยกรรม Fabric

ในบริบทของ Fabric (เรนเดอเรอร์ React Native ใหม่) Codegen มีบทบาทพิเศษ Fabric ต้องการให้ทุกคอมโพเนนต์ UI เนทีฟมีการแสดงผลในรูปแบบ C++ ที่สามารถสร้างและจัดการผ่าน JSI ได้ Codegen สร้างการแสดงผล C++ เหล่านี้โดยอัตโนมัติตามข้อกำหนดของคอมโพเนนต์

การสร้างสำหรับคอมโพเนนต์ UI

สำหรับคอมโพเนนต์ UI Codegen ไม่เพียงสร้างคลาส Shadow Node ใน C++ แต่ยังสร้างการแสดงผลเฉพาะแพลตฟอร์มอีกด้วย ตัวอย่างเช่น สำหรับคอมโพเนนต์ Button ที่กำหนดเองบน iOS Codegen จะสร้างคลาส Objective-C ที่ลงทะเบียนคอมโพเนนต์ใน Fabric และเชื่อมโยงกับ Shadow Node ใน C++ นักพัฒนาเพียงแค่ต้องอธิบายคุณสมบัติของคอมโพเนนต์ (สี, ขนาด, ตัวจัดการ) ในข้อกำหนด TypeScript

การกำหนดชนิดของคุณสมบัติ

Codegen รองรับการถ่ายโอนข้อมูลทั้งแบบตรงและย้อนกลับ อีเวนต์โดยตรง (เช่น onPress) จะถูกสร้างเป็นโครงสร้าง C++ ที่มีฟิลด์ซึ่งจะถูกทำให้เป็นอนุกรมโดยอัตโนมัติเมื่อส่งไปยัง JS EventEmitter อนุญาตให้ฝั่งเนทีฟส่งอีเวนต์ไปยัง JS โดยไม่ต้องมีการร้องขอจาก JS Codegen สร้าง wrapper ที่มีชนิดสำหรับทั้งสองทิศทาง ขจัดข้อผิดพลาดจากความไม่ตรงกันของชื่อฟิลด์

Codegen สำหรับไลบรารีของบุคคลที่สาม

นักพัฒนาไลบรารีสามารถส่งข้อกำหนด Codegen ไปพร้อมกับแพ็กเกจ npm ของพวกเขา เมื่อติดตั้งไลบรารี Codegen จะตรวจจับข้อกำหนดโดยอัตโนมัติและสร้างโค้ดเชื่อมต่อสำหรับแพลตฟอร์มปัจจุบัน ซึ่งสำคัญอย่างยิ่งสำหรับ ไลบรารีเนทีฟ เนื่องจากผู้ใช้ไลบรารีไม่จำเป็นต้องเข้าใจ C++, Objective-C หรือ Java — เพียงนำเข้าชนิด TypeScript และใช้คอมโพเนนต์ที่พร้อมใช้งาน

Codegen สร้างไฟล์อะไรบ้าง?

Codegen สร้างไฟล์สำหรับสามสภาพแวดล้อมเป้าหมาย: C++ (JSI), Objective-C (iOS) และ Java (Android) แต่ละไฟล์มีบทบาทและโครงสร้างที่กำหนดไว้อย่างเคร่งครัด การทำความเข้าใจว่าไฟล์ใดถูกสร้างขึ้นช่วยในการดีบักและหากจำเป็นในการปรับแต่งโค้ดที่สร้างขึ้นด้วยตนเอง

ไฟล์ C++ (JSI)

สำหรับแต่ละโมดูลเนทีฟ Codegen จะสร้างไฟล์ C++ สองไฟล์: ไฟล์ส่วนหัว (.h) พร้อมการประกาศคลาส Host Object และไฟล์การนำไปใช้ (.cpp) พร้อมเมธอดที่เรียกใช้ฟังก์ชันที่เกี่ยวข้องบนแพลตฟอร์ม ไฟล์ส่วนหัวประกอบด้วยคลาสที่สืบทอดจาก jsi::HostObject พร้อมเมธอด get ที่ถูกแทนที่เพื่อเข้าถึงฟังก์ชันของโมดูล ไฟล์การนำไปใช้ ประกอบด้วยฟังก์ชันแลมบ์ดาที่เมื่อถูกเรียกจาก JS จะมอบหมายการทำงานให้กับโมดูลเนทีฟ

ไฟล์ iOS (Objective-C)

สำหรับ iOS Codegen จะสร้างโปรโตคอล Objective-C และหมวดหมู่ โปรโตคอลประกาศเมธอดที่ต้องถูกนำไปใช้โดยโมดูลเนทีฟ หมวดหมู่บน RCTCxxBridge มีโค้ดเชื่อมต่อที่ลงทะเบียนโมดูลใน RCTTurboModuleManager ซึ่งอนุญาตให้เรียกใช้เมธอดของโมดูล Objective-C จาก C++ JSI ผ่านกลไกมาตรฐาน RCTBridge

ไฟล์ Android (Java)

สำหรับ Android Codegen จะสร้างอินเทอร์เฟซ Java และคลาสนามธรรม อินเทอร์เฟซประกอบด้วยการประกาศเมธอดพร้อมชนิด Java ที่ถูกต้อง คลาสนามธรรมนำไปใช้อินเทอร์เฟซ TurboModule และมีตรรกะพื้นฐานสำหรับการลงทะเบียนโมดูลใน ReactPackage นักพัฒนาสืบทอดจากคลาสนี้และนำไปใช้เฉพาะตรรกะทางธุรกิจของเมธอดเท่านั้น

โครงสร้างไฟล์ที่สร้างขึ้น

// Directory structure after Codegen run
build/
    generated/
        ios/
            NativeCalculatorSpec.h     // Objective-C protocol
            NativeCalculatorSpec.mm    // JSI implementation
        android/
            NativeCalculatorSpec.java  // Java interface
            NativeCalculatorModuleBase.java  // Base class
        cxx/
            NativeCalculator.h         // C++ Host Object header
            NativeCalculator.cpp        // C++ JSI implementation

โครงสร้างทั้งหมดนี้ถูกสร้างขึ้นโดยอัตโนมัติระหว่างการบิลด์โปรเจกต์ นักพัฒนาไม่ควรแก้ไขไฟล์ที่สร้างขึ้น — ไฟล์เหล่านั้นจะถูกเขียนทับในการบิลด์ครั้งถัดไป หากจำเป็นต้องเปลี่ยนพฤติกรรมของโมดูล การเปลี่ยนแปลงจะทำเฉพาะในซอร์สโค้ดของการนำไปใช้เนทีฟ (Java/Objective-C) หรือใน ข้อกำหนด TypeScript

ตัวอย่างขั้นตอนการทำงานของ Codegen

มาดูขั้นตอนการทำงานทั้งหมดของ Codegen โดยการสร้างโมดูลเนทีฟสำหรับจัดเก็บข้อมูลใน Keychain ซึ่งเป็นงานทั่วไปที่ต้องเข้าถึง API เนทีฟของ iOS และ Android

ขั้นตอนที่ 1: ข้อกำหนด

นักพัฒนาสร้างไฟล์ข้อกำหนดที่อธิบายอินเทอร์เฟซของโมดูล KeychainStorage เมธอด save และ read รับสตริงและส่งคืน Promise เนื่องจากการทำงานกับ Keychain อาจเป็นแบบอะซิงโครนัสบนบางแพลตฟอร์ม

import { TurboModule, TurboModuleRegistry } from 'react-native'

export interface KeychainStorageSpec extends TurboModule {
    save(key: string, value: string): Promise<void>
    read(key: string): Promise<string | null>
    delete(key: string): Promise<boolean>
}

export default TurboModuleRegistry.<KeychainStorageSpec>('KeychainStorage')

ขั้นตอนที่ 2: การเรียกใช้ Codegen

Codegen ทำงานโดยอัตโนมัติเมื่อบิลด์โปรเจกต์ React Native หากต้องการเรียกใช้ด้วยตนเอง จะใช้คำสั่ง npx react-native codegen Codegen แยกวิเคราะห์ข้อกำหนดและสร้างไฟล์ที่จำเป็นทั้งหมดใน build/generated/ นักพัฒนาเห็นไฟล์ C++, Objective-C และ Java ที่สร้างขึ้น แต่ไม่ควรแก้ไข

# Run Codegen manually
npx react-native codegen --target-path ./build/generated

# After generation — build the project
npx react-native run-ios
npx react-native run-android

ขั้นตอนที่ 3: การใช้งานใน JS

หลังจากการสร้างและบิลด์ นักพัฒนาจะนำเข้าโมดูลเป็นชนิด TypeScript ปกติ IDE จะแนะนำลายเซ็นของเมธอดโดยอัตโนมัติด้วยไฟล์ .d.ts ที่สร้างขึ้น TypeScript รับประกันว่าชนิดของพารามิเตอร์และค่าที่ส่งคืนตรงกับการนำไปใช้เนทีฟ — หากข้อกำหนดระบุ string ฝั่งเนทีฟจะได้รับสตริงอย่างแน่นอน

import KeychainStorage from './NativeKeychainStorage'

async function storeToken(token: string) {
    await KeychainStorage.save('auth_token', token)
}

async function getToken(): Promise<string | null> {
    return KeychainStorage.read('auth_token')
}

ตัวอย่างนี้แสดงให้เห็นว่าโค้ด JS ไม่มีคำแนะนำเฉพาะแพลตฟอร์มใด ๆ — เหมือนกันสำหรับ iOS และ Android รายละเอียดเฉพาะแพลตฟอร์มทั้งหมดถูกซ่อนอยู่ภายในโค้ดที่สร้างโดย Codegen Codegen จัดการงานประจำทั้งหมดในการสร้างบริดจ์ โดยเหลือไว้ให้นักพัฒนาเพียงตรรกะทางธุรกิจและการตรวจสอบชนิดผ่าน TypeScript