SlideShare a Scribd company logo
What? and Why ?
Agenda 
 
 Intro : Traditional UI development. 
MVVM in Deep : 
 What is MVVM? 
 Model / View Model /View. 
 Classes interaction . 
MVVM and other patterns. 
MVVM Advantages /Disadvantages. 
MVVM in Android. 
 Conclusion & Recommendations.
Traditional UI Development 
 
Simple , no problem
Traditional UI Development 
 
More work , more problems
Traditional UI Development 
 
Model View 
UI 
Layout 
Code 
behind 
Domain 
objects 
Update and get data
Traditional UI Development 
 
 Constraints: 
 Difficult to Test 
 Encourages using UI as data storage 
 Complex classes and a huge mount of code. 
 No code sharing . 
 very strong dependency between UI & logic. 
 What if you need to redesign UI?
What ? And How?
What is MVVM? 
 
 The Model View ViewModel. 
 Introduced by Microsoft in 2006. 
 Not a design pattern it is an 
architectural pattern. 
 It is a specialization of the 
presentation model pattern.
MVVM In Deep 
 
 Components to be swapped 
 Internal implementation to 
be changed without 
affecting the others 
 Components to be worked 
on independently 
 Isolated unit testing
MVVM In Deep 

Model 
 
 Non-visual classes that encapsulate the 
application's data and business logic. 
 Can’t See View Model or View. 
 Should not contain any use case–specific or user 
task–specific behavior or application logic. 
 Notifies other components of any state changes. 
 May provide data validation and error reporting
View Model 
 
 Non-visual class encapsulates the 
presentation logic required. 
 Can’t See View (no direct Reference). 
 Coordinates the view's interaction 
with the model. 
 May provide data validation and 
error reporting. 
 Notifies the view of any state changes.
View 
 
 Visual element defines the controls 
and their visual layout and styling. 
 Can see all others components. 
 Defines and handles UI visual 
behavior, such as animations or 
transitions. 
 Code behind may contain code that 
requires direct references to the 
specific UI controls.
Classes Interaction 
 
Interaction Ways 
Data Binding Commands Notifications
What about MVP & MVC ?
MVP vs. MVC vs. MVVM 

MVP vs. MVC vs. MVVM 
 
MVP (Presenter) MVC (Controller) MVVM (View Model) 
view communicates with the 
view sends input events to 
View binds directly to the 
presenter by directly calling 
the controller via a callback 
View Model. 
functions on an instance of 
or registered handler 
the presenter. 
The presenter communicates 
with the view by talking to 
an interface implemented by 
the view 
View receives updates 
directly from the model 
without having to go 
through the controller 
changes in view are 
automatically reflected in 
View Model and changes 
and Vice versa. 
Use where binding via a data 
context is not possible 
Use where the connection 
between view and the rest 
of the program is not 
always available 
Use where binding via a 
data context is possible
Why ? And Why not?
MVVM Advantages 
 
 Separation of concerns. 
 Can use unit tests. 
 Designers and developers can work 
synchronously. 
 Easy to redesign the UI . 
 Can share code easily.
MVVM Disadvantages 
 
 Harder to debug. 
 May affect performance. 
 More files to serve the architecture.
MVVM in Android 
 
MVVMCross for Xamarin.Android. 
 Dot42 Framework. (C# for android). 
 Android-binding. 
 Robo Binding
Conclusion & 
Recommendations 
 
MVVM is a suitable architectural pattern for 
business apps. 
 Use MVVM only when you need it. 
 Using MVVM is highly recommended in Cross- 
Platform development. 
MVVM is a tool not a purpose.
References 
 
 http://www.codeproject.com/Articles/100175/Model-View-ViewModel-MVVM-Explained 
 http://blogs.adobe.com/paulw/archives/2007/10/presentation_pa_3.html 
 http://en.wikipedia.org/wiki/Model_View_ViewModel 
 http://aspnet.blogershub.com/Archive/2013/12/what-is-difference-Application-Architecture-and- 
Design-Patterns 
 http://msdn.microsoft.com/en-us/library/hh848246.aspx 
 http://msdn.microsoft.com/en-us/library/ms752347(v=vs.110).aspx 
 http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh758320.aspx 
 http://msdn.microsoft.com/en-us/library/gg405484(v=pandp.40).aspx 
 http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/
Design Patterns VS. 
Architectural Patterns 
 
Design Patterns 
 Guidelines to avoid/solve 
common problems in 
application development. 
 Tell us how we can 
achieve a solution in 
terms of implementation. 
 Implementation Level. 
Architectural Patterns 
 Guidelines to construct 
the structure and 
behavior of applications. 
 Tell us how to arrange the 
interaction between 
application packages, 
databases, and 
middleware systems . 
 Abstract Level.
Presentation Model Pattern 
 
 Introduce by Martin Fowler in 2004. 
 An abstract of the view that is not dependent on a specific 
GUI framework. 
 State is in the presentation model. 
 Logic is in the presentation model. 
 View observes the model and updates accordingly. 
 The view “knows” about the presentation model. 
 The presentation model does not “know” about the view. 
 presentation model Also Known as application model, 
view state or logical View.
Data Binding (State) 
 
 Process that establishes a connection between the 
application UI and application logic. 
When the data changes its value, the elements that 
are bound to the data reflect changes automatically.
Data Binding (State) 
 
 Direction of the data flow: 
 One Time bindings update the target with the source 
data when the binding is created. 
 One Way bindings update the target with the source 
data when the binding is created, and any time the 
data changes. This is the default mode. 
 Two Way bindings update both the target and the 
source when either changes.
Commands (Behavior) 
 
 Provide a way to represent actions or operations that 
can be easily bound to controls in the UI. 
 Encapsulate the actual code that implements the 
action or operation . 
 Examples : Button Click , List selection changed.
Notifications 
 
 Implementing INotifyPropertyChanged and 
INotifyCollectionChanged interface. 
 OnPropertyChanged method is required to notify 
binding target properties with change in source. 
 Observable Collection needed for binding lists source.
Ad

Recommended

Design Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVM
Mudasir Qazi
 
What is Flutter
What is Flutter
Malan Amarasinghe
 
Oops ppt
Oops ppt
abhayjuneja
 
Object-oriented Programming-with C#
Object-oriented Programming-with C#
Doncho Minkov
 
Đề tài: Nghiên cứu thuật toán K-nearest neighbor, HAY, 9đ
Đề tài: Nghiên cứu thuật toán K-nearest neighbor, HAY, 9đ
Dịch vụ viết bài trọn gói ZALO 0917193864
 
Đề cương xử lý ảnh
Đề cương xử lý ảnh
Đỗ Đức Hùng
 
How To Be A Good Manager
How To Be A Good Manager
aumashankar
 
Library Management System
Library Management System
Anit Thapaliya
 
Mvvm basics
Mvvm basics
anusha kadimi
 
Android MVVM
Android MVVM
David Estivariz Pierola
 
Training: MVVM Pattern
Training: MVVM Pattern
Betclic Everest Group Tech Team
 
MVVM
MVVM
Victor-Andrei Filimon
 
MVVM - Model View ViewModel
MVVM - Model View ViewModel
Dareen Alhiyari
 
MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)
Yaroslav Voloshyn
 
Model View Presenter
Model View Presenter
rendra toro
 
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Edureka!
 
ASP.NET MVC Presentation
ASP.NET MVC Presentation
ivpol
 
MVVM presentation
MVVM presentation
Inova LLC
 
Ionic Framework
Ionic Framework
Thinh VoXuan
 
MVVM in iOS presentation
MVVM in iOS presentation
G ABHISEK
 
Introduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?
Sura Gonzalez
 
Jenkins-CI
Jenkins-CI
Gong Haibing
 
VueJS Introduction
VueJS Introduction
David Ličen
 
Spring Framework - Core
Spring Framework - Core
Dzmitry Naskou
 
ASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with Overview
Shahed Chowdhuri
 
Maven Introduction
Maven Introduction
Sandeep Chawla
 
SELENIUM PPT.pdf
SELENIUM PPT.pdf
RebelSnowball
 
Pattern MVVM avec MVVM Light Toolkit
Pattern MVVM avec MVVM Light Toolkit
Jean-Baptiste Vigneron
 
MVVM with WPF
MVVM with WPF
S V
 

More Related Content

What's hot (20)

Mvvm basics
Mvvm basics
anusha kadimi
 
Android MVVM
Android MVVM
David Estivariz Pierola
 
Training: MVVM Pattern
Training: MVVM Pattern
Betclic Everest Group Tech Team
 
MVVM
MVVM
Victor-Andrei Filimon
 
MVVM - Model View ViewModel
MVVM - Model View ViewModel
Dareen Alhiyari
 
MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)
Yaroslav Voloshyn
 
Model View Presenter
Model View Presenter
rendra toro
 
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Edureka!
 
ASP.NET MVC Presentation
ASP.NET MVC Presentation
ivpol
 
MVVM presentation
MVVM presentation
Inova LLC
 
Ionic Framework
Ionic Framework
Thinh VoXuan
 
MVVM in iOS presentation
MVVM in iOS presentation
G ABHISEK
 
Introduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?
Sura Gonzalez
 
Jenkins-CI
Jenkins-CI
Gong Haibing
 
VueJS Introduction
VueJS Introduction
David Ličen
 
Spring Framework - Core
Spring Framework - Core
Dzmitry Naskou
 
ASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with Overview
Shahed Chowdhuri
 
Maven Introduction
Maven Introduction
Sandeep Chawla
 
SELENIUM PPT.pdf
SELENIUM PPT.pdf
RebelSnowball
 
MVVM - Model View ViewModel
MVVM - Model View ViewModel
Dareen Alhiyari
 
MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)
Yaroslav Voloshyn
 
Model View Presenter
Model View Presenter
rendra toro
 
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Edureka!
 
ASP.NET MVC Presentation
ASP.NET MVC Presentation
ivpol
 
MVVM presentation
MVVM presentation
Inova LLC
 
MVVM in iOS presentation
MVVM in iOS presentation
G ABHISEK
 
Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?
Sura Gonzalez
 
VueJS Introduction
VueJS Introduction
David Ličen
 
Spring Framework - Core
Spring Framework - Core
Dzmitry Naskou
 
ASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with Overview
Shahed Chowdhuri
 

Viewers also liked (20)

Pattern MVVM avec MVVM Light Toolkit
Pattern MVVM avec MVVM Light Toolkit
Jean-Baptiste Vigneron
 
MVVM with WPF
MVVM with WPF
S V
 
WPF MVVM
WPF MVVM
Slimen Belhaj Ali
 
Windows 8 store apps development
Windows 8 store apps development
Ahmed Emad
 
Exploring MVVM, MVC, MVP Patterns - CRB Tech
Exploring MVVM, MVC, MVP Patterns - CRB Tech
Pooja Gaikwad
 
Models used in iOS programming, with a focus on MVVM
Models used in iOS programming, with a focus on MVVM
Andrei Popa
 
Caliburn.Micro
Caliburn.Micro
bryanhunter
 
Mvc, mvp, mvvm...
Mvc, mvp, mvvm...
Yury Kisliak
 
MVVM de A à Z
MVVM de A à Z
Microsoft
 
Présentation WPF
Présentation WPF
Cynapsys It Hotspot
 
MVVM par Karim PIerre Maalej
MVVM par Karim PIerre Maalej
CocoaHeads France
 
Varjú Zoltán - Túlélőkészlet adatáradat esetére
Varjú Zoltán - Túlélőkészlet adatáradat esetére
Ágnes W. Kovács
 
MVVM Light for UWP
MVVM Light for UWP
Robert Iagar
 
Data binding
Data binding
Yonatan Levin
 
MVC, MVP e MVVM: Uma Comparação de Padrões Arquiteturais
MVC, MVP e MVVM: Uma Comparação de Padrões Arquiteturais
Jorge Tressino Rua
 
MVVM Light Toolkit Works Great, Less Complicated
MVVM Light Toolkit Works Great, Less Complicated
mdc11
 
MVVM Lights
MVVM Lights
Denis Voituron
 
Dominando o Data Binding no Android
Dominando o Data Binding no Android
Nelson Glauber Leal
 
Android Databinding Library
Android Databinding Library
Takuji Nishibayashi
 
Testable Android Apps using data binding and MVVM
Testable Android Apps using data binding and MVVM
Fabio Collini
 
MVVM with WPF
MVVM with WPF
S V
 
Windows 8 store apps development
Windows 8 store apps development
Ahmed Emad
 
Exploring MVVM, MVC, MVP Patterns - CRB Tech
Exploring MVVM, MVC, MVP Patterns - CRB Tech
Pooja Gaikwad
 
Models used in iOS programming, with a focus on MVVM
Models used in iOS programming, with a focus on MVVM
Andrei Popa
 
MVVM de A à Z
MVVM de A à Z
Microsoft
 
MVVM par Karim PIerre Maalej
MVVM par Karim PIerre Maalej
CocoaHeads France
 
Varjú Zoltán - Túlélőkészlet adatáradat esetére
Varjú Zoltán - Túlélőkészlet adatáradat esetére
Ágnes W. Kovács
 
MVVM Light for UWP
MVVM Light for UWP
Robert Iagar
 
MVC, MVP e MVVM: Uma Comparação de Padrões Arquiteturais
MVC, MVP e MVVM: Uma Comparação de Padrões Arquiteturais
Jorge Tressino Rua
 
MVVM Light Toolkit Works Great, Less Complicated
MVVM Light Toolkit Works Great, Less Complicated
mdc11
 
Dominando o Data Binding no Android
Dominando o Data Binding no Android
Nelson Glauber Leal
 
Testable Android Apps using data binding and MVVM
Testable Android Apps using data binding and MVVM
Fabio Collini
 
Ad

Similar to MVVM ( Model View ViewModel ) (20)

Adopting MVVM
Adopting MVVM
John Cumming
 
Mvc vs mvp vs mvvm a guide on architecture presentation patterns
Mvc vs mvp vs mvvm a guide on architecture presentation patterns
Concetto Labs
 
Mvvm
Mvvm
Rajeev Ranjan Singh
 
What's new in Silverlight 5
What's new in Silverlight 5
LearnNowOnline
 
Android DesignArchitectures.pptx
Android DesignArchitectures.pptx
SafnaSaff1
 
Using mvvm inside mvc in domain driven design
Using mvvm inside mvc in domain driven design
yashar Aliabasi
 
Introduction To MVVM
Introduction To MVVM
Boulos Dib
 
How I Accidentally Discovered MVVM
How I Accidentally Discovered MVVM
Bradford Dillon
 
Mvvm in the real world tccc10
Mvvm in the real world tccc10
Bryan Anderson
 
MvvmCross
MvvmCross
ross.dargan
 
MvvmCross Seminar
MvvmCross Seminar
Xamarin
 
MvvmCross Introduction
MvvmCross Introduction
Stuart Lodge
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelines
Qamar Abbas
 
MVP vs MVVM : a fast introduction
MVP vs MVVM : a fast introduction
Matteo Pierro
 
Advanced MVVM in Windows 8
Advanced MVVM in Windows 8
Gill Cleeren
 
Portable Class Libraries and MVVM
Portable Class Libraries and MVVM
Andreas Kuntner
 
MVVM Presentation.pptx
MVVM Presentation.pptx
AsfandyarZaidi
 
MVVM.pptx
MVVM.pptx
fhaye214
 
Mvc, mvp & mvvm (erp)
Mvc, mvp & mvvm (erp)
Ayesha Maqsood
 
UI Design Patterns
UI Design Patterns
aamiralihussain
 
Mvc vs mvp vs mvvm a guide on architecture presentation patterns
Mvc vs mvp vs mvvm a guide on architecture presentation patterns
Concetto Labs
 
What's new in Silverlight 5
What's new in Silverlight 5
LearnNowOnline
 
Android DesignArchitectures.pptx
Android DesignArchitectures.pptx
SafnaSaff1
 
Using mvvm inside mvc in domain driven design
Using mvvm inside mvc in domain driven design
yashar Aliabasi
 
Introduction To MVVM
Introduction To MVVM
Boulos Dib
 
How I Accidentally Discovered MVVM
How I Accidentally Discovered MVVM
Bradford Dillon
 
Mvvm in the real world tccc10
Mvvm in the real world tccc10
Bryan Anderson
 
MvvmCross Seminar
MvvmCross Seminar
Xamarin
 
MvvmCross Introduction
MvvmCross Introduction
Stuart Lodge
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelines
Qamar Abbas
 
MVP vs MVVM : a fast introduction
MVP vs MVVM : a fast introduction
Matteo Pierro
 
Advanced MVVM in Windows 8
Advanced MVVM in Windows 8
Gill Cleeren
 
Portable Class Libraries and MVVM
Portable Class Libraries and MVVM
Andreas Kuntner
 
MVVM Presentation.pptx
MVVM Presentation.pptx
AsfandyarZaidi
 
Ad

Recently uploaded (20)

OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
Shane Coughlan
 
Heat Treatment Process Automation in India
Heat Treatment Process Automation in India
Reckers Mechatronics
 
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
mary rojas
 
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
BradBedford3
 
Best Practice for LLM Serving in the Cloud
Best Practice for LLM Serving in the Cloud
Alluxio, Inc.
 
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
pcprocore
 
Zoho Creator Solution for EI by Elsner Technologies.docx
Zoho Creator Solution for EI by Elsner Technologies.docx
Elsner Technologies Pvt. Ltd.
 
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
 
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
IFI Techsolutions
 
Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
 
How Automation in Claims Handling Streamlined Operations
How Automation in Claims Handling Streamlined Operations
Insurance Tech Services
 
Simplify Task, Team, and Project Management with Orangescrum Work
Simplify Task, Team, and Project Management with Orangescrum Work
Orangescrum
 
Complete WordPress Programming Guidance Book
Complete WordPress Programming Guidance Book
Shabista Imam
 
Why Edge Computing Matters in Mobile Application Tech.pdf
Why Edge Computing Matters in Mobile Application Tech.pdf
IMG Global Infotech
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 
Key Challenges in Troubleshooting Customer On-Premise Applications
Key Challenges in Troubleshooting Customer On-Premise Applications
Tier1 app
 
Which Hiring Management Tools Offer the Best ROI?
Which Hiring Management Tools Offer the Best ROI?
HireME
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factory
Maxim Salnikov
 
NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSION
NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSION
grete1122g
 
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
Shane Coughlan
 
Heat Treatment Process Automation in India
Heat Treatment Process Automation in India
Reckers Mechatronics
 
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdf
mary rojas
 
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
BradBedford3
 
Best Practice for LLM Serving in the Cloud
Best Practice for LLM Serving in the Cloud
Alluxio, Inc.
 
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
pcprocore
 
Zoho Creator Solution for EI by Elsner Technologies.docx
Zoho Creator Solution for EI by Elsner Technologies.docx
Elsner Technologies Pvt. Ltd.
 
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
 
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
IFI Techsolutions
 
Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
 
How Automation in Claims Handling Streamlined Operations
How Automation in Claims Handling Streamlined Operations
Insurance Tech Services
 
Simplify Task, Team, and Project Management with Orangescrum Work
Simplify Task, Team, and Project Management with Orangescrum Work
Orangescrum
 
Complete WordPress Programming Guidance Book
Complete WordPress Programming Guidance Book
Shabista Imam
 
Why Edge Computing Matters in Mobile Application Tech.pdf
Why Edge Computing Matters in Mobile Application Tech.pdf
IMG Global Infotech
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 
Key Challenges in Troubleshooting Customer On-Premise Applications
Key Challenges in Troubleshooting Customer On-Premise Applications
Tier1 app
 
Which Hiring Management Tools Offer the Best ROI?
Which Hiring Management Tools Offer the Best ROI?
HireME
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factory
Maxim Salnikov
 
NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSION
NEW-IDM Crack with Internet Download Manager 6.42 Build 27 VERSION
grete1122g
 

MVVM ( Model View ViewModel )

  • 2. Agenda   Intro : Traditional UI development. MVVM in Deep :  What is MVVM?  Model / View Model /View.  Classes interaction . MVVM and other patterns. MVVM Advantages /Disadvantages. MVVM in Android.  Conclusion & Recommendations.
  • 3. Traditional UI Development  Simple , no problem
  • 4. Traditional UI Development  More work , more problems
  • 5. Traditional UI Development  Model View UI Layout Code behind Domain objects Update and get data
  • 6. Traditional UI Development   Constraints:  Difficult to Test  Encourages using UI as data storage  Complex classes and a huge mount of code.  No code sharing .  very strong dependency between UI & logic.  What if you need to redesign UI?
  • 7. What ? And How?
  • 8. What is MVVM?   The Model View ViewModel.  Introduced by Microsoft in 2006.  Not a design pattern it is an architectural pattern.  It is a specialization of the presentation model pattern.
  • 9. MVVM In Deep   Components to be swapped  Internal implementation to be changed without affecting the others  Components to be worked on independently  Isolated unit testing
  • 11. Model   Non-visual classes that encapsulate the application's data and business logic.  Can’t See View Model or View.  Should not contain any use case–specific or user task–specific behavior or application logic.  Notifies other components of any state changes.  May provide data validation and error reporting
  • 12. View Model   Non-visual class encapsulates the presentation logic required.  Can’t See View (no direct Reference).  Coordinates the view's interaction with the model.  May provide data validation and error reporting.  Notifies the view of any state changes.
  • 13. View   Visual element defines the controls and their visual layout and styling.  Can see all others components.  Defines and handles UI visual behavior, such as animations or transitions.  Code behind may contain code that requires direct references to the specific UI controls.
  • 14. Classes Interaction  Interaction Ways Data Binding Commands Notifications
  • 15. What about MVP & MVC ?
  • 16. MVP vs. MVC vs. MVVM 
  • 17. MVP vs. MVC vs. MVVM  MVP (Presenter) MVC (Controller) MVVM (View Model) view communicates with the view sends input events to View binds directly to the presenter by directly calling the controller via a callback View Model. functions on an instance of or registered handler the presenter. The presenter communicates with the view by talking to an interface implemented by the view View receives updates directly from the model without having to go through the controller changes in view are automatically reflected in View Model and changes and Vice versa. Use where binding via a data context is not possible Use where the connection between view and the rest of the program is not always available Use where binding via a data context is possible
  • 18. Why ? And Why not?
  • 19. MVVM Advantages   Separation of concerns.  Can use unit tests.  Designers and developers can work synchronously.  Easy to redesign the UI .  Can share code easily.
  • 20. MVVM Disadvantages   Harder to debug.  May affect performance.  More files to serve the architecture.
  • 21. MVVM in Android  MVVMCross for Xamarin.Android.  Dot42 Framework. (C# for android).  Android-binding.  Robo Binding
  • 22. Conclusion & Recommendations  MVVM is a suitable architectural pattern for business apps.  Use MVVM only when you need it.  Using MVVM is highly recommended in Cross- Platform development. MVVM is a tool not a purpose.
  • 23. References   http://www.codeproject.com/Articles/100175/Model-View-ViewModel-MVVM-Explained  http://blogs.adobe.com/paulw/archives/2007/10/presentation_pa_3.html  http://en.wikipedia.org/wiki/Model_View_ViewModel  http://aspnet.blogershub.com/Archive/2013/12/what-is-difference-Application-Architecture-and- Design-Patterns  http://msdn.microsoft.com/en-us/library/hh848246.aspx  http://msdn.microsoft.com/en-us/library/ms752347(v=vs.110).aspx  http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh758320.aspx  http://msdn.microsoft.com/en-us/library/gg405484(v=pandp.40).aspx  http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/
  • 24. Design Patterns VS. Architectural Patterns  Design Patterns  Guidelines to avoid/solve common problems in application development.  Tell us how we can achieve a solution in terms of implementation.  Implementation Level. Architectural Patterns  Guidelines to construct the structure and behavior of applications.  Tell us how to arrange the interaction between application packages, databases, and middleware systems .  Abstract Level.
  • 25. Presentation Model Pattern   Introduce by Martin Fowler in 2004.  An abstract of the view that is not dependent on a specific GUI framework.  State is in the presentation model.  Logic is in the presentation model.  View observes the model and updates accordingly.  The view “knows” about the presentation model.  The presentation model does not “know” about the view.  presentation model Also Known as application model, view state or logical View.
  • 26. Data Binding (State)   Process that establishes a connection between the application UI and application logic. When the data changes its value, the elements that are bound to the data reflect changes automatically.
  • 27. Data Binding (State)   Direction of the data flow:  One Time bindings update the target with the source data when the binding is created.  One Way bindings update the target with the source data when the binding is created, and any time the data changes. This is the default mode.  Two Way bindings update both the target and the source when either changes.
  • 28. Commands (Behavior)   Provide a way to represent actions or operations that can be easily bound to controls in the UI.  Encapsulate the actual code that implements the action or operation .  Examples : Button Click , List selection changed.
  • 29. Notifications   Implementing INotifyPropertyChanged and INotifyCollectionChanged interface.  OnPropertyChanged method is required to notify binding target properties with change in source.  Observable Collection needed for binding lists source.