بالطبع موضوع الانتقال كان قرار صعب ومكلف لكنه كان قرار فريق كامل عانى بشكل كبير مع React native ومع ضعف الـ productivity وبعد سنتين من العمل باستخدام React native وبناء 4 تطبيقات ضخمة
بالطبع لم نواجه أية مشاكل متعلقة في الأداء مع react native وكانت النتيجة النهائية ممتازة لكن تجربتنا كمبرمجين كانت سيئة ومجهدة وأي مهمة نحاول انجازها تستغرق وقت أكثر من المقبول.
وأشارك معكم تجربتنا بغرض نقل الفائدة ولتوفير وقتكم الثمين:

1- طريقة عمل الـ Flutter مناسبة أكثر ومن السهل التعامل معها لان flutter يقوم بالرسم على الشاشة بدون التعامل مع native components وكما يقول فريق flutter فعلا
“Flutter owns every pixel on the screen”

بينما في react native تتحول الـ componenet لـ component native فلا تستطيع التحكم بها بشكل كامل ولاتملك حتى البرامرات الكاملة فنضطر لترك الـ component وبناء واجد جديد بالمواصفات التي تناسبنا.

2- بالحديث عن الـ components او الـ widgets الـ builtin فيوجد الكثير منها في flutter اكثر بكثير من RN
مثلا لنحصل على forms سهلة التعامل كان علينا تجميع
React native + formik +
بالاضافة لعدة components custum مبنية من قبلنا
والتي تساوي formField وهو builtin مع flutter

3 – كان علينا كتابة الكثير من الـ components لتعويض هذا النقص وعملية بنائها وصيانتها وكتابة توثيق لها كانت جدا مكلفة وتستغرق الكثير من الوقت وأيضا تزيد صعوبة انضمام مطور جديد الى الفريق فيجب عليه دراسة مكوناتنا ويجب علينا إقناعه بها لانه غالبا ماتكون لديه مكوناته الخاصة.

4 – نقطة هامة جدا وأحد أهم أسباب اتخاذنا لهذا القرار وهي fluttre web طبعا يوجد react native web لكن التعامل معه جدا مجهد وستضطر لكتابة أكثر من نسخة من الـ componenets لتتناسب مع الويب وأضف أيضا flutter desktop.

5 – من الصعب جدا التعامل مع الـ animation في react native ولن تعطيك أداء جيد أو امكانية تحكم كبيرة كما هو الحال في flutter.

6 – وبالحديث عن الـ devtools جرب مثلا اداة الـ inspect element في كلا المنصتين وستشاهد الفرق أضف إلى ذلك android studio وهو محرر ممتاز تحصل عليه مجانا وتطور باستخدامه بمنتهى السهولة.

7 – الـ react native يعتمد على الـ community بشكل كبير وهذه نقطة سلبية جدا لان الـ community دائما يتاخر في تحديث الـ packages وتطويرها لتتناسب مع آخر اصدار من react native وممكن حتى أن يتوقفوا فجأة عن تطويرها
انما فريق flutter يعملون على إضافة الكثير من الخصائص وحتى الـ plugins يطوروها ويقومون بنشرها في مستودع الـ plugins ليعوضوا نقطة أن flutter يعتبر جديد وبرأيي أنهم نجحوا بذلك فعلاً.

8 – في كل مرة تحاول عمل upgrade لمشروع ما بـ react native فالموضوع كابوس وسيستغرق منك على الأقل يوم عمل كامل لتنتهي من حل المشاكل التي ستظهر بسبب التحديث وبسبب تضارب الـ plugins.

9 – طبعا كلنا نحب لغة الجافاسكربت ومن يتابعني يعرف انني اعشق لغة الجافاسكربت ومنصات عملها مثل react vuejs angular بامكانكم الاطلاع على قناتي على اليوتيوب goarabgo.com
لكن لغة dart لاتختلف كثيرا عن جافاسكربت الا انها strong typed language الامر الذي يجعل التطوير بها أسرع وأوضح.
مامعنى هذا الكلام ؟ و لماذا اوضح واسرع؟
لنفرض ان لدي component ما وانا اريد تغيير لونه فقمت بتمرير prop باسم color
في حال كنت انا مخطئ وكان هذ ال prop غير موجود او ان اسمه خاطئ مثلا
ففي react native لن اعرف انني مخطئ وسانتقل الى المحاكي واجد ان اللون لم يتغير دون اعطائي اية تنبيه ويجب علي ان اكتشف بنفسي عن طريق الرجوع الى التوثيق او فتح الكود المصدر لهذا ال component
اما في حال flutter فسيوقني المحرر مباشرة ويظهر خط احمر تحت كلمة color ليخبرني ان هذا المتغير غير موجود.
اما الـ syntax للـ views في react “jsx ” مفضل لدي اكثر من الموجود في flutter ولكن تنازلت عن هذا لاحصل على كل المزايا الأخرى.

10 – بسبب أن flutter يرسم على الشاشة بدون استخدام الـ native components فبالتالي عندما تنتقل بين منصتي العمل ios or android لن تشاهد أية اختلاف على عكس ما يحدث في react native
وهذا لايتعارض مع امكانية استخدام شكل الـ native، لكن هذا الكلام ينطبق بنسبة أكبر على الـ custom components ففي RN ممكن أن لاتظهر بالشكل الذي توقعته على كلا المنصتين الا بعد التعديل على الستايل مرة أخرى.

11 – موضوع الـ debugging في react-native كابوس حقيقي والأخطاء غير واضحة وحتى الـ compnents متداخلة ما بين الـ native والجافاسكربت الامر الذي يجعل من الصعب جدا التعامل معها، أما flutter فهو مميز جدا والأخطاء جدا واضحة حتى أخطاء الـ ui يقوم بكتابة تفاصيل عنها في الـ console ويظهر أخطاء على الشاشة تنبهك بانك مثلا تحاول وضع كومبوننت حجمه اكبر من المساحة المتاحة له، ميزة جدا مميزة.

12 – في flutter معظم الـ plugins مكتوبة بلغة الـ dart ممايجعل قراءة كودها والتعديل عليها في غاية السهولة على عكس react native الذي في الغالب يتم كتابة الـ plugins بعدة لغات قد تصل إلى 5 لغات
android java or kotlin
IOS Swift or Objective-C
وطبعا Javascript

كل هذه المشاكل لاتزال موجودة في RN إصدار 61 الأخير وبما انه لايزال لدينا 4 تطبيقات مستمرين في تحديثها وعمل upgrade لها بشكل مستمر، ففي حال تم حل أية من هذه المشاكل سأقوم بتوضيح هذا مباشرة.

هذا البوست ليس دعوة لترك RN وليس فيه أية تقليل لمبرمجي الـ RN والـ RN لايزال مطلوب ويوجد الكثير من الشركات تستخدمه، حتى أنا يصلني رسائل بشكل متكرر من شركات من أكثر من دولة ليعرضوا علي التوظيف كمطور RN، كل هذا فقط لانني كتبت انني اعمل باستخدام RN على linkedin
بناء على تجربتنا حتى React native كان أسرع من برمجة التطبيق مرتين اندرويد و IOS
وكما ذكرت في بداية البوست ان النتيجة النهائية كانت ممتازة من ناحية الاداء والشكل، فبامكانك الاستمرار باستخدام react native في حال النقاط اعلاه لاتسبب مشكلة بالنسبة لك وستتمكن من بناء تطبيقات جميلة مميزة وباداء ممتاز، وبامكانك التغلب على بعض النقاط اعلاه (أول ثلاث نقاط) عن طريق كتابة مجموعة من المكونات الخاصة كما فعلنا، لكن ستستمر بعض النقاط الاخرى بازعاجك واهدار القليل من وقتك من فترة لاخرى، ومرة اخرى كل هذا لن يؤثر على النتيجة النهائية وانما على وقتك وتجربتك كمطور فقط.

قد يتطور React native في المستقبل ويتم حل كل المشاكل أعلاه لكن في الوقت الحالي نحن مضطرين للانتقال الى Flutter لنحصل على تجربة مطور أفضل.

ملاحظة: قمت بنشر هذه المقالة أول مرة على فيسبوك
https://www.facebook.com/photo.php?fbid=2567657023354163