رد فعل مواطن من منظور مطور الهاتف المحمول

هذه المقالة موجهة إلى مطوري iOS و Android الذين هم بالفعل على دراية جيدة في مجالهم ويتطلعون إلى React Native.

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

إنكار

جافا سكريبت في تطبيق جوال؟ لم يتبادر إلى ذهني سوى مكتبتين فقط باستخدام JavaScriptCore على نظام التشغيل iOS (شكلت هذه المكتبات نفسها 90٪ من أعطال التطبيقات التي تم استخدامها فيها) والتطبيقات المختلطة "للنموذج القديم" (حسنًا ، هذا هو atas).

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

تذكر المحاولات غير الناجحة لتعلم Xamarin منذ 3 سنوات ، تخليت بسرعة عن فكرة استخدام React Native.

من الجدير بالذكر أنني كنت دائمًا سعيدًا لفهم طرق جديدة لكتابة التطبيقات الأصلية (من ObjC إلى Swift ، من Java إلى Kotlin ، من Eclipse إلى Android Studio). لقد انخرطت في تطوير iOS و android كهواية واحترافية لسنوات عديدة. بعد التبديل إلى لغة جديدة (في نفس نظام التشغيل) أو IDE ، نادرًا ما عدت إلى اللغة السابقة. يبدو أن React Native خطوة منطقية تالية ، خطوة جديدة أخرى. أم أنها خطوة للوراء؟

الغضب

لماذا يجب أن أقوم بتدريس نسخة مبسطة بينما أعلم بالفعل كيفية القيام بذلك "حقيقي" ؟!
ما زلت أجد إجابة على هذا السؤال عندما حددت الشركة مهمة إعادة تصميم أحد التطبيقات تمامًا (في ذلك الوقت متوفر فقط على iOS) وإطلاقه على android.

كيف تفعل شيئين في وقت واحد وكتابة كود أقل؟ اقتراحات مثل: عميل رفيع ومكتبات C بمكالمة من رمز Swift / Kotlin أو React Native؟

بدا React Native واعدًا جدًا بسبب القدرة على إنشاء المكتبات ثم استخدامها فورًا على ثلاث منصات (iOS / android / web).

تقديم العطاءات

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

الاكتئاب

شكوك كانت معقولة. المشاكل الرئيسية هي:

• كمية لا بأس بها من القطرات في قلب React Native ؛
• الطرق التي تعمل فقط على منصة واحدة (تشير الأحواض إلى أنها تعمل في كل مكان) ؛
• وصف غير كامل. ما عليك سوى إلقاء نظرة على أرصفة جامع التفاعل الأصلي .

المشكلة الخفية الرئيسية: الكتلة الداخلية في رأسي ، والتي منعتني من رؤية الإيجابيات وراء مجموعة من السلبيات.

القبول

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

إذا تجاهلنا المشكلات الواضحة ، مثل الأعطال والأرصفة الضئيلة ، فإليك أمثلة على ما واجهته:

جافا سكريبت

لا عجب. هذا هو أول شيء يسير جنبًا إلى جنب من خلال الدم والعرق والدموع.
عندما بدأت أتذكر تجربتي السابقة كمطور للواجهة الأمامية (كنت منخرطًا في مواقع الويب قبل تطبيقات الجوال) ، بدأت مع المتلازمة الفيتنامية: جوني ، يحيطنا JavaScript!

إذا قررت كتابة الطلبات على React Native ، فأوصيك بأخذ إحدى أحدث دورات JS. ليس من الضروري أن يكون رد فعل أو رد فعل أصلية.

على مدار السنوات القليلة الماضية ، مع إصدار معايير ES6 و ES7 و ES8 ، تغيرت طريقة كتابة الرمز كثيرًا.

وأصبح شخصيًا جدًا .

الاختيار الثابت

في الأشهر الأولى ، كان المحلل الثابت ، الموجود في جميع لغات المحمول الأصلية ، مفقودًا جدًا.

هناك العديد من المرافق التي تعمل على تخفيف غيابه ، حيث تؤدي جزءًا من الوظائف

عناصر التخطيط

سيكون التحدي الأكبر هنا هو لمطوري iOS المبتدئين.

هذا التحدي هو عدم وجود محرر واجهة بصرية.

كل شيء يتم في التعليمات البرمجية باستخدام ترميز JSX . من الناحية الفنية ، يعد هذا الترميز اختياريًا ، فهو يساعد على رؤية التسلسل الهرمي للمكونات. سيكون مطورو Android مرتاحين ، ويلاحظون أوجه التشابه مع XML.

في نفس الوقت هناك رؤية واضحة للآراء وإمكانية إعادة استخدامها.

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

رد فعل المواطن ليس لديه هذه المشكلة.
في Android ، بالمناسبة ، ليس هناك أيضًا.
لكن خبراء Android سيقدرون الطريقة التي يتم بها نقل المعلمات من المكونات الخارجية إلى الداخلية مباشرة في الترميز.

العرض الأساسي هنا هو تناظري لـ LinearLayout (android) و UIStackView (iOS) مع مزيج من الثوابت في نفس الوقت. طريقة بسيطة إلى حد ما (مقارنة بالتركيزات) لعناصر تحديد المواقع.

UIViewController والنشاط

رد فعل المواطن ليس لديه واحد أو آخر.
بالطبع هم تحت غطاء محرك السيارة. التفاعل المباشر معهم لن ينجح. نعم ، هذا ليس ضروريا.

تختلف دورة حياة جميع مكونات React Native تمامًا عن iOS و Android ، فمن الصعب رسم أي أوجه تشابه. إذا ركزت على الاختلافات عن الأنظمة الأصلية ، فعندئذٍ:

• تغير عناصر واجهة المستخدم الحالة / المظهر عند تغيير معلمات الإدخال ؛
• على أندرويد ليست هناك حاجة للتلاعب في onSaveInstantState . React Native يفعل كل هذا من أجلنا ؛
• على نظام التشغيل iOS ، لا توجد طرق للإبلاغ مباشرةً بشكل صريح عن لحظة ظهور / إخفاء شاشات التطبيق.

وقت البناء / إعادة التحميل المباشر / إعادة التحميل الساخن

يتم تحقيق سرعة كبيرة بسبب التجميع التدريجي - يتم فقط إعادة بناء الوحدات المعدلة ، وليس الحزمة بأكملها.

جميع التغييرات في كود JS مرئية على الفور في المحاكي. تسريع التنمية بشكل كبير!

عدم وجود وظائف أصلية في JS

في جزء JS من React Native ، ليس كل ما تحتاجه خارج الصندوق.

يمكنك كتابة الجزء الأصلي على كلتا المنصتين ، وإنشاء غلاف JS وتسميته مثل باقي التعليمات البرمجية. لا يوجد شيء معقد.

هناك عدد كبير من الوحدات الجاهزة التي كتبها مطورو الجهات الخارجية.

يتم توصيل جميع الوحدات عبر npm (نظير CocoaPods لنظام iOS و Gradle لنظام android) ، والتي تحتوي على كود أصلي مع الوظائف اللازمة.

روابط شاملة وعميقة

يتم تنفيذ الوظيفة بواسطة Facebook.
يعمل بشكل جيد ومتسق.

معالجة نوايا الطرف الثالث

كحالة خاصة من الفقرة السابقة.

أكبر مشكلة في Android هي التعامل مع Intent بخلاف ارتباط عميق في تطبيق ما.
يعتمد ذلك بالطبع على النية وما يجب القيام به عند تلقيه.

يمكنك كتابة مقال منفصل حول هذا الموضوع. نقطة البداية هي إضافة طريقة createReactActivityDelegate إلى MainActivity.

الأداء

من السهل جدًا الحصول على 60 إطارًا في الثانية عند التمرير عبر القوائم الطويلة بالخلايا المعقدة.
أداء كل شيء آخر (على سبيل المثال ، الضغط على زر ، طباعة نص في حقل) أقل. يمكن ملاحظته أثناء تغيير الرسوم المتحركة للحالة في عدد كبير من العناصر. يمكن التعامل مع هذا بسهولة. قسم جيد في الوثائق باستخدام Native Driver for Animated .

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

عدم الاستقرار

غالبًا ما يتوقف المشروع عن البناء ، على سبيل المثال بعد:

• تفاعل تحديثات النواة الأصلية (بما في ذلك عند تحديث الإصدار الثانوي) ؛
• تحديثات وحدة npm ؛
• تحديثات Xcode ؛
• تحديثات CocoaPods (مشاكل دائمة في هذا) ؛
• فقط هكذا. نعم ، هذا يحدث أيضًا.

لحسن الحظ ، يتم إصلاح معظم هذه المشاكل بسرعة إلى حد ما. يمكنك إضافة برنامج نصي ينظف جميع ذاكرة التخزين المؤقت في كل مكان ، وتشغيله عندما يحدث خطأ ما. يساعد في حل 98٪ من المشاكل الغريبة التي تأتي من العدم. باستثناء CocoaPods ، كل شيء حزين.

عدم استقرار تبعية الطرف الثالث

كانت المشكلة الأكبر على iOS هي الرغبة الواسعة الانتشار لوحدات npm في استخدام طريقة التمرير السريع .

يتم توصيل العديد من الوحدات الأصلية عن طريق الثنائيات. فهم أن العديد من الوحدات المستقلة svizlyat بنفس الطريقة ليست بهذه البساطة.

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

عدم الاستقرار عند تحديث تبعيات الطرف الثالث

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

مشكلة مماثلة إذا كانت وحدات npm تعتمد على وحدات Android الأصلية ذات الإصدارات المختلفة.

بعد تنظيف ذاكرة التخزين المؤقت ، يمكن تحميل الإصدارات الجديدة بهدوء. يبدو أنه لم يفعل شيئًا ، لكنه توقف عن العمل.

اختبار الوحدة وواجهة المستخدم

آلية اختبار سهلة للغاية من خلال مكتبة Jest ، تأتي مع React Native. تحليل ملائم لتغطية الاختبار - يوضح أي الخطوط في الوظيفة قيد الاختبار لم يتم استدعاءها مطلقًا.

هناك مكتبات لاختبار واجهة المستخدم. حتى الآن ، في الواقع ، لم يكن لديك لاستخدام.

الخلاصة

بعد 13 شهرًا من العمل مع React Native ، يمكنني القول بثقة:

• إنه مناسب لمعظم التطبيقات التي تحتاج فيها فقط إلى الحصول على قائمة من الخادم ، وإظهار القائمة ، وعرض عرض تفصيلي لعنصر القائمة ، وإرسال التغييرات إلى الخادم ؛
• يتم تحقيق كل ما سبق برمز أقل ؛
• الآن هذا هو خياري "الافتراضي" للمشاريع الجديدة التي تتصل بي ، لأنظر الفقرة السابقة ؛
• غير مناسب للمشاريع التي تذهب إلى الخارج "أرسلت طلبًا - تلقيت ردًا" ، بعض الأمثلة: محرر الصور ، مشغل ، العمل مع Bluetooth ، AI ، ML ، social. رسول الشبكة
• يمكن تنفيذ المشاريع المتقدمة على React Native ، ولكن لا يزال عليك كتابة الكثير من التعليمات البرمجية الأصلية ، لذلك لم تعد النقطة صالحة ؛
• جاء رد الفعل الأصلي ولن يذهب إلى أي مكان ، يجب أن يحسب هذا ؛
• سينخفض ​​الطلب على مطوري الهواتف المحمولة الأصليين بشكل طفيف ، وسيقل تدفق مطوري الهواتف المحمولة الأصليين الجدد أكثر من ذلك بكثير. لماذا؟ انظر أدناه ؛
• عادة ما يتبع الشخص أبسط طريقة ، ولا حاجة لمحاولة ما إذا كان 95٪ من التطبيقات يمكن إجراؤها عن طريق إنفاق 20٪ من الجهد (مقارنة بالتنمية المحلية) للدراسة ؛
• نتيجة للنقاط الثلاث السابقة: ستزداد الفجوة بين العرض والطلب لمطوري المحمول الأصليين. أولئك الذين لا يستطيعون الاستغناء عنها حقًا سيجدون صعوبة أكبر في العثور عليهم. وهذا أمر محزن.

الكلمة الأخيرة لشخص بدأ على الفور الكتابة على React Native وسبب ما قرر قراءة هذا المقال ، حتى النهاية.

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