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) کے تصور پر مبنی ہے۔ درخت کا ہر نوڈ اپنے props اور حالت کے ساتھ ایک React کمپونینٹ کی نمائندگی کرتا ہے۔ جب حالت بدلتی ہے تو ایک نیا درخت بنایا جاتا ہے، اور Fabric پرانے اور نئے درخت کے درمیان فرق کا حساب لگاتا ہے اور صرف ضروری تبدیلیاں نیٹف UI پر لاگو کرتا ہے۔ یہ UIView/ViewGroup کے عملیات کی تعداد کو کم کرتا ہے اور رینڈرنگ کا وقت کم کرتا ہے۔

Shadow Tree کیسے کام کرتا ہے

Shadow Tree Fabric کے کام کی بنیاد ہے۔ پرانے آرکیٹیکچر کے برعکس، جہاں Shadow Tree صرف C++ کی جانب موجود تھی اور غیر ہم آہنگ Bridge کے ذریعے JS درخت سے علیحدہ تھی، Fabric UI کی مکمل طور پر ہم آہنگ تنظیمی نمائندگی بناتا ہے۔ Shadow Tree نوڈز کمپونینٹس کے props، حالت اور انداز کو ذخیرہ کرتے ہیں، اور 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 کو props بھیجتا ہے، وہ JSON کے ذریعے کاپی نہیں کیئے جاتے — JSI JS انجن کی میمری میں ڈیٹا کے لیے پوائنٹر بھیجتا ہے۔

JSI آرکیٹیکچر Fabric کو کسی بھی JavaScript انجن کے ساتھ کام کرنے کی اجازت دیتا ہے — Hermes، JSC یا V8۔ Fabric C++ کوڈ کسی مخصوص JS انجن نفاذ پر منحصر نہیں ہوتا، جو دیکھبھال اور ٹیسٹنگ کو آسان بناتا ہے۔ تمام UI کاروائیاں — تخلیق، اپ ڈیٹ، حذف — 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 کے ذریعے ہم آہنگ prop منتقلی
    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 کو سپورٹ نہیں کرتی، تو رینڈرر خود بخود اس لائبریری کے لیے پرانے پر واپس آ جاتا ہے۔