JSI: bu nima, ishlash prinsipi va arxitekturasi

JSI nima?

JSI (JavaScript Interface) — bu JavaScript dvigateliga (Hermes, JavaScriptCore, V8) C++ obyektlari, funksiyalari va xotirasiga to'g'ridan-to'g'ri kirish imkonini beruvchi C++ qatlamidir. Cha'qiruvlarni JSON ga serializatsiya qiluvchi va ularni asinxron navbat orqali uzatuvchi Bridge'dan farqli o'laroq, JSI JS kodiga C++ metodlarini sinxron chaqirish va natijani darhol olish imkonini beradi.

JSI React Native 0.64 da yangi arxitekturaning (New Architecture) bir qismi sifatida taqdim etilgan. Asosiy maqsad Bridge bo'lgan tor joyni bartaraf etish edi: JS va native kod o'rtasidagi har bir o'zaro ta'sir serializatsiya, deserializatsiya va xabarlar navbati orqali uzatishga vaqt sarfladi. JSI bu muammoni jsi::Value, jsi::Object va jsi::Function interfeysini amalga oshiruvchi o'ramlar orqali JS dvigateliga C++ obyektlariga to'g'ridan-to'g'ri kirishni ta'minlab hal qiladi.

JSI Bridge'ning „bir-bir” o'rnini bosuvchi emas — bu integratsiyaga tubdan boshqacha yondashuvdir. Bridge pochta qutisi kabi ishladi: JS xabar yubordi, u navbatdan o'tdi, native tomon uni qayta ishladi va javob yubordi. JSI ko'rsatkich kabi ishlaydi: JS C++ obyektiga havola oladi va uning metodlarini oddiy JS funksiyalari kabi sinxron chaqirishi mumkin. Bu ikki muhitning o'zaro ta'siri arxitekturasidagi tub farqdir.

Yaratilish tarixi

JSI ga ehtiyoj 2015 yilgi React Native-da yaratilgan original Bridge cheklovlaridan kelib chiqdi. Framewirkning mashhurligi oshishi va ilovalar murakkablashishi bilan unumdorlik muammosi aniq bo'ldi: native modulning har bir chaqiruvi serializatsiya uchun kamida 3–5 ms talab qildi. Sensor qiymatini o'qish yoki ekran o'lchamini olish kabi oddiy operatsiyalar uchun bu maqbul edi, ammo animatsiyalar, grafik bilan ishlash va ma'lumotlar oqimini qayta ishlash uchun — tangidiy. React Native jamoasi 2019 yilda yangi arxitektura ustida ish boshladi va JSI uning asosiga aylandi.

JavaScript dvigatellarini qo'llab-quvvatlash

JSI JavaScript dvigatellari ustidagi abstraksiya sifatida ishlab chiqilgan. U har bir aniq dvigatel uchun amalga oshiriladigan yagona C++ API ni ta'minlaydi: Hermes, JavaScriptCore (iOS), V8 (Android). Bu shuni anglatadiki, dasturchi dvigatellar orasidagi farqlar haqida qayg'urmasligi kerak — Fabric va TurboModules qaysi JS dvigatelidan foydalanilishidan qat'i nazar, bir xil ishlaydi.

JSI qanday ishlaydi?

JSI asosida Host Objects tushunchasi yotadi — JS muhitiga native JS obyektlari sifatida eksport qilinadigan C++ obyektlari. JS kodi bunday obyektning xususiyati yoki metodiga murojaat qilganda, JSI chaqiruvni tutib oladi va uni tegishli C++ metodiga topshiradi. Bu sinxron, bir xil ipda, kontekstni almashtirmasdan va JSON qatori uchun xotira ajratmasdan sodir bo'ladi.

Har bir Host Object get, set va getPropertyNames metodlari bilan jsi::HostObject interfeysini amalga oshiradi. JS dvigateli obyektning xususiyatlariga har bir murojaatda ushbu metodlarni chaqiradi. Masalan, JS da NativeModule.someMethod() chaqirilganda, JSI bu chaqiruvni Host Object ning tegishli metodining C++ chaqiruviga aylantiradi. Qaytarilgan qiymat JS ga jsi::Value sifatida uzatiladi — sonni, qatorni, boolean qiymatni, obyektni yoki undefined ni ifodalashi mumkin bo'lgan umumlashtirilgan tur.

JSI ning muhim xususiyati — xabarlar navbatining yo'qligi. Bridge asinxron navbatdan foydalangan: JS so'rov yuborgan, boshqa vazifalarga o'tgan, native tomon so'rovni qayta ishlagan va natija callback orqali qaytgan. JSI sinxron ishlaydi: agar JS JSI orqali native modulning metodini chaqirsa, JS kodining bajarilishi natija olinmaguncha to'xtatiladi. Bu mantiqni soddalashtiradi (callbacklarni kutish shart emas) va race conditionsni yo'q qiladi, ammo ehtiyotkorlik talab qiladi — uzoq sinxron chaqiruvlar JS ipini bloklaydi.

JSI qiymatlarining hayot aylanishi

JSI orqali yaratilgan qiymatlar JS dvigatelining bajarilish muhitida yashaydi va axlat yig'uvchi tomonidan boshqariladi. C++ kodi jsi::String yoki jsi::Object yaratib, uni JS ga qaytarganda, muhit avtomatik ravishda xotirani boshqaradi. Agar C++ kodi chaqiruvlar orasida JS qiymatiga havolani saqlamoqchi bo'lsa, jsi::Value::getWeak() yoki runtime ning ildiz obyektida havolani saqlovchi global jsi::Object::setProperty dan foydalanadi. Bu axlat yig'uvchi tomonidan muddatidan oldin o'chirilishning oldini oladi.

Ip xavfsizligi

JSI sukut bo'yicha ip xavfsiz emas. Barcha JSI metod chaqiruvlari JS bajariladigan ipdan (odatda bu React Native JS ipi) kelishi kerak. Agar native modul alohida ipda fon ishini ishga tushirsa, natija TurboModules dan runOnJS chaqiruvi orqali JS ipi orqali qaytarilishi kerak. Bu cheklov sinxronlik va serializatsiyaning yo'qligi uchun narxdir.

JSI vs Bridge: taqqoslash

JSI va Bridge o'rtasidagi farq fundamental xarakterga ega va JS ning native kod bilan o'zaro ta'sirining barcha jihatlariga ta'sir qiladi. Bridge asinxron edi, ma'lumotlarni JSON ga serializatsiya qilgan va xabarlar navbatidan foydalangan; JSI sinxrondir, native havolalar bilan ishlaydi va serializatsiya talab qilmaydi.

React Native Team ma'lumotlariga ko'ra, Facebook Marketplace ilovasida Bridge'dan JSI ga migratsiya ishga tushirish vaqtini 35% ga qisqartirdi va JS va native tomon o'rtasida ma'lumotlarning takrorlanishini bartaraf etish orqali xotira sarfini 20% ga kamaytirdi.

Bridge qachon zarur edi

Bridge „xato” emas edi — bu 2015 yilda React Native yaratilishida asoslangan arxitektura qarori edi. Turli tillarga ega ikki platforma uchun native ishlanma universal almashinuv formatini talab qildi. JSON serializatsiya formati sifatida barcha platformalarda mavjud edi va o'zaro ta'sirni birlashtirishga imkon berdi. Muammo keyinroq, React Native soniyada minglab native modul chaqiruvlari bo'lgan murakkab ilovalar uchun ishlatila boshlaganda yuzaga keldi.

Orqaga qarab muvofiqlik

React Native orqaga qarab muvofiqlikni saqlaydi: Bridge uchun yozilgan native modullar muvofiqlik qatlami orqali yangi arxitekturada ishlashda davom etadi. Biroq, yangi modullar uchun darhol TurboModules orqali JSI dan foydalanish tavsiya etiladi. Mavjud modullarning migratsiyasi modulning o'z biznes mantig'ini o'zgartirmasdan o'zaro ta'sir protokolini almashtirishdan iborat.

JSI React Native arxitekturasida

JSI yangi React Native arxitekturasining barcha komponentlari qurilgan asosiy qatlamdir. JSI bo'lmasa, na Fabric (yangi renderer), na TurboModules (optimallashtirilgan native modullar) ishlay olmaydi. JSI barcha darajalarda JS va C++ o'rtasida o'zaro ta'sirning yagona usulini ta'minlaydi.

Fabric va JSI

Fabric — C++ UI tasvirlariga sinxron kirish uchun JSI dan foydalanadigan yangi React Native rendereri. Eski arxitekturada renderlash Bridge orqali o'tgan: JS React elementlarini yaratgan, ularni JSON ga serializatsiya qilgan, Bridge orqali yuborgan, native tomon deserializatsiya qilgan va UI yaratgan. Fabric JSI orqali to'g'ridan-to'g'ri JS dan C++ Shadow Tree obyektlarini yaratadi, Yoga orqali Layout ni sinxron hisoblaydi va tayyor ramkalarni native rendererga uzatadi — hech qanday serializatsiyasiz.

TurboModules va JSI

TurboModules — React Native native modullarining evolyutsiyasi. Modulni Bridge da ro'yxatdan o'tkazish va uning metodlarini JSON orqali chaqirish o'rniga, TurboModules JSI dan dangasa yuklash va to'g'ridan-to'g'ri chaqirish uchun foydalanadi. JS kodi modulga birinchi marta murojaat qilganda, JSI Host Object yaratadi — u native modulni yuklaydi va uning metodlarini C++ funksiyalari sifatida taqdim etadi. Dangasa yuklash modul birinchi foydalanilgungacha xotira sarf qilmasligini anglatadi — bu, ayniqsa, ko'pchiligi faqat ma'lum ekranlarda ishlatiladigan o'nlab native modullarga ega ilovalar uchun muhimdir.

JSI orqali kod generatsiyasi

Yangi arxitekturada JSI bilan ishlash uchun Codegen ishlatiladi — JavaScript spetsifikatsiyalaridan C++ o'ramlarini yaratuvchi vosita. Dasturchi native modulning interfeysini TypeScript yoki Flow da tasvirlaydi, Codegen esa JSI ga mos Host Object ni amalga oshiruvchi C++ kodini yaratadi. Bu muntazam ishni avtomatlashtiradi va JS va C++ tomonlaridagi turlarning sinxronlashtirilganligini kafolatlaydi.

JSI bilan kod misollari

Keling, JSI bilan ishlash amalda qanday ko'rinishini ko'rib chiqaylik. Ushbu misolda JSI orqali JS ga eksport qilinadigan oddiy C++ klassi yaratiladi va uning metodi React Native JavaScript kodidan chaqiriladi.

// Calculator.h — JS dan foydalanish mumkin bo'lgan C++ klass sarlavhasi
class Calculator {
public:
    double add(double a, double b) { return a + b; }
    double multiply(double a, double b) { return a * b; }
};

Calculator klassi ikkita arifmetik metoddan iborat. Biz uni JS dan foydalanish mumkin qilishimiz kerak. Buning uchun Calculator ni o'rab oluvchi va uning metodlarini JSI orqali taqdim etuvchi Host Object yaratamiz.

// CalculatorHostObject.cpp — JSI o'rami amalga oshirilishi
class CalculatorHostObject : public jsi::HostObject {
private:
    Calculator calc;

public:
    jsi::Value get(jsi::Runtime& runtime,
        const jsi::PropNameID& name) override {
        auto propName = name.utf8(runtime);

        if (propName == "add") {
            return jsi::Function::createFromHostFunction(
                runtime, name, 2,
                [this](jsi::Runtime& runtime,
                    const jsi::Value& thisVal,
                    const jsi::Value* args,
                    size_t count) -> jsi::Value {
                    return jsi::Value(calc.add(
                        args[0].asNumber(),
                        args[1].asNumber()));
                });
        }
        return jsi::Value::undefined();
    }
};

Ushbu kodda get metodi JS obyektning xususiyatiga har murojaat qilganda chaqiriladi. Agar xususiyat nomi „add” bo'lsa, JS dan ikkita argument qabul qiluvchi va calc.add() ni chaqiruvchi C++ funksiyasi qaytariladi. Qiymat jsi::Value sifatida qaytariladi — JSI avtomatik ravishda double ni JS soniga aylantiradi.

JavaScript dan chaqirish

Host Object JS muhitida ro'yxatdan o'tkazilgandan so'ng, chaqiruv oddiy JS funksiyasiga o'xshaydi. Barcha turlar kod generatsiyasi bosqichida tekshiriladi, bu bajarilish vaqtida tur nomuvofiqligi xatolarini bartaraf etadi.

// JavaScript — JSI orqali C++ kalkulyatorini chaqirish
import { Calculator } from 'react-native-calculator'

const result = Calculator.add(5, 3)
console.log(result) // 8 — sinxron, kechikish yo'q

const product = Calculator.multiply(4, 2.5)
console.log(product) // 10 — darhol natija

E'tibor bering: natija darhol, Promise, await yoki callbacklarsiz qaytariladi. Bu Bridge arxitekturasida imkonsiz bo'lgan sinxron chaqiruvdir. Uzoq muddatli operatsiyalar (fayl o'qish, tarmoq so'rovi) uchun asinxron naqshlardan foydalanish kerak — JSI og'ir vazifalar uchun fon iplariga bo'lgan ehtiyojni bekor qilmaydi.

Amalda, aksariyat dasturchilar JSI Host Objects ni qo'lda yozmaydi — bu ishni TypeScript spetsifikatsiyalari asosida C++ o'ramlarini yaratuvchi Codegen bajaradi. Biroq, JSI ning qanday ishlashini tushunish unumdorlikni samarali tuzatish va to'g'ridan-to'g'ri C++ kutubxonalariga (Skia, FFmpeg, OpenCV) kirishni talab qiluvchi murakkab native modullarni yaratish uchun zarurdir.