معماری MVVM چیست؟ + تفاوت آن با MVC

معماری MVVM که مخفف Model-View-ViewModel می باشد، نوعی الگوی طراحی نرم ‌افزاری محسوب می شود که هدف آن جدا کردن رابط گرافیکی کاربر (View) از منطق تجاری (Model) در یک برنامه کاربردی است. مدل MVVM با معرفی نوعی لایه میانی به نام ViewModel، اتصال و ارتباط موثر داده بین View و Model را امکان پذیر می کند.

این جداسازی نگرانی‌ها سازمان‌دهی کد، قابلیت استفاده مجدد و آزمایش ‌پذیری را افزایش داده و نگهداری و تکامل برنامه را در طول زمان آسان‌تر می‌ کند. در این مطلب از مجله داناپ قرار است در رابطه با مدل MVVM، نحوه کار، اجزای آن، مزایا، معایب و تفاوت آن با مدل معماری MVC توضیحاتی مطلوب ارائه شود.

مدل MVVM چیست؟

Model-View-ViewModel (MVVM) یک الگوی طراحی نرم افزاری است که بر جداسازی منطق برنامه از کنترل های رابط کاربری تمرکز دارد. MVVM که با نام Model-view-binder نیز شناخته می شود، در ابتدا توسط معماران مایکروسافت کن کوپر و جان گاسمن توسعه داده شد.

MVVM، مانند سایر الگوهای طراحی، سازماندهی و مدولارسازی کد را تسهیل کرده، توسعه، به روز رسانی و استفاده مجدد از کد را ساده می کند. این الگو در برنامه های کاربردی ویندوز و نرم افزارهای گرافیکی وب کاربرد گسترده ای دارد.

در حوزه فناوری های مایکروسافت، MVVM به ویژه در بنیاد ارائه ویندوز (WPF) که بر روی فریم ورک دات نت عمل کرده و بسیار به چشم می آید. علاوه بر این، Silverlight، نوعی پلاگین چند رسانه ای که به عنوان معادل وب WPF عمل می کند، الگوی MVVM را نیز به کار می گیرد.

اجزای مدل MVVM

مدل MVVM (Model-View-ViewModel) از سه جزء کلیدی تشکیل شده است:

• Model: مدل نشان دهنده مدل دامنه برنامه است که شامل مدل داده، منطق تجاری و قوانین اعتبار سنجی خواهد بود. Model با ViewModel تعامل دارد ولی هیچ آگهی از View ندارد. نقش اصلی آن ارائه داده ها و خدمات به ViewModel است.

• View : View مسئول ارائه رابط کاربری است. این شامل حداقل منطق ارائه بوده که فقط بر رفتار بصری تمرکز دارد. View به گونه ای طراحی شده است که تا حدودی مبهم باشد و قابلیت ذخیره سازی داده یا دستکاری مستقیم داده ها را ندارد. View از طریق اتصال داده ها با ViewModel ارتباط برقرار می کند و از مدل بی خبر است.

• VIEWMODEL : ViewModel به عنوان واسطه بین View و Model عمل می کند. این ویژگی ها و دستورات عمومی را که View از طریق اتصال داده ها استفاده خواهد کرد را نشان می دهد. هر زمان که در وضعیت ViewModel تغییراتی ایجاد شود، با استفاده از رویدادهای اعلان یا مکانیسم های دیگر به View اطلاع می دهد. ViewModel هیچ دانشی از عناصر UI خاص ندارد اما به عنوان یک هماهنگ کننده کار کرده و داده ها و عملکردها را به View ارائه خواهد کرد و در عین حال منطق برنامه را کپسوله می کند.

به طور خلاصه، Model منطق دامنه را نشان می‌دهد، View ارائه رابط کاربری را مدیریت می‌کند و ViewModel به عنوان نوعی پل عمل می‌کند و ارتباط بین View و Model را در معماری MVVM تسهیل می‌کند.

نحوه کار MVVM چگونه است؟

مدل MVVM با ایجاد ارتباط واضح و جداسازی بین سه جزء کلیدی: View، ViewModel و Model عمل می‌کند که شیوه کار آن به صورت موارد زیر است:

View مسئول ثبت تعاملات کاربر، مانند کلیک های ماوس یا ورودی صفحه کلید است.  Viewدر اصل فقط با ViewModel ارتباط برقرار می کند و مستقیماً با Model ارتباطی ندارد. از طریق اتصال داده ها، View ورودی کاربر را به ViewModel ارسال خواهد کرد. View مسئول ارائه بصری برنامه است و از منطق تجاری زیربنایی اطلاعی ندارد.

ViewModel به عنوان یک واسطه بین View و Model عمل می کند. این ویژگی ها و دستوراتی را نشان می دهد که View می تواند به آنها متصل شود و عملکردهای در دسترس کاربر را تعریف کند. ViewModel داده ها را از مدل بازیابی می کند و برای نمایش در اختیار View قرار می دهد. ViewModel دانشی از عناصر UI خاص ندارد اما بر روی هماهنگی داده ها و منطق تمرکز دارد.

Model در معماری نام برده دامنه یا منطق تجاری برنامه را نشان می دهد. مدل در اصل داده ها را کپسوله کرده و قوانین و منطق تجاری لازم را پیاده سازی می کند. مدل مستقل از View و ViewModel است و در صورت درخواست داده ها و خدمات را به ViewModel ارائه می دهد.

تعامل بین این مؤلفه ‌ها در مدل MVVM از طریق اتصال داده ‌ها تسهیل می‌شود که به View اجازه می‌دهد تا کنترل ‌های خود را به ویژگی‌ ها و دستورات افشا شده توسط ViewModel متصل کند. هنگامی که تغییراتی در وضعیت یا داده ‌های ViewModel ایجاد می ‌شود، ViewModel را از طریق رویدادها یا مکانیسم‌های دیگر مطلع می ‌کند و از به‌روزرسانی ‌ها و همگام ‌سازی مناسب اطمینان حاصل خواهد کرد.

با پایبندی به این الگو، MVVM به تفکیک نگرانی ‌ها دست می ‌یابد که امکان نگهداری آسان ‌تر، آزمایش‌ پذیری و قابلیت استفاده مجدد کد را فراهم می‌کند.

ویژگی های مدل MVVM

در اینجا ویژگی های معماری MVVM (Model-View-ViewModel) آمده است:

• طراحی شده برای برنامه های دسکتاپ با Data Binding : معماری MVVM در درجه اول برای برنامه های دسکتاپ که از قابلیت اتصال داده پشتیبانی می کنند در نظر گرفته شده است. این مدل معمولاً در ارتباط با فناوری هایی مانند XAML (زبان نشانه گذاری برنامه eXtensible) و رابط INotifyPropertyChanged استفاده می شود. این فناوری ها ارتباط و همگام سازی یکپارچه بین View و ViewModel را امکان پذیر می کنند.

• الگوی مشاهده‌ گر (observer pattern) برای تغییرات View-Model: وقتی تغییراتی در View-Model انجام می‌ شود، الگوی MVVM از الگوی مشاهده‌ گر استفاده می ‌کند. این بدان معنی است که تغییرات در View-Model مشاهده می شود و به View مربوطه اطلاع داده شده و اطمینان حاصل خواهد شد که رابط کاربری وضعیت به روز شده داده ها را منعکس می کند.

• مدل MVVM به طور گسترده در فریم ورک ها استفاده می شود: مدل MVVM به طور گسترده توسط فریمورک هایی مانند Windows Presentation Foundation (WPF)، Silverlight، nRoute و غیره استفاده می شود. این فریمورک ها پشتیبانی داخلی را برای اجرای الگوی MVVM فراهم کرده و توسعه برنامه های کاربردی قوی و قابل نگهداری را تسهیل می کنند.

معماری MVVM با استفاده از قابلیت ‌های اتصال داده، استفاده از الگوی مشاهده ‌گر (observer pattern) و به‌کارگیری گسترده در فریمورک ها، یک رویکرد ساختار یافته برای توسعه برنامه‌ های دسکتاپ ارائه می‌دهد که بر جداسازی نگرانی‌ ها و افزایش قابلیت نگهداری تأکید می ‌کند.

مزایای معماری MVVM

معماری MVVM چندین مزیت دارد که از مهمترین آن ها میتوان فهرست زیر را نام برد:

• توسعه آسان تر: با جدا کردن View از منطق، MVVM توسعه موازی توسط تیم های مختلف را امکان پذیر می کند. طراحان می توانند روی ایجاد رابط کاربری (UI) تمرکز کنند، در حالی که توسعه دهندگان روی پیاده سازی ViewModel و Model تمرکز خواهند کرد. این تقسیم کار بهره وری را افزایش می دهد و همکاری کارآمد را ترویج می کند.

• تست آسان تر: تست رابط های کاربر (UI) می تواند چالش برانگیز باشد. با این حال، در MVVM، ViewModel و Model مستقل از View هستند. این جداسازی به توسعه ‌دهندگان اجازه می ‌دهد تا بدون نیاز به View، آزمایش‌ هایی را برای ViewModel و Model بنویسند. تفکیک نگرانی ها آزمایش واحد را ساده می کند و قابلیت آزمایش کلی را بهبود می بخشد.

• تعمیر و نگهداری آسان تر: جداسازی واضح بین اجزا در MVVM منجر به کد تمیزتر و قابل نگهداری تر می شود. هر جزء دارای یک مسئولیت کاملاً تعریف شده است که درک و اصلاح بخش ‌های خاص برنامه را آسان‌تر می ‌کند. با یک پایگاه با کدهای تمیز، پیاده سازی ویژگی های جدید ساده تر می شود، زیرا ادغام آنها با الگوی موجود به خوبی تعریف شده است.

• خوانایی کد پیشرفته: الگوی MVVM یک ساختار کد تمیز و سازمان یافته را ترویج می کند. با نقش ‌هایی که به‌خوبی برای هر مؤلفه تعریف شده ‌اند، درک و تعامل با پایگاه کد آسان ‌تر می‌ شود. این خوانایی کد را بهبود می بخشد و به توسعه دهندگان این امکان را می دهد که به سرعت برنامه را در صورت نیاز درک کرده و اصلاح کنند.

به طور کلی، مدل MVVM توسعه، آزمایش و نگهداری را با ترویج جداسازی واضح نگرانی ‌ها، ماژولار بودن و تمیزی کد ساده می ‌کند. این مزایا به بهبود بهره وری، کیفیت کد و قابلیت نگهداری طولانی مدت برنامه کمک خواهد کرد.

معایب معماری MVVM

در حالی که معماری MVVM مزایای متعددی را ارائه می دهد، برخی از معایب بالقوه نیز برای آن وجود دارد عمده این معایب به صورت موارد زیر هستند:

• پیچیدگی: MVVM می تواند پیچیدگی ایجاد کند، به ویژه برای رابط های کاربری ساده. این الگو ممکن است برای پروژه‌ های کوچک ‌تر مناسب نباشد و این جا جایی است که لایه‌ های اضافی و انتزاع‌ های ViewModel می ‌توانند پیچیدگی ‌های غیرضروری را اضافه کنند. طراحی ViewModel برای ایجاد تعادل مناسب بین عمومیت و سادگی می تواند چالش برانگیز باشد، به خصوص در پروژه های بزرگتر.

• چالش های اشکال زدایی: اشکال زدایی در MVVM به دلیل ماهیت اعلانی اتصال داده می تواند دشوارتر باشد. بر خلاف کد دستوری سنتی، اشکال زدایی مسائل اتصال داده ممکن است به ابزارها و تکنیک های تخصصی نیاز داشته باشد. همچنین ردیابی و شناسایی مشکلات ناشی از تعاملات اتصال داده ها دشوارتر است و فرآیند اشکال زدایی را پیچیده تر می کند.

توجه به این نکته ضروری است که این معایب را می توان با شیوه های طراحی و توسعه مناسب و همچنین آشنایی با الگوی MVVM کاهش داد.

تفاوت مدل های MVC و MVVM

چارچوب MVC (Model-View-Controller) یک الگوی معماری است که یک برنامه کاربردی را به سه جزء اصلی تقسیم می کند: Model، View و Controller. در مقابل، MVVM (Model-View-ViewModel) جداسازی توسعه رابط کاربری گرافیکی (GUI) را از طریق استفاده از زبان نشانه گذاری یا کد GUI تسهیل می کند.

در معماری MVC، کنترلر (Controller) به عنوان نقطه ورود به برنامه عمل می کند، ورودی کاربر را مدیریت کرده و اقدامات بین Model و View را هماهنگ خواهد کرد. از سوی دیگر، در MVVM، View معمولاً نقطه ورودی بوده که مسئول نمایش رابط کاربری و اتصال به ViewModel است.

هر دو الگوی MVC و MVVM آزمایش جداگانه اجزا را ترویج می کنند. در MVC، مؤلفه Model را می توان به طور مستقل از رابط کاربری آزمایش کرد که امکان آزمایش واحد متمرکز را فراهم می کند. به طور مشابه، در MVVM، ViewModel را می توان به راحتی واحد آزمایش کرد، زیرا منطق برنامه را محصور می کند.

معماری MVC یک رابطه یک به چند را بین اجزای Controller و View نشان می دهد، با یک Controller که چندین View را مدیریت می کند. در مقابل، معماری MVVM دارای یک رابطه یک به چند بین مولفه های View و ViewModel است که در آن یک View می تواند به چندین ViewModel متصل شود.

به طور کلی، در حالی که MVC و MVVM در تفکیک نگرانی‌ ها شباهت‌ هایی دارند، اما در نقطه ورود، رویکرد تست و روابط بین مؤلفه‌ ها تفاوت دارند. انتخاب بین MVC و MVVM به نیازهای خاص برنامه و ترجیحات تیم توسعه بستگی دارد.

نکاتی در مورد تفاوت معماری MVVM و MVC

در اینجا تفاوت های مهم بین مدل MVVM و MVC آورده شده است:

معماری MVC (Model-View-Controller):

1. Controller نقطه ورود به برنامه است.
2. روابط یک به چند بین اجزای Controller و View وجود دارد.
3. View ارجاعی به کنترلر ندارد.
4. MVC در مقایسه با MVVM یک مدل قدیمی تر است.
5. خواندن، تغییر، تست واحد و استفاده مجدد از مدل MVC می تواند چالش برانگیز باشد.
6. اشکال زدایی زمانی که با پیوندهای پیچیده داده سروکار داریم می تواند پیچیده باشد.
7. مؤلفه Model در MVC را می توان به طور جداگانه از کاربر آزمایش کرد.

معماری MVVM (Model-View-ViewModel):

1. View نقطه ورود به برنامه است.
2. روابط یک به چند بین اجزای View و ViewModel وجود دارد.
3. View به ViewModel ارجاع دارد.
4. MVVM یک مدل نسبتا جدیدتر است.
5. انجام تست واحد جداگانه در MVVM آسانتر بوده و کد مبتنی بر رویداد است.
6. اشکال زدایی می تواند زمانی پیچیده شود که پیوندهای پیچیده داده وجود داشته باشد.

چه زمانی باید از مدل MVVM استفاده کرد؟

مدل MVVM معمولاً در سناریوهایی استفاده می ‌شود که می‌ خواهید رابط کاربری گرافیکی (View) را از منطق تجاری زیربنایی (Model) جدا کرده و اتصال داده‌ ها و ارتباط دو طرفه بین آن ها را از طریق ViewModel فعال کنید. در اینجا چند سناریوی مختلف وجود دارد که MVVM می تواند در آن ها سودمند باشد.

1- برنامه های کاربردی در مقیاس بزرگ

مدل MVVM به ویژه برای برنامه های پیچیده با رابط کاربری قابل توجه و منطق تجاری گسترده مفید است. این به مدیریت پیچیدگی با ارائه یک تفکیک واضح از نگرانی ها و ترویج توسعه مدولار کمک می کند.

2- برنامه های مبتنی بر داده

اگر برنامه شما به شدت به اتصال داده ها متکی است و نیاز به به روز رسانی های مکرر رابط کاربری بر اساس تغییرات در مدل داده دارد، MVVM می تواند انتخاب مناسبی باشد. مدل MVVM همگام سازی یکپارچه بین View و ViewModel را تسهیل می کند و مدیریت به روز رسانی داده ها و حفظ یک رابط کاربری سازگار را آسان تر خواهد کرد.

3- تست پذیری

MVVM با جداسازی منطق تجاری (ViewModel) از رابط کاربری (View) قابلیت تست را ارتقا می دهد. این جداسازی امکان تست واحد ViewModel را مستقل از رابط کاربری فراهم می ‌کند و آزمایش کامل عملکرد اصلی برنامه را ممکن می‌ سازد.

4- همکاری

هنگامی که چندین تیم در فرآیند توسعه شرکت دارند، مدل MVVM می تواند همکاری را تسهیل کند. طراحان می‌ توانند روی ایجاد UI (View) تمرکز کنند، در حالی که توسعه‌دهندگان روی پیاده‌سازی ViewModel و Model کار می‌ کنند که این ویژگی امکان توسعه موازی و تخصص در زمینه‌ های مختلف را فراهم می‌ کند.

5- قابلیت استفاده مجدد کد

الگوی MVVM کدهای قابل استفاده مجدد را با جداسازی نگرانی ها و ارائه یک ساختار واضح تشویق می کند. ViewModel و Model را می توان در نماهای مختلف یا حتی برنامه های مختلف مورد استفاده مجدد قرار داد که این ویژگی قابلیت نگهداری کد را افزایش داده و تلاش توسعه را کاهش می دهد.

6- پشتیبانی از فریم ورک

MVVM به طور گسترده توسط فریمورک ها و فناوری هایی مانند Windows Presentation Foundation (WPF)، Silverlight و Xamarin پشتیبانی می شود. اگر از این فریمورک ها استفاده می ‌کنید، MVVM می‌تواند یک تناسب طبیعی ارائه دهد و از قابلیت ‌های داخلی آن‌ها استفاده کند.

مهم است که الزامات خاص، پیچیدگی و پویایی تیم پروژه خود را در نظر بگیرید تا مشخص کنید آیا MVVM معماری مناسبی برای استفاده است یا خیر. مدل MVVM می ‌تواند مزایایی مانند ماژولار بودن، آزمایش‌پذیری و قابلیت نگهداری را به همراه داشته باشد، اما ممکن است پیچیدگی بیشتری را در برنامه ‌های کاربردی ساده‌تر ایجاد کند.

سخن پایانی

الگوی معماری MVVM (Model-View-ViewModel) روشی موثر برای طراحی و توسعه رابط های کاربری برای برنامه های دسکتاپ و موبایل است. با تفکیک منطق و ارائه یک برنامه کاربردی با اجزای مجزا، مدل MVVM توسعه، تست و نگهداری کد را آسان‌تر می ‌کند. علاوه بر این، قابلیت های اتصال داده ارائه شده توسط XAML و رابط INotifyPropertyChanged ایجاد رابط های کاربری پاسخگو و پویا را آسان تر خواهد کرد. به طور کلی، مدل MVVM نوعی الگوی معماری قدرتمند است که می ‌تواند به توسعه‌ دهندگان کمک کند تا رابط‌ های کاربری قوی، مقیاس‌ پذیر و قابل نگهداری را برای طیف گسترده‌ ای از برنامه ‌ها ایجاد کنند.