Skip to content

Commit b6a1f18

Browse files
committed
docs: update model-view-viewmodel
1 parent 2ad0220 commit b6a1f18

File tree

3 files changed

+52
-24
lines changed

3 files changed

+52
-24
lines changed

model-view-viewmodel/README.md

Lines changed: 48 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,39 @@ title: Model-View-ViewModel
33
category: Architectural
44
language: en
55
tag:
6-
- Decoupling
6+
- Architecture
7+
- Data binding
8+
- Decoupling
9+
- Presentation
10+
- Scalability
711
---
812

913
## Also known as
1014

11-
Model–View–Binder
15+
* MVVM
1216

1317
## Intent
1418

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.
1620

1721
## Explanation
1822

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+
1939
Wikipedia says
2040

2141
> 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:
105125

106126
## Class diagram
107127

108-
![alt text](./etc/model-view-viewmodel.png "MVVM pattern class diagram")
128+
![MVVM](./etc/model-view-viewmodel.png "MVVM pattern class diagram")
109129

110130
## Applicability
111131

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 interface and the underlying business logic, especially in large-scale, data-driven applications where UI and business logic change independently.
113133

114134
## Tutorials
115135

116136
* [Zkoss Demo](https://www.zkoss.org/zkdemo/getting_started/mvvm)
117137
* [Data Binding in Android](https://developer.android.com/codelabs/android-databinding#0)
138+
* [ZK MVVM](https://www.zkoss.org/wiki/ZK%20Developer's%20Reference/MVVM)
139+
* [GeeksforGeeks MVVM Intro](https://www.geeksforgeeks.org/introduction-to-model-view-view-model-mvvm/)
140+
* [ZK MVVM Book](http://books.zkoss.org/zk-mvvm-book/9.5/)
141+
* [Microsoft MVVM](https://docs.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern)
118142

119-
## Typical Use Case
120-
121-
* Android apps
122-
* .NET framework applications
123-
* JavaScript applications
124-
125-
## Real world examples
143+
## Known uses
126144

145+
* Widely used in JavaFX applications for desktop interfaces.
146+
* Utilized in Android development with libraries like DataBinding and LiveData for reactive UI updates.
127147
* ZK Framework [zkoss.org](https://www.zkoss.org/)
128148
* KnockoutJS [knockoutjs.com](https://knockoutjs.com/)
129149

130150
## Consequences
131151

132-
* John Gossman 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 interface without 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
133164

134-
* Can be hard to design ViewModel for 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.
136167

137168
## Credits
138169

139-
* [ZK MVVM](https://www.zkoss.org/wiki/ZK%20Developer's%20Reference/MVVM)
140-
* [GeeksforGeeks MVVM Intro](https://www.geeksforgeeks.org/introduction-to-model-view-view-model-mvvm/)
141-
* [ZK MVVM Book](http://books.zkoss.org/zk-mvvm-book/9.5/)
142-
* [Microsoft MVVM](https://docs.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern)
170+
* [Android Programming: The Big Nerd Ranch Guide](https://amzn.to/3wBGG5o)
171+
* [Pro JavaFX 8: A Definitive Guide to Building Desktop, Mobile, and Embedded Java Clients](https://amzn.to/4a8qcQ1)

model-view-viewmodel/src/main/java/com/iluwatar/model/view/viewmodel/BookService.java

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,5 @@ public interface BookService {
3434
/* List all books
3535
* @return all books
3636
*/
37-
public List<Book> load();
37+
List<Book> load();
3838
}

model-view-viewmodel/src/main/java/com/iluwatar/model/view/viewmodel/BookViewModel.java

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
package com.iluwatar.model.view.viewmodel;
2626

2727
import java.util.List;
28+
import lombok.Getter;
29+
import lombok.Setter;
2830
import org.zkoss.bind.annotation.Command;
2931
import org.zkoss.bind.annotation.NotifyChange;
3032
import org.zkoss.zk.ui.select.annotation.WireVariable;
@@ -36,13 +38,10 @@ public class BookViewModel {
3638

3739
@WireVariable
3840
private List<Book> bookList;
41+
@Getter
3942
private Book selectedBook;
4043
private BookService bookService = new BookServiceImpl();
4144

42-
public Book getSelectedBook() {
43-
return selectedBook;
44-
}
45-
4645
@NotifyChange("selectedBook")
4746
public void setSelectedBook(Book selectedBook) {
4847
this.selectedBook = selectedBook;

0 commit comments

Comments
 (0)