Codegen: bu nima, kod generatsiyasi va Fabric arxitekturasi

Codegen nima?

Codegen (Code Generator so'zining qisqartmasi) — bu React Native tarkibiga kiruvchi buyruq qatori vositasi bo'lib, JavaScript va native platformalar (iOS, Android) o'rtasidagi o'zaro aloqa uchun bog'lovchi kodni avtomatik generatsiya qiladi. Codegen React Native yangi arxitekturasining ajralmas qismidir va u Fabric (renderer) hamda TurboModules (native modullar) uchun ishlatiladi.

Codegen ning asosiy g'oyasi mas'uliyatlarni ajratishdan iborat: dasturchi funksiya “nimani” bajarishi kerakligini (uning imzosini) tasvirlaydi, Codegen esa “qanday” qilib native tomonga uzatilishini generatsiya qiladi. Bu JSI uchun C++ bog'lovchi kodlarini, iOS uchun Objective-C stub-larini va Android uchun Java sinflarini qo'lda yozish zaruratini bartaraf qiladi. Yagona haqiqat manbai — TypeScript spetsifikatsiyasi — barcha darajalarda turlarning mos kelishini kafolatlaydi, bu JS va native kod o'rtasidagi tip mos kelmasligi bilan bog'liq xatolarni bartaraf qiladi.

Codegen React Native yangi arxitekturasining birinchi barqaror versiyasi (0.70+) bilan birga taqdim etildi va shundan beri native modullarni yaratish uchun majburiy vosita bo'ldi. Codegensiz dasturchi JSI Host Objects-larni qo'lda yozishga majbur bo'lar edi, bu esa C++ ni chuqur bilish va JavaScript dvigatellari ichki tuzilishini tushunishni talab qiladi.

Evolyutsiya: qo'lda ko'prikdan avtomatik generatsiyaga

Codegen paydo bo'lishidan oldin, React Native uchun native modulni ishlab chiqish uch bosqichni o'z ichiga olardi: JavaScript interfeysini yozish, native modulni Java/Objective-C da implementatsiya qilish va ko'prikni qo'lda yozish. Metod imzosi o'zgarganda barcha uch faylni sinxron ravishda yangilash kerak edi. Codegen bu rutinni avtomatlashtiradi: o'zgartirishlar faqat TypeScript spetsifikatsiyasiga kiritiladi, qolgan hamma narsa qayta generatsiya qilinadi.

Qurish tizimi bilan integratsiya

Codegen React Native qurish jarayoniga Metro va CocoaPods orqali integratsiyalashadi. Qurish ishga tushirilganda, Codegen TypeScript spetsifikatsiyalarini tahlil qiladi, C++ va platforma fayllarini generatsiya qiladi va ularni build katalogiga joylashtiradi. Bu generatsiya qilingan kod har doim joriy spetsifikatsiyalarga mos kelishini va qo'lda yangilash talab qilinmasligini anglatadi.

Codegen qanday ishlaydi?

Codegen ning ish jarayoni uch bosqichdan iborat: spetsifikatsiyalarni pars qilish, oraliq tasvirni qurish va maqsadli fayllarni generatsiya qilish. Har bir bosqich izolyatsiya qilingan bo'lib, yangi platformalar yoki generatsiya tillarini qo'llab-quvvatlashni osonlik bilan qo'shish imkonini beradi.

Birinchi bosqichda Codegen TypeScript yoki Flow formatidagi spetsifikatsiya fayllarini o'qiydi. Spetsifikatsiya native modul interfeysini tasvirlaydi: metod nomlari, parametr turlari va qaytariladigan qiymatlar. Codegen primitiv turlarni (number, string, boolean), shuningdek murakkab turlarni — obyektlar, massivlar, Promise va Callback-ni qo'llab-quvvatlaydi. Spetsifikatsiyalar loyihaning maxsus katalogida .ts yoki .js kengaytmali fayllarda saqlanadi.

Ikkinchi bosqichda Codegen o'qilgan spetsifikatsiyalardan abstrakt sintaksis daraxtini (AST) quradi. AST ma'lumotlar strukturasini neytral formatda, aniq generatsiya tiliga bog'liq bo'lmagan holda tasvirlaydi. Bu yagona AST dan Fabric uchun C++, iOS uchun Objective-C va Android uchun Java kodini generatsiya qilish imkonini beradi — barcha platformalarni qo'llab-quvvatlash uchun qo'shimcha ish talab qilinmaydi.

Uchinchi bosqichda Codegen maqsadli platforma fayllarini generatsiya qilish uchun shablon dvigatelidan (Mustache asosida) foydalanadi. Har bir shablon aniq fayl turiga javob beradi: C++ sarlavha fayli (.h), implementatsiya (.cpp), Objective-C protokoli (.h) yoki implementatsiya (.mm), Java sinfi. Shablonlar React Native bilan birga keladi, lekin loyihaning o'ziga xos ehtiyojlari uchun moslashtirilishi mumkin.

Codegen ish sxemasi

// NativeCalculator.ts — native modul spetsifikatsiyasi
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')

Ushbu misolda spetsifikatsiya NativeCalculator modulini ikkita metod bilan tasvirlaydi: add va multiply. Ikkalasi ham Double qabul qiladi va Double qaytaradi. TurboModuleRegistry dagi 'NativeCalculator' qatori native tomonda ishlatiladigan modul nomini ko'rsatadi. Codegen ushbu spetsifikatsiya asosida Fabric va TurboModules uchun barcha kerakli fayllarni generatsiya qiladi.

Fabric arxitekturasida Codegen

Fabric (React Native yangi rendereri) kontekstida Codegen alohida rol o'ynaydi. Fabric har bir native UI komponentining JSI orqali yaratilishi va boshqarilishi mumkin bo'lgan C++ tasviriga ega bo'lishini talab qiladi. Codegen bu C++ tasvirlarini komponent spetsifikatsiyalari asosida avtomatik generatsiya qiladi.

UI komponentlari uchun generatsiya

UI komponentlari uchun Codegen nafaqat C++ Shadow Node sinfini, balki platforma tasvirlarini ham generatsiya qiladi. Masalan, iOS da maxsus Button komponenti uchun Codegen komponentni Fabric da ro'yxatdan o'tkazuvchi va uni C++ Shadow Node bilan bog'lovchi Objective-C sinfini yaratadi. Dasturchi faqat komponent xususiyatlarini (rang, o'lcham, ishlovchilar) TypeScript spetsifikatsiyasida tasvirlashi kerak.

Xususiyatlarning tipizatsiyasi

Codegen to'g'ridan-to'g'ri va teskari ma'lumot uzatishni qo'llab-quvvatlaydi. Direct Event (masalan, onPress) JS ga uzatilganda avtomatik seriyalashtiriladigan maydonlarga ega C++ strukturalari sifatida generatsiya qilinadi. EventEmitter native tomonga JS dan so'rovsiz JS ga hodisalar yuborish imkonini beradi. Codegen ikkala yo'nalish uchun tiplangan o'ramlarni generatsiya qilib, maydon nomlari mos kelmasligi xatolarini bartaraf qiladi.

Uchinchi tomon kutubxonalari uchun Codegen

Kutubxona ishlab chiquvchilari Codegen spetsifikatsiyalarini npm paketi bilan birga taqdim etishlari mumkin. Kutubxona o'rnatilganda, Codegen avtomatik ravishda spetsifikatsiyalarni aniqlaydi va joriy platforma uchun bog'lovchi kodni generatsiya qiladi. Bu, ayniqsa, native kutubxonalar uchun muhim, chunki kutubxona foydalanuvchisi C++, Objective-C yoki Java ni bilishi shart emas — TypeScript turlarini import qilish va tayyor komponentlardan foydalanish kifoya.

Codegen qanday fayllarni generatsiya qiladi?

Codegen uchta maqsadli muhit uchun fayllarni generatsiya qiladi: C++ (JSI), Objective-C (iOS) va Java (Android). Har bir fayl qat'iy belgilangan rol va strukturaga ega. Qaysi fayllar yaratilishini tushunish disk raskadrovka qilishda va kerak bo'lganda generatsiya qilingan kodni qo'lda tuzatishda yordam beradi.

C++ fayllari (JSI)

Har bir native modul uchun Codegen ikkita C++ faylini yaratadi: Host Object sinfi deklaratsiyasi bilan sarlavha (.h) va platformada tegishli funksiyalarni chaqiradigan metodlar bilan implementatsiya fayli (.cpp). Sarlavha fayli jsi::HostObject dan meros oladigan sinfni, modul funksiyalariga kirish uchun get metodi bilan birga o'z ichiga oladi. Implementatsiya fayli JS dan chaqirilganda bajarilishni native modulga topshiradigan lambda funksiyalarini o'z ichiga oladi.

iOS fayllari (Objective-C)

iOS uchun Codegen Objective-C protokoli va kategoriyasini generatsiya qiladi. Protokol native modul tomonidan implementatsiya qilinishi kerak bo'lgan metodlarni e'lon qiladi. RCTCxxBridge dagi kategoriya modulni RCTTurboModuleManager da ro'yxatdan o'tkazadigan bog'lovchi kodni o'z ichiga oladi. Bu Objective-C moduli metodlarini C++ JSI dan standart RCTBridge mexanizmi orqali chaqirish imkonini beradi.

Android fayllari (Java)

Android uchun Codegen Java interfeysi va abstrakt sinfni generatsiya qiladi. Interfeys modul metodlarining deklaratsiyalarini to'g'ri Java turlari bilan o'z ichiga oladi. Abstrakt sinf TurboModule interfeysini implementatsiya qiladi va modulni ReactPackage da ro'yxatdan o'tkazish uchun asosiy mantiqni o'z ichiga oladi. Dasturchi ushbu sinfdan meros oladi va faqat metodlarning biznes mantiqini implementatsiya qiladi.

Generatsiya qilingan fayllar strukturasi

// Codegen ishga tushirilgandan keyin katalog tuzilishi
build/
    generated/
        ios/
            NativeCalculatorSpec.h     // Objective-C protokoli
            NativeCalculatorSpec.mm    // JSI implementatsiyasi
        android/
            NativeCalculatorSpec.java  // Java interfeysi
            NativeCalculatorModuleBase.java  // Asosiy sinf
        cxx/
            NativeCalculator.h         // C++ Host Object sarlavhasi
            NativeCalculator.cpp        // C++ JSI implementatsiyasi

Butun bu struktura loyiha qurilishi vaqtida avtomatik yaratiladi. Dasturchi generatsiya qilingan fayllarni tahrir qilmasligi kerak — keyingi qurishda ular qayta yoziladi. Agar modul xatti-harakatini o'zgartirish zarur bo'lsa, o'zgartirishlar faqat native implementatsiyaning manba kodiga (Java/Objective-C) yoki TypeScript spetsifikatsiyasiga kiritiladi.

Codegen ish jarayoni misollari

Codegen bilan to'liq ish siklini Keychain da ma'lumotlarni saqlash uchun native modul yaratish misolida ko'rib chiqamiz. Bu iOS va Android native API lariga kirishni talab qiladigan odatiy vazifadir.

1-qadam: Spetsifikatsiya

Dasturchi KeychainStorage modulining interfeysini tavsiflovchi spetsifikatsiya faylini yaratadi. save va read metodlari satr qabul qiladi va Promise qaytaradi, chunki Keychain bilan ishlash ba'zi platformalarda asinxron bo'lishi mumkin.

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-qadam: Codegen ni ishga tushirish

Codegen React Native loyihasini qurish vaqtida avtomatik ishga tushadi. Agar qo'lda ishga tushirish kerak bo'lsa, npx react-native codegen buyrug'idan foydalaniladi. Codegen spetsifikatsiyani pars qiladi va barcha kerakli fayllarni build/generated/ da yaratadi. Dasturchi generatsiya qilingan C++, Objective-C va Java fayllarini ko'radi, lekin ularni tahrir qilmasligi kerak.

# Codegen ni qo'lda ishga tushir
npx react-native codegen --target-path ./build/generated

# Generatsiyadan so'ng — loyihani qur
npx react-native run-ios
npx react-native run-android

3-qadam: JS da foydalanish

Generatsiya va qurishdan so'ng, dasturchi modulni oddiy TypeScript turi sifatida import qiladi. IDE generatsiya qilingan .d.ts fayllari tufayli metod imzolarini avtomatik taklif qiladi. TypeScript parametr va qaytariladigan qiymat turlarining native implementatsiya bilan mos kelishini kafolatlaydi — agar spetsifikatsiyada string ko'rsatilgan bo'lsa, native tomon aynan satrni oladi.

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')
}

Ushbu misolda JS kodi hech qanday platforma ko'rsatkichini o'z ichiga olmasligi ko'rinadi — iOS va Android uchun bir xil. Barcha platforma spetsifikasi Codegen tomonidan generatsiya qilingan kod ichida yashirilgan. Codegen ko'priklarni yaratish bo'yicha barcha rutin ishni o'z zimmasiga oladi, dasturchiga faqat biznes mantiq va TypeScript orqali tip tekshiruvini qoldiradi.