إطلاق Expo SDK 52: البنية الجديدة افتراضياً ومكونات الويب الأصيلة DOM Components

أعلن فريق تطوير Expo رسمياً عن إطلاق الإصدار الرئيسي المنتظر Expo SDK 52، والذي يمثل النقلة الهندسية الأكثر جذرية في تاريخ المنظومة منذ تأسيسها. يأتي هذا الإصدار ليتوج مسيرة سنوات من التعاون الوثيق مع فريق React Native في Meta، حيث يعتمد Expo SDK 52 على الإصدار الأحدث React Native 0.76 مع تفعيل البنية الجديدة (The New Architecture) بصورة افتراضية لكافة التطبيقات الجديدة والمحدثة. إلى جانب ذلك، يقدم الإصدار ميزة استثنائية طال انتظارها وهي مكونات الويب المدمجة (DOM Components) عبر الموجه التجريبي use dom، مع الدعم التام لمكتبة React 19، وترقية نظام التوجيه Expo Router v4 ليدعم أشرطة التنقل الأصلية (Native Tabs) والتكامل الصارم مع نظام Android 15.

في هذا الدليل الهندسي، نستعرض التحولات المعمارية في Expo SDK 52، ونشرح كيفية الاستفادة من DOM Components لإعادة استخدام مكتبات الويب المعقدة داخل شاشات الهاتف الأصلية دون التضحية بسلاسة تجربة المستخدم، مع توفير خطة هجرة عملية ومؤشرات فحص لتحديث تطبيقات الهواتف العاملة في بيئات الإنتاج.

---

1. ملخص الخبر وسياق التحول المعماري

لطالما عانى مطورو تطبيقات الهواتف الهجينة من فجوة الأداء التاريخية الناتجة عن الجسر البرمجي غير المتزامن (Asynchronous JSON Bridge) في React Native القديم، والذي كان يسبب بطء الاستجابة واهتزاز الواجهات عند التمرير السريع، وصعوبة مزامنة التخطيطات المعقدة ثنائية اللغة (RTL/LTR). ومع إطلاق React Native 0.76، أصبح محرك التصيير الجديد Fabric ونظام الوحدات الأصلية المباشرة TurboModules حقيقة واقعة ومستقرة.

يقوم Expo SDK 52 بتغليف هذه القفزة في بيئة تطوير موحدة ومنضبطة، مقدماً خمسة محاور هندسية حاسمة:

• تفعيل البنية الجديدة تلقائياً: أصبحت البنية الجديدة New Architecture مفعلة افتراضياً دون الحاجة لكتابة أي إعدادات خاصة في ملف app.json، مما يلغي الجسر القديم ويوفر اتصالاً مباشراً بين كود JavaScript ونظام التشغيل عبر C++ JSI.
• إطلاق ميزة DOM Components (use dom): تمكين المطورين من تشغيل كود HTML5 وCSS ومكتبات الرسوم البيانية المتطورة (مثل Three.js وRecharts وMonaco Editor) داخل مكونات خفيفة تعمل مباشرة داخل الشاشات الأصلية دون الحاجة لإدارة حزم WebView يدوية ومعقدة.
• التوافق مع React 19 ومترجم React Compiler: دعم كافة خطافات وميزات React 19 الجديدة، وإتاحة التوافق التجريبي مع React Compiler لتحسين إعادة التصيير تلقائياً دون الحاجة لاستخدام useMemo وuseCallback اليدوي.
• Expo Router v4 وأشرطة التنقل الأصلية: دمج شاشات التنقل مع المكونات الأصلية للنظام (UIKit على iOS وFragment/BottomNavigationView على Android)، مما يمنح التطبيق مظهر وسلوك التطبيقات المكتوبة بلغات أصلية 100%.
• الامتثال التام لمتطلبات Android 15: دعم التصميم الممتد من الحافة إلى الحافة (Edge-to-Edge) افتراضياً للتعامل السلس مع شريط التنقل الشفاف وقواطع الكاميرا في الأجهزة الحديثة.

---

2. التحليل التقني وتفاصيل التنفيذ

تفتح ميزة DOM Components في Expo SDK 52 آفاقاً هندسية ثورية لبناء ميزات غنية بصرياً دون إعادة اختراع العجلة للمنصات المحمولة.

أولاً: إنشاء مكون ويب هجين باستخدام use dom

يمكن للمطورين الآن كتابة مكون React يستخدم عناصر المتصفح القياسية مثل <div> و<canvas> وعرضه كعنصر أصيل داخل تطبيق Expo:

// components/ChartComponent.tsx
"use dom"; // موجه التوجيه البرمجي الأصيل لـ Expo SDK 52

import React from "react";

interface ChartProps {
  dataPoints: number[];
  currencySymbol: string;
}

export default function ChartComponent({
  dataPoints,
  currencySymbol,
}: ChartProps) {
  const maxValue = Math.max(...dataPoints, 1);

  return (
    <div
      style={{ padding: "16px", fontFamily: "sans-serif", direction: "rtl" }}
    >
      <h3 style={{ fontSize: "16px", margin: "0 0 12px 0", color: "#111827" }}>
        مؤشر الإيرادات الأسبوعية
      </h3>
      <div
        style={{
          display: "flex",
          alignItems: "flex-end",
          height: "140px",
          gap: "8px",
        }}
      >
        {dataPoints.map((value, index) => {
          const heightPercent = (value / maxValue) * 100;
          return (
            <div
              key={index}
              style={{
                flex: 1,
                backgroundColor: "#2563eb",
                height: `${heightPercent}%`,
                borderRadius: "4px 4px 0 0",
                display: "flex",
                justifyContent: "center",
                alignItems: "flex-start",
                color: "#ffffff",
                fontSize: "10px",
                paddingTop: "2px",
              }}
            >
              {value}
            </div>
          );
        })}
      </div>
      <p style={{ fontSize: "12px", color: "#6b7280", marginTop: "8px" }}>
        القيم مقاسة بـ: {currencySymbol}
      </p>
    </div>
  );
}

ثانياً: استدعاء المكون الهجين داخل شاشة أصلية

يتم استيراد واستدعاء المكون في أي شاشة أصلية كما لو كان مكون React Native اعتيادياً، حيث يتولى Expo إنشاء جسر اتصال فائق الكفاءة بين النظامين:

// app/(tabs)/analytics.tsx
import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
} from "react-native";
import ChartComponent from "@/components/ChartComponent";

export default function AnalyticsScreen() {
  const [revenue, setRevenue] = useState([
    1200, 1850, 2400, 2100, 3100, 2900, 4200,
  ]);

  const refreshData = () => {
    setRevenue(
      revenue.map((val) => val + Math.floor(Math.random() * 200 - 100)),
    );
  };

  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
      <Text style={styles.screenTitle}>لوحة مؤشرات الأعمال</Text>

      {/* المكون الهجين يعمل كعنصر مرئي مدمج بدون شريط تمرير أو وميض */}
      <View style={styles.chartCard}>
        <ChartComponent
          dataPoints={revenue}
          currencySymbol="QAR"
          dom={{ matchContents: true }}
        />
      </View>

      <TouchableOpacity style={styles.actionButton} onPress={refreshData}>
        <Text style={styles.buttonText}>تحديث المؤشرات المالية</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#f9fafb" },
  content: { padding: 16 },
  screenTitle: {
    fontSize: 22,
    fontWeight: "700",
    color: "#111827",
    marginBottom: 16,
    textAlign: "right",
  },
  chartCard: {
    backgroundColor: "#ffffff",
    borderRadius: 12,
    overflow: "hidden",
    elevation: 2,
    shadowOpacity: 0.05,
  },
  actionButton: {
    backgroundColor: "#0f766e",
    padding: 14,
    borderRadius: 8,
    marginTop: 16,
    alignItems: "center",
  },
  buttonText: { color: "#ffffff", fontSize: 15, fontWeight: "600" },
});

---

3. الأثر على الأعمال والتكاليف التشغيلية

يحقق Expo SDK 52 وفورات جوهرية في ميزانيات تطوير التطبيقات ودورات الصيانة:

• تسريع زمن طرح الميزات البرمجية (Time-to-Market): تتيح ميزة DOM Components لفرق التطوير إعادة استخدام مكتبات الرسوم والخرائط المتطورة والمحررات الغنية المكتوبة للويب بنسبة 100% دون الحاجة إلى إعادة برمجتها أو التعاقد مع مطورين مخصصين لكتابة موديولات C++ أو Swift/Kotlin أصلية.
• انخفاض معدلات انهيار التطبيقات (Crash Rates): يوفر نظام New Architecture إدارة ذاكرة دقيقة عبر واجهات JSI الخالية من التسريبات (Memory Leaks)، مما يقلل معدل توقف التطبيق عن العمل (ANR / Crash rate) في متاجر Google Play وApp Store.
• تخفيض تكاليف خطوط البناء السحابية (EAS Build): يؤدي تحسين الربط الداخلي والمترجمات المحدثة إلى خفض وقت البناء عبر خوادم EAS Build بنسبة تتراوح بين 15% و25%، مما ينعكس مباشرة على تقليص فواتير البنية التحتية للمؤسسات.

---

4. قائمة التحقق للتنفيذ والهجرة المعمارية

المرحلة	الإجراء الهندسي	آلية التحقق
1. تدقيق التبعيات	تشغيل أمر npx expo-doctor لرصد أي حزم تابعة تفتقر لدعم New Architecture	الحصول على تقرير نظيف يخلو من تحذيرات التوافق
2. ترقية الحزم	تنفيذ أمر npx expo install expo@^52.0.0 --fix لتحديث مكتبات المنظومة	تطابق أرقام الإصدارات مع سجل حزم Expo SDK 52 الرسمي
3. اختبار الواجهات العربية	فحص سلوك التخطيط RTL في شاشات Fabric للتأكد من سلامة الهوامش والأيقونات	اجتياز اختبارات العرض في أجهزة iOS وAndroid المتنوعة
4. ضبط Android 15	تهيئة شريط الحالة والأشرطة السفلية عبر react-native-safe-area-context	التحقق من عدم تداخل المحتوى مع شريط المهام الشفاف
5. تفعيل أدوات التطوير	استخدام أدوات React Native DevTools الجديدة المعتمدة على Chrome DevTools	قياس أداء الرسوم ومعدل الإطارات عند 60 إطاراً في الثانية

---

5. المخاطر والقيود المعمارية

• توافق الموديولات القديمة (Legacy Modules): على الرغم من توفير طبقة توافق رجعي (Interop Layer)، إلا أن بعض المكتبات المجتمعية القديمة التي تتلاعب مباشرة بطبقات الشاشات أو الجسر البرمجي القديم قد تفشل في العمل ما لم يتم ترقيتها أو استبدالها ببدائل تدعم TurboModules.
• حدود استخدام DOM Components: يجب استخدام ميزة use dom بحكمة واعتدال للمكونات التفاعلية أو الرسومية الصعبة؛ حيث إن الإفراط في استخدامها لكافة عناصر الواجهة الاعتيادية مثل القوائم والأزرار سيعيد التطبيق إلى مشكلات تطبيقات Cordova القديمة من حيث استهلاك الذاكرة وبطء زمن الاستجابة اللمسي.
• تحديثات التوزيع على المتاجر: يتطلب التوافق مع Android 15 استخدام حزم تجميع تستهدف واجهة البرمجة (Target SDK 35)، مما يستوجب فحص أذونات الكاميرا والموقع والوصول إلى الملفات للتأكد من موافقتها مع سياسات الأمان الجديدة.

---

6. التوصية الهندسية وخدمات الدعم المباشر

نوصي كافة مديري المنتجات والمطورين بالبدء في تهيئة مشاريعهم لترقية Expo SDK 52 عبر فحص التبعيات الخارجية واختبار البنية الجديدة في بيئات تجريبية منفصلة. يمثل هذا التوقيت الفرصة المثالية للتخلص من الديون التقنية القديمة والاستفادة من استقرار محرك Fabric ودعم شاشات Android 15 الحديثة.

نقدم من خلال خدماتنا الموجهة لتطوير تطبيقات الهواتف الذكية (تطوير تطبيقات الجوال) دعماً استشارياً وتنفيذياً كاملاً لترقية تطبيقات React Native وExpo القائمة، وبناء تطبيقات هجينة متطورة تدعم اللغة العربية (RTL) بأعلى معايير الجودة والأداء لقطاعات الأعمال والخدمات في قطر والخليج.

---

7. المصادر والتوثيق الرسمي

• إعلان Expo الرسمي لإطلاق SDK 52 : أكتوبر 2024
• دليل استخدام مكونات الويب المدمجة DOM Components في Expo : أكتوبر 2024
• سجل تغييرات React Native 0.76 والبنية الجديدة في Expo : أكتوبر 2024