KEMBAR78
Using mvvm inside mvc in domain driven design | PPTX
Using MVVM inside MVC
Yashar-Aliabbasi
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)
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)
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)
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
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
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
• 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
• 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
Further topics
› ViewModelLocator
› UI/UX & VM
› Data Binding Using Client Side Libraries (Like Angular and Vue.js)
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
THANK YOU
› Any question?

Using mvvm inside mvc in domain driven design

  • 1.
    Using MVVM insideMVC 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 isController? › 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 weknow 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 Codein 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.
  • 12.