React Native: τι είναι, πώς λειτουργεί το Bridge και το περιβάλλον JavaScript

Τι είναι το React Native

React Native — είναι ένα framework που δημιουργήθηκε από την ομάδα Facebook (νυν Meta) και κυκλοφόρησε ως open-source το 2015. Σε αντίθεση με υβριδικές προσεγγίσεις (Cordova, Ionic), το React Native δεν χρησιμοποιεί WebView. Αντί αυτού, τα συστατικά JavaScript αποτυπώνονται σε εγγενή στοιχεία UI: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

Η πρώτη έκδοση React Native υποστήριζε μόνο iOS. Η υποστήριξη Android προστέθηκε το 2016. Η έκδοση 0.60 (2019) εισήγαγε το Autolinking — αυτόματη σύνδεση εγγενών εξαρτήσεων. Το React Native 0.68 (2022) πρόσθεσε τη νέα αρχιτεκτονική Fabric + TurboModules. Η τρέχουσα σταθερή έκδοση 0.74 (2024) έχει μεταφερθεί πλήρως στην New Architecture με υποστήριξη Yoga 3.0 για διατάξεις Flexbox.

Σύμφωνα με τα δεδομένα Statista 2024, το React Native χρησιμοποιείται σε 38% των διαπλατφορμικών έργων. Το framework χρησιμοποιείται από Discord, Instagram, Shopify, Pinterest, Skype και Uber Eats. Η Meta χρησιμοποιεί React Native στο Facebook και στο Instagram — την κύρια κινητή εφαρμογή με 2 δισεκατομμύρια χρήστες.

Ιστορία και εξέλιξη του React Native

React Native ανακοινώθηκε στο React.js Conf τον Ιανουάριο 2015. Η ιδέα ήταν η μεταφορά του δηλωτικού παραδείγματος React από τον ιστό σε κινητές πλατφόρμες. Το πρώτο commit στο αποθετήριο εμφανίστηκε το 2013 ως εσωτερικό έργο της Facebook για τη δημιουργία της εφαρμογής Facebook Groups σε iOS.

Η έκδοση 0.70 (2022) εισήγαγε τον Hermes ως προκαθορισμένη μηχανή JavaScript. Ο Hermes είναι μια μηχανή με προ-μεταγλώττιση (AOT), βελτιστοποιημένη για κινητές συσκευές. Μειώνει τον χρόνο εκκίνησης της εφαρμογής κατά 50% και το μέγεθος APK κατά 30% σε σύγκριση με το JavaScriptCore. Ο Hermes υποστηρίζει ES6 και μερικώς ES2020.

Διαφορά μεταξύ React Native και React Web

React Web αποδίδει συστατικά σε στοιχεία DOM (div, span, p) μέσω ReactDOM. Το React Native αποδίδει σε εγγενή συστατικά της πλατφόρμας. Αντί για <div> χρησιμοποιείται <View>, αντί για <span> — <Text>. Τα στυλ ορίζονται μέσω του αντικειμένου StyleSheet.create(), το οποίο μεταφράζεται σε ιδιότητες CSS της πλατφόρμας. Το Flexbox είναι από προκαθορισμένο ενεργοποιημένο μέσω της μηχανής Yoga.

Ναβιγαγώνηση στο React Native διαφέρει από τον ιστό. Αντί για react-router-dom χρησιμοποιείται το React Navigation — μια εγγενής βιβλιοθήκη με υποστήριξη για πλοηγούς Stack, Tab και Drawer. Το React Navigation 6.x χρησιμοποιεί εγγενείς κινησιοποιήσεις (useNativeDriver) και ενσωμάτωση με Deep Links. Για εγγενή ναβιγαγώνηση οθονών iOS UINavigationController και Android Fragment χρησιμοποιείται η βιβλιοθήκη react-native-navigation από τη Wix.

Αρχιτεκτονική React Native

Η αρχιτεκτονική React Native αναπτύσσεται παραδοσιακά γύρω από το Bridge — ένα ασύγχρονο κανάλι JSON μεταξύ του περιβάλλοντος JavaScript και του εγγενούς κώδικα. Από την έκδοση 0.68, η Meta εισήγαγε τη New Architecture, η οποία αντικαθιστά το Bridge με JSI (JavaScript Interface) και Fabric. Ας εξετάσουμε και τα δύο μοντέλα.

Bridge και Fabric

Bridge — είναι ένα σειριακοποιημένο πρωτόκολλο JSON που λειτουργεί σε πολλά νήματα: JS Thread (ερμηνεία κώδικα React), Main Thread (UI) και Native Modules Thread (API). Κάθε αλληλεπίδραση μεταξύ JS και εγγενούς κώδικα περνάει από σειριακοποίηση και αποσειριακοποίηση αντικειμένων, δημιουργώντας καθυστερήσεις σε συχνές κλήσεις. Κατά την κύλιση μιας λίστας 1000 στοιχείων, το Bridge δημιουργεί έως 10.000 μηνύματα JSON ανά δευτερόλεπτο.

Fabric — το νέο σύστημα απόδοσης στο React Native. Αντί για Bridge, το Fabric χρησιμοποιεί ένα C++ Shadow Tree που συγχρονίζεται με το νήμα UI μέσω JSI. Αυτό εξαλείφει τη σειριακοποίηση JSON: ο εγγενής C++ κώδικας καλεί απευθείας συναρτήσεις στο περιβάλλον JavaScript και αντίστροφα. Το Fabric μειώνει την καθυστέρηση απόδοσης από 16 ms (Bridge) σε 2–4 ms.

TurboModules — το δεύτερο μέρος της New Architecture. Στο παλιό μοντέλο, όλα τα εγγενή αρθρώματα φορτώνονταν κατά την εκκίνηση της εφαρμογής. Τα TurboModules φορτώνουν τα αρθρώματα με οκνηρό τρόπο (lazy loading) — μόνο όταν ο JS κώδικας τα ζητήσει για πρώτη φορά. Αυτό μειώνει τον χρόνο ψυχρής εκκίνησης κατά 40% σε εφαρμογές με 20+ εγγενή αρθρώματα.

Παράδειγμα εφαρμογής σε React Native

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Εγγενή αρθρώματα

Εγγενή αρθρώματα — είναι ένας μηχανισμός για την κλήση API πλατφόρμας από JavaScript. Εάν η λειτουργικότητα δεν καλύπτεται από τα τυπικά συστατικά React Native (κάμερα, Bluetooth, βιομετρία), ο προγραμματιστής γράφει ένα αρθρωμα σε Swift/Kotlin και το καταχωρεί μέσω RCTBridgeModule ή TurboModule. Η εγγενής συνάρτηση καλείται από JS μέσω NativeModules.CameraModule.takePhoto().

Το React Native παρέχει έτοιμα εγγενή αρθρώματα για πρόσβαση σε επιταχυνσιόμετρο (react-native-sensors), γεωθέσηση (@react-native-community/geolocation), βιομετρία (react-native-biometrics) και τοπικές ειδοποιήσεις (@notifee/react-native). Για προσαρμοσμένα σενάρια, το Expo προσφέρει Expo Modules API — μια απλούστερη διεπαφή για δημιουργία εγγενών αρθρωμάτων χωρίς Xcode ή Android Studio.

Πλεονεκτήματα React Native

Γιγάντια κοινότητα — το React Native έχει τη μεγαλύτερη κοινότητα μεταξύ των cross-platform frameworks. Στο GitHub, το έργο έχει 117.000+ αστέρια, 1800+ συνεισφέροντες. Το npm κατεβάζει react-native 3 εκατομμύρια+ φορές την εβδομάδα. Οι ερωτήσεις σχετικά με το React Native αποτελούν το 5% όλων των ερωτήσεων στο τμήμα κινητής ανάπτυξης στο Stack Overflow.

Οικοσύστημα JavaScript — οι προγραμματιστές React χρησιμοποιούν τα ίδια εργαλεία όπως στον ιστό: npm, Babel, ESLint, Prettier, Jest, TypeScript. Η επιχειρηματική λογική μπορεί να επαναχρησιμοποιηθεί μεταξύ της ιστοέκδοσης (React) και της κινητής εφαρμογής (React Native). Οι βιβλιοθήκες Redux, Zustand, React Query, React Hook Form λειτουργούν και στις δύο πλατφόρμες χωρίς αλλαγές.

Expo — είναι ένα SDK και εργαλεία που απλοποιούν την ανάπτυξη σε React Native. Το Expo παρέχει έτοιμα αρθρώματα (κάμερα, ειδοποιήσεις, χάρτες, OAuth), βυλδ στο σύννεφο (EAS Build) και ενημερώσεις OTA (EAS Update). Το Expo Go επιτρέπει την εκτέλεση της εφαρμογής σε φυσική συσκευή χωρίς Xcode και Android Studio. Σύμφωνα με τα δεδομένα Expo 2024, το 70% των νέων έργων React Native χρησιμοποιούν Expo.

Ενημερώσεις OTA — μια λειτουργία διαθέσιμη μέσω Expo Update και CodePush (Microsoft). Οι προγραμματιστές μπορούν να στέλνουν ενημερώσεις του πακέτου JavaScript απευθείας στους χρήστες χωρίς να περάσουν από την αξιολόγηση App Store ή Google Play. Αυτό επιταχύνει την διόρθωση κρίσιμων σφαλμάτων από 2–5 ημέρες (αναμονή αξιολόγησης) σε 1–2 ώρες.

Υποστήριξη TypeScript είναι από προκαθορισμένο ενεργοποιημένη από το React Native 0.71. Το πρότυπο έργου περιλαμβάνει tsconfig.json, τύπους για όλα τα συστατικά και υποστήριξη strict mode. Το Flow (στατική τυποποίηση από το Facebook) υποστηρίζεται επίσης, αλλά η Meta συστήνει επίσημα το TypeScript. Το πρότυπο TypeScript αποτελεί το 85% των νέων έργων σύμφωνα με την έρευνα State of React Native 2024.

Οικοσύστημα και δημοφιλείς βιβλιοθήκες

npm — η κύρια φορέα πακέτων για React Native. Η αναζήτηση βιβλιοθηκών φιλτράρεται με τη λέξη κλειδί react-native. Για εγκατάσταση χρησιμοποιείται npm install ή yarn add. Το React Native CLI συνδέει αυτόματα εγγενείς εξαρτήσεις (από την έκδοση 0.60). Για έργα Expo, η εγκατάσταση διαχειρίζεται μέσω expo install, το οποίο επιλέγει την συμβατή έκδοση της βιβλιοθήκης.

Βασικές βιβλιοθήκες

@react-navigation/native — το de facto πρότυπο για ναβιγαγώνηση στο React Native. Η βιβλιοθήκη περιλαμβάνει Stack Navigator (εμψυχωμένες μεταβάσεις), Tab Navigator (κάτω μενού για iOS/Android), Drawer Navigator (πλαιντίό μενού) και Material Top Tab. Το React Navigation 7.x (2024) εισήγαγε στατική διαμόρφωση διαδρομών και πλήρη υποστήριξη React 18 με useSyncExternalStore.

react-native-reanimated — βιβλιοθήκη για κινησιοποιήσεις υψηλής απόδοσης. Το Reanimated 3.x εκτελεί κινησιοποιήσεις στο νήμα UI (worklet), παρακάμπτοντας το νήμα JS. Αυτό εγγυάται 60 FPS ακόμη και κατά την κινησιοποίηση 100+ στοιχείων. Τα useSharedValue, useAnimatedStyle και withSpring αντικαθιστούν το Animated API από το τυπικό πακέτο. Το Reanimated διαχειρίζεται χειρονομίες αφής μέσω react-native-gesture-handler.

@tanstack/react-query — βιβλιοθήκη για διαχείριση κατάστασης διακομιστή. Το React Query αποθηκεύει στην κρύπτη μνήμη τις απαντήσεις API, αυτόματα επαναφέρει τα δεδομένα κατά την αλλαγή δικτύου (refetchOnReconnect) και υποστηρίζει σελίδωση με useInfiniteQuery. Η έκδοση 5.x περιλαμβάνει αισιόδοξες ενημερώσεις για UX — η διεπαφή ενημερώνεται πριν λάβει την απάντηση από τον διακομιστή και στη συνέχεια διορθώνεται.