You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: model-view-viewmodel/README.md
+48-19Lines changed: 48 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -3,19 +3,39 @@ title: Model-View-ViewModel
3
3
category: Architectural
4
4
language: en
5
5
tag:
6
-
- Decoupling
6
+
- Architecture
7
+
- Data binding
8
+
- Decoupling
9
+
- Presentation
10
+
- Scalability
7
11
---
8
12
9
13
## Also known as
10
14
11
-
Model–View–Binder
15
+
* MVVM
12
16
13
17
## Intent
14
18
15
-
To apply "[Separation of Concerns](https://java-design-patterns.com/principles/#separation-of-concerns)" to separate the logic from the UI components and allow developers to work on UI without affecting the logic and vice versa.
19
+
The intent of MVVM is to provide a clear [separation of concerns](https://java-design-patterns.com/principles/#separation-of-concerns) between the UI logic, the presentation logic, and the business logic by dividing the application into three interconnected components: Model, View, and ViewModel.
16
20
17
21
## Explanation
18
22
23
+
Real-world example
24
+
25
+
> Consider a real-world analogous example of the MVVM pattern similar to organizing a cooking show. In this scenario:
26
+
>
27
+
> -**Model:** Represents the recipe itself, which includes the ingredients and the steps needed to cook the dish. The model is purely about the data and rules for preparing the dish but does not concern itself with how this information is presented to the audience.
28
+
>
29
+
> -**View:** Is akin to the kitchen set where the cooking show is filmed, including all the visual elements like the layout of the kitchen, the placement of ingredients, and the cookware. The view is responsible for the visual presentation and how the audience sees the cooking process.
30
+
>
31
+
> -**ViewModel:** Acts like the script for the cooking show, where it interprets the recipe (model) and organizes the flow of the show. It tells the chef (view) what to display next, when to add ingredients, and how to respond to changes like substituting an ingredient. The ViewModel bridges the gap between the technical details of the recipe and the chef's presentation, ensuring the audience understands each step without delving into the complexities of the recipe itself.
32
+
>
33
+
> In this example, the ViewModel allows the chef to focus on cooking and interacting with the audience, while the underlying recipe remains unchanged, promoting a clear separation of concerns.
34
+
35
+
In plain words
36
+
37
+
> The Model-View-ViewModel (MVVM) design pattern separates an application into three distinct components: the Model, which holds the data and business logic; the View, which displays the user interface; and the ViewModel, which acts as an intermediary to bind data from the Model to the View, facilitating a clear separation of concerns and easier maintenance and testing of user interfaces.
38
+
19
39
Wikipedia says
20
40
21
41
> Model–view–viewmodel (MVVM) is a software architectural pattern that facilitates the separation of the development of the graphical user interface (the view) – be it via a markup language or GUI code – from the development of the business logic or back-end logic (the model) so that the view is not dependent on any specific model platform.
@@ -105,38 +125,47 @@ To deploy the example, go to model-view-viewmodel folder and run:
105
125
106
126
## Class diagram
107
127
108
-

128
+

109
129
110
130
## Applicability
111
131
112
-
*When looking for clean architecture, with better reusability, testability and maintainability.
132
+
*MVVM is applicable in applications requiring a clear separation between the user interfaceand the underlying business logic, especially in large-scale, data-driven applications where UI and business logic change independently.
*JohnGossman has criticized the MVVM pattern and its application in specific uses, stating that MVVM can be "overkill" when creating simple user interfaces. For larger applications, he believes that generalizing the viewmodel upfront can be difficult, and that large-scale data binding can lead to lower performance -Ref: [MVVM-Wiki](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel)
152
+
Benefits:
153
+
154
+
* Improved testability due to decoupling of business and presentation logic.
155
+
* Easier maintenance and modification of the user interfacewithout affecting the underlying data model.
156
+
* Enhanced reusability of the ViewModel across different views if designed generically.
157
+
158
+
Trade-offs:
159
+
160
+
* Increased complexity in small applications where simpler patterns might suffice.
161
+
* Learning curve associated with understanding and applying the pattern correctly.
162
+
163
+
## Related Patterns
133
164
134
-
*Canbe hard to design ViewModelfor larger applications.
135
-
*For complex databinding, debugging can be difficult.
165
+
* [MVC (Model-View-Controller)](https://java-design-patterns.com/patterns/model-view-controller/): MVVM can be seen as a derivative of MVC with a stronger emphasis on binding and decoupling, where the ViewModel acts as an intermediary unlike the controller in MVC.
166
+
* [MVP (Model-View-Presenter)](https://java-design-patterns.com/patterns/model-view-presenter/): Similar to MVVM but with a focus on the presenter handling the UI logic, making MVVM's ViewModel more passive in terms of direct UI manipulation.
0 commit comments