React Native-də Bridge — bu nədir, iş prinsipi və qarşılıqlı əlaqə

React Native-də Bridge nədir?

Bridge (Körpü) — React Native-in əsas memarlıq elementidir, tətbiqin biznes məntiqinin icra olunduğu JavaScript axını ilə iOS və Android nativ axınları arasında ikitərəfli asinxron rabitəni təmin edir. React Native 2015-ci ildə buraxıldığı gündən Bridge JS kodunun platforma API-ləri — kamera, geolokasiya, fayl sistemi, bildirişlər və digər nativ imkanlarla qarşılıqlı əlaqəsinin yeganə yolu olaraq qalırdı.

Bridge memarlığı mesaj növbəsi (message queue) prinsipinə əsaslanır. JavaScript kodu nativ metodu çağırdıqda sorğu JSON sətrinə seriallaşdırılır, növbəyə yerləşdirilir və asinxron şəkildə nativ tərəfə göndərilir. Nativ kod sorğunu emal edir, müvafiq əməliyyatı yerinə yetirir və nəticəni eyni növbə vasitəsilə JS axınına qaytarır. Meta-nın React Conf 2021-dəki hesabatına görə, orta statistik tətbiqdə Bridge-dən saniyədə 10 000 mesaj keçir.

Bridge-in işində iştirak edən əsas axınlar: JavaScript Thread (JS kodunun icrası), Native Thread (nativ əməliyyatların icrası) və Shadow Thread (Yoga ilə maketin hesablanması). Hər bir axın müstəqil işləyir ki, bu da interfeysin cavabdehliyini təmin edir — nativ animasiyalar JS hesablamaları ilə bloklanmır.

Bridge memarlığı necə işləyir

Bridge rabitə üçün üç əsas mexanizmdən istifadə edir: MessageQueue, JSON seriallaşdırması və mesajların toplu göndərilməsi. MessageQueue — React Native-in daxili komponentidir, JS və nativ tərəf arasında çağırış növbəsini idarə edir. Hər bir nativ metod çağırışı növbəyə yerləşdirilir, seriallaşdırılır və performansın optimallaşdırılması üçün toplu şəkildə göndərilir.

MessageQueue və seriallaşdırma

MessageQueue toplu göndərmə prinsipi ilə işləyir: nativ metod çağırışları yığılır və hər 5–15 millisaniyədən bir qrup (batch) şəklində göndərilir. Bu, seriallaşdırma xərclərini azaldır, çünki bir neçə çağırış bir JSON paketinə yığılır. Nativ tərəfdə mesajlar deseriallaşdırılır və müvafiq modullara paylanır.

Modulların qeydiyyatı

Nativ modullar makrolar və ya annotasiyalar vasitəsilə avtomatik qeydiyyatdan keçirilir. iOS-da RCT_EXPORT_MODULE makrosu, Android-də isə @ReactMethod annotasiyası istifadə olunur. React Native tətbiq işə salındıqda qeydiyyatdan keçmiş modulları skan edir və bütün mövcud metodların konfiqurasiya JSON xəritəsini qurur. Bu xəritə JS mühitinə ötürülür və JavaScript hansı metodların çağırıla biləcəyini öyrənir.

Məlumat axını

Məlumatlar aşağıdakı yolu keçir: JavaScript NativeModules.CalendarModule.createCalendarEvent() çağırır. Metod modul identifikatoru, metod adı və arqumentlərlə JSON mesajına seriallaşdırılır. Mesaj MessageQueue növbəsinə düşür. Nativ axında mesaj deseriallaşdırılır və müvafiq modula ötürülür. İcra nəticəsi geri seriallaşdırılır və Promise və ya callback kimi JS axınına göndərilir.

            // JavaScript-dən Bridge vasitəsilə nativ modul çağırışı
import { NativeModules } from 'react-native';

const CalendarModule = NativeModules.CalendarModule;

CalendarModule.createCalendarEvent('Test Event', 'Office')
  .then(eventId => {
    console.log('Yaradılmış hadisə id:', eventId);
  })
  .catch(error => {
    console.error('Uğursuz:', error);
  });

Nativ tərəfdə iOS modulu RCT_EXPORT_MODULE makrosu olan Objective-C sinfi kimi görünür. Metod RCT_EXPORT_METHOD makrosu ilə ixrac edilir və React Native onu avtomatik olaraq Bridge-də qeydiyyatdan keçirir. Arqumentlər mövqeyə görə ötürülür və dəstəklənən JSON tiplərinə uyğun olmalıdır: NSString, NSNumber, NSArray, NSDictionary, BOOL.

            // Bridge-də iOS Nativ Modul qeydiyyatı
@interface CalendarModule () RCT_EXPORT_MODULE()
@end

@implementation CalendarModule

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name
                  location:(NSString *)location
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
  NSNumber *eventId = createEvent(name, location);
  resolve(eventId);
}

@end

Bridge-in məhdudiyyətləri və problemləri

Bridge bir sıra əsas performans məhdudiyyətlərinə malikdir. Bunlardan əsası məcburi asinxronluq və seriallaşdırmadır. Hər bir nativ metod çağırışı məlumatları JSON sətrinə çevirir ki, bu da gecikmə yaradır və yaddaş sərf edir. Böyük həcmli məlumatlarla əməliyyatlar, məsələn, şəkillərin emalı və ya video ilə iş üçün bu darboğaza çevrilir.

Seriallaşdırma xərcləri

JSON seriallaşdırması və deseriallaşdırması prosessor vaxtı və yaddaş tələb edir. Hər bir mesaj JS tərəfində sətrə çevrilməli, körpü vasitəsilə ötürülməli və nativ tərəfdə təhlil edilməlidir. Callstack (2022) testlərinə görə, Bridge vasitəsilə 10 000 ədəddən ibarət massivin seriallaşdırılması təxminən 30–50 millisaniyə çəkir ki, bu da yüksək tezlikli çağırışlar üçün qəbuledilməzdir.

Mesaj ölçüsü məhdudiyyəti

Bridge böyük ikili məlumatların ötürülməsi üçün optimallaşdırılmayıb. Fotoşəkillər, audiofayllar və video axınları alternativ yanaşmalar tələb edir — məsələn, faylı diskə yazmaq və yolu sətir kimi ötürmək. Bu, fayl sisteminin oxunması və yazılması üçün əlavə xərclər yaradır.

• Asinxronluq — Bridge sinxron çağırışları dəstəkləmir, bu da ani cavab tələb edən ssenariləri çətinləşdirir.
• Yaddaş — hər bir mesaj emal olunana qədər növbədə saxlanılır, bu da yaddaş istehlakının artmasına səbəb ola bilər.
• Debug — Bridge-də mesajların izlənməsi çətindir, çünki çağırış zənciri axınlar arasında qırılır.

Bu məhdudiyyətlərin dərk edilməsi Meta komandasını React Native-in yeni memarlığını inkişaf etdirməyə vadar etdi, burada Bridge JSI (JavaScript Interface) və Turbo Module ilə əvəz olunur. JSI nativ metodları birbaşa, seriallaşdırmadan çağırmağa imkan verir ki, bu da Bridge-in əsas çatışmazlığını aradan qaldırır.

Bridge vs Turbo Module: müqayisə

Bridge və Turbo Module müqayisəsi memarlıq yanaşmalarında əsas fərqləri göstərir. Bridge JSON seriallaşdırması ilə asinxron mesaj növbəsindən istifadə edir, Turbo Module isə JSI — JavaScript və C++ arasında birbaşa interfeys vasitəsilə işləyir ki, bu da məlumatları çevirmədən nativ metodları sinxron çağırmağa imkan verir.

Bridge və Turbo Module arasında seçim React Native versiyasından asılıdır. React Native 0.72 və daha köhnə layihələr üçün Bridge əsas mexanizm olaraq qalır. React Native 0.73-dən başlayaraq, Metro və yeni memarlıq paralel olaraq dəstəklənir, tədricən miqrasiyaya imkan verir. Turbo Module-ə tam keçid React Native 0.76+-ya yenilənmə və konfiqurasiyada yeni memarlığın aktivləşdirilməsini tələb edir.

Bridge vasitəsilə Native Module qurulması nümunəsi

Təqvimlə işləmək üçün modul nümunəsində Bridge vasitəsilə Native Module yaradılması və istifadəsinin tam dövrünü nəzərdən keçirək. Modul hadisə yaradacaq və onun identifikatorunu qaytaracaq. Bu nümunə hər iki platforma — iOS və Android üçün qurulmanı əhatə edir.

Android modulu

Android-də Native Module ReactContextBaseJavaModule-dən miras alan Java sinfi kimi yaradılır. @ReactMethod annotasiyası metodu Bridge-ə ixrac edir. Promise üçün com.facebook.react.bridge-dən Promise interfeysi istifadə olunur.

public class CalendarModule extends ReactContextBaseJavaModule {

    @Override
    public String getName() {
        return "CalendarModule";
    }

    @ReactMethod
    public void createCalendarEvent(
            String name,
            String location,
            Promise promise) {
        try {
            Integer eventId = createCalendarEventNative(name, location);
            promise.resolve(eventId);
        } catch (Exception e) {
            promise.reject("EVENT_ERROR", e.getMessage());
        }
    }
}

Qeydiyyat və istifadə

Modul @ReactModule vasitəsilə və ya əl ilə tətbiq paketində qeydiyyatdan keçirilir. React Native onu avtomatik aşkarlayır və Bridge-ə əlavə edir. Qeydiyyatdan sonra modul JavaScript-dən NativeModules vasitəsilə əlçatan olur.

public class CalendarPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        return Arrays.asList(
            new CalendarModule(reactContext)
        );
    }

    @Override
    public List<ViewManager> createViewManagers(
            ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Qeyd etmək vacibdir ki, Bridge yeni modullar əlavə edilərkən tətbiqin yenidən başladılmasını tələb edir, çünki konfiqurasiya xəritəsi inisializasiya zamanı bir dəfə qurulur. Bu, onu tənbəl yüklənən və modulların yenidən başlatmadan hot-reloadını dəstəkləyən Turbo Module-dən fərqləndirir.