الگوی Model-View-ViewModel (MVVM)

الگوی MVVM چیست؟

یک الگوی طراحی نرم‌افزار است که برای جداسازی منطق برنامه و کنترل‌های رابط کاربری گرافیکی با استفاده از یک زبان نشانه‌گذاری یا کد GUI و حذف همه کدهای GUI از لایه view ساخته شده است و به هیچ پلتفرم خاصی وابسته نیست. MVVM همچنین به عنوان model-view-binder شناخته می‌شود که توسط معماران مایکروسافت به نام‌های کن کوپر و جان گاسمن برای ساده‌سازی برنامه‌نویسی رویداد محور رابط‌های کاربری ساخته شده است. این الگو به سازماندهی کد و تبدیل برنامه به ماژول‌ها برای توسعه، بروزرسانی، استفاده مجدد از کد به صورت ساده‌تر و سریع‌تر کمک می‌کند. جداسازی قوانین سبب می‌شود تا طراحان تعاملی بتوانند بر روی نیازهای UX به جای منطق کسب و کار برنامه‌نویسی تمرکز کنند. لایه‌های برنامه می‌توانند در چندین جریان کاری برای بهره‌وری بالاتر توسعه داد. زمانی که یک توسعه‌دهنده روی کل کد پایه کار می‌کند، جداسازی مناسب view از مدل موثرتر است. زیرا رابط کاربری در اواخر چرخه توسعه براساس بازخورد کاربر نهایی چندین دفعه تغییر می‌کنند.

این الگو اغلب در ویندوز و نرم‌افزار نمایش گرفیکی وب مورد استفاده قرار می‌گیرد. این الگو یک تبدیل کننده مقدار است یعنی view model مسئول نمایش یا تبدیل اشیای داده مدل است، به گونه‌ای که اشیا به راحتی مدیریت و ارائه شوند. بنابراین view model نمونه‌تر از view است. در غیر این صورت همه منطق نمایش view را بیشتر کنترل می‌کند. view model ممکن است یک الگوی میانجی را پیاده‌سازی کند و دسترسی به منطق back-end در اطراف مجموعه‌ای از use caseها را توسط view پشتیبانی می‌کند. از توابع اتصال داده در WPF (پایه ارائه ویندوز) برای تسهیل بهتر جداسازی توسعه لایه view از سایر الگوها استفاده می‌کند. توسعه‌دهندگان تجربه کاربری (UX) به جای نوشتن کد GUI می‌توانند از زبان نشانه‌گذاری framework مثل XAML استفاده کنند و پیوندهای داده‌ای را برای view model ایجاد می‌کنند که توسط توسعه‌دهندگان نرم‌افزار نوشته نگهداری می‌شوند. الگوی MVVM تلاش می‌کند تا هر دو مزیت جداسازی توسعه عملکردی را توسط MVC فراهم می‌کند، در حالی که از مزایای پیوندهای داده و چارچوب توسط اتصال داده و تا حد امکان نزدیک به مدل برنامه خالص استفاده می‌کند. این الگو از binder، view model و بررسی ویژگی داده هر لایه کسب و کار برای اعتبارسنجی داده ورودی استفاده می‌کند. در نتیجه مدل و framework تا حد امکان عملیات را هدایت می‌کند و منطق برنامه را که مستقیما view را تغییر می‌دهد، حذف می‌کند یا به حداقل می‌رساند.

هدف الگوی MVVM

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

اجزای الگوی MVVM

جداسازی کد و اجزای الگوی MVVM به سه لایه View، ViewModel و Model و بخش binder تقسیم می‌شود که در ادامه معرفی می‌گردند.

لایه View یا View Controller: مجموعه‌ای از عناصر قابل مشاهده است که ورودی را از کاربر دریافت می‌کند. شامل رابط کاربری، انیمیشن‌ها و متن است. محتوای View به طور مستقیم با تغییراتی که ارائه می‌شوند در تعامل نیست. تمام مؤلفه‌های UI روی نمایشگر یک برنامه مشاهده می‌شوند. View یک ساختار، طرح‌بندی یا هر چیزی است که کاربر در صفحه نمایش مشاهده می‌کند. نمایش از مدل را نمایش می‌دهد و تعامل کاربر با view مانند کلیک‌های ماوس، ورودی کیبرد، ضربه و حرکت روی صفحه نمایش و ... را دریافت می‌کند و آن‌ها را برای view model را از طریق اتصال داده مانند ویژگی‌ها، تماس‌های رویداد و ... مدیریت می‌کند که سبب پیوند view و view model می‌شود. view شامل فقط منطق UI مانند ارائه داده، راهبری و ... است. view مالک view model است.

لایه View Model: بین دو لایه View و Model قرار گرفته است که در آن جا کنترل‌ها برای تعامل با View قرار دارند. از binding برای اتصال عناصر رابط کاربری در View با کنترل‌های در ViewModel استفاده می‌شود. انتزاعی از view است که ویژگی‌های عمومی و دستورات را نمایش می‌دهد. رویدادهای UI را دریافت می‌کند و منطق‌های کسب و کار را انجام می‌دهد و خروجی را برای نمایش در UI ارائه می‌دهد. مسئول مدیریت منطق کسب و کار در view است. به صورت داخلی UI‌را تغییر نمی‌دهد و به view ارجاع ندارد و خودش مدل داده دارد. به جای کنترل‌کننده در الگوی MVC یا ارائه‌دهنده الگوی MVP، در واقع الگوی MVVM یک binder دارد که به صورت خودکار بین view و ویژگی‌های محدود در view model ارتباط برقرار می‌کند. این لایه به عنوان وضعیتی از داده‌ در مدل توصیف شده است. اختلاف بین view model و Presenter در الگوی MVP این هست که Presenter به یک view ارجاع دارد در حالی که در view model این گونه نیست. یک view به طور مستقیم به ویژگی‌های view model متصل می‌شود تا بروزرسانی‌ها را ارسال و دریافت کند.

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

بخش binder: توصیف داده و فرمان اتصال در الگوی MVVM به صورت ضمنی هستند. در پشته راه‌حل مایکروسافت binder یک زبان نشانه‌گذاری به نام XAML است. binder توسعه‌دهنده را موظف به نوشتن منطق boiler-plate برای همگام‌سازی view model و view می‌کند. زمانی که در خارج از پشته مایکروسافت پیاده‌سازی می‌شود، وجود یک فناوری اتصال داده تعریف شده، چیزی است که این الگو را ممکن می‌سازد و در صورت نبودن یک binder، می‌توان به جای آن از MVC یا MVP استفاده کرد که باید boilerplate بیشتری را بنویسد یا آن را با ابزار دیگری تولید کند.

ویژگی‌های الگوی MVVM

• برای برنامه‌های دسکتاپ با قابلیت اتصال داده نوشته می‌شود.
• برای ایجاد تغییرات در view model، view model از یک الگوی مشاهده‌گر استفاده می‌کند.
• الگوی MVVM بیشتر توسط WPF، Silverlight، nRoute و ... استفاده می‌شود.

دلایل متمایز شدن الگوی MVVM

جداسازی کد: کد را جداسازی می‌کند. الگوی MVVM مبتنی بر مؤلفه است و یک مدیریت view خاص توزیع شده در میان View، Model و View Model را تقسیم می‌کند. در نتیجه یک ساختار کد ماژولار شده را فراهم می‌کند.

اجتناب از کنترل‌ کننده‌های بزرگ: توسعه‌دهندگانی که از MVC استفاده می‌کنند می دانند که وقتی برنامه مقیاس‌پذیر می‌شود و نیازمندی‌ها با منطق موجود به هم می‌خورند، کنترل‌کننده‌ها گسترش می‌یابند تا زمانی که کد کنترل‌کننده برای فایل‌های مجزا هدایت شود. با استفاده از الگوی MVVM منطق کسب و کار در View Model نوشته می‌شود و خروجی فقط به view یا کنترل‌ کننده منتقل می‌شود.

توسعه تست محور: MVVM یک پلتفرم خوب برای انجام TDD فراهم می‌کند. موارد آزمون برای View Modelها نوشته می‌شود و منطق کسب و کار برای هدایت UI تست می‌شود. موارد آزمون در زمان توسعه بسیار مهم هستند زیرا شانس شکستن کد را تا حد زیادی به حداقل می‌رسانند.

تفاوت بین MVC و MVVM

• در MVC کنترل‌کننده نقطه ورود به برنامه هست در حالی که در MVVM لایه view نقطه ورودی به برنامه است.
• در MVC تعداد زیادی ارتباط بین کنترل‌کننده و view وجود دارد در حالی که در MVVM یک یا چند رابطه بین View و View Model وجود دارد.
• الگوی MVC به کنترل‌کننده ارجاع ندارد در حالی که در MVVM لایه View به View Model ارجاع دارد.
• الگوی MVC یک مدل قدیمی است در حالی که الگوی MVVM یک الگوی نسبتا جدید است.
• در MVC خواندن، تغییر، تست واحد و استفاده مجدد از این مدل دشوار است در حالی که در MVVM زمانی پیچیده می‌شود که پیوندهای داده پیچیده باشند.
• مؤلفه‌های مدل MVC را می‌توان به صورت مجزا از کاربر تست کرد در حالی که در مدل MVVM جداسازی تست واحد از کد رویداد محور آسان است.

مزایای الگوی MVVM

جداسازی View و Model: مزیت اصلی این هست که امکان جداسازی درست بین View و Model و کارایی حاصل از آن را فراهم می‌کند. وقتی مدل نیاز به تغییر دارد، می‌توان به ‌آسانی بدون نیاز به view آن را تغییر داد و برعکس. view model داده لایه مدل را به چیزی که لایه view می‌تواند استفاده کند، تبدیل می‌کند که کنترل‌کننده دیگر مسئولیت این وظیفه را به عهده ندارد.

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

قابلیت تست‌پذیری: کنترل‌کننده‌های view برای تست دشوار و طاقت‌فرسا هستند زیرا با لایه view ارتباط دارند. با انتقال تغییرات داده به مدل view تست آسان‌تر می‌گردد. تست مدل‌های view آسان است زیرا مدل view به شی متعلق به آن ارجاع ندارد و نوشتن تست‌های واحد برای مدل view آسان است. با الگوی MVVM هر قطعه از کد دانه‌بندی‌تر می‌شود و اگر به درستی پیاده‌سازی شود، وابستگی‌های داخلی و خارجی در قطعات مجزای کد از قسمت‌هایی با منطق اصلی که مورد تست هستند، قرار می‌گیرند که سبب می‌شود نوشتن تست‌های واحد در مقابل منطق اصلی را آسان‌تر شود. همچنین MVVM اتصال بین منطق برنامه و UI را می‌شکند و در دسترس‌ پذیری تست را آسان می سازد. View Model تست واحد پشت کد یا کد رویداد محور را تسهیل می‌کند. می‌توان بدون نیاز به خودکارسازی و تعامل UI این الگو را تست کرد. همچنین لایه presentation و منطق به سستی به هم متصل شدند.

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

کار مشارکتی: با جداسازی بخش بصری برنامه یعنی UI از کد مربوطه امکان کار هم‌زمان در هر ناحیه در موارد مرتبط برای متخصصان را فراهم می‌کند. طراحان می‌توانند روی UI به طور هم‌زمان با توسعه‌دهندگان در حال کار روی کد کار کنند. بدون آن که نیاز باشد که هر دو روی فایل یکسانی به طور هم‌زمان کار کنند.

ارتباطات شفاف: مسئولیت‌های کنترل‌کننده view کنترل تعامل بین لایه view و لایه مدل و چسباندن هر دو لایه به هم را کاهش می‌دهد. view model یک رابط شفاف برای کنترل‌کننده view فراهم می‌کند که از آن برای پر کردن لایه view و تعامل با لایه model استفاده می‌کند که منجر به ارتباطی روشن بین چهار لایه از برنامه می‌گردد.

اتصال سست معماری: MWM در معماری برنامه، اتصال و چسبندگی کاهش می‌دهد.

کاهش حجم کنترل‌کننده‌ها : الگوی طراحی سنتی MVC برای اپل کنترل‌کننده‌ها را بزرگ می‌سازد و الگو MVVM سبب حل این مشکل می‌گردد.

معایب الگوی MVVM

• برای UIهای ساده الگوی MVVM بیش از حد هست و مناسب نیست.
• کلاس‌ها را افزایش می‌دهد.
• در برخی از موارد بزرگتر برای طراحی View Model استفاده از این الگو سخت است.
• زمانی که پیوندهای داده پیچیده باشند،‌ اشکال‌زدایی کمی دشوار است.
• لایه View Model به مرور زمان بزرگتر می‌شود و پیچیدگی‌های فراخوانی را افزایش می‌دهد.
• از تعدادی زیادی کد در کنترل‌کننده نگهداری می‌کند.
• اتصال و چسبندگی محکمی بین view model و view ارائه نمی‌دهد.
• اگر برنامه به تعداد زیادی تغییر در view و model نیاز داشته باشد، MVVM به خوبی کار می‌کند. با این حال هر شی به طور منظم در دسته‌های view، view model و model قرار نمی‌گیرد. بنابراین باید از MVVM در ترکیب با سایر الگوهای طراحی استفاده کرد.
• ممکن است زمانی که برای اولین بار MVVM در برنامه ایجاد می‌شود، چندان مفید نباشد و ممکن است الگوی MVC نقطه شروع بهتری باشد. همان طور که نیازمندی‌های برنامه تغییر می‌کند بنابراین باید از الگوهای طراحی متفاوتی و متناسب با نیازمندی‌های جدید و تغییریافته استفاده کرد.

«این مطلب، بخشی از تمرینهای درس معماری نرم‌افزار در دانشگاه شهیدبهشتی است»

منابع و مراجع: