Bridge у React Native-у — шта је то, принцип рада и интеракција

Шта је Bridge у React Native-у?

Bridge (Мост) — кључни архитектонски елемент React Native-а који обезбеђује двосмерну асинхрону везу између JavaScript нити, где се извршава пословна логика апликације, и нативних нити iOS и Android. Од изласка React Native-а 2015. године, Bridge је остао једини начин интеракције JS кода са платформским APIјима — камера, геолокација, систем датотека, обавештења и друге нативне могућности.

Архитектура Bridge-а заснива се на принципу реда порука (message queue). Када JavaScript код позове нативни метод, захтев се серијализује у JSON стринг, ставља у ред и асинхроно шаље на нативну страну. Нативни код обрађује захтев, извршава одговарајућу операцију и шаље резултат назад кроз исти ред у JS нит. Према извештају Meta-е на React Conf 2021, кроз Bridge прође до 10.000 порука у секунди у просечној апликацији.

Главне нити укључене у рад Bridge-а: JavaScript Thread (извршавање JS кода), Native Thread (извршавање нативних операција) и Shadow Thread (израчунавање распореда помоћу Yoga). Свака нит ради независно, што обезбеђује одзивност интерфејса — нативне анимације нису блокиране JS прорачунима.

Како ради архитектура Bridge

Bridge користи три кључна механизма за комуникацију: MessageQueue, JSON серијализацију и груписање порука. MessageQueue је интерна компонента React Native-а која управља редом позива између JS и нативне стране. Сваки позив нативног метода се ставља у ред, серијализује и шаље у групама ради оптимизације перформанси.

MessageQueue и серијализација

MessageQueue ради по принципу груписања: позиви нативних метода се акумулирају и шаљу као једна група (batch) сваких 5–15 милисекунди. Ово смањује трошкове серијализације, јер се више позива пакује у један JSON пакет. На нативној страни, поруке се десеријализују и распоређују одговарајућим модулима.

Регистрација модула

Нативни модули се аутоматски региструју путем макроа или анотација. На iOS-у се користи макро RCT_EXPORT_MODULE, на Android-у — анотација @ReactMethod. React Native скенира регистроване модуле при покретању апликације и гради конфигурациону JSON мапу свих доступних метода. Ова мапа се преноси у JS окружење, и JavaScript сазнаје који методи могу бити позвани.

Ток података

Подаци пролaze следећи пут: JavaScript позива NativeModules.CalendarModule.createCalendarEvent(). Метод се серијализује у JSON поруку са идентификатором модула, именом метода и аргументима. Порука доспева у ред MessageQueue. На нативној нити, порука се десеријализује и прослеђује одговарајућем модулу. Резултат извршавања се серијализује назад и шаље у JS нит као Promise или callback.

            // Позив нативног модула из JavaScript-а преко Bridge-а
import { NativeModules } from 'react-native';

const CalendarModule = NativeModules.CalendarModule;

CalendarModule.createCalendarEvent('Test Event', 'Office')
  .then(eventId => {
    console.log('Креиран догађај са id:', eventId);
  })
  .catch(error => {
    console.error('Неуспешно:', error);
  });

На нативној страни iOS-а, модул изгледа као Objective-C класа са макроом RCT_EXPORT_MODULE. Метод се извози макроом RCT_EXPORT_METHOD, и React Native га аутоматски региструје у Bridge-у. Аргументи се преносе по позицији и морају одговарати подржаним JSON типовима: NSString, NSNumber, NSArray, NSDictionary, BOOL.

            // Регистрација iOS нативног модула у Bridge-у
@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-а

Bridge има низ фундаменталних ограничења перформанси. Главно међу њима је обавезна асинхроност и серијализација. Сваки позив нативног метода претвара податке у JSON стринг, што додаје кашњење и троши меморију. За операције са великим количинама података, као што су обрада слика или рад са видео записима, ово постаје уско грло.

Трошкови серијализације

Серијализација и десеријализација JSON-а заузимају процесорско време и меморију. Свака порука мора бити претворена у стринг на JS страни, пренета кроз мост и рашчлањена на нативној страни. Према тестовима Callstack (2022), серијализација низа од 10.000 бројева кроз Bridge траје око 30–50 милисекунди, што је неприхватљиво за високофреквентне позиве.

Ограничење величине порука

Bridge није оптимизован за пренос великих бинарних података. Фотографије, аудио датотеке и видео токови захтевају алтернативне приступе — на пример, упис датотеке на диск и пренос путање у облику стринга. Ово ствара додатне трошкове за читање и писање система датотека.

• Асинхроност — Bridge не подржава синхроне позиве, што отежава сценарије који захтевају тренутни одговор.
• Меморија — свака порука се чува у реду до обраде, што може довести до повећања потрошње меморије.
• Отклањање грешака — праћење порука у Bridge-у је отежано, јер се ланац позива прекида између нити.

Свест о овим ограничењима довела је тим Meta до развоја нове архитектуре React Native-а, у којој се Bridge замењује са JSI (JavaScript Interface) и Turbo Module. JSI омогућава директно позивање нативних метода без серијализације, чиме се елиминише главни недостатак Bridge-а.

Bridge vs Turbo Module: поређење

Поређење Bridge-а и Turbo Module-а показује фундаменталне разлике у архитектонским приступима. Bridge користи асинхрони ред порука са JSON серијализацијом, док Turbo Module ради преко JSI-ја — директног интерфејса између JavaScript-а и C++-а који омогућава синхроно позивање нативних метода без претварања података.

Избор између Bridge-а и Turbo Module-а зависи од верзије React Native-а. За пројекте на React Native 0.72 и старијим, Bridge остаје главни механизам. Почев од React Native 0.73, Metro и нова архитектура се подржавају паралелно, омогућавајући постепену миграцију. Потпуни прелазак на Turbo Module захтева ажурирање на React Native 0.76+ и укључивање нове архитектуре у конфигурацији.

Пример подешавања Native Module преко Bridge-а

Размотримо пун циклус креирања и коришћења Native Module-а преко Bridge-а на примеру модула за рад са календаром. Модул ће креирати догађај и вратити његов идентификатор. Овај пример покрива подешавање за обе платформе — iOS и Android.

Android модул

На Android-у, Native Module се креира као Java класа која наслеђује ReactContextBaseJavaModule. Анотација @ReactMethod извози метод у Bridge. За Promise се користи интерфејс Promise из com.facebook.react.bridge.

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());
        }
    }
}

Регистрација и употреба

Модул се региструје путем @ReactModule или ручно у пакету апликације. React Native га аутоматски открива и додаје у Bridge. Након регистрације, модул је доступан из JavaScript-а преко NativeModules.

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();
    }
}

Важно је напоменути да Bridge захтева поновно покретање апликације при додавању нових модула, јер се конфигурациона мапа гради једном приликом иницијализације. Ово га разликује од Turbo Module-а, који се учитава лењо и подржава вруће преучитавање модула без поновног покретања.