تطوير تطبيقات React Native بلغة TypeScript

لمن يناسب React Native ولمن لا يناسب

يتيح React Native كتابة التطبيق بلغة TypeScript بنموذج المكونات في React، ويعرضه بعناصر المنصة الأصلية نفسها، فالزر على iOS زر iOS حقيقي. وهو من أهم الطرق لبناء تطبيق متعدد المنصات.

يناسبك عندما:

• يعرف فريقك React وTypeScript، فينتقل أفراده بين عمل الويب وعمل الجوال.
• تشارك الشيفرة مع منتج ويب، مثل منتج مبني بـ Next.js: الأنواع وقواعد التحقق وعملاء الواجهة البرمجية.
• يتكون التطبيق من شاشات ونماذج وقوائم وخلاصات تدعمها واجهة برمجية.

ويقلّ ملاءمة عندما:

• يكون التطبيق كثيف الرسوميات، كلعبة أو فيديو فوري أو واقع معزز متقدم. هذا مكانه الشيفرة الأصلية أو محرك ألعاب.
• تحتاج معظم الشاشات إلى عناصر أصلية مخصصة أو ميزات عميقة في المنصة. وكلما زادت الشيفرة الأصلية قلّ ما توفره. راجع تطوير تطبيقات iOS وأندرويد الأصلية.
• تريد واجهة واحدة مخصصة بالكامل ومتطابقة بالبكسل على المنصتين. يرسم Flutter واجهته بنفسه وقد يكون أسهل لذلك.

وللمقارنة المباشرة اقرأ Flutter أم React Native.

Expo أم React Native الخام

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

ومن المخاوف الشائعة أن Expo يقيّدك. تطبيق المعاينة القياسي Expo Go لا يشغّل وحداتك الأصلية الخاصة، لكن نسخة التطوير تشغّلها، ويمكنك دائمًا أن تنتقل إلى إدارة المشروعين الأصليين بنفسك.

الوحدات الأصلية حين لا تكفي JavaScript

عاجلًا أو آجلًا يحتاج التطبيق إلى ما لا يوفره React Native: حزمة تطوير من مزود، أو ملحق بلوتوث، أو عرض كاميرا مخصص. تضيفه وحدة أصلية بلغة Swift أو Kotlin تُعرض إلى TypeScript، أو عنصر واجهة أصليًا. ويستدعي React Native الحديث الشيفرة الأصلية مباشرة، فيزول كثير من كلفة الجسر غير المتزامن القديم.

نهجنا أن نُبقي الطبقة الأصلية رقيقة، ونضع أمامها واجهة TypeScript مضبوطة الأنواع، ونجعل سلوك المنصتين واحدًا، ونختبر على أجهزة حقيقية. وقبل اعتماد مكتبة خارجية نتأكد أنها مصانة، وتدعم البنية الحالية، وتعمل مع Expo، ولا تضيف أذونات لا حاجة لها.

اعتبارات الأداء

في React Native مساران يجب حمايتهما: مسار JavaScript الذي يعمل فيه منطقك وعرض React، ومسار الواجهة الذي تُرسم عليه الشاشة. يظهر التقطع عندما يُرهَق أحدهما. وأشيع الأسباب:

• إعادة عرض غير ضرورية. أبقِ الحالة محلية، واحفظ المكونات المكلفة، وأعطِ صفوف القوائم مفاتيح ثابتة.
• قوائم طويلة. استخدم مكونات قوائم افتراضية لا عنصر تمرير يحمل مئات الصفوف.
• حركات على مسار JavaScript. استخدم مكتبة تشغّل الحركات على مسار الواجهة، وحرّك التحويلات والشفافية.
• حسابات ثقيلة. انقلها إلى شيفرة أصلية أو مهمة خلفية أو الخادم.
• بطء بدء التشغيل. حمّل الشاشات كسولًا، وقلّل الاعتماديات، واستخدم محرك Hermes الذي يشغّل شيفرة مترجمة مسبقًا.

قس الأداء على هاتف أندرويد حقيقي متوسط المواصفات، في نسخة إصدار، بأدوات القياس الخاصة بكل منصة. فنسخ التطوير أبطأ بكثير ولا تدل كثيرًا على الإنتاج.

التحديثات عبر الهواء وحدودها

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

• يتغير JavaScript والموارد فقط. أي وحدة أصلية أو إذن أو حزمة تطوير أو نسخة جديدة من React Native تحتاج إلى ملف تنفيذي جديد عبر المتجر.
• قواعد المتجرين سارية. تسمح Apple وGoogle بتحديث الشيفرة المفسَّرة، لكن لا تسمحان بتغييرات تبدّل ما هو التطبيق أو ما يفعله بعد المراجعة. اقرأ سياسة كل متجر الحالية قبل استخدام التحديثات لميزات جديدة.
• يجب أن تتطابق النسخ. يجب أن يتوافق التحديث مع النسخة الأصلية المثبتة على الجهاز، ولذلك ترتبط التحديثات بنسخة تشغيل محددة.
• خطط للتراجع. استخدم الإطلاق التدريجي وطريقة سريعة للرجوع.
• يوسّع سطح الهجوم. من يستطيع نشر تحديث يستطيع تغيير التطبيق. احمِ ذلك الحساب بـالمصادقة متعددة العوامل واستخدم التحديثات الموقّعة حيث تتيحها الأدوات.

خلاصة القول: التحديثات عبر الهواء للإصلاحات والتصحيحات الصغيرة. أما الميزات الجديدة فتمر عبر المتجرين.

اختبار تطبيق React Native

تعمل عدة طبقات معًا:

• اختبارات الوحدة بأداة Jest للمنطق والحالة والأدوات المساعدة.
• اختبارات المكونات بمكتبة React Native Testing Library، لفحص ما تعرضه الشاشة وكيف تستجيب.
• اختبارات شاملة بأداة مثل Detox أو Maestro تشغّل التطبيق الحقيقي عبر تسجيل الدخول أو الدفع.
• فحص الأنواع والتدقيق الشيفري مع كل تغيير، فتكشف TypeScript الأخطاء قبل أن يعمل أي اختبار.

ثم اختبر على الأجهزة: هواتف أندرويد أقدم، وشاشات صغيرة، وخطوط كبيرة، وشبكات بطيئة، واللغة العربية. وتحتاج الوحدات الأصلية والتحديثات إلى حالات اختبار خاصة بها، لأنها تفشل بطرق لا تراها اختبارات JavaScript.

النشر على App Store وGoogle Play

يُسلَّم تطبيق React Native في أرشيف iOS وحزمة Android App Bundle، مثل أي تطبيق آخر. وتستطيع خدمات البناء السحابية إنتاج نسخة iOS دون جهاز Mac محلي، وإن بقيت بحاجة إلى حساب مطور Apple وتوقيع صحيح. وتمر النسخ التجريبية عبر TestFlight ومسارات الاختبار في Google Play، ويتيح الإطلاق التدريجي أن تصل النسخة المعيبة إلى عدد قليل من المستخدمين أولًا. وحدّد قناة التحديث التي تستمع إليها كل نسخة، حتى لا يصل تحديث تجريبي إلى مستخدمي الإنتاج، واترك هامشًا لمراجعة المتجر.

دعم الاتجاه من اليمين إلى اليسار

يدعم React Native تخطيطات من اليمين إلى اليسار، لكن العربية تحتاج إلى إعداد مقصود. فعّل الدعم في إعدادات التطبيق واقرأ الاتجاه من لغة الجهاز. وتبديل الاتجاه داخل التطبيق يحتاج عادةً إلى إعادة تشغيل، فخطط لذلك إن قدّمت مفتاح تبديل اللغة.

• نسّق بالبداية والنهاية، مثل marginStart وpaddingEnd، لا باليمين واليسار. يقلب React Native اليمين واليسار تلقائيًا في هذا الوضع، وهذا يربك الفرق التي تخلط بين الأسلوبين.
• اعكس الأيقونات الاتجاهية بنفسك. الصور والشعارات وكثير من الحركات لا تُقلب لك.
• أبعد النصوص عن المكونات، ونسّق الأرقام والتواريخ بحسب اللغة والبلد.
• افحص الخط العربي على المنصتين، واختبر النماذج ولوحات المفاتيح والنص المختلط بين العربية والإنجليزية.

وللاطلاع على جانب التصميم راجع التصميم للعربية ومن اليمين إلى اليسار.

أمان تطبيقات React Native

تُسلَّم شيفرة JavaScript في تطبيق React Native داخل التطبيق نفسه، ويمكن استخراجها وقراءتها. ويبدأ كل مشروع لدينا بـمراجعة للتهديدات. وفي هذه المنظومة نركز على:

• التخزين الآمن. AsyncStorage غير مشفّر. استخدم مكتبة تحفظ القيم في Keychain على iOS وKeystore على أندرويد.
• لا أسرار في الحزمة. الشيفرة المترجمة مسبقًا ليست تشفيرًا. أبقِ المفاتيح الحقيقية على الخادم.
• تثبيت الشهادات. ثبّت المفتاح العام لواجهتك البرمجية، مع مفتاح احتياطي وخطة تدوير.
• التشويش. التصغير والشيفرة المترجمة يصعّبان القراءة، لكن اعتبرهما مطبًّا صغيرًا لا حاجزًا.
• الأجهزة المعدّلة (root وjailbreak). يمكن تجاوز الكشف عنها، فاعتبره إشارة واحدة وأبقِ الفحوص الحرجة على الخادم.
• الاعتماديات. الشجرة الكبيرة من الحزم الخارجية خطر على سلسلة التوريد. ثبّت الإصدارات وراجع التحديثات وشغّل فحص الاعتماديات.

تختبر خدمة الأمن السيبراني لدينا تطبيقات الجوال قبل الإصدار، ويشرح دليل تطوير التطبيقات الآمنة هذه الممارسات بتفصيل أكبر.

قبل أن تلتزم: اكتب قائمة بالميزات الأصلية التي يحتاجها منتجك، وتحقق من عدد ما له مكتبة React Native مصانة. فإن كان الكثير منها بلا مكتبة، فقارن التكلفة بالتطوير الأصلي.