React Native: এটি কী, Bridge কীভাবে কাজ করে এবং JavaScript পরিবেশ

React Native কী

React Native হল Facebook টিম (বর্তমানে Meta) দ্বারা তৈরি একটি ফ্রেমওয়ার্ক যা 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) সম্পূর্ণরূপে Flexbox লেআউটের জন্য Yoga 3.0 সমর্থন সহ New Architecture-তে রূপান্তরিত হয়েছে।

Statista 2024 অনুসারে, React Native 38% ক্রস-প্ল্যাটফর্ম প্রকল্পে ব্যবহৃত হয়। ফ্রেমওয়ার্কটি Discord, Instagram, Shopify, Pinterest, Skype এবং Uber Eats দ্বারা ব্যবহৃত হয়। Meta Facebook এবং Instagram-এ React Native ব্যবহার করে — 2 বিলিয়ন ব্যবহারকারী সহ প্রধান মোবাইল অ্যাপ।

React Native-এর ইতিহাস এবং বিবর্তন

React Native জানুয়ারী 2015-এ React.js Conf-এ ঘোষণা করা হয়েছিল। ধারণাটি ছিল React-এর ডিক্লারেটিভ প্যারাডাইম ওয়েব থেকে মোবাইল প্ল্যাটফর্মে আনা। রিপোজিটরিতে প্রথম commit 2013 সালে iOS-এ Facebook Groups অ্যাপ তৈরির জন্য একটি অভ্যন্তরীণ Facebook প্রকল্প হিসাবে উপস্থিত হয়েছিল।

0.70 (2022) সংস্করণ Hermes-কে ডিফল্ট JavaScript ইঞ্জিন হিসাবে চালু করে। Hermes হল একটি অগ্রিম-সময় (AOT) কম্পাইল করা ইঞ্জিন যা মোবাইল ডিভাইসের জন্য অপ্টিমাইজ করা। এটি JavaScriptCore-এর তুলনায় অ্যাপ স্টার্টআপ সময় 50% কমায় এবং APK আকার 30% হ্রাস করে। Hermes ES6 এবং আংশিকভাবে ES2020 সমর্থন করে।

React Native এবং React Web-এর মধ্যে পার্থক্য

React Web ReactDOM-এর মাধ্যমে DOM এলিমেন্টে (div, span, p) কম্পোনেন্ট রেন্ডার করে। 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-এর সাথে নেটিভ স্ক্রিন নেভিগেশনের জন্য Wix-এর react-native-navigation লাইব্রেরি ব্যবহার করা হয়।

React Native আর্কিটেকচার

React Native আর্কিটেকচার ঐতিহ্যগতভাবে Bridge-এর চারপাশে নির্মিত ছিল — JavaScript পরিবেশ এবং নেটিভ কোডের মধ্যে একটি অ্যাসিঙ্ক্রোনাস JSON চ্যানেল। সংস্করণ 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) ব্যবহার করে যা JSI-এর মাধ্যমে UI থ্রেডের সাথে সিঙ্ক্রোনাইজ হয়। এটি JSON সিরিয়ালাইজেশন দূর করে: নেটিভ C++ কোড সরাসরি JavaScript পরিবেশে ফাংশন কল করে এবং এর বিপরীত। Fabric রেন্ডারিং লেটেন্সি 16 ms (Bridge) থেকে 2–4 ms-এ কমিয়ে দেয়।

TurboModules New Architecture-এর দ্বিতীয় অংশ। পুরানো মডেলে, সমস্ত নেটিভ মডিউল অ্যাপ স্টার্টআপে লোড হত। TurboModules মডিউলগুলি অলসভাবে (lazy loading) লোড করে — শুধুমাত্র যখন JS কোড প্রথমবারের মতো সেগুলি অনুরোধ করে। এটি 20+ নেটিভ মডিউল সহ অ্যাপে কোল্ড স্টার্ট সময় 40% কমিয়ে দেয়।

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;

নেটিভ মডিউল

নেটিভ মডিউল হল JavaScript থেকে প্ল্যাটফর্ম API কল করার একটি প্রক্রিয়া। যদি কার্যকারিতা স্ট্যান্ডার্ড 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-এর ক্রস-প্ল্যাটফর্ম ফ্রেমওয়ার্কের মধ্যে সবচেয়ে বড় কমিউনিটি রয়েছে। GitHub-এ প্রকল্পটির 117,000+ স্টার এবং 1800+ কন্ট্রিবিউটর রয়েছে। npm সাপ্তাহিকভাবে react-native 3 মিলিয়ন+ বার ডাউনলোড করে। React Native প্রশ্নগুলি মোবাইল ডেভেলপমেন্ট বিভাগে Stack Overflow-এর সমস্ত প্রশ্নের 5% গঠন করে।

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) এর মাধ্যমে উপলব্ধ একটি বৈশিষ্ট্য। ডেভেলপাররা App Store বা Google Play রিভিউ না করেই সরাসরি ব্যবহারকারীদের কাছে JavaScript বান্ডল আপডেট পাঠাতে পারে। এটি গুরুত্বপূর্ণ বাগ ফিক্স 2–5 দিন (রিভিউ অপেক্ষা) থেকে 1–2 ঘন্টায় কমিয়ে দেয়।

TypeScript সমর্থন React Native 0.71 থেকে ডিফল্টভাবে অন্তর্ভুক্ত। প্রকল্প টেমপ্লেটে tsconfig.json, সমস্ত কম্পোনেন্টের জন্য টাইপ এবং কঠোর মোড সমর্থন অন্তর্ভুক্ত। Flow (Facebook-এর স্ট্যাটিক টাইপিং) সমর্থিত, তবে Meta আনুষ্ঠানিকভাবে TypeScript সুপারিশ করে। State of React Native 2024 জরিপ অনুসারে, TypeScript টেমপ্লেট 85% নতুন প্রকল্প গঠন করে।

ইকোসিস্টেম এবং জনপ্রিয় লাইব্রেরি

npm হল React Native-এর জন্য প্রাথমিক প্যাকেজ রেজিস্ট্রি। লাইব্রেরি অনুসন্ধান react-native কীওয়ার্ড দ্বারা ফিল্টার করা হয়। ইনস্টলেশনের জন্য npm install বা yarn add ব্যবহার করা হয়। React Native CLI স্বয়ংক্রিয়ভাবে নেটিভ নির্ভরতা লিংক করে (সংস্করণ 0.60 থেকে)। Expo প্রকল্পের জন্য, ইনস্টলেশন expo install-এর মাধ্যমে পরিচালিত হয়, যা সামঞ্জস্যপূর্ণ লাইব্রেরি সংস্করণ নির্বাচন করে।

মূল লাইব্রেরি

@react-navigation/native — React Native-এ নেভিগেশনের জন্য ডি ফ্যাক্টো স্ট্যান্ডার্ড। লাইব্রেরিতে Stack Navigator (অ্যানিমেটেড ট্রানজিশন), Tab Navigator (iOS/Android-এর জন্য নিচের মেনু), Drawer Navigator (সাইড মেনু) এবং Material Top Tab অন্তর্ভুক্ত। React Navigation 7.x (2024) স্ট্যাটিক রুট কনফিগারেশন এবং useSyncExternalStore-এর সাথে সম্পূর্ণ React 18 সমর্থন চালু করেছে।

react-native-reanimated — উচ্চ-কার্যক্ষমতা সম্পন্ন অ্যানিমেশনের জন্য একটি লাইব্রেরি। Reanimated 3.x JS থ্রেড এড়িয়ে UI থ্রেডে (worklet) অ্যানিমেশন চালায়। এটি 100+ এলিমেন্ট অ্যানিমেট করলেও 60 FPS নিশ্চিত করে। useSharedValue, useAnimatedStyle এবং withSpring স্ট্যান্ডার্ড লাইব্রেরির Animated API প্রতিস্থাপন করে। Reanimated react-native-gesture-handler-এর মাধ্যমে টাচ জেসচার পরিচালনা করে।

@tanstack/react-query — সার্ভার স্টেট ম্যানেজমেন্টের জন্য একটি লাইব্রেরি। React Query API প্রতিক্রিয়া ক্যাশ করে, নেটওয়ার্ক পরিবর্তনে স্বয়ংক্রিয়ভাবে ডেটা পুনরায় আনয়ন করে (refetchOnReconnect) এবং useInfiniteQuery-এর সাথে পেজিনেশন সমর্থন করে। সংস্করণ 5.x-এ UX-এর জন্য অপ্টিমিস্টিক আপডেট অন্তর্ভুক্ত — সার্ভার প্রতিক্রিয়া পাওয়ার আগে ইন্টারফেস আপডেট হয়, তারপর সামঞ্জস্য হয়।