React Native Academy · Les

Turbo Native Modules met JSI

Definieer een TypeScript-specbestand voor een Turbo Native Module, implementeer dit in Kotlin en Swift met de door codegen gegenereerde interface en roep de module synchroon aan via JSI.

Les 3 van 413 stappen

Turbo Native Modules met JSI is een gratis React Native Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.

Het probleem met de verouderde bridge

De verouderde React Native-bridge zet elk bericht tussen JavaScript en native om naar JSON en zet het vervolgens aan de andere kant weer terug. Deze heen-en-terugbewerking voegt vertraging toe aan elke native aanroep en blokkeert threads tijdens het serialiseren. Bij frequente aanroepen, zoals scrollgebeurtenissen of animaties, veroorzaakt deze overhead haperende frames. JSI (JavaScript Interface) is gemaakt om dit knelpunt weg te nemen.

Wat is JSI

JSI (JavaScript Interface) is een lichte C++-laag waarmee JavaScript directe verwijzingen naar C++-hostobjecten kan bevatten. In plaats van een naar JSON geserialiseerd bericht via de bridge te versturen, roept een JS-aanroep rechtstreeks en synchroon een C++-functiepointer aan. Hierdoor kunnen native aanroepen synchroon, zonder kopiëren en vele ordes van grootte sneller zijn dan aanroepen via de bridge.

Overzicht van de architectuur van Turbo Modules

Turbo Native Modules zijn het nieuwe modulesysteem dat op JSI is gebaseerd. Belangrijke verschillen met verouderde modules zijn onder andere: lazy loading (modules worden pas geïnitialiseerd wanneer ze voor het eerst worden gebruikt, in plaats van allemaal bij het opstarten), getypeerde interfaces (gegenereerd vanuit een TypeScript-specificatie, zodat typen aan beide kanten gegarandeerd zijn) en synchrone aanroepen die mogelijk zijn zonder de JS-thread te blokkeren dankzij JSI. De codegen-tool genereert de standaard C++- en native verbindingscode automatisch.

Het TypeScript-specificatiebestand schrijven

Een Turbo Module begint met een TypeScript-specificatiebestand waarin de interface van de module wordt gedeclareerd. Dit bestand staat in je project en wordt door react-native-codegen verwerkt om native interfacebestanden te genereren. De specificatie moet TurboModuleRegistry importeren en een type definiëren dat TurboModule uitbreidt.

// NativeDeviceInfo.ts (spec file)
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  getDeviceModel(): string;
  getBatteryLevel(): Promise<number>;
  addListener(eventType: string): void;
  removeListeners(count: number): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>('DeviceInfo');

Codegen uitvoeren om native code te genereren

Nadat je de TypeScript-specificatie hebt geschreven, voer je React Native Codegen uit om de native interfacebestanden te genereren. Bij beheerde Expo-projecten gebeurt dit automatisch tijdens expo prebuild. Voer bij kale React Native-projecten yarn react-native codegen uit. Codegen schrijft Swift/Kotlin-interfaces en C++-verbindingscode naar de map build/generated. Je native implementatie moet daaraan voldoen.

# Bare React Native — run codegen manually
cd android && ./gradlew generateCodegenArtifactsFromSchema

# Then check generated files
ls android/app/build/generated/source/codegen/jni/
# NativeDeviceInfoJSI-generated.cpp
# NativeDeviceInfoJSI.h

De module implementeren in Kotlin

De Kotlin-implementatie moet de door codegen gegenereerde abstracte klasse uitbreiden (bijvoorbeeld NativeDeviceInfoSpec) en elke methode overschrijven die in de specificatie is gedeclareerd. Omdat de handtekeningen vanuit TypeScript worden gegenereerd, is er geen typeverschil tussen JS en native: codegen dwingt deze af tijdens het bouwen in plaats van tijdens runtime.

// DeviceInfoModule.kt
package com.yourapp

import com.facebook.react.bridge.ReactApplicationContext
import com.yourapp.NativeDeviceInfoSpec

class DeviceInfoModule(context: ReactApplicationContext) :
    NativeDeviceInfoSpec(context) {

    companion object {
        const val NAME = 'DeviceInfo'
    }

    override fun getName(): String = NAME

    override fun getDeviceModel(): String {
        return android.os.Build.MODEL
    }
}

De module implementeren in Swift

De Swift-implementatie voldoet aan het door codegen gegenereerde protocol (bijvoorbeeld NativeDeviceInfoSpec). In tegenstelling tot verouderde modules is er voor Turbo Modules geen afzonderlijk bridge-.m-bestand nodig: de JSI-laag regelt de koppeling automatisch zodra de module is geregistreerd. Het protocol garandeert dat de handtekeningen van de Swift-methoden exact overeenkomen met de TypeScript-specificatie.

// DeviceInfoModule.swift
import Foundation

@objc(DeviceInfoModule)
class DeviceInfoModule: NSObject, NativeDeviceInfoSpec {

  func getDeviceModel() -> String {
    return UIDevice.current.model
  }

  func getBatteryLevel(
    _ resolve: @escaping RCTPromiseResolveBlock,
    reject: @escaping RCTPromiseRejectBlock
  ) {
    UIDevice.current.isBatteryMonitoringEnabled = true
    resolve(UIDevice.current.batteryLevel * 100)
  }
}

Synchrone aanroepen via JSI

Een van de grootste voordelen van JSI is dat je native code synchroon vanuit JS kunt aanroepen. Wanneer een Turbo Module-methode een type retourneert dat geen Promise is (zoals string of number in de specificatie), kan JSI de waarde direct retourneren zonder een asynchrone callback in te plannen. Hierdoor worden patronen mogelijk zoals het synchroon lezen van waarden uit de cache, wat met de verouderde bridge niet mogelijk was.

// TypeScript spec — synchronous return type
export interface Spec extends TurboModule {
  getDeviceModel(): string;  // synchronous
  getBatteryLevel(): Promise<number>;  // still async
}

// Usage in JS — getDeviceModel() is synchronous
import NativeDeviceInfo from './NativeDeviceInfo';

const model = NativeDeviceInfo.getDeviceModel(); // no await needed
console.log('Model:', model);

De nieuwe architectuur inschakelen

Turbo Modules vereisen dat de Nieuwe architectuur in je project is ingeschakeld. Stel voor Android newArchEnabled=true in android/gradle.properties in. Stel voor iOS RCT_NEW_ARCH_ENABLED=1 in de Podfile in en voer pod install uit. Expo SDK 50 en hoger schakelt de nieuwe architectuur automatisch in voor projecten met een beheerde workflow die de nieuwste configuratie gebruiken.

# android/gradle.properties
newArchEnabled=true

# ios/Podfile — add before use_react_native!
ENV['RCT_NEW_ARCH_ENABLED'] = '1'

# Then reinstall pods
cd ios && pod install

Een Turbo Module registreren

Turbo Modules worden geregistreerd via een TurboModuleManagerDelegate in plaats van een ReactPackage. Op Android pas je MainApplicationTurboModuleManagerDelegate.kt aan; op iOS pas je RCTAppDelegate.mm aan. Codegen genereert ook een ModuleProvider die de module automatisch koppelt wanneer je de standaardnaamgevingsconventies volgt.

// Android: MainApplicationTurboModuleManagerDelegate.kt
override fun getModule(
    reactApplicationContext: ReactApplicationContext,
    name: String
): NativeModule? {
    return when (name) {
        DeviceInfoModule.NAME -> DeviceInfoModule(reactApplicationContext)
        else -> null
    }
}

Prestaties van verouderde en Turbo Modules vergelijken

Benchmarks laten zien dat Turbo Modules bij frequente aanroepen 2–3 keer sneller kunnen zijn dan modules via de verouderde bridge. De verbetering is het duidelijkst bij aanroepen die snel na elkaar plaatsvinden, zoals bij gebarenafhandelaars of animatiestuurprogramma's. Bij weinig frequente aanroepen, zoals het instellen van een camera, is het verschil verwaarloosbaar. Migreer naar Turbo Modules wanneer native code die kritisch is voor de prestaties 60fps-interacties moet kunnen bijhouden.

// Performance benchmark pattern
const ITERATIONS = 10000;
const start = Date.now();

for (let i = 0; i < ITERATIONS; i++) {
  // Synchronous JSI call
  const model = NativeDeviceInfo.getDeviceModel();
}

const elapsed = Date.now() - start;
console.log('10k JSI calls in', elapsed, 'ms');
// Turbo: ~8ms  vs  Legacy bridge: ~80ms

Korte controle

Test je begrip van de concepten voor mobiele React Native-ontwikkeling uit deze les.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd hoe JSI de overhead van JSON-serialisatie in de verouderde bridge wegneemt, hoe je een TypeScript-specificatiebestand schrijft dat codegen gebruikt om native interfaces te genereren en hoe je de gegenereerde specificatie implementeert in zowel Kotlin als Swift. Je hebt ook gezien hoe je de Nieuwe architectuur inschakelt en welke prestatievoordelen synchrone JSI-aanroepen bieden. Hierna verkennen we asynchrone callbacks, promises en native gebeurtenissen.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 30
Lessen: 120

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Turbo Native Modules met JSI” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Turbo Native Modules met JSI”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.

Wat leer ik in “Turbo Native Modules met JSI”?

Definieer een TypeScript-specbestand voor een Turbo Native Module, implementeer dit in Kotlin en Swift met de door codegen gegenereerde interface en roep de module synchroon aan via JSI. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Native Academy te beginnen?

Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Turbo Native Modules met JSI”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Native Academy?

Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Een legacy native module schrijven in Kotlin
Een legacy native module schrijven in Swift
Turbo Native Modules met JSI
Asynchrone callbacks, promises en events vanuit native code

← Terug naar React Native Academy