فلاتر أم ريأكت نيتيف
الفرق الأساسي بينهما شيء واحد: فلاتر يرسم الواجهة بنفسه، وريأكت نيتيف يستدعي عروض أندرويد وiOS الحقيقية. وكل فرق آخر تسمع عنه، من اللغة والمنظومة إلى إحساس التطبيق، ناتج عن هذا الاختيار المعماري وحده.
- الدرس 4 من 8
- متوسط
- مجاني، دون تسجيل
كفتان بلا فائز
لا كفة أثقل من الأخرى. وما يميلها هو مشروعك.
كفة فلاتر
- يرسم الواجهة بنفسه، فتكون متطابقة على المنصتين
- تصميم مخصص بحركة كثيرة أسهل في التنفيذ
- دارت، بإعادة تحميل ساخنة حافظة للحالة وترجمة سابقة للتنفيذ
- تغيّر مظهر نظام التشغيل لا يصل إلى التطبيق تلقائياً
كفة ريأكت نيتيف
- ينشئ عروض المنصة نفسها، فيبدو أصلياً
- جافاسكريبت وريأكت، وهو ما يعرفه فريق الويب أصلاً
- يجاري تغيّر مظهر نظام التشغيل
- لا يمنحك التطابق شعرة بشعرة بين المنصتين مجاناً
هذا التقسيم لتطبيقات الأعمال. أما للعبة أو واجهة ثقيلة رسومياً فليس أي منهما الجواب الافتراضي.
آخر مراجعة: تُراجع الحقائق وأسماء الأدوات في هذا الدرس مقابل مصادرها في هذا التاريخ.
أين يقع الفرق الحقيقي بينهما؟
في جملة واحدة من وثائق كل مشروع. تسأل الأسئلة الشائعة الرسمية لفلاتر هل يستعمل فلاتر ودجتات نظام التشغيل المدمجة، وتبدأ جوابها بكلمة واحدة: لا. ففلاتر يقدّم مجموعة الودجتات الخاصة به، ومنها ماتيريال وكوبرتينو، ويديرها ويرسمها إطاره ومحركه هو. وفي المقابل تقول وثائق ريأكت نيتيف إن ريأكت نيتيف ينشئ في وقت التشغيل عروض أندرويد وiOS المقابلة لمكوّناتك، وإن التطبيق يبدو ويُحسّ ويؤدي كأي تطبيق آخر لأن المكوّنات مسنودة بالعروض نفسها.
إذن طريقان مختلفان إلى الصورة نفسها. فلاتر يتصرف كمحرك ألعاب: يأخذ لوحته ويرسم كل شيء عليها. ووثائق فلاتر نفسها تعقد هذه المقارنة حين تشرح أن كود دارت على iOS يُترجم مسبقاً إلى مكتبة ARM أصلية تجلس داخل مشروع runner. أما ريأكت نيتيف فيتصرف كسائق: لا يرسم شيئاً بنفسه ويقول لعروض المنصة ماذا تفعل.
ولهذا الفرق نتيجتان عمليتان تنفعان في القرار. الأولى: حين يغيّر نظام التشغيل شكل مكوّناته، يتغير تطبيق ريأكت نيتيف معه ويبقى تطبيق فلاتر كما كان حتى تحدّثه أنت. والثانية: إن كان على واجهتك أن تبدو متطابقة تماماً على أندرويد وiOS فإن فلاتر يمنحك ذلك مجاناً وريأكت نيتيف لا.
أيهما أفضل؟ لا أحد. فهما جوابان لسؤالين مختلفين، وبقية هذا الدرس عن أي السؤالين سؤالك أنت.

المحاور الستة التي تختلف فعلاً
لا يقرر أي من هذه الستة وحده. فالقرار يخرج من جمعها مع مشروعك.
دارت أم جافاسكريبت: أيهما أرخص لفريقك؟
فلاتر مكتوب بدارت. وموقع دارت نفسه يصفها بأنها لغة محسّنة لجهة العميل لتطوير تطبيقات سريعة على أي منصة، ويقول إن دارت تشكّل أساس فلاتر أيضاً. وتشرح أسئلة فلاتر الشائعة سبب اختيار دارت: اجتماع أمرين، دورة تطوير سريعة قائمة على JIT تتيح إعادة التحميل الساخن مع حفظ الحالة، ومترجم سابق للتنفيذ يولّد كود ARM كفؤاً.
وريأكت نيتيف مكتوب بجافاسكريبت مع ريأكت. وتقول وثائقه إنك تستعمل جافاسكريبت للوصول إلى واجهات المنصة ولوصف مظهر واجهتك وسلوكها بمكوّنات ريأكت في آن.
والآن السؤال العملي: أيهما أرخص لك؟ الجواب دائماً تقريباً هو ما يعرفه فريقك. فإن كان لديك مطورو ويب يكتبون ريأكت فإن ريأكت نيتيف يعمل من اليوم الأول تقريباً وينتقل جزء كبير من العادات والأدوات. وإن لم يكن لفريقك خلفية ويب وكان يبدأ من الصفر فدارت لغة صغيرة وتعلّمها ليس أصعب من جافاسكريبت؛ وفي تلك الحالة ليس هذا المحور هو القرار.
وأمر نسمعه كثيراً في مقابلات التوظيف وهو غير صحيح: أن دارت لغة نادرة ولا يوجد لها كوادر. فالنادر فعلاً هو مطور هاتف ذو خبرة، في المنظومتين معاً. ومن يعرف ريأكت لا يعرف ريأكت نيتيف بالضرورة؛ فدورة الإصدار والتنقيح على الجهاز والتوقيع وواجهات المنصة أشياء لا تتعلمها في الويب.
كيف نحكم على المنظومة دون الاتكاء على رقم بلا مصدر؟
مقالات المقارنة تلجأ هنا عادةً إلى أرقام حصة السوق. ونحن لن نفعل، لأن تلك الأرقام بلا مصدر يمكن الاستناد إليه، ولا علاقة لها بقرارك على أي حال. فالسؤال الصحيح ليس أي المنظومتين أكبر؛ بل هل تحظى القدرات الثلاث أو الأربع التي لا يعمل تطبيقك بدونها بدعم حي في إحداهما.
فاكتب قائمتك أنت. بوابة دفع وخرائط وإشعارات وكاميرا ومسح باركود وتسجيل دخول بحساب، أياً كان. ثم ابحث عن كل واحدة في سجل الحزم لتلك المنظومة: pub.dev لدارت وفلاتر، وnpm لجافاسكريبت.
وانظر في كل حزمة إلى ثلاثة أشياء لا يجدها عدّ النجوم. الأول تاريخ آخر إصدار؛ فالحزمة التي لم يُنشر لها شيء منذ سنة تصير مشكلتك في نسخة النظام التالية. والثاني هل تغلّف الحزمة SDK أصلياً أم تعيد تنفيذه؛ فالتي تغلّف الـSDK الرسمي تجاري تحديثه عادةً. والثالث هل المسائل المفتوحة تخص المنصة التي تهمك فعلاً.
ونقطة واحدة في المنظومتين تُنسى في القرار: كل قدرة موصولة بعتاد أو بخدمة منصة تحتاج في النهاية من يكتب كودها الأصلي. فإن وُجدت حزمة جيدة فذلك الشخص ليس أنت. وإن لم توجد فهو أنت، وعليه أن يدخل في تقدير المشروع. وصفحة تصميم التطبيقات عندنا تقول الشيء نفسه: قبل اقتراح أي مسار نسأل أولاً ماذا يُفترض أن يفعل التطبيق.
كيف تحكم على حزمة قبل أن تتكئ عليها
انظر إلى هذه
- تاريخ آخر إصدار وهل جُرّب على أحدث نسخة نظام
- هل تغلّف الـSDK الرسمي أم تعيد كتابته
- المسائل المفتوحة على المنصة التي تهمك فعلاً
- الترخيص وهل يوافق استعمالك التجاري
لا تتخذ هذه معياراً
- أرقام حصة السوق في مقالات المقارنة
- عدد النجوم دون النظر إلى تاريخ آخر كوميت
- أن شركة كبيرة ذكرت اسمها في مكان ما
هذه الورقة تعمل بالطريقة نفسها في المنظومتين. وعدد النجوم ليس في أي من الجانبين، لأنه لا يقول شيئاً عن الصيانة.
فأيهما أختار؟
ثلاثة أسئلة بهذا الترتيب. الأول: ماذا يعرف فريقك اليوم؟ فإن كانوا يكتبون ريأكت فريأكت نيتيف هو الخيار الافتراضي وتحتاج إلى سبب للابتعاد عنه. والثاني: كم واجهتك مخصصة؟ فإن كان تصميمك مليئاً بالحركة والأشكال غير القياسية وعليه أن يكون متطابقاً على المنصتين شعرة بشعرة، ففلاتر هو ما بُني لذلك. والثالث: كم SDK أصلياً يجب وصله؟ فكلما كبر هذا العدد زاد وزن المنظومة التي فيها حزمة حية، وهذا يُقاس لمشروعك أنت لا بشكل عام.
وموقفنا الذي نادراً ما يُكتب في صفحة بيع: لتطبيق شركة إيرانية متوسطة، أي قائمة محتوى ونماذج ودفع وإشعارات، يفي الإطاران بالغرض والاختيار بينهما ليس عنق زجاجة المشروع. فالعنق عادةً في مكان آخر: الواجهة الخلفية وتصميم الواجهة ومن يصونه بعد التسليم. وإن حوّل منفّذ اختيار الإطار إلى أهم قرار في المشروع فالأرجح أنه يهرب من الموضوع الحقيقي.
وثمة استثناء حقيقي واحد. إن كان تطبيقك لعبة أو ذا واجهة ثقيلة رسومياً فليس أي منهما الجواب الافتراضي وعليك أن تقصد أدوات ذلك الميدان. وإن كان التطبيق مجرد نسخة هاتف من موقعك فقد لا تحتاج إلى تطبيق أصلاً؛ اسأل هذا السؤال قبل اختيار الإطار لا بعده.
القرار يبدأ مما لديك لا مما هو أفضل
ماذا يكتب فريقك اليوم؟
ريأكت نيتيف
- اللغة والمكتبات والعادات تنتقل
- الواجهة تبقى مواكبة لمظهر المنصة
- الابتعاد عن هذا الفرع يحتاج سبباً
فلاتر
- التطابق بين المنصتين يأتي مجاناً
- التصميم المخصص بحركة كثيرة يخرج أرخص
- وفي المقابل تحديث المظهر عليك أنت
هذه الشجرة تعمل حين يكون التطبيق تطبيق أعمال. أما للعبة فلا فرع منهما هو الجواب.
المسار السريع مع الذكاء الاصطناعي
يمكنك أن تقرأ مقارنات الأطر ساعات ولا تصل إلى شيء. والطريق الأسرع أن تقلب السؤال: بدل أن تسأل أي إطار أفضل، قسّم قائمة قدرات تطبيقك إلى قسمين، ما يؤديه الإطار بنفسه وما يمد يده إلى قدرة في المنصة. والقسم الثاني هو الذي يصنع الكلفة الحقيقية. وهذا العمل يحتاج حكماً وسعة، فضع له نموذجاً قوياً لا رخيصاً؛ واختيارنا الحالي في قسم الذكاء الاصطناعي في هذا الموقع.
- اكتب قائمة القدرات بلغة بسيطة، جملة لكل واحدة. مثل: يدخل المستخدم برقم الهاتف، ويطلب، ويدفع، ويتلقى حالة الطلب بإشعار.
- شغّل الوصفة أدناه. المخرجات جدول لا توصية.
- ابحث عن كل قدرة منصة يسميها الجدول في الوثائق الرسمية لتلك المنصة. وإن لم تجد اسماً أعطاه النموذج في الوثائق فتوقف هناك: فقد اخترعه النموذج.
- الآن وفقط الآن، ابحث في pub.dev وnpm عن تلك القدرات القليلة وطبّق ورقة التقييم السابقة في هذه الصفحة على كل حزمة. فقرار الإطار يخرج من ذلك الجدول لا من مقال.
وصفة جاهزة للنسخ
هذه قائمة قدرات تطبيق هاتف سيصدر على أندرويد وiOS.
أعطِ لكل قدرة صفاً واحداً في جدول، بهذه الأعمدة الأربعة وبلا أي شرح زائد:
1) القدرة نفسها بالجملة التي كتبتها.
2) «واجهة» أو «قدرة منصة». فإن كانت شاشات ونماذج وقوائم وتنقلاً فقط فهي واجهة. وإن كانت تمد يدها إلى عتاد أو إلى خدمة في نظام التشغيل فهي قدرة منصة.
3) لصفوف قدرة المنصة فقط: اسم تلك القدرة على مستوى نظام التشغيل، منفصلاً لأندرويد ولـiOS. اكتب اسم الواجهة أو الإطار الرسمي للمنصة نفسها.
4) خطر واحد قصير: ما الذي يتعطل عادةً في تلك القدرة عملياً.
قواعد صارمة:
- لا تكتب أي اسم حزمة أو مكتبة من طرف ثالث. ولا تكتب أي رقم نسخة.
- لا توصِ بأي إطار أفضل. أعطِ الجدول وتوقف.
- إن لم تكن واثقاً من صف فاكتب «غير مؤكد» في العمود الثالث ولا تخمّن.
القدرات:
{قائمة القدرات}
قبل أن تثق بالناتج: العمود الثالث هو بالضبط حيث قد يخترع النموذج اسماً، والاسم المخترع يبدو تماماً كالاسم الحقيقي. فابحث عن كل اسم يعطيه في وثائق أندرويد وأبل الرسمية؛ وإن لم تجده فارمِ ذلك الصف. ولا تتخذ أي قرار بشأن الإطار من هذا الجدول قبل أن ترى الحزم الحقيقية بنفسك في pub.dev وnpm. فالجدول قائمة بما ينبغي فحصه لا نتيجة الفحص.
الذكاء الاصطناعي في هذا العمل
في اختيار الإطار يفيد الذكاء الاصطناعي في عمل ويخطر في آخر. المفيد: تفكيك المتطلبات إلى قدرات منصة، وهو العمل الموصوف في المسار السريع أعلاه، لأنه يحتاج سعة ويسهل التحقق منه. والخطر: أن تسأل أي إطار أفضل أو أي حزمة أثبّت، لأن جواب النموذج يبدو واثقاً في الحالتين والتحقق منه أصعب.
أدوات تساعد فعلا
- Claude جيد في تفكيك المتطلبات إلى قدرات منصة وفي قراءة مصدر حزمة قبل الاتكاء عليها. وإيران ليست في أي من قائمتي الدول المدعومة لدى أنثروبيك؛ قرأنا ذلك في صفحة أنثروبيك نفسها.
- Gemini مجدٍ اقتصادياً للتمريرات الأضخم على الكود ولتلخيص الوثائق. وصفحة غوغل نفسها تقول إن تطبيق جيميناي يعمل في أكثر من مئتين وثلاثين دولة ومنطقة، وإيران ليست في تلك القائمة.
- Claude Code حين تبلغ مرحلة الكود تعمل أداة سطر الأوامر على المستودع الحقيقي لا على نص ملصوق. وكلود كود يعمل على حساب أنثروبيك نفسه، وإيران ليست في قائمة الدول المدعومة.
اين ينقلب ضدك
ثمة خطر محدد هنا وله اسم حزمة. فحين تسأل النموذج أي حزمة أثبّت لعمل ما، يكون الجواب عادةً اسماً يبدو معقولاً، وإن لم يكن ذلك الاسم موجوداً فقد بحثت في سجل الحزم عن اسم فارغ. ويصير الأمر جدياً حين يسجّل أحدهم ذلك الاسم. ولهذا بالضبط منعت الوصفة أعلاه النموذج من إعطاء أسماء حزم: فأنت تأخذ اسم قدرة المنصة وتجد الحزمة بنفسك في pub.dev وnpm.
والخطر الثاني ألطف ونراه كثيراً في جلسات الاستشارة: النموذج يجيب بالإيجاب عن الإطارين معاً، لأن كليهما ممدوح في بياناته. اسأل هل فلاتر جيد لمشروعي تحصل على نعم؛ واسأل السؤال نفسه عن ريأكت نيتيف تحصل على نعم. وموقفنا: لا تطلب من النموذج أن يختار، بل اطلب منه أن يعدّد ما عليك فحصه. ولمعرفة كيفية الدفع لكل أداة من إيران، انظر دليل الشراء.
المصادر: Flutter FAQ: does Flutter use the built-in platform widgets React Native docs: Core Components and Native Components Anthropic: supported countries Google: where Gemini Apps are available
حدود هذه النصيحة
هذه المقارنة عن تطبيقات الهاتف فقط. فللإطارين أهداف أخرى من سطح المكتب إلى الويب، والمعادلة هناك مختلفة وليست لنا فيها تجربة مباشرة نكتبها هنا. وثانياً لم نعطِ أي أرقام أداء للاثنين وهذا مقصود: فرقم الأداء بلا معنى ما لم يُقل على أي جهاز وبأي واجهة وفي أي نسخة قيس، والأرقام التي تدور في المقالات لا تقول ذلك. وثالثاً، إن كان الفريق الذي يبني التطبيق ذا تجربة حقيقية في أحدهما فذلك المحور أثقل من كل حجة معمارية في هذه الصفحة.
من عملنا نحن
وقد اتخذنا هذا الاختيار المعماري نفسه على الويب ودفعنا فاتورته. فلا شيء من أشكال هذا الموقع، من المخططات إلى الرسوم البيانية، يُرسم بمكتبة جاهزة: فقالب rgb.ir له مكتبة أشكاله الخاصة بـ52 نمطاً أصلياً، كل منها دالة rgb_dg_* في ملفات inc/diagram*.php. والمقياس بسيط ويمكنك عدّه بنفسك: في assets/css/diagram.css عدد url( صفر، أي لا تُحمَّل أي صورة، ولا يمس أي ملف جافاسكريبت في مجلد assets/js هذه الأشكال إطلاقاً.
وفائدة هذا الاختيار هي فائدة فلاتر: المخرجات متطابقة على كل شاشة ولا تضيع مكتبة طرف ثالث في منتصف الطريق. وكلفته هي كلفة فلاتر أيضاً، وقد دفعناها هذا العام: فحين احتاج قسم التعليم في هذا الموقع أشكالاً لم تكن لدينا لم يبنها لنا أحد. وملف inc/diagram-lib2.php يحوي خمسة عشر نمطاً جديداً كتبناها بأنفسنا. وكانت مكتبة جاهزة ستعطي تلك الخمسة عشر مجاناً وتقرر شكلها في المقابل. وهذه بالضبط الصفقة التي يدور حولها هذا الدرس.
اسئلة متابعة حقيقية
أيهما أسرع؟
لا جواب له بهذه الصيغة، وحين يعطيك أحدهم رقماً فاسأل على أي جهاز وبأي واجهة قِيس. ولتطبيق أعمال عادي كلاهما أسرع من الحد الذي يلحظه المستخدم، والبطء يأتي عادةً من الشبكة والواجهة الخلفية لا من الإطار.
أيمكن الحصول على نسخة ويب وسطح مكتب منهما أيضاً؟
لكليهما أهداف تتجاوز الهاتف ووثائقهما تقول ذلك. لكن نقطة عملية: إخراج نسخة بأمر واحد لا يعني أن تلك النسخة جاهزة. فواجهة صُممت للإبهام تبدو غريبة على سطح المكتب والعكس، فتلك النسخة تحتاج عمل تصميم مستقلاً.
إن ندمنا لاحقاً فكم تصعب الهجرة؟
تُعاد كتابة طبقة الواجهة فعلياً، لأن كود واجهة أحدهما غير صالح للآخر. والباقي هو الواجهة الخلفية وواجهة البرمجة ومنطق العمل، إن أبقيتها منفصلة منذ البداية. وهذه الجملة وحدها سبب وجيه لكتابة المنطق بمعزل عن الواجهة، أياً كان الإطار الذي تختاره.