بدلاً من ذلك ، هذه قصة أخرى حول كيفية تحولي إلى إطار عمل جديد)
المواد لا تعني الحقيقة المطلقة. فقط تلك الحلول التي اخترتها لنفسي موصوفة هنا ، والتي ، نظرًا لامتلاكها لخلفية ضخمة في تطوير React & React Native ، كان من الأسهل بالنسبة لي تطبيقها في مشروع حقيقي.
سياق الكلام
بادئ ذي بدء ، سأصف ، إذا جاز التعبير ، السياق. ظهر أمر - لكتابة تطبيق جوال صغير (حوالي 15 شاشة) عبر الأنظمة الأساسية. بطبيعة الحال ، بدأت في فعل ذلك في React Native بدافع العادة. في أسبوعين تم تنفيذ التطبيق بحوالي 80٪.
قرأت في عطلة نهاية الأسبوع مقالًا آخر من Surf مع نتائج الاستطلاع الذي أجري على Habré . وجاء الفكر فلماذا لا نحاول؟ هل سأكون قادرًا على تكرار ما تمت كتابته بالفعل في إطار عمل جديد لي؟ تقرر قضاء عطلة نهاية الأسبوع في محاولة ذلك. نتيجة لذلك ، خلال الأسبوع التالي ، لم تتم إعادة كتابة الـ 80٪ التي كانت من قبل فقط ، ولكن أيضًا الـ 20٪ المتبقية. تم تقليل وقت التطوير بأكثر من النصف!
الايجابيات
بادئ ذي بدء ، الميزة هي سرعة التخطيط. شاشات برشام سريع جدا. التدرجات الخطية ، svg ، gif - كلها تقريبًا خارج منطقة الجزاء. المكونات المتداخلة ( الموضع: مطلق ) - لا توجد مشكلة على الإطلاق. يتم تنفيذ أي شيء يسبب الألم في React Native بلمسة من أصابعك. الرسوم المتحركة بشكل عام هي قصة خرافية! نفس الشاشة التي تحتوي على مكونات متحركة باستمرار تم قضاء وقت أقل عدة مرات مع Flutter.
سلبيات
هناك نوعان من العيوب الملموسة. الأول هو التوثيق. القليل جدا باللغة الروسية. اللغة الإنجليزية الرسمية ليست منظمة بشكل جيد ، نعم ، فهي تقدم الكثير من أمثلة التعليمات البرمجية المفيدة ، ولكن من الصعب فهم شيء معقول من البنية العامة للتطبيق.
العيب الثاني هو الحزم. لا تزال هناك فوضى كاملة هناك. إن اختيار حزمة جيدة حقًا للحزمة التي تريدها ليس مهمة تافهة. في مكان ما لا تعمل ميزة واحدة ، في مكان آخر. يتم قضاء الكثير من الوقت في الاختيار. كخيار - أضف شيئًا بنفسك ، ولكن هذا هو الوقت الذي اعتدت عليه)
الخبرة: الخطافات
تعود معرفتي بـ React إلى الأيام التي ظهرت فيها الفصول العادية للتو. الآن لا يمكنني تخيله بدون خطافات وقد نسيت بالفعل الدروس. للرفرفة ، توجد مكتبة flutter_hooks رائعة تسمح لك بإحضار خطافات مألوفة إلى مشروعك. بالنسبة لي ، حلت تماما محل StatefulWidget . هناك الكثير من الخطافات ، يمكنك كتابة ما يخصك ، ولكن غالبًا ما يتم استخدام useEffect و useState و useMemoized في الكود الخاص بي . للرسوم المتحركة ، استخدم عنصر التحكم في الرسوم المتحركة .
ربما لا يكون هذا هو الحل الأفضل (أنا مستعد للقراءة عن السلبيات في التعليقات) ، لكنه يسمح لك باستخدام الخلفية من React في إطار عمل جديد لنفسك. لا أرى أي سبب لإعطاء أمثلة مع التعليمات البرمجية - يعرف جميع مطوري React أن هذا هو "أبونا"!
الخبرة: إدارة الدولة
في وقت من الأوقات ، كان عليّ العمل مع redux ، ومع mobx ، وحتى مع العناصر الغريبة ، مثل storeon . يبدو أنه (redux / mobx) موجود أيضًا تحت Flutter ، لكنني بصراحة لم أتقن ذلك). في رأيي ، كل شيء معقد للغاية هناك مقارنة بما كان في React. يمكنك بالطبع قضاء المزيد من الوقت واكتشاف ذلك ، ولكن لماذا ، عندما وجدت حلاً أفضل: Riverpod .
مكتبة من Remi Rousselet ، مؤلف flutter_hooks - من الطبيعي أن كلاهما يعمل بشكل جيد). في الواقع ، إنه مزود معدل . فقط أضف إلى التطبيق الخاص بك ( ProviderScope (...))التفاف فوق كل شيء آخر والحصول على النطاق العالمي في جميع أنحاء التطبيق ، يمكن الوصول إليه من أي عنصر واجهة. يكفي كتابة useProvider ( ProviderName ) في طريقة إنشاء HookWidget ولدينا بيانات متاحة من المزود المحدد.
هناك العديد من خيارات الموفر في المكتبة ، ولكن أبسطها هي ChangeNotifyProvider و StateNotifyProvider . يمكن إزالة كل منطق الأعمال بأمان من عناصر واجهة المستخدم ونقله إلى هؤلاء المزودين. علاوة على ذلك ، يتم دمجها تمامًا مع بعضها البعض ولن يكون من الصعب الوصول إلى طرق وبيانات الآخر من أحدهما.
النمط مشابه جدًا للبط المعادالمقاربة التي ، بالنسبة لي شخصيًا ، أصبحت الأقرب في عالم React. فقط "البط" أصغر. الشيء الرئيسي الذي يجب تذكره هنا هو أنه من الأفضل أن يكون لديك العديد من المزودين الصغار الذين سيتم استخدامهم في عناصر واجهة مستخدم مختلفة بدلاً من واحد كبير لهم ، لأنه سيتم إعادة رسم تلك الأدوات التي تم تغييرها بالفعل.
خيبة الأمل: الويب
بعد النجاح الساحق (بالنسبة لي) في تطوير تطبيق الهاتف المحمول ، قررت ، مثل أي مجموعة كاملة تحترم نفسها ، أن أتطرق إلى Flutter للويب. مرة أخرى ، إعادة كتابة أحد تطبيقات الشركات الناجحة بالفعل.
بالطبع ، لا يزال flutter web في مرحلة تجريبية ، وكل ما هو موصوف أدناه ينطبق بشكل خاص على الإصدار التجريبي. آمل حقًا أن يتغير الكثير مع الإصدار نحو الأفضل. ومع ذلك ، خيبت فلاتر أملي هنا.
أول شيء يجب أن تعرفه عن Flutter Web ليس عن مواقع الويب ، بل بالتطبيقات! أولئك. من الضروري أن تكتب بنفس طريقة الكتابة للجوال. جميع الحاجيات هي نفسها. لا يمكنك استخدام JS لجهة خارجية في التعليمات البرمجية الخاصة بك. الوصول إليه فقط عبر dart: js . الوصول إلى html أيضًا عبر dart: html... يؤدي هذا إلى قطع كل شيء تم إجراؤه بالفعل في عالم الويب مرة واحدة تقريبًا. إذا كنت تريد رسمًا متحركًا رائعًا تم تنفيذه بالفعل في مكان ما في css + js ، فلا يمكنك القيام بذلك ، أو كتابة تمثيلي على flutter أو استخدام dart: js ، وهو ليس بالأمر السهل دائمًا. من المستحيل استخدام مكتبة JS / css جاهزة بدون ألم.
الثاني ناقص الحزم مرة أخرى! على الرغم من أنه في pub.dev ، يتم تمييز معظمها على أنها تدعم كل من الويب و android و ios ، في الواقع ، إما أن يعمل أحدهما أو الآخر. أولئك. لن تتمكن من إنشاء كود عبر الأنظمة الأساسية بالكامل.
عادةً ما تكون حزم الويب عبارة عن غلاف فوق نظيراتها من js. لكنهم دائمًا لا يواكبون إصدار الحزمة التي يقومون بتغليفها.
مثال:
وتتمثل المهمة في الحصول على إذن عبر MS وتلقي بيانات المستخدم.
في JS القديمة الجيدة ، كل شيء بسيط: خذ msal ومايكروسوفت/ microsoft-graph-client - واستمتع بالنتيجة. البحث msal_flutter في
الرفرفة ، ربط ... واتضح أن لا يدعم حزمة ويب. حسنًا ، وجدنا msal_js - هذا غلاف فوق msal المعتاد ، لذلك تحتاج إلى تضمينه في index.html عبر علامة البرنامج النصي القديم الجيد. ولكن إذا تم تحديث msal بالفعل إلى 1.4.2 ، فإن هذه الحزمة تدعم بحد أقصى 1.3.0! حسنًا ، حسنًا ، حصلنا على الرمز المميز في نصف حزن ، ماذا عن بيانات المستخدم؟ هناك حزمة microsoft_graph - لا توجد وثائق عليها. للعثور على الطريقة المطلوبة ، تحتاج إلى الدخول في كود الحزمة والتصفح هناك. وللتعرف في النهاية على أنه يتم تنفيذ اثنين منهم فقط للعمل مع المهام! العثور على آخر msgraph
- بحيث تدعم الطريقة الوحيدة بشكل عام!
لحسن الحظ ، البروتوكول نفسه ليس معقدًا للغاية ويمكنك كتابة شيء خاص بك بسرعة عندما تحتاج إلى العمل وليس كتابة المكتبات)
بيئة
ثالث وأكبر عيب هو استحالة تهيئة البيئة. يتم تشغيل Flutter web إما في متصفح أو كخادم ويب. لا يزال بإمكانك تعيين المنفذ الذي سيدور عليه عبر معلمات سطر الأوامر (وهو أيضًا ليس مناسبًا جدًا ، أين التكوين؟!) ولكن كيف يمكنني تشغيله كـ https بشهادة موقعة ذاتيًا؟ بحيث في نفس الوقت سوف يعمل التحميل الساخن وتصحيح الأخطاء وغيرها من الرقائق التي تعمل عادة؟ مرحبا! رفاق ، 2k20 ينتهي ، وما زال لديك http؟ هل حقا؟!
خاتمة
بالتأكيد ، يعمل Flutter كإطار عمل لتطوير الأجهزة المحمولة عبر الأنظمة الأساسية على تمزيق React Native إلى أشلاء على جميع الجبهات. أنا راضٍ ، كما أن العميل سعيد - ماذا تحتاج أيضًا؟
ولكن كأداة لكتابة تطبيقات الويب ، فإنها لا تزال رطبة وشاقة للغاية. استعد لذلك حيث قمت بتوصيل حزمة js لجهة خارجية في بضع ثوانٍ ، هنا ستكتب غلافًا لها لبضعة أيام ، أو حتى التناظرية الخاصة بك على Flutter.
ملاحظة
سأكررها مرة أخرى لمن نسوا من بداية المقال. الحلول والاستنتاجات التي وصفتها هي استنتاجات شخص لديه خلفية لمدة أسبوع واحد في Flutter وخلفية لمدة 3 سنوات في React. لذلك لا تأخذهم للحقيقة المطلقة. أنا مستعد لمناقشة التعليقات مع المعلم ما الخطأ الذي فعلته.