Runtime و Hot Reload والبناء في تطوير الجوال: ما هي، المفاهيم الأساسية وكيف تعمل

Runtime و Reflection: iOS Runtime و Method Swizzling والإرسال الديناميكي

Runtime (بيئة التنفيذ) هو البرنامج الذي يدير تنفيذ التطبيق. في سياق iOS Runtime، هو النظام الديناميكي لـ Objective-C الذي يسمح بإرسال الرسائل إلى الكائنات وإنشاء الفئات أثناء التشغيل واستبدال الأساليب أثناء التنفيذ. هذا ممكن لأن Objective-C لغة ديناميكية الأنواع مبنية فوق C.

Reflection هي قدرة البرنامج على فحص وتعديل بنيته الخاصة أثناء التنفيذ. في iOS Runtime، يتم تنفيذ ذلك عبر دوال مثل class_getInstanceMethod و method_exchangeImplementations و objc_getAssociatedObject. في Kotlin/Java، يستخدم الانعكاس KClass / java.lang.reflect.

في IT Sectr، نستخدم Runtime نادراً جداً — فقط للمهام المحددة حيث لا يوجد بديل. على سبيل المثال، Method Swizzling لتسجيل التحليلات المركزي أو إصلاح الأخطاء في المكتبات. ومع ذلك، Runtime أداة قوية تتطلب فهماً عميقاً وحذراً.

Method Swizzling

Method Swizzling هي تقنية لاستبدال تنفيذ أسلوب Objective-C بآخر أثناء التنفيذ. هذه حالة خاصة من البرمجة الموجهة نحو الجوانب (AOP) لنظام iOS. يسمح Swizzling بإضافة التسجيل أو التحليلات أو التخزين المؤقت إلى الأساليب الحالية دون تغيير كودها المصدر.

مثال نموذجي: استبدال viewWillAppear: في UIViewController لإضافة تسجيل تلقائي للشاشات. مهم: يجب تنفيذ swizzling في الأسلوب +load أو +initialize لضمان التنفيذ قبل استخدام الفئة. يمكن أن يؤدي swizzling غير الصحيح إلى سلوك غير محدد وأخطاء يصعب تصحيحها.

// Method Swizzling لتسجيل viewWillAppear:
@implementation UIViewController (Tracking)

+ (void)load {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        Class class = [self class];
        SEL originalSelector = @selector(viewWillAppear:);
        SEL swizzledSelector = @selector(xxx_viewWillAppear:);
        
        Method originalMethod = class_getInstanceMethod(class, originalSelector);
        Method swizzledMethod = class_getInstanceMethod(class, swizzledSelector);
        method_exchangeImplementations(originalMethod, swizzledMethod);
    });
}

- (void)xxx_viewWillAppear:(BOOL)animated {
    [self xxx_viewWillAppear:animated]; // استدعاء الأسلوب الأصلي
    [Analytics logScreen:NSStringFromClass([self class])];
}

@end

هذا الكود يستبدل viewWillAppear: في جميع UIViewController عبر swizzling. بعد method_exchangeImplementations، استدعاء viewWillAppear: الأصلي يؤدي إلى استدعاء xxx_viewWillAppear:، الذي يستدعي الأسلوب الأصلي (عبر استدعاء متكرر) ويضيف التحليلات. DispatchOnce يضمن تنفيذاً واحداً لـ swizzling.

أدوات الويب (Transpilation و Polyfill و Bundler و Webpack و Metro)

تطوير الويب الحديث وتطوير الجوال باستخدام React Native أو Flutter مستحيلان بدون أدوات البناء. Transpilation هو تحويل الكود من لغة إلى أخرى. المثال الأكثر شيوعاً: TypeScript → JavaScript. المحول (Babel, tsc) يحول الكود الحديث إلى نسخة متوافقة مع الإصدارات السابقة.

Polyfill هو كود يضيف وظائف مفقودة للمتصفحات القديمة. على سبيل المثال، Promise.allSettled() لا يعمل في Internet Explorer، لكن polyfill يضيف هذه الإمكانية. على عكس Runtime الأصلي، الذي يدير تنفيذ الكود مباشرة على الجهاز، تعمل polyfills والمحولات على مستوى تجريد اللغة — فهي تكيّف بناء الجملة وواجهات API لكنها لا تتدخل في بيئة التنفيذ.

Webpack هو أشهر أداة تجميع (تُستخدم في 72% من المشاريع حسب State of JS 2024). Metro هي أداة تجميع فيسبوك، المستخدمة افتراضياً في React Native. Reflection في JavaScript موجود عبر Object.getPrototypeOf و Proxy و Reflect API — هذه الآليات تسمح بفحص وتعديل الكائنات أثناء التنفيذ، وهو ما يختلف جوهرياً عن التحليل الثابت للوحدات في أدوات التجميع. يستخدم Webpack ملف تكوين يصف نقطة الدخول والمخرجات والـ loaders (لمعالجة أنواع الملفات المختلفة) والـ plugins (لوظائف إضافية).

// webpack.config.js — تكوين أدنى
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
        ],
    },
    mode: 'production',
};

هذا التكوين يحدد نقطة الدخول (index.js) وملف المخرجات (bundle.js) وقاعدة لمعالجة JavaScript عبر Babel. وضع production يفعل التحسينات: التصغير و tree shaking والكشف التلقائي عن البيئة. في مرحلة Runtime، كل هذه التحسينات لم تعد تؤثر على المنطق — المتصفح ينفذ الحزمة المصغرة كـ JavaScript عادية.

تحسين الكود (Minification و Tree Shaking و Obfuscation)

Minification هي عملية ضغط الكود بإزالة المسافات والتعليقات وإعادة تسمية المتغيرات الطويلة إلى قصيرة. أدوات التصغير الشائعة: Terser (JS/TS) و CSSNano (CSS) و html-minifier-terser. يقلل التصغير حجم الملف بنسبة 50–70%. في الإنتاج، Runtime ينفذ الكود المصغر تماماً مثل الكود الأصلي — الفرق فقط في قابلية القراءة وحجم الملف، وليس في الدلالات.

Tree Shaking هو إزالة الكود الميت غير المستخدم في التطبيق. يعمل بناءً على التحليل الثابت لوحدات ES (import/export). إذا تم تصدير دالة لكن لم يتم استيرادها أبداً، يزيلها Tree Shaking من البناء النهائي. يحلل Tree Shaking الكود بشكل ثابت — على عكس Reflection الذي يعمل ديناميكياً ويمكنه الوصول إلى أساليب وخصائص غير مرئية في وقت التجميع.

Tree Shaking

Tree Shaking في Webpack يُفعّل تلقائياً في وضع الإنتاج. شرط مهم: يجب أن يستخدم الكود وحدات ES (import/export) وليس CommonJS (require). إذا كانت المكتبة مكتوبة بـ CommonJS، لن يعمل tree shaking. للحصول على tree shaking أمثل، استخدم استيرادات دقيقة: import { merge } from 'lodash-es' بدلاً من import _ from 'lodash'. هذا يقلص حجم الحزمة من 500 كيلوبايت إلى 10 كيلوبايت لدالة واحدة.

Hot Reload

Hot Reload هي تقنية تسمح بتحديث كود التطبيق دون إعادة تحميل كامل. في React Native و Flutter، يقوم Hot Reload بتحديث الملف المعدل أثناء التشغيل، محافظاً على حالة التطبيق الحالية. هذا يسرّع التطوير بشكل جذري: تظهر التغييرات خلال 1–2 ثانية بدلاً من 10–30 ثانية لإعادة البناء الكاملة. يعمل Hot Reload داخل Runtime: يتم حقن الوحدة المعدلة في التطبيق الجاري دون إعادة تشغيل بيئة التنفيذ.

Hot Restart هو إعادة تشغيل سريعة للتطبيق بكود محدث، لكن دون الحفاظ على الحالة. يُستخدم عندما لا يكون Hot Reload ممكناً (مثلاً، عندما يتغير الكود الأصلي أو المتغيرات العامة). في IT Sectr، نستخدم Hot Reload في جميع مراحل تطوير واجهة المستخدم — إنه يوفر حتى 50% من الوقت في التعديلات البصرية.

الجدول 3. مقارنة أدوات البناء. Webpack هو المعيار العالمي. Metro متخصص لـ React Native. Vite و esbuild هما الجيل الجديد المرتكز على السرعة. Rollup هو أفضل خيار لنشر المكتبات.

إعادة التحميل السريع (Hot Reload, Hot Restart)

Hot Reload هي تقنية نشأت في تطوير الويب (React Hot Loader, HMR — Hot Module Replacement) وانتقلت إلى تطوير الجوال مع Flutter و React Native. الجوهر: عندما يتغير ملف، يرسل أداة التجميع الوحدة المحدثة إلى التطبيق الجاري، الذي يستبدل الكود القديم دون فقدان الحالة. على عكس إعادة البناء الكاملة، لا يعيد Hot Reload تشغيل Runtime — بيئة التنفيذ تستمر في العمل، ويتم توصيل الوحدة المعدلة ديناميكياً عبر آلية مثل HMR أو تحديث مراجع شبيه بـ Reflection.

يعمل Hot Reload لأن الإطار يحتفظ بالـ widgets (Flutter) أو المكونات (React) في الذاكرة ويحدث فقط الأجزاء المعدلة. Hot Restart هو آلية أكثر خشونة: يعيد تشغيل التطبيق بالكامل، لكنه أسرع من إعادة البناء الكاملة لأنه لا يعيد ترجمة الكود الأصلي. في IT Sectr، نستخدم Hot Reload عند تطوير واجهة المستخدم و Hot Restart عند تغيير التنقل أو إدارة الحالة.