Turbo Module στο React Native — τι είναι, πώς λειτουργεί το JSI και η αρχιτεκτονική

Τι είναι το Turbo Module;

Το Turbo Module είναι ένα συστατικό της νέας αρχιτεκτονικής React Native που αντικαθιστά το κλασικό Bridge για την αλληλεπίδραση JavaScript με native κώδικα. Σε αντίθεση με το Bridge, όπου κάθε μήνυμα σειριοποιείται σε JSON και αποστέλλεται ασύγχρονα, το Turbo Module χρησιμοποιεί JSI — ένα ενδιάμεσο επίπεδο που επιτρέπει στη JavaScript να καλεί απευθείας συναρτήσεις γραμμένες σε C++.

Η αρχιτεκτονική Turbo Module παρουσιάστηκε από την ομάδα Meta στο React Conf 2021 ως μέρος μιας ευρύτερης αναδιάρθρωσης του React Native με την κωδική ονομασία “The New Architecture”. Εκτός από το Turbo Module, η νέα αρχιτεκτονική περιλαμβάνει το Fabric (νέο renderer), το Codegen (γεννήτρια κώδικα) και το JSI (διεπαφή επικοινωνίας). Μαζί, αυτά τα συστατικά λύνουν τα προβλήματα απόδοσης που συσσωρεύονταν στο React Native από το 2015.

Το Turbo Module λύνει τρία βασικά προβλήματα των κλασικών native modules: ασυγχρονισμό (όλες οι κλήσεις περνούν από ουρά), σειριοποίηση (κάθε κλήση απαιτεί μετατροπή JSON) και φόρτωση (όλα τα modules αρχικοποιούνται κατά την εκκίνηση της εφαρμογής). Με το Turbo Module, οι native μέθοδοι καλούνται σύγχρονα, τα δεδομένα μεταφέρονται χωρίς αντιγραφή και τα modules φορτώνονται κατ’ απαίτηση.

Πώς λειτουργεί το JSI

Το JSI (JavaScript Interface) είναι ένα C++ API που δημιουργεί ένα ενδιάμεσο επίπεδο μεταξύ της μηχανής JavaScript (Hermes ή JSC) και του native κώδικα. Το JSI παρέχει host αντικείμενα — C++ αντικείμενα που μοιάζουν με συνηθισμένα JavaScript αντικείμενα και μεθόδους. Όταν η JavaScript καλεί μια μέθοδο ενός τέτοιου αντικειμένου, το JSI εκτελεί απευθείας τον αντίστοιχο C++ κώδικα χωρίς σειριοποίηση και χωρίς εναλλαγή νημάτων.

Η βασική διαφορά μεταξύ JSI και Bridge — η απουσία αντιγραφής δεδομένων. Στο Bridge, κάθε τιμή σειριοποιείται σε JSON, αποστέλλεται μέσω ουράς και αποσειριοποιείται. Το JSI μεταφέρει δείκτες σε δεδομένα στη μνήμη, επιτρέποντας την εργασία με μεγάλους όγκους δεδομένων χωρίς απώλεια απόδοσης. Σύμφωνα με δοκιμές της Meta, οι κλήσεις JSI είναι 5–10 φορές ταχύτερες από ανάλογες κλήσεις μέσω Bridge.

HostObject και σύγχρονες κλήσεις

Το JSI ορίζει τη διεπαφή HostObject — μια C++ κλάση που το React Native καταχωρεί στο περιβάλλον JS ως συνηθισμένο αντικείμενο. Όταν ο κώδικας JS έχει πρόσβαση σε μια ιδιότητα ή καλεί μια μέθοδο του HostObject, το JSI παρεμβαίνει και εκτελεί τον C++ κώδικα. Αυτό επιτρέπει την εκτέλεση λειτουργιών σύγχρονα, χωρίς αναμονή στην ουρά Bridge.

// Παράδειγμα JSI HostObject — σύγχρονη native κλήση
class ImageCompressorHostObject : public jsi::HostObject {

    jsi::Value get(
        jsi::Runtime& rt,
        const jsi::PropNameID& propName
    ) override {
        auto name = propName.utf8(rt);
        if (name == "compressImage") {
            return jsi::Function::createFromHostFunction(
                rt,
                jsi::PropNameID::forUtf8(rt, name),
                2,
                [](jsi::Runtime& rt,
                   const jsi::Value& thisValue,
                   const jsi::Value* args,
                   size_t count) -> jsi::Value {
                    return jsi::Value(rt, compressNative(
                        args[0].asString(rt).utf8(rt),
                        args[1].asNumber()
                    ));
                }
            );
        }
        return jsi::Value::undefined();
    }
};

Ο παραπάνω κώδικας δείχνει πώς το JSI HostObject επεξεργάζεται την κλήση compressImage από JavaScript. Η συνάρτηση δέχεται δύο ορίσματα (string διαδρομής και αριθμό ποιότητας), καλεί την native συνάρτηση compressNative και επιστρέφει το αποτέλεσμα — όλα σύγχρονα, χωρίς Bridge, χωρίς JSON. Αυτό είναι το βασικό πλεονέκτημα του JSI έναντι της κλασικής αρχιτεκτονικής.

Το JSI αποτελεί μέρος του κύριου runtime του React Native και δεν εξαρτάται από συγκεκριμένη μηχανή JavaScript. Λειτουργεί τόσο με Hermes όσο και με JavaScriptCore (JSC), παρέχοντας μια ενοποιημένη διεπαφή για επικοινωνία με το native περιβάλλον.

Turbo Module vs Bridge: σύγκριση

Η σύγκριση του Turbo Module και του Bridge δείχνει την εξέλιξη της αρχιτεκτονικής React Native. Το Bridge σχεδιάστηκε για γρήγορη εκκίνηση του React Native το 2015, αλλά καθώς αυξανόταν η πολυπλοκότητα των εφαρμογών, οι περιορισμοί του έγιναν κρίσιμοι. Το Turbo Module λύνει αυτά τα προβλήματα σε επίπεδο αρχιτεκτονικής.

Στην πράξη, η διαφορά είναι πιο αισθητή σε συχνές κλήσεις native μεθόδων — για παράδειγμα, κατά την επεξεργασία πολυμέσων ή την εργασία με GPU. Για σπάνιες κλήσεις (μία φορά ανά συνεδρία), η διαφορά απόδοσης είναι αμελητέα. Το Turbo Module επίσης απλοποιεί την εργασία με μεγάλα δυαδικά δεδομένα — εικόνες, βίντεο, δυαδικά πρωτόκολλα — που στο Bridge απαιτούσαν λύσεις με το σύστημα αρχείων.

Παράδειγμα δημιουργίας Turbo Module

Η δημιουργία ενός Turbo Module ξεκινά με τον ορισμό προδιαγραφής σε TypeScript. Το Codegen παράγει αυτόματα C++ διεπαφές και Objective-C/Java stubs βάσει αυτής της προδιαγραφής. Αυτό αλλάζει εντελώς την προσέγγιση ανάπτυξης — ο προγραμματιστής περιγράφει το API μία φορά και το Codegen δημιουργεί τα υπόλοιπα.

// ImageCompressor.ts — προδιαγραφή Turbo Module
import type { TurboModule } from 'react-native';
import type { Double } from 'react-native/Libraries/Types/CodegenTypes';

export interface Spec extends TurboModule {
  compressImage(
    imagePath: string,
    quality: Double
  ): Promise<string>;
}

Δημιουργία κώδικα μέσω Codegen

Το Codegen αναλύει την προδιαγραφή TypeScript και παράγει C++ HostObject, πρωτόκολλο Objective-C και διεπαφή Java. Στον προγραμματιστή μένει μόνο να υλοποιήσει τη native λογική. Αυτή η προσέγγιση εγγυάται ότι οι τύποι στην πλευρά JavaScript και native συμπίπτουν πάντα, εξαλείφοντας σφάλματα χειροκίνητης αντιστοίχισης.

// Υλοποίηση TurboModule για iOS (παραγόμενο stub)
@interface ImageCompressorModule ()
    RCT_EXPORT_MODULE(ImageCompressor)
@end

@implementation ImageCompressorModule

RCT_EXPORT_METHOD(compressImage:(NSString *)imagePath
                  quality:(NSNumber *)quality
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
    NSData *compressed = [ImageProcessor compressAtPath:imagePath
                                                    quality:quality.doubleValue];
    resolve([NSString stringWithUTF8String:compressed.UTF8String]);
}

@end

Ένα σημαντικό πλεονέκτημα — lazy loading. Το Turbo Module δεν αρχικοποιείται κατά την εκκίνηση της εφαρμογής, αλλά δημιουργείται μόνο κατά την πρώτη πρόσβαση από JavaScript. Αυτό μειώνει τον χρόνο εκκίνησης της εφαρμογής κατά 30–50% σε σύγκριση με την κλασική προσέγγιση όπου όλα τα native modules φορτώνονται αμέσως.

Μετάβαση από Bridge σε Turbo Module

Η μετάβαση από Bridge σε Turbo Module δεν απαιτεί πλήρη επανεγγραφή της εφαρμογής. Το React Native 0.73+ υποστηρίζει και τις δύο αρχιτεκτονικές παράλληλα — τα Bridge modules συνεχίζουν να λειτουργούν και νέα modules μπορούν να δημιουργηθούν ως Turbo Module. Αυτό επιτρέπει σταδιακή μετάβαση, module προς module.

Για να ενεργοποιήσετε τη νέα αρχιτεκτονική σε ένα έργο React Native 0.76+, ορίστε τη σημαία newArchEnabled σε true στο αρχείο react-native.config.js. Μετά από αυτό, όλα τα υπάρχοντα native modules συνεχίζουν να λειτουργούν μέσω Bridge, και νέα modules μπορούν να δημιουργηθούν ως Turbo Module. Το Codegen επεξεργάζεται αυτόματα και τις δύο παραλλαγές.

// react-native.config.js — ενεργοποίηση νέας αρχιτεκτονικής
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Συνιστάται να ξεκινήσετε τη μετάβαση με modules που καλούνται συχνότερα από JavaScript — αυτά θα έχουν τη μεγαλύτερη αύξηση απόδοσης. Modules που καλούνται σπάνια (μία φορά ανά συνεδρία) μπορούν να παραμείνουν στο Bridge χωρίς σημαντική απώλεια απόδοσης.

• Codegen — χρησιμοποιήστε προδιαγραφές TypeScript για αυτόματη δημιουργία native διεπαφών.
• Δοκιμές E2E — ελέγξτε τη λειτουργία των modules και στις δύο αρχιτεκτονικές, ειδικά μετά από ενημέρωση React Native.
• Εφεδρικό σχέδιο — σε περίπτωση προβλημάτων με Turbo Module, μπορείτε προσωρινά να επιστρέψετε στο Bridge μέσω σημαίας διαμόρφωσης.