React Native এ Fabric — এটি কি, রেন্ডারিং আর্কিটেকচার এবং এটি কিভাবে কাজ করে

Fabric কি?

Fabric হল React Native এর একটি নতুন রেন্ডারিং প্রণালী যা Shadow Thread এবং Bridge এর মাধ্যমে কাজ করা পুরানো রেন্ডারারকে প্রতিস্থাপিত করেছে। পুরানো আর্কিটেকচারে, রেন্ডারিং প্রক্রিয়ায় তিনটি ধাপ ছিল: JavaScript Virtual DOM গণনা করে, Shadow Thread (Yoga) লেআআউট গণনা করে, Native Thread UIView অংকন করে। Fabric এই সব ধাপকে একটি একক C++ পাইপলাইনে সংযুক্ত করে যা সিংক্রোনাইজড ভাবে কাজ করে।

Fabric এর বিকাশ 2019 সালে Lean Core উদ্যোগ এবং «The New Architecture» প্রক঳্পের অংশ হিসেবে শুরু হয়েছিল। প্রধান লক্ষ্য ছিল অ্যাসিংক্রোনাইজড তিন-দরের রেন্ডারিংয়ের সাথে সম্পর্কিত কার্যকারিতা সমস্যা সমাধান করা। পুরানো আর্কিটেকচারে, প্রতিটি অবস্থা পরিবর্তনের জন্য বিভিন্ন থ্রেডের মাধ্যমে তিনটি পাস প্রয়োজন হয়ত, যা ডাটা পরিবর্তন এবং UI রেন্ডারিংয়ের মধ্যে বিলম্ব সৃষ্টি করত।

Fabric অপরিবর্তনীয় শেডো ট্রি (Immutable Shadow Tree) ধারণার উপর ভিত্তিক। বৃক্ষের প্রতিটি নড এর প্রপস এবং অবস্থা সহ একটি React উপাদানকে প্রতিনিধিত্ব করে। যখন অবস্থা পরিবর্তিত হয়, একটি নতুন বৃক্ষ তৈরি হয়, এবং Fabric পুরানো এবং নতুন বৃক্ষের মধ্যে পার্থক্য গণনা করে এবং শুধুমাত্র প্রয়োজনীয় পরিবর্তন মূল UI এ প্রয়োগ করে। এটি UIView/ViewGroup কাজের সংখ্যা হ্রাস করে এবং রেন্ডারিং সময় কমায়।

Shadow Tree কিভাবে কাজ করে

Shadow Tree হল Fabric এর কাজের ভিত্তি। পুরানো আর্কিটেকচারের বিপরীতে, যেখানে Shadow Tree শুধুমাত্র C++ পাশে বিদ্যমান ছিল এবং অ্যাসিংক্রোনাইজড Bridge এর মাধ্যমে JS বৃক্ষ থেকে পৃথক ছিল, Fabric UI এর একটি সম্পূর্ণ সিংক্রোনাইজড শ্রেণিবিদ্ধ প্রতিনিধিত্ব তৈরি করে। Shadow Tree নড উপাদানের প্রপস, অবস্থা এবং শৈলী সংরক্ষণ করে, এবং Yoga সরাসরি C++ স্তরে লেআআউট গণনা করে।

যখন একটি React উপাদান এর অবস্থা আপডেট করে, React Native Fabric এ একটি নতুন Shadow Node প্রেরণ করে। Fabric সম্পূর্ণ UI পুনরায় রেন্ডার করে না — এটি কোন নড পরিবর্তিত হয়েছে তা নির্ধারণ করতে C++ স্তরে একটি ডিফিং অলগোরিদম ব্যবহার করে। শুধুমাত্র পরিবর্তিত নড মূল রেন্ডারিংয়ের জন্য প্রেরণ করা হয়, যা কাজের পরিমাণ যথেষ্ট হ্রাস করে।

Fabric এর তিন-পর্যায়ের রেন্ডারিং

Fabric এ রেন্ডারিং প্রক্রিয়া তিনটি পর্যায় নিয়ে গঠিত যা থ্রেড স্যাইচিং ছাড়া C++ স্তরে সিংক্রোনাইজড ভাবে কার্যকর করে। প্রথম পর্যায় হল Render: React উপাদানের রেন্ডার ফাংক্শন কে ডেকে, যা একটি React Element Tree ফেরত দেয়। দ্বিতীয় পর্যায় হল Commit: React Native একটি নতুন Shadow Tree তৈরি করে এবং পুরানো সংস্করণের উপর ভিত্তি করে পরিবর্তন গণনা করে। তৃতীয় পর্যায় হল Mount: Fabric মূল UI এ পরিবর্তন প্রয়োগ করে, UIViews তৈরি, আপডেট বা মুছে ফেলে।

• Render — JS থ্রেডে কার্যকর, একটি React Element Tree তৈরি করে।
• Commit — C++ Shadow Tree ডিফ গণনা করে এবং মিউটেশনের একটি তালিকা তৈরি করে।
• Mount — মূল থ্রেডে মূল UI এ মিউটেশন প্রয়োগ করা হয়।

তিনটি পর্যায় একটি একক পাইপলাইন হিসেবে কাজ করে যেখানে সারিয়ালাইজেশন ছাড়া JSI এর মাধ্যমে ডাটা স্থানান্তরিত হয়। এটি পুরানো আর্কিটেকচার থেকে একটি মূল পার্থক্য, যেখানে পর্যায়গুলোর মধ্যে ফাঁক ছিল: JS → (JSON) → Shadow Thread → (লেআআউট) → Native Thread।

Fabric বসাম পুরানো রেন্ডারার: তুলনা

Fabric এর পুরানো রেন্ডারারের সাথে তুলনা দেখায় যে React Native আর্কিটেকচার কতটা মূলভাবে পরিবর্তিত হয়েছে। পুরানো রেন্ডারার অ্যাসিংক্রোনাইজড ভাবে কাজ করত, রেন্ডারিং প্রক্রিয়াকে তিনটি স্বাধীন থ্রেডে বিভক্ত করে। Fabric সবকিছু একটি C++ পাইপলাইনে সংযুক্ত করে।

ব্যবহারিক ভাবে, Fabric বিশেষ করে এই অ্যাপ্লিকেশনগুলির জন্য লাভপ্রদ যাদে বারংবার UI আপডেট হয়: এনিমেশন, ভাসমান হেডার সহ স্ক্রল, রিয়াল-টাইম ডাটা। স্থির পৃষ্ঠার জন্য (টেক্সট, বাতাম) পার্থক্যটি কম উল্লেখযোগ্য। Meta বেঞ্চমার্ক অনুযায়ী, Fabric প্রারম্ভিক তালিকা রেন্ডারিং সময় 40–60% হ্রাস করে।

JSI এবং Fabric: নতুন যোগাযোগ

JSI (JavaScript Interface) একটি মূল উপাদান যা Fabric কে সম্ভব করে। JSI এর মাধ্যমে, Fabric সারিয়ালাইজেশন ছাড়া JavaScript মান এর সরাসরি প্রবেশ পায়। যখন React Fabric এ প্রপস পাঠায়, সেগুলো JSON এর মাধ্যমে কপি করা হয় না — JSI JS ইংজিনের মেমরিতে ডাটার জন্য পয়েন্টার পাঠায়।

JSI আর্কিটেকচার Fabric কে যেকোনো JavaScript ইংজিন দিয়ে কাজ করার অনুমতি দেয় — Hermes, JSC বা V8। Fabric C++ কোড কোনো নির্দিষ্ট JS ইংজিন বাস্তবায়নের উপর নির্ভর করে না, যা রক্ষণাবেক্ষণ এবং পরীক্ষাকে সরল করে। সব কাজ — সৃষ্টি, আপডেট, মুছে ফেলা — JSI এর মাধ্যমে সম্পাদিত হয়, যা সর্বনিম্ন বিলম্ব নিশ্চিত করে।

// JSI এর মাধ্যমে Fabric C++ রেন্ডারিং পাইপলাইন
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // JSI এর মাধ্যমে সিংক্রোনাইজড প্রপস স্থানান্তরণ
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Yoga এর মাধ্যমে সরাসরি লেআআউট গণনা
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // মূল UI এ মিউটেশন প্রয়োগ করুন
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

মূল সুবিধা হল সিংক্রোনাইজড আপডেট। পুরানো আর্কিটেকচারে, UI একটি অ্যাসিংক্রোনাইজড ক্যুর মাধ্যমে আপডেট করা হত: React Bridge এর মাধ্যমে একটি কমান্ড পাঠাত, Shadow Thread লেআআউট প্রক্রিয়া করত, Native Thread রেন্ডার করত। Fabric এ, সব ধাপ একটি একক পাসে পরিপাঠিক ভাবে কার্যকর করে। এটি রেস কন্ডিশন দূর করে এবং নিশ্চিত করে যে UI এপ্লিকেশনের বর্তমান অবস্থার সাথে মেল খায়।

Fabric এ স্থানান্তরণ

Fabric এ স্থানান্তরণের জন্য React উপাদান পুনর্লিখার প্রয়োজন নেই — সমস্ত বিদ্যমান React Native উপাদান কাজ করতে থাকে। তবে, নেটিভ কোড (Native Module, কাস্টম ViewManager) সহ লাইব্রেরিগুলি আপডেটের প্রয়োজন হতে পারে। Meta নতুন আর্কিটেকচার সক্রিয় করার আগে প্রতিটি লাইব্রেরির সাপেক্ষতা যাচাই করার পরামর্শ দেয়।

React Native 0.76+ প্রক঳্পে Fabric সক্রিয় করতে, react-native.config.js এ newArchEnabled: true ফ্ল্যাগ সেট করুন। Fabric Turbo Module এর সাথে স্বচালিতভাবে সক্রিয় হবে। সমস্যা হলে, অ্যাপ্লিকেশন কোড পরিবর্তন ছাড়াই পুরানো রেন্ডারারে ফিরে গিয়ে Fabric নিষ্ক্রিয় করা যাবে — দুটি আর্কিটেকচারই সমানান্তরে সমর্থিত।

// package.json — Fabric-সঙ্গতিপূর্ণ লাইব্রেরি যাচাই করুন
"react-native": "0.76.6",
"react-native-safe-area-context": "^5.0.0",
"react-native-screens": "^4.0.0",
"react-native-reanimated": "^3.16.0",
"react-native-gesture-handler": "^2.21.0"

স্থানান্তরণের সময়, সব নেটিভ লাইব্রেরি Fabric এর সাথে সংগতিপূর্ণ সংস্করণে আপডেট করা গুরুত্বপূর্ণ। react-native-reanimated এবং react-native-gesture-handler এর মতো প্রধান লাইব্রেরিগুলি ইতিমধ্যেই নতুন আর্কিটেকচার সমর্থন করে। যে লাইব্রেরিগুলি এখনও আপডেট করা হয়নি, তাদের জন্য Fabric একটি সঙ্গতিতা প্রক্রিয়া প্রদান করে — যদি একটি লাইব্রেরি Fabric সমর্থন না করে, রেন্ডারার স্বচালিতভাবে সেই লাইব্রেরির জন্য পুরানোটিতে ফিরে যায়।