Combining MVVM and MVC for reaching to best practice is this article's purpose. MVVM was desktop application's pattern for coupling UI from Business and MVC is nowadays trend in web applications.

1. Using MVVM inside MVC
Yashar-Aliabbasi

2. What is MVC?
› Is an architectural pattern commonly used for developing user interfaces that
divides an application into three interconnected parts. This is done to separate
internal representations of information from the ways information is presented to
and accepted from the user. The MVC design pattern decouples these major
components allowing for efficient code reuse and parallel development. (1)

3. What is MVVM?
› MVVM facilitates a separation of development of the graphical user interface –
be it via a markup language or GUI code – from development of the business
logic or back-end logic (the data model).(2)

4. What is MVVM? - Continue
› MVVM is written for Desktop application with Data Binding capabilities
– XAML And The INotifyPropertyChanged interface
› But today web applications with power of JavaScript’s powerful libraries like
Angular and Vue.js, can bind data back in server with controls in front of user.
(3)

5. MVVM inside MVC
› If we suppose Model And View are for MVC and ViewModel is for MVVM then we
can combine MVVM and MVC together successfully
Borrowed From MVVMBorrowed From MVC

6. So where is Controller?
› For making sending and receiving data from/to View we need Controller come to
stage.
View
Controlle
r
VM
Model
Business

7. So…What?
› As we know front-end is where our customer encounter our system (Soft Part Of App)
› On other hand back-end is where business happens and so many changes occurs there (Hard Part Of App)
› For transforming Hard part to Soft part we need some intermediate means
› ViewModel(VM) is what can transform this data

8. • Transferring Dates
• 2017/12/02 → Last year
• null → No date available
• Hiding View Concerns from Model Concerns and vice versa
• View Concerns samples → UX/UI and Data Type Handling And Viewing
• Model Concerns → Validations, Relations
• Model Representation
• Often is different than you work back in your logic → list of grades must shown as one average
• View’s Data
• Often passing by extra data that is needed in Controller → request data, state data, session data and so on
• Sometime we need combine more than one Model to show result to user

9. • Minimize Code in View
• Having less code in Views is always better!
• Encapsulate logic interaction from View
• Decoupling Domain from MVC
• Converting to/from Business Entities happen inside VM
• Creating View platform independent

10. Further topics
› ViewModelLocator
› UI/UX & VM
› Data Binding Using Client Side Libraries (Like Angular and Vue.js)

11. References:
1. https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
2. https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
3. https://www.tutorialspoint.com/mvvm/mvvm_introduction.htm

12. THANK YOU
› Any question?