MVVM in FLutter

MVVM in FLutter

السلام عليكم ورحمة الله وبركاته

النهاردة المقالة بتاعتنا هاتكون مستوى متقدم باذن الله وهانتكلم فيها عن الMVVM وطريقة تطبيقها فى Flutter عن طريق ال Dart Streams .

لما تشتغل تطبيق صغير مش هاتحس بمشكلة لو بتشتغل بالطريقة العادية وخاصة لو انت لسه بادى تعمل تطبيقات باستخدام flutter طيب تخيل معايا كده المشروع بتاعك بدا يكبر وشاشات كتيرة محتاجها وبالتالى عدد ال classes بدا يكبر فهاتلاقى نفسك وصلت لمرحة معقدة جدا من الكود وخاصة ان انت مخلى ال business and view logic  فى نفس المكان وده هايوصل الكود لدرجة تعقيد كبيرة وده هايخلى موضوع ال  testing وال developing صعب جدا وطبعا بالتالى موضوع ال code reusing  هايكون صعب جدا .

علشان كده MVVM اتعملت عشان تفصل لينا ال business logic عن ال  view logic .

ماهو ال MVVM ؟

MVVM هو اختصار لModel-View-ViewModel والهدف منه هو عملية فصلة ال state and logic  من ال view لحاجة تانية اسمها ViewModel

طيب ماهو ال ViewModel  :

هو مسؤول عن التالى :

-التفاعل مع مدخلات المستخدم كانشاء request  او routing ل screen الخ

-اخراج data لل view

ماهو عمل ال view:

مبدايا ال view  فقط للتفاعل مع المستخدم وعرض البيانات القادمة من ال ViewModel  ولا تحتوى على business logic  كما قلنا سابقا ان هذا هو السبب والهدف الرئيسي من استخدام ال MVVM.

ماهو عمل ال Model: هو المسوؤل عن ال business logic  فى التطبيق قبل تحويله الى ViewModel   ليتم بعد ذلك اظهاره داخل ال View.

نيجى للمهم بقى ازاى نطبق ده فى Flutter?

ال widget عبارة عن ال View

يتم تمثيل ال business logic فى ال ViewModel

نبدا على طول بالتطبيق العملى على خاصية ال subscribe for newsletter :

كل ال inputs  عبارة عن Sinks  وده عبارة عن طريقة ال view  بستخدمها لادخال الdata  لل ViewModel

كل ال outputs عبارة عن Streams بحيث ان ال view  بتعمل listen  لاى تغيير لل Stream  .

الى هنا نكون انتهينا من الجزء النظرى والدرس الجى باذن الله هانتكلم عن الجزء العملى

والسلام عليكم ورحمة الله

Share :

Add New Comment

 Your Comment has been sent successfully. Thank you!   Refresh
Error: Please try again