How Flutter Works: Architecture #DecodingFlutter (1/6)

Flutter

29 Apr 202506:20

Summary

TLDRفي الحلقة الأولى من سلسلة 'كيف يعمل فلاتر'، يقدم كريغ لابنز فلاتر كإطار عمل declarative متعدد الأنظمة مبني باستخدام Dart. يشرح كيفية إنشاء واجهات المستخدم باستخدام الفئات المعروفة بـ 'widgets' وكيفية استجابة التطبيق لتغييرات الحالة في الوقت الفعلي. كما يتم استعراض الهيكل الثلاثي الذي يتكون من شجرة الـ widget، شجرة الـ element، وشجرة الـ render التي تشكل العمود الفقري لآلية التقديم. بالإضافة إلى ذلك، يتعرف المشاهدون على محركات الرسومات المستخدمة مثل Skia و Impeller، مع نظرة عامة على الأداء عبر الأنظمة المختلفة. الحلقة توضح كيفية عمل فلاتر وتستعرض أبرز ميزاته مثل إعادة التحميل الحي.

Takeaways

😀 فلاتر هو إطار عمل واجهات المستخدم متعدد المنصات، مكتوب بلغة دارت، ويدعمه جوجل بشكل كبير.
😀 فلاتر يستخدم البرمجة التفاعلية، حيث يتم بناء واجهة المستخدم بناءً على حالة التطبيق وتحديثها تلقائيًا عند تغيير الحالة.
😀 فلاتر يدعم منصات متعددة مثل iOS وAndroid وأجهزة الكمبيوتر والويب والتلفزيونات من خلال شركات أخرى مثل LG.
😀 لغة دارت هي لغة مُحسّنة للعملاء، وهي تترجم مباشرة إلى الكود الأصلي للجهاز، مما يعزز الأداء حتى على الأجهزة المنخفضة.
😀 دارت تشبه لغات مثل كوتلن وC#، وتستخدم نموذج دورة الأحداث ذات الخيط الواحد للتعامل مع العمليات غير المتزامنة.
😀 لتطوير تطبيقات فلاتر، يقوم المطورون بتثبيت أداة فلاتر على بيئة العمل واستخدام أوامر مثل `flutter create` و`flutter run` لإنشاء وتشغيل التطبيقات.
😀 في فلاتر، يتم بناء الواجهات باستخدام الـ **widgets** التي تحتوي على دالة `build` لإعادة بناء واجهة المستخدم بناءً على الحالة الحالية.
😀 فلاتر يوفر خاصية **إعادة التحميل السريع** (Hot Reload) التي تسمح بتحديث التطبيق دون فقدان حالته الحالية، مما يعزز تجربة التطوير.
😀 فلاتر يحتوي على ثلاث هياكل شجرية رئيسية: شجرة الـ **widget**، شجرة الـ **element**، وشجرة الـ **render**، ويجب على المطورين فهم كيفية تفاعل هذه الهياكل.
😀 فلاتر يستخدم محرك الرسومات **Skia** لعرض واجهات المستخدم، ويعمل حاليًا على الانتقال إلى محرك جديد يسمى **Impeller** لتحسين الأداء.
😀 بنية فلاتر تتكون من ثلاث مكونات رئيسية: مشروع أصلي، إطار عمل فلاتر المكتوب بلغة دارت، ورمز ربط خاص بالمنصات لتشغيل كود دارت.

Q & A

ما هو معنى أن فلاتر هو إطار عمل 'إعلاني'؟
-الإطار الإعلاني يعني أن فلاتر يعمل بطريقة مشابهة لأطر العمل التفاعلية مثل SwiftUI و Jetpack Compose و React، حيث يتم تحديث واجهة المستخدم بناءً على التغييرات في حالة التطبيق.
ما هي المزايا التي يقدمها فلاتر في دعم منصات متعددة؟
-فلاتر يمكنه العمل على منصات مختلفة مثل iOS و Android و macOS و Windows و Linux، بالإضافة إلى دعم الويب والتلفزيونات عبر أنظمة مثل webOS. هذا يتيح للمطورين بناء تطبيقات تعمل على العديد من الأجهزة دون الحاجة إلى تغييرات جوهرية.
ما هو دور لغة Dart في فلاتر؟
-لغة Dart هي لغة موجهة للكائنات وذات نوعية قوية تم تطويرها بواسطة جوجل. Dart يتم تجميعه مباشرة إلى كود الآلة مما يوفر أداء عالٍ حتى على الأجهزة ذات الأداء المنخفض.
ما هي الأوامر الأساسية التي يجب أن يعرفها مطور فلاتر عند بدء العمل؟
-بعض الأوامر الأساسية في فلاتر تشمل: `flutter doctor` للتحقق من التثبيت، `flutter create` لإنشاء مشروع جديد، `flutter run` لتشغيل التطبيق في وضع التطوير، و `flutter build` لإنشاء ملف الإنتاج.
ما هي البنية الأساسية لوظيفة البناء (Build Method) في فلاتر؟
-في فلاتر، يقوم كل ويدجيت بتعريف وظيفة بناء (Build Method) التي تُرجع ويدجيت يُستخدم لعرض واجهة المستخدم في هذه اللحظة. وظيفة البناء تأخذ معلمة `BuildContext` وتُعتبر دالة نقية (Pure Function) أي لا تحتوي على تأثيرات جانبية.
ما هي ميزة 'إعادة تحميل الحالة المتغيرة' (Stateful Hot Reload) في فلاتر؟
-إعادة تحميل الحالة المتغيرة في فلاتر تسمح بتحديث واجهة المستخدم أو منطق التطبيق بسرعة دون الحاجة إلى إعادة تشغيل التطبيق، مما يتيح للمطورين رؤية التغييرات في الوقت الفعلي أثناء التطوير.
ما الفرق بين الأشجار الثلاثة (Widget Tree، Element Tree، Render Tree) في فلاتر؟
-الأشجار الثلاثة تمثل الطبقات المختلفة التي تدير الواجهة: شجرة الويجيت (Widget Tree) تحتوي على جميع الويجيتات، شجرة العناصر (Element Tree) تدير الحالات المتغيرة، وشجرة الرسومات (Render Tree) تتعامل مع عمليات العرض الفعلي على الشاشة.
كيف يساعد Skia في رسم واجهات المستخدم في فلاتر؟
-Skia هو محرك رسومات مفتوح المصدر يُستخدم من قبل فلاتر لرسم واجهات المستخدم بشكل سريع وفعال. يضمن Skia أداء رسومي ممتاز عبر منصات متعددة.
ما هو محرك Impeller وما الفائدة منه في فلاتر؟
-محرك Impeller هو محرك رسومات جديد قيد التطوير لفلاتر يهدف إلى تحسين الأداء والتناسق في عرض الرسوميات عبر منصات متعددة، وهو البديل المستقبلي لمحرك Skia.
ما هو الهيكل الأساسي لمشروع فلاتر؟
-يتكون مشروع فلاتر من ثلاث أجزاء رئيسية: 1) مشروع أصلي (مثل مشروع Xcode في iOS أو ملف HTML في الويب)، 2) إطار فلاتر وكود Dart الذي يحدد سلوك التطبيق، 3) كود ربط خاص بالمنصة لإطلاق كود Dart.