ميزة Flutter Hot Reload: شرح الفوائد والأداء

تعد Flutter Hot Reload إحدى الميزات المرغوبة للغاية في إطار عمل Google، والتي تتيح للمطورين إجراء تغييرات على التعليمات البرمجية ورؤية النتائج على الفور تقريبًا - دون إعادة تشغيل التطبيق. تسهل هذه الميزة التكرار السريع وتحسين تصميم التطبيق، وتجريب تخطيطات وتكوينات مختلفة لواجهة المستخدم، وإصلاح الأخطاء، والأهم من ذلك، تقليل وقت التطوير بشكل كبير. ونتيجة لذلك، يمكن أن يفيد Hot Reload شركة تطوير تطبيقات Flutter بشكل كبير من خلال السماح بتغييرات التعليمات البرمجية في الوقت الفعلي والتحديثات الفورية، مما يجعل عملية التطوير أكثر كفاءة وتعاونًا.

تتيح ميزة Flutter Hot Reload للمطورين رؤية التغييرات التي يقومون بها على التعليمات البرمجية التي تنعكس على المحاكي أو الجهاز على الفور، دون الحاجة إلى إعادة تشغيل التطبيق بالكامل. تهدف هذه المقالة إلى الإجابة على سؤال يبدو بسيطًا: ماذا يعني "شبه فوري" بالنسبة إلى Hot Reload؟ بمعنى آخر، ما مدى سرعة عمل ميزة Flutter في المشاريع ذات الأحجام المختلفة؟ ما الذي يجب أن يتوقعه المرء عند العمل في مشاريع أكبر، وماذا عن المشاريع الصغيرة؟ هل يعمل Hot Reload بشكل جيد في كل هذه السيناريوهات؟ هيا نكتشف!

فهم Flutter Hot Reload

لنبدأ بالأساسيات وإخلاء المسؤولية الضرورية. عند وصف ميزة Hot Reload، من المهم الإشارة إلى أن Dart VM يستخدم مترجم JIT (Just-in-Time) لتحويل التعليمات البرمجية إلى تعليمات برمجية أصلية للجهاز، وهو ما يحدث قبل تنفيذ البرنامج مباشرةً. يعتمد JIT على التنبؤ بالكود لأنه يتمتع بإمكانية الوصول إلى معلومات وقت التشغيل الديناميكية، مما يؤدي إلى حلول لتوفير الوقت، مثل إعلام المطورين بأن وظيفة معينة لم يتم استخدامها في أي مكان.

يقوم Hot Reload بإعادة بناء شجرة عناصر واجهة المستخدم ولكنه يحافظ على حالة التطبيق كما كانت. عند استخدام ميزة Hot Reload، لا يتم استدعاء الدالتين `main()` و`initState()`. إذا كنت بحاجة إلى إعادة بناء هذه الوظائف، فيجب عليك استخدام Hot Restart أو Full Restart:

• إعادة التشغيل السريع: أداة تقوم بتشغيل الكود المصدري لتطبيق المشروع ليتم تجميعه مرة أخرى، بدءًا من الحالة الافتراضية/الأولية، حيث يتم تدمير الحالة المحفوظة. هذه الأداة أسرع بكثير من Full Restart ولكنها تستغرق وقتًا أطول من Hot Reload.
• إعادة التشغيل الكامل: أداة تقوم ببناء مشروع التطبيق من الصفر، وتسمى أيضًا "البدء البارد".

بالإضافة إلى ذلك، من وقت لآخر، يجب على المطورين استخدام Hot Restart بدلاً من Hot Reload، على سبيل المثال:

• إذا ظل التطبيق في الخلفية لفترة طويلة جدًا و/أو سيتم إيقافه،
• إذا تم تغيير النوع المذكور داخل ملف Dart إلى فئات عادية والعكس صحيح،
• إذا تم تغيير الرمز الأصلي،
• بعد تغيير تعريف النوع العام.

لا يمكن تنفيذ Flutter Hot Reload إلا في وضع التصحيح. أوضاع البناء الأخرى، وهي: وضع الملف الشخصي ووضع الإصدار، لا تدعم ميزة Hot Reload.

مقياس المشروع مقابل أداء Flutter Hot Reload

تختلف مشاريع Flutter في الحجم، بناءً على عدد المكتبات المضمنة أو بنية التطبيق أو ملفات الوسائط أو ميزات التطبيق. حتى وقت قريب، كان Flutter يعتبر الحل الأمثل لـ MVPs وPoCs. ومع ذلك، نظرًا لأن مشاريع Flutter واسعة النطاق مثل Google Pay أو eBay أو Nubank أو Rive أو Maya Bank التي تضم 47 مليون مستخدم تكتسب زخمًا، فإن استكشاف إمكانيات Flutter للتطبيقات المعقدة يعد أمرًا ضروريًا أيضًا.

يمكن استخدام ميزة Flutter's Hot Reload لكل من تطبيقات إثبات المفهوم (PoC) والمنتجات الرقمية على مستوى المؤسسة. ومع ذلك، يبقى السؤال ما إذا كان أدائها مُرضيًا للمشاريع المعقدة وما إذا كان Flutter لتطبيقات المؤسسات خيارًا قابلاً للتطبيق. دعونا استكشاف هذا أبعد!

تجربة أداء إعادة التحميل السريع

أولاً، لتحديد متوسط ​​الأداء التقريبي لـ Hot Reload في حالات الاستخدام المختلفة، قررت فحص 5 مشاريع اختبارية تحتوي على عدد معين من المكتبات:

• مشروع الاختبار 1: 1000 مكتبة
• مشروع الاختبار 2: 5000 مكتبة
• مشروع الاختبار 3: 10000 مكتبة
• مشروع الاختبار 4: 25000 مكتبة
• مشروع الاختبار 5: 50000 مكتبة

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

تم إجراء تجربة بمواصفات الجهاز التالية:

• MacBook Pro، معالج Intel Core i5 رباعي الأكواد بسرعة 2-3 جيجا هرتز، وذاكرة LPDDR3 سعة 16 جيجابايت بسرعة 2133 ميجاهرتز، وبطاقة Intel Iris Plus Graphics 655 بسعة 1536 ميجابايت،
• كود فيجوال ستوديو، الإصدار: 1.68.1،
• جهاز المحاكاة: iPhone 12 Pro Max – iOS 15.5 (إصدار Xcode: 13.4.1)،
• Flutter SDK (القناة مستقرة، 3.7.0).

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

كان الهدف من التجربة هو إظهار المدة التي يستغرقها تنفيذ ميزة Hot Reload في كل مشروع، حيث يتم إنشاء كمية ذات صلة من المكتبات لأغراض الاختبار. تحتوي كل مكتبة على فئة معينة. بهذه الطريقة يتوافق عدد المكتبات مع عدد الفئات المتوقع إعادة تحميلها. فيما يلي مثال لمشروع اختبار 3 يحتوي على 10000 فئة. تحتوي كل مكتبة، تسمى "placeholderX".dart، على فئة القطعة عديمة الحالة البسيطة "placeholderX"، وهي عبارة عن حاوية:

لون الحاوية هو متغير تم الإعلان عنه في مكتبة "constants.dart" في فئة "الثوابت"، والذي يرتبط ببساطة بالمكتبات التالية التي تم إنشاؤها لاختبار "العناصر النائبة".

نتائج اختبار Flutter Hot Reload

الآن بعد أن حددنا جميع المتغيرات وأهداف التجربة وشرحنا العملية، فقد حان الوقت لتلخيص النتائج. دعونا نرى تأثيرات 5 اختبارات أداء Flutter Hot Reload.

الاختبار 1: إعادة تحميل 1000 فصل

الاختبار الثاني: إعادة تحميل 5000 فصل

الاختبار 3: إعادة تحميل 10000 فصل

الاختبار 4: إعادة تحميل 25000 فصل

الاختبار 5: إعادة تحميل 50000 فصل

يقارن الرسم البياني أدناه المدة الزمنية لـ Hot Reload بين مقاييس المشاريع المختلفة:

من الواضح أن متوسط ​​وقت ميزة Hot Reload لمقياس مشروع معين يتزايد بسبب العدد الكبير من المكتبات (الفئات).

ومع ذلك، بالنظر عن كثب إلى الرسم البياني أدناه ومع الأخذ في الاعتبار اختبارات المشروع الثلاثة الأولى فقط، قد تلاحظ قيمًا تفصيلية لاستخدام معين لـ Hot Reload:

وأوضح نتائج الاختبار

تؤكد نتائج الاختبار أن ميزة Hot Reload Flutter فعالة أثناء إعادة بناء 1000 فئة في وقت واحد، حيث يتأرجح متوسط ​​المدة الزمنية في حدود ثانية واحدة، وفي الغالب لا يصل حتى إلى هذه القيمة وفقًا للرسم البياني. لذلك، في معظم الحالات الواقعية، يعد Hot Reload بالتأكيد خيارًا آمنًا، على سبيل المثال:

• إعادة تحميل فئة واحدة،
• إجراء اجتماعات مباشرة مع العملاء (على سبيل المثال عند اختبار أفكار جديدة)،
• أثناء البرمجة الزوجية أو العصف الذهني.

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

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

Flutter Hot Reload: شرح الأداء

تعد ميزة Flutter Hot Reload أداة قوية وفعالة تكون مفيدة أثناء حل المشكلات المتعلقة بواجهة المستخدم أثناء مرحلة التطوير. كما ثبت في التجربة أعلاه، في معظم الحالات، يكون أداء Hot Reload سلسًا - مع تغيير واحد لواجهة المستخدم لا يستغرق سوى أقل من ثانية ومتوسط ​​الوقت لإعادة تحميل 1000 فصل يتأرجح في أقل من ثانية واحدة.

علاوة على ذلك، أثبتت إحدى التجارب أن Flutter يمكنه إعادة تحميل مشاريع كبيرة الحجم تضم آلاف الفئات، حيث يكون متوسط ​​وقت Hot Reload أقل من 8 ثوانٍ. على الرغم من أن أداء Hot Reload قد لا يكون مرضيًا تمامًا في المشاريع العملاقة (سيناريو 50000 فئة)، إلا أن Flutter قادر تمامًا على التعامل معها.

مما لا شك فيه أن Flutter Hot Reload يعزز كفاءة العمل من خلال إعادة بناء الأدوات داخل شجرة عناصر واجهة المستخدم الخاصة بالمشروع، مما يسهل تحقيق النتائج المرغوبة في غمضة عين. بفضل Hot Reload، يستطيع مطورو Flutter التعامل مع تغييرات التصميم المعقدة (حتى تلك التي تؤثر على التطبيق بأكمله) في الوقت المناسب.

أخيرًا وليس آخرًا، يعد Hot Reload مجرد عامل واحد يساهم في الأداء العام لإطار العمل (يتم التحقق منه باستمرار بواسطة مجتمع Flutter ويتم تحسينه بواسطة Flutter Dev). يعد استكشاف أفضل أدوات تطوير Flutter أمرًا ضروريًا لإنشاء تطبيقات الهاتف المحمول عالية الجودة عبر الأنظمة الأساسية بكفاءة. لذلك، أشجعك بشدة على استكشاف الأداء في Flutter - سواء من خلال التجارب والاختبارات أو في مشاريع العملاء التجارية. هذا ما نقوم به في Miquido - نعمل بشكل مطرد على تنمية محفظتنا من مشاريع تطوير التطبيقات عبر الأنظمة الأساسية لإثبات المفهوم (PoC) ومشاريع تطوير التطبيقات عبر الأنظمة الأساسية على مستوى المؤسسات.