طوال عقد من الزمان، كان الجدل حول “الهجين ضد السكان الأصليين” عبارة عن حرب مقدسة. ادعى الأصوليون الأصليون أن JavaScript لا يمكنها أبدًا تحقيق 60 إطارًا في الثانية. ادعى أنصار المنصات المتعددة أن التطوير المحلي الصارم كان بمثابة انتحار مالي.

في عام 2025، انتهت الحرب. ** فاز React Native.** ليس لأنه “أسهل”، ولكن لأن الهندسة المعمارية الجديدة (بدون جسر) حلت بشكل أساسي فجوة الأداء. تعمل تطبيقات مثل Discord وShopify وCoinbase على React Native، ولا يمكنك معرفة الفرق.

في Maison Code Paris، نستخدم React Native ليس كحل وسط، بل كسلاح استراتيجي. فهي تسمح لنا بالشحن إلى الويب وiOS وAndroid من monorepo واحد، ومشاركة 95% من منطق أعمالنا.

لماذا يناقش Maison Code هذا الأمر

في Maison Code Paris، نعمل بمثابة الضمير المعماري لعملائنا. غالبًا ما نرث الأكوام “الحديثة” التي تم إنشاؤها دون فهم أساسي للحجم. نرى واجهات برمجة تطبيقات بسيطة تستغرق 4 ثوانٍ للرد بسبب مشكلات استعلام N+1، و”الخدمات الصغيرة” التي تكلف 5000 دولار شهريًا كرسوم سحابية خاملة.

نناقش هذا الموضوع لأنه يمثل نقطة محورية حاسمة في النضج الهندسي. إن تنفيذ هذا بشكل صحيح يميز MVP الهش عن النظام الأساسي المرن على مستوى المؤسسات والذي يمكنه التعامل مع حركة مرور الجمعة السوداء دون بذل أي جهد.

العمارة: لماذا مات “الجسر”.

لفهم React Native الحديث، يجب أن تفهم سبب بطء الإصدار القديم.

العالم القديم: الجسر غير المتزامن

في البنية الكلاسيكية (2015-2022)، تم عزل خيط JavaScript وخيط واجهة المستخدم (الرئيسي). لتقديم عرض، كان على JS:

قم بإجراء تسلسل لرسالة JSON ({ النوع: 'createView'، العرض: 100 }).
أرسله عبر “الجسر”.
انتظر حتى يقوم الجانب الأصلي بإلغاء تسلسله وعرضه.

إذا قمت بتمرير القائمة بسرعة، فسيتم انسداد Bridge بآلاف رسائل JSON. سوف يتجمد مؤشر ترابط واجهة المستخدم في انتظار JS. تسبب هذا في ظهور “الفلاش الأبيض” الشهير أثناء التمرير السريع.

العالم الجديد: JSI والنسيج

قامت الهندسة المعمارية الجديدة بإزالة الجسر بالكامل. لقد قدمت واجهة جافا سكريبت (JSI). يسمح هذا لمحرك JavaScript (Hermes) بالاحتفاظ بمرجع C++ إلى كائن أصلي. يمكن لـ JS استدعاء الأساليب على عناصر واجهة المستخدم ** بشكل متزامن **.

TurboModules: قم بتحميل الوحدات الأصلية (Bluetooth، الكاميرا) عند الحاجة فقط، وليس عند بدء التشغيل.
القماش: نظام العرض الجديد. يعطي الأولوية لتحديثات واجهة المستخدم تمامًا مثلما يعطي المتصفح الأولوية لـ CSS.

النتيجة: 60 إطارًا في الثانية (أو 120 إطارًا في الثانية على شاشات ProMotion) هي الآن الحالة الافتراضية، وليست صراعًا.

المكدس: المعرض هو الإطار

في عام 2025، لن نقوم بتشغيل npx React-Native init. نحن نستخدم المعرض. Expo هو رد فعل أصلي كما هو الحال مع Next.js للرد. إنه الإطار التعريفي الذي يتعامل مع الأشياء المملة.

1. جهاز توجيه Expo (التوجيه المستند إلى الملف)

كان التوجيه على الهاتف المحمول صعبًا للغاية (نموذج التنقل التفاعلي). Expo Router يجلب نموذج Next.js إلى الهاتف المحمول.

// التطبيق/المنتج/[id].tsx
استيراد { useLocalSearchParams } من 'جهاز توجيه المعرض'؛
استيراد {نص} من "رد الفعل الأصلي"؛

تصدير الوظيفة الافتراضية ProductScreen () {
  const {id } = useLocalSearchParams();
  إرجاع <نص>معرف المنتج: {id}</Text>؛
}

يتحول هذا الملف تلقائيًا إلى رابط عميق: myapp://product/123. على الويب، يصبح https://myapp.com/product/123. جهاز توجيه واحد. التنفيذ العالمي.

2. مكونات التكوين الإضافية (CNG)

لم نعد نلمس أبدًا مجلدات “ios/” أو “android/” بعد الآن. وهذا يسمح لنا باستخدام الجيل الأصلي المستمر (CNG). بدلاً من تنفيذ ملفات المشروع الأصلية (التي تتعفن وتتسبب في تعارضات الدمج)، نقوم بإنشائها في وقت الإنشاء بناءً على app.json.

هل تحتاج إلى إضافة أذونات الكاميرا؟

// app.json
{
  "الإضافات": [
    [
      "كاميرا المعرض"،
      {
        "cameraPermission": "السماح لرمز Maison Code بمسح رموز QR."
      }
    ]
  ]
}

هندسة الأداء

حتى مع Fabric، يمكنك كتابة كود React البطيء. إليك كيفية تحسين ملمس “زبدة ناعمة”.

1. FlashList (أداة إعادة التدوير)

تُنشئ FlatList القياسية مكون React جديدًا لكل صف. استخدام الذاكرة ينمو خطيا. نحن نستخدم FlashList (بواسطة Shopify). يتم تشغيله على مؤشر ترابط واجهة المستخدم وطرق العرض “إعادة التدوير”. عندما يتم تمرير صف ما خارج الشاشة، فإن ذلك لا يؤدي إلى تدميره؛ ينقله إلى الأسفل ويغير النص. يؤدي هذا إلى تقليل القوائم الضخمة (10000 عنصر) إلى الاستخدام المستمر للذاكرة (يوجد حوالي 10 عناصر فقط في الذاكرة).

استيراد { FlashList } من "@shopify/flash-list";

<قائمة الفلاش
  البيانات={المنتجات}
  renderItem={({ item }) => <ProductCard item={item} />}
  حجم العنصر المقدر={200} 
/>

2. MMKV (التخزين المتزامن)

يعد AsyncStorage بطيئًا لأنه يتعامل مع الإدخال/الإخراج للقرص باعتباره وعد JSON. نقوم بتفريغ مساحة التخزين إلى MMKV (التي كتبها Tencent لـ WeChat). إنه مخزن قيمة المفتاح المعين للذاكرة C ++. إنه أسرع بحوالي 30 مرة. نحن نستخدمه لتخزين رموز المصادقة وتفضيلات المستخدم بحيث يتم تشغيل التطبيق على الفور مع تسجيل دخول المستخدم.

استراتيجية مشاركة الكود: The Monorepo

أكبر عائد على الاستثمار في React Native هو مشاركة التعليمات البرمجية. ولكن لا يجب عليك فقط نسخ ولصق الملفات. يجب عليك تصميم Monorepo (باستخدام TurboRepo أو Nx).

/apps
  /ويب (Next.js)
  /الجوال (المعرض)
/package
  /ui (مكونات Tamagui/NativeWind المشتركة)
  / المنطق (مخازن Zustand، خطافات React Query، مخططات Zod)
  /api (عميل واجهة برمجة التطبيقات النموذجي)

يستورد تطبيق “الجوال”: استيراد { useCart } من '@maison/logic'؛ استيراد { زر } من '@maison/ui'؛

يستورد تطبيق “الويب” نفس الشيء تمامًا. نكتب منطق “أضف إلى سلة التسوق” مرة واحدة. نختبره مرة واحدة. نحن نشحنها في كل مكان. الاختلاف الوحيد هو التنقل والإيماءات الخاصة بالمنصة.

تحديثات عبر الهواء: تجاوز متجر التطبيقات

من المزايا المهمة للأعمال التحديثات عبر الأثير (OTA) عبر تحديث EAS. إذا وجدت خطأً فادحًا في عملية الدفع الخاصة بك يوم الجمعة السوداء:

التطبيق الأصلي: أرسل الإصلاح -> انتظر 24 ساعة لمراجعة Apple -> انتظر حتى يقوم المستخدمون بالتحديث. التكلفة: الآلاف من المبيعات المفقودة.
تطبيق اكسبو: تحديث سهل - إنتاج الفرع. يتم تنزيل حزمة JS الجديدة بصمت في الخلفية. يحصل المستخدمون على الإصلاح عند الإطلاق التالي. الوقت: 10 دقائق.

ملاحظة: يمكنك فقط تغيير JavaScript/Assets عبر OTA. لا يمكنك تغيير الكود الثنائي الأصلي (على سبيل المثال، إضافة وحدة إذن جديدة).

10. إمكانية الوصول (VoiceOver / TalkBack)

يجب أن تكون التطبيقات الأصلية قابلة للوصول. تقوم React Native بتعيين الدعائم القياسية لواجهات برمجة تطبيقات إمكانية الوصول الأصلية. <عرض قابل للوصول={true} accessibilityLabel="Add to Cart"> استخدم Accessibility Inspector في Xcode للتحقق. إذا لم يكن تطبيقك قابلاً للاستخدام من قبل المكفوفين، فأنت بذلك تترك 15% من السوق خلفك (وتدعو إلى رفع دعاوى قضائية).

11. اختبار E2E الآلي: مايسترو

كان التخلص من السموم هو المعيار، لكنه كان غير مستقر. المايسترو هو الملك الجديد. إنه يقود واجهة المستخدم مثل الإنسان (باستخدام معرفات إمكانية الوصول).

تشغيل التدفق: app_flow.yaml


## 11. الاستنتاج

لم يعد React Native هو "البديل". هذا هو الافتراضي.
إذا كنت تقوم بإنشاء تطبيق للمستهلك في عام 2026، ولا تستخدم Expo + React Native، فأنت تختار العمل بجهد مضاعف للحصول على نفس النتيجة.
نحن نساعد العلامات التجارية على الانتقال من قواعد التعليمات البرمجية "الأصلية" القديمة إلى مجموعات حديثة وموحدة.

<hr style="margin: 1rem 0" />

**[قم بتعيين مهندسينا المعماريين](/اتصل)**.