Bridge v React Native — co to je, princip fungování a interakce

Co je Bridge v React Native?

Bridge (Most) — klíčový architektonický prvek React Native, který zajišťuje obousměrnou asynchronní komunikaci mezi vláknem JavaScript, kde se provádí obchodní logika aplikace, a nativními vlákny iOS a Android. Od vydání React Native v roce 2015 zůstal Bridge jediným způsobem interakce JS kódu s platformovými API — kamerou, geolokací, souborovým systémem, oznámeními a dalšími nativními možnostmi.

Architektura Bridge je založena na principu fronty zpráv (message queue). Když JavaScript kód zavolá nativní metodu, požadavek se serializuje do JSON řetězce, vloží se do fronty a asynchronně se odešle na nativní stranu. Nativní kód zpracuje požadavek, provede odpovídající operaci a pošle výsledek zpět přes stejnou frontu do JS vlákna. Podle zprávy Meta na React Conf 2021 projde Bridge až 10 000 zpráv za sekundu v průměrné aplikaci.

Hlavní vlákna zapojená do činnosti Bridge: JavaScript Thread (provádění JS kódu), Native Thread (provádění nativních operací) a Shadow Thread (výpočet rozvržení pomocí Yoga). Každé vlákno pracuje nezávisle, což zajišťuje odezvu rozhraní — nativní animace nejsou blokovány JS výpočty.

Jak funguje architektura Bridge

Bridge používá tři klíčové mechanismy pro komunikaci: MessageQueue, JSON serializaci a dávkování zpráv. MessageQueue je vnitřní komponenta React Native, která spravuje frontu volání mezi JS a nativní stranou. Každé volání nativní metody se vloží do fronty, serializuje a odešle v dávkách pro optimalizaci výkonu.

MessageQueue a serializace

MessageQueue funguje na principu dávkování: volání nativních metod se hromadí a odesílají jako jedna skupina (batch) každých 5–15 milisekund. To snižuje režii serializace, protože několik volání je zabaleno do jednoho JSON balíčku. Na nativní straně se zprávy deserializují a distribuují odpovídajícím modulům.

Registrace modulů

Nativní moduly se registrují automaticky pomocí maker nebo anotací. Na iOS se používá makro RCT_EXPORT_MODULE, na Androidu anotace @ReactMethod. React Native při spuštění aplikace prohledá registrované moduly a vytvoří konfigurační JSON mapu všech dostupných metod. Tato mapa se přenese do JS prostředí a JavaScript zjistí, které metody lze volat.

Tok dat

Data procházejí následující cestou: JavaScript zavolá NativeModules.CalendarModule.createCalendarEvent(). Metoda se serializuje do JSON zprávy s identifikátorem modulu, názvem metody a argumenty. Zpráva se dostane do fronty MessageQueue. V nativním vlákně se zpráva deserializuje a předá odpovídajícímu modulu. Výsledek provedení se serializuje zpět a odešle do JS vlákna jako Promise nebo callback.

            // Volání nativního modulu z JavaScriptu přes Bridge
import { NativeModules } from 'react-native';

const CalendarModule = NativeModules.CalendarModule;

CalendarModule.createCalendarEvent('Test Event', 'Office')
  .then(eventId => {
    console.log('Událost vytvořena s id:', eventId);
  })
  .catch(error => {
    console.error('Selhalo:', error);
  });

Na nativní straně iOS vypadá modul jako třída Objective-C s makrem RCT_EXPORT_MODULE. Metoda se exportuje makrem RCT_EXPORT_METHOD a React Native ji automaticky zaregistruje v Bridge. Argumenty se předávají podle pozice a musí odpovídat podporovaným JSON typům: NSString, NSNumber, NSArray, NSDictionary, BOOL.

            // Registrace nativního modulu iOS v 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

Omezení a problémy Bridge

Bridge má řadu zásadních výkonnostních omezení. Hlavním z nich je povinná asynchronnost a serializace. Každé volání nativní metody převádí data na JSON řetězec, což přidává zpoždění a spotřebovává paměť. U operací s velkým objemem dat, jako je zpracování obrázků nebo práce s videem, se to stává úzkým hrdlem.

Náklady na serializaci

JSON serializace a deserializace zabírají procesorový čas a paměť. Každá zpráva musí být na JS straně převedena na řetězec, přenesena přes most a na nativní straně zpracována. Podle testů Callstack (2022) trvá serializace pole 10 000 čísel přes Bridge asi 30–50 milisekund, což je nepřijatelné pro vysoce frekventovaná volání.

Omezení velikosti zpráv

Bridge není optimalizován pro přenos velkých binárních dat. Fotografie, zvukové soubory a videostreamy vyžadují alternativní přístupy — například zápis souboru na disk a přenos cesty jako řetězce. To vytváří další režii pro čtení a zápis souborového systému.

• Asynchronnost — Bridge nepodporuje synchronní volání, což komplikuje scénáře vyžadující okamžitou odpověď.
• Paměť — každá zpráva je uložena ve frontě až do zpracování, což může vést ke zvýšení spotřeby paměti.
• Ladění — sledování zpráv v Bridge je obtížné, protože řetězec volání se přerušuje mezi vlákny.

Vědomí těchto omezení vedlo tým Meta k vývoji nové architektury React Native, ve které je Bridge nahrazen JSI (JavaScript Interface) a Turbo Module. JSI umožňuje přímé volání nativních metod bez serializace, čímž odstraňuje hlavní nevýhodu Bridge.

Bridge vs Turbo Module: srovnání

Srovnání Bridge a Turbo Module ukazuje zásadní rozdíly v architektonických přístupech. Bridge používá asynchronní frontu zpráv s JSON serializací, zatímco Turbo Module pracuje přes JSI — přímé rozhraní mezi JavaScriptem a C++, které umožňuje synchronní volání nativních metod bez převodu dat.

Výběr mezi Bridge a Turbo Module závisí na verzi React Native. U projektů na React Native 0.72 a starších zůstává Bridge hlavním mechanismem. Počínaje React Native 0.73 jsou Metro a nová architektura podporovány paralelně, což umožňuje postupnou migraci. Úplný přechod na Turbo Module vyžaduje aktualizaci na React Native 0.76+ a povolení nové architektury v konfiguraci.

Příklad nastavení Native Module přes Bridge

Podívejme se na celý cyklus vytvoření a použití Native Module přes Bridge na příkladu modulu pro práci s kalendářem. Modul vytvoří událost a vrátí její identifikátor. Tento příklad zahrnuje nastavení pro obě platformy — iOS a Android.

Android modul

Na Androidu se Native Module vytváří jako Java třída dědící z ReactContextBaseJavaModule. Anotace @ReactMethod exportuje metodu do Bridge. Pro Promise se používá rozhraní Promise z 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());
        }
    }
}

Registrace a použití

Modul se registruje pomocí @ReactModule nebo ručně v balíčku aplikace. React Native jej automaticky detekuje a přidá do Bridge. Po registraci je modul přístupný z JavaScriptu přes 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();
    }
}

Je důležité poznamenat, že Bridge vyžaduje restart aplikace při přidávání nových modulů, protože konfigurační mapa se vytváří jednou při inicializaci. To jej odlišuje od Turbo Module, který se načítá líně a podporuje hot-reload modulů bez restartu.