JSI: nədir, iş prinsipi və arxitekturası

JSI nədir?

JSI (JavaScript Interface) — JavaScript mühərrikinə (Hermes, JavaScriptCore, V8) C++ obyektlərinə, funksiyalarına və yaddaşına birbaşa çıxış imkanı verən C++ təbəqəsidir. Çağırışları JSON-a serializasiya edən və onları asinxron növbə ilə ötürən Bridge-dən fərqli olaraq, JSI JS koduna C++ metodlarını sinxron çağırmağa və nəticəni dərhal almağa imkan verir.

JSI React Native 0.64-də yeni arxitekturanın (New Architecture) bir hissəsi kimi təqdim edilmişdir. Əsas məqsəd Bridge-in darboğazını aradan qaldırmaq idi: JS və yerli kod arasındakı hər qarşılıqlı əlaqə serializasiya, deserializasiya və mesaj növbəsi vasitəsilə ötürülmə zamanı itirdi. JSI bu problemi jsi::Value, jsi::Object və jsi::Function interfeysini həyata keçirən sarıcılar vasitəsilə JS mühərrikinə C++ obyektlərinə birbaşa çıxışı təmin edərək həll edir.

JSI Bridge-in „bir-bir” əvəzi deyil — bu inteqrasiyaya prinsipial olaraq fərqli yanaşmadır. Bridge poçt qutusu kimi işləyirdi: JS mesaj göndərir, növbədən keçir, yerli tərəf onu emal edir və cavab göndərirdi. JSI göstərici kimi işləyir: JS C++ obyektinə istinad alır və onun metodlarını adi JS funksiyaları kimi sinxron çağıra bilir. Bu, iki mühitin qarşılıqlı əlaqəsi arxitekturasında köklü fərqdir.

Yaranma tarixi

JSI-yə ehtiyac 2015-ci il React Native-də qoyulmuş orijinal Bridge-in məhdudiyyətlərindən yarandı. Freymvorkun populyarlığının artması və tətbiqlərin mürəkkəbləşməsi ilə performans problemi aydın oldu: yerli modulun hər çağırılması serializasiya üçün ən azı 3–5 ms tələb edirdi. Sensor dəyərinin oxunması və ya ekran ölçüsünün alınması kimi sadə əməliyyatlar üçün bu məqbul idi, lakin animasiyalar, qrafika ilə iş və axın məlumat emalı üçün kritik idi. React Native komandası 2019-cu ildə yeni arxitektura üzərində işə başladı və JSI onun təməlinə çevrildi.

JavaScript mühərriklərinin dəstəyi

JSI JavaScript mühərrikləri üzərində abstraksiya kimi dizayn edilmişdir. Hər bir konkret mühərrik üçün həyata keçirilən vahid C++ API təmin edir: Hermes, JavaScriptCore (iOS), V8 (Android). Bu o demekdir ki, tərtibatçı mühərriklər arasındakı fərqlər barədə düşünməməlidir — Fabric və TurboModules hansı JS mühərrikindən istifadə olunmasından asılı olmayaraq eyni işləyir.

JSI necə işləyir?

JSI-nin əsasında Host Objects konsepsiyası durur — JS mühitinə yerli JS obyektləri kimi ixrac edilən C++ obyektləri. JS kodu belə bir obyektin xassəsinə və ya metoduna müraciət etdikdə, JSI çağırışı ələ keçirir və onu müvafiq C++ metoduna həvalə edir. Bu, sinxron, eyni axında, kontekst dəyişmədən və JSON sətri üçün yaddaş ayrılmadan baş verir.

Hər bir Host Object get, set və getPropertyNames metodları ilə jsi::HostObject interfeysini həyata keçirir. JS mühərriki obyektin xassələrinə hər müraciətdə bu metodları çağırır. Məsələn, JS-də NativeModule.someMethod() çağırıldıqda, JSI bu çağırışı Host Object-in müvafiq metodunun C++ çağırışına çevirir. Qaytarılan dəyər JS-yə jsi::Value kimi ötürülür — rəqəmi, sətri, boolean dəyəri, obyekti və ya undefined-i təmsil edə bilən ümumiləşdirilmiş tip.

JSI-nin mühüm xüsusiyyəti mesaj növbəsinin olmamasıdır. Bridge asinxron növbədən istifadə edirdi: JS sorğu göndərir, digər tapşırıqlara keçir, yerli tərəf sorğu emal edir və nəticə callback vasitəsilə qayıdırdı. JSI sinxron işləyir: JS JSI vasitəsilə yerli modulun metodunu çağırarsa, JS kodunun icrası nəticə alınana qədər dayandırılır. Bu, məntiqi sadələşdirir (callbackləri gözləməyə ehtiyac yoxdur) və race conditions-ları aradan qaldırır, lakin ehtiyat tələb edir — uzun sinxron çağırışlar JS axını bloklayır.

JSI dəyərlərinin həyat dövranı

JSI vasitəsilə yaradılan dəyərlər JS mühərrikinin icra mühitində yaşayır və zibil toplayıcı tərəfindən idarə olunur. C++ kodu jsi::String və ya jsi::Object yaradıb JS-yə qaytardıqda, mühit avtomatik olaraq yaddaşı idarə edir. C++ kodu çağırışlar arasında JS dəyərinə istinadı saxlamaq istəyirsə, jsi::Value::getWeak() və ya runtime-nın kök obyektində istinadı saxlayan qlobal jsi::Object::setProperty istifadə edir. Bu, zibil toplayıcı tərəfindən vaxtından əvvəl silinmənin qarşısını alır.

Axın təhlükəsizliyi

JSI standart olaraq axın təhlükəsiz deyil. Bütün JSI metod çağırışları JS-in icra olunduğu axından (adətən bu React Native-in JS axınıdır) gəlməlidir. Yerli modul ayrı bir axında fon işi işə salırsa, nəticə TurboModules-dən runOnJS çağırışı vasitəsilə JS axını vasitəsilə qaytarılmalıdır. Bu məhdudiyyət sinxronluq və serializasiyanın olmamasının qiymətidir.

JSI vs Bridge: müqayisə

JSI və Bridge arasındakı fərq əsaslıdır və JS-nin yerli kodla qarşılıqlı əlaqəsinin bütün aspektlərinə təsir edir. Bridge asinxron idi, məlumatları JSON-a serializasiya edir və mesaj növbəsindən istifadə edirdi; JSI sinxrondur, yerli istinadlarla işləyir və serializasiya tələb etmir.

React Native Team-in məlumatlarına görə, Facebook Marketplace tətbiqində Bridge-dən JSI-yə miqrasiya JS və yerli tərəf arasında məlumatların dublikasiyasını aradan qaldıraraq işə salınma müddətini 35% qısaltdı və yaddaş istehlakını 20% azaltdı.

Bridge nə vaxt zəruri idi

Bridge „səhv” deyildi — bu, 2015-ci ildə React Native-in yaradılması zamanı əsaslandırılmış memarlıq qərarı idi. Müxtəli dilləri olan iki platforma üçün yerli inkişaf universal mübadilə formatı tələb edirdi. JSON serializasiya formatı kimi bütün platformalarda mövcud idi və qarşılıqlı əlaqəni unifikasiya etməyə imkan verirdi. Problem sonradan, React Native saniyədə minlərlə yerli modul çağırışı olan mürəkkəb tətbiqlər üçün istifadə olunmağa başladıqda ortaya çıxdı.

Geri uyğunluq

React Native geri uyğunluğu qoruyur: Bridge üçün yazılmış yerli modullar uyğunluq təbəqəsi vasitəsilə yeni arxitekturada işləməyə davam edir. Lakin yeni modullar üçün dərhal TurboModules vasitəsilə JSI-dən istifadə etmək tövsiyə olunur. Mövcud modulların miqrasiyası modulun öz biznes məntiqini dəyişmədən qarşılıqlı əlaqə protokolunun dəyişdirilməsindən ibarətdir.

JSI React Native arxitekturasında

JSI React Native-in yeni arxitekturasının bütün komponentlərinin üzərində qurulduğu əsas təbəqədir. JSI olmadan nə Fabric (yeni renderer), nə də TurboModules (optimallaşdırılmış yerli modullar) işləyə bilməzdi. JSI bütün səviyyələrdə JS və C++ arasında qarşılıqlı əlaqənin vahid üsulunu təmin edir.

Fabric və JSI

Fabric — C++ UI təqdimatlarına sinxron çıxış üçün JSI-dən istifadə edən yeni React Native rendereridir. Köhnə arxitekturada renderinq Bridge-dən keçirdi: JS React elementləri yaradır, onları JSON-a serializasiya edir, Bridge vasitəsilə göndərir, yerli tərəf deserializasiya edir və UI yaradırdı. Fabric JSI vasitəsilə birbaşa JS-dən C++ Shadow Tree obyektləri yaradır, Yoga vasitəsilə Layout-u sinxron hesablayır və hazır çərçivələri yerli rendererə ötürür — heç bir serializasiya olmadan.

TurboModules və JSI

TurboModules — React Native yerli modullarının təkamülüdür. Modulu Bridge-də qeydiyyatdan keçirmək və onun metodlarını JSON vasitəsilə çağırmaq əvəzinə, TurboModules tənbəl yükləmə və birbaşa çağırma üçün JSI-dən istifadə edir. JS kodu modula ilk dəfə müraciət etdikdə, JSI Host Object yaradır — o, yerli modulu yükləyir və onun metodlarını C++ funksiyaları kimi təqdim edir. Tənbəl yükləmə o demekdir ki, modul ilk istifadəyə qədər yaddaş istehlak etmir — bu, xüsusilə onlarla yerli modulu olan, çoxu yalnız müəyyən ekranlarda istifadə edilən tətbiqlər üçün vacibdir.

JSI vasitəsilə kod generasiyası

Yeni arxitekturada JSI ilə iş üçün Codegen istifadə olunur — JavaScript spesifikasiyalarından C++ sarıcıları yaradan alət. Tərtibatçı yerli modulun interfeysini TypeScript və ya Flow-da təsvir edir, Codegen isə JSI-uyğun Host Object həyata keçirən C++ kodu yaradır. Bu, adi işi avtomatlaşdırır və JS və C++ tərəflərində tiplərin sinxronlaşdırılmasına zəmanət verir.

JSI ilə kod nümunələri

JSI ilə işin praktikada necə göründüyünə baxaq. Bu nümunədə JSI vasitəsilə JS-yə ixrac edilən sadə C++ sinfi yaradılır və onun metodu React Native JavaScript kodundan çağırılır.

// Calculator.h — JS-dən əlçatan C++ sinif başlığı
class Calculator {
public:
    double add(double a, double b) { return a + b; }
    double multiply(double a, double b) { return a * b; }
};

Calculator sinfi iki arifmetik metod ehtiva edir. Onu JS-dən əlçatan etməliyik. Bunun üçün Calculator-u sarıyan və onun metodlarını JSI vasitəsilə təqdim edən Host Object yaradırıq.

// CalculatorHostObject.cpp — JSI sarıcısının tətbiqi
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();
    }
};

Bu kodda get metodu JS obyektin xassəsinə hər müraciət etdikdə çağırılır. Xassənin adı „add” olarsa, JS-dən iki arqument qəbul edən və calc.add() çağıran C++ funksiyası qaytarılır. Dəyər jsi::Value kimi qaytarılır — JSI avtomatik olaraq double-ı JS rəqəminə çevirir.

JavaScript-dən çağırma

Host Object JS mühitində qeydiyyatdan keçirildikdən sonra çağırış adi JS funksiyası kimi görünür. Bütün tiplər kod generasiyası mərhələsində yoxlanılır, bu da icra zamanı tip uyğunsuzluğu səhvlərini aradan qaldırır.

// JavaScript — JSI vasitəsilə C++ kalkulyatorunun çağırılması
import { Calculator } from 'react-native-calculator'

const result = Calculator.add(5, 3)
console.log(result) // 8 — sinxron, gecikmə yoxdur

const product = Calculator.multiply(4, 2.5)
console.log(product) // 10 — dərhal nəticə

Diqqət yetirin: nəticə dərhal qayıdır, Promise, await və ya callback olmadan. Bu, Bridge arxitekturasında mümkün olmayan sinxron çağırışdır. Uzun müddətli əməliyyatlar (fayl oxuma, şəbəkə sorğu) üçün asinxron nümunələrdən istifadə edilməlidir — JSI ağır tapşırıqlar üçün fon axınlarına ehtiyacı aradan qaldırmır.

Praktikada tərtibatçıların əksəriyyəti JSI Host Objects-i əllə yazmır — bu işi TypeScript spesifikasiyaları əsasında C++ sarıcıları yaradan Codegen görür. Bununla belə, JSI-nin daxili işləmə prinsipini başa düşmək performansın effektiv debaqinqi və birbaşa C++ kitabxanalarına çıxış tələb edən mürəkkəb yerli modulların yaradılması üçün zəruridir (Skia, FFmpeg, OpenCV).