MVI Architecture Pattern في Flutter: تحكم دقيق في تدفق البيانات وتجربة مستخدم تفاعلية
لو شخص مهتم يعرف اكتر عن الMVI Architecture Pattern وازاي بنطبقه في Flutter فده هيكون موضوعنا النهاردة
طيب في البداية ايه هو الMVI؟
الMVI ينقسم لثلاث اجزاء وهو الModel - View - Intent
قائم على الReactive Programming
بمعنى ان الData Flow والAction بتكون عن طريق الStreams
ولكن الباترن ده مختلف جدا عن الباترنز اللي احنا متعودين عليها وبنستخدمها بشكل شائع زي الMVP و الMVVM وبيضمن بعض الconcepts في الFunctional Programming زي الImmutability والPure Functions ممكن نبقى نتكلم عنهم في بوست منفصل
ولكن خلينا دلوقتي نركز اكتر على الMVI ونشرح كل بارت لوحده ونفهم ليه الباترن ده مختلف
الView:
مفيش فيه كلام كتير لأنه زي اي باترن بيمثل الUI بتاعي اللي من خلاله اليوزر بيبدأ يتفاعل مع الابلكيشن
Model:
وهنا المودل مختلف جدا عن باقي الباترنز
طيب ازاي؟ ببساطة بيعبر عن حالة الView ، لو انا بجيب داتا من عند الباك اند ومستنيها تجيلي ايه الCases اللي ممكن تحصل فالوقت ده؟
ان انا عملت ريكويست ومستني الdata ترجعلي بالتالي الState بقت loading
ان الداتا تيجي بالفعل ونبعتها للView بالتالي بقت Success
او ان يحصل Exception بشكل ما والداتا متجيش بالتالي حالتنا بقت Failure وفيه مسدج بتقول لليوزر سبب الFailure اللي حصل
وهو ده الModel ياصديقي، هو ببساطة الResult النهائية بتاعتي في شكل Immutable Object
طيب يعني ايه immutable؟ يعني غير قابل للتعديل بداخل الاوبجكت ده، هي دي الحالة النهائية ليه
الIntent:
هي الActions اللي ممكن الEnd-User يعملها من خلال التطبيق، على سبيل المثال ضغطتي على زرار الlogin يعتبر intent ، دخولي على اسكرينة الproducts ومجرد ما ادخل يعرضلي ليست من الproducts يعتبر intent يعني من الاخر اي action محتاج تاخده بناءا على تفاعل اليوزر هو intent، حتى من اسمها intention 😅
وهنا فيه سؤال يطرح نفسه، فين الComponent المسؤول عن انه يستقبل الIntents دي وبناءا عليها يتواصل مع الRepository ويعمل Reduce للResult(Model)؟
الاجابة هو الView Model
علاقة الView Model بالMVI
عارف انك بتسأل نفسك "ايه علاقة الView Model بالMVI دلوقتي؟"
فالحقيقة ان الMVI يعتبر نسخة مطورة من الMVVM بمعنى ان الView Model لا زال موجود معانا فالMVI بس بدل ما كان التواصل ما بين الview وال view model عن طريق ال data bindings بشكل Direct ، لا الموضوع اختلف وبقى فيه Intent بنبعتها لأستريم والView Model يlisten عليها وبناءا على الintent اللي جياله بيطبق لوجيك معين زي انه يكلم الداتا سورس ويجيب منها الداتا، ثم يعمل reduce لState جديدة (Model) بيكون عبارة عن اوبجكت بداخله الداتا بتاعتي ثم الview بيlisten على الstate ويتغير بناءا عليها
طب عايزك تقعد دقيقة كده تفكر مع نفسك، هل فيه State Management في فلاتر بتطبق الاركتيكشر ده؟ بنفس الComponents وقائمة على Reactive Programming؟
سامعك وانت بتقول الBloc😅
فعلا اجابتك صح الBloc قائم على الReactive Programming ـ الStates والEvents عبارة عن Two Streams والData Flow بيكون عن طريق الStreams دي
الEvent هو الIntent
والState هي الModel
منصة برمجة:
يُمكن استخدام MVI في مختلف منصات البرمجة، بما في ذلك:
Flutter: تطوير تطبيقات الهاتف المحمول لسطح المكتب والويب.
React: بناء واجهات مستخدم تفاعلية.
Angular: تطوير تطبيقات الويب front-end.
تخصص البرمجة:
يُعد MVI مفيدًا في مختلف تخصصات البرمجة، مثل:
تطوير تطبيقات الهاتف المحمول: باستخدام Flutter أو React Native.
تطوير تطبيقات سطح المكتب: باستخدام Electron.
تطوير ألعاب: باستخدام WebGL أو Babylon.js.
البرمجة الحاسوبية:
يُعد MVI أسلوبًا برمجيًا متقدمًا يُقدم العديد من الفوائد لتطوير تطبيقات قابلة للتطوير وسهلة الصيانة.
واجهات برمجة التطبيقات:
يُمكن استخدام MVI مع واجهات برمجة التطبيقات (APIs) التي توفر Streams كطريقة للتواصل مع البيانات.
