نمط MVI في Flutter: Intent وState وReducer والآثار الجانبية

لو شخص مهتم يعرف اكتر عن الMVI Architecture Pattern وازاي بنطبقه في Flutter فده هيكون موضوعنا النهاردة

ال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 دلوقتي؟”

فالحقيقة ان ال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 كطريقة للتواصل مع البيانات.