Difference between revisions of "Template:Tutorial Approach Comparison"

From Documentation
(Created page with "= Approach Comparison = <!-- list strength for users --> Here is the architecture picture to demonstrate the interaction between Model, View, and Controller/ViewModel. [[Image...")
 
 
(6 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
-->
 
-->
  
Here is the architecture picture to demonstrate the interaction between Model, View, and Controller/ViewModel.
+
Here is the architectural picture to demonstrate the interaction between Model, View, and Controller/ViewModel.
  
[[Image:tutorial-mvc.png | 440px ]][[File:tutorial-separator.jpg]][[File:tutorial-mvvm.png | 440px ]]
+
[[Image:tutorial-mvc.png ]][[Image:tutorial-mvvm.png]]
<div style="width:452px;float:left;">
 
<div style="font-size:26px;color:DodgerBlue;width:60px;margin-left:auto;margin-right:auto;">
 
MVC
 
</div>
 
</div>
 
<div style="width:5px;float:left;">
 
  
</div>
+
The main differences are that '''Controller''' changes to '''ViewModel''' and there is a binder in MVVM to synchronize data instead of a Controller.
<div style="font-size:26px;width:452px;float:left;margin-left:auto;margin-right:auto;">
 
<div style="font-size:26px;color:DodgerBlue;width:80px;margin-left:auto;margin-right:auto;">
 
MVVM
 
</div>
 
</div>
 
  
The main differences are that '''Controller''' changes to '''ViewModel''' and there is a binder in MVVM to synchronize data instead of a Controller.
 
  
Briefly speaking,
+
== '''MVC''' Advantages==
'''MVC''' advantage:
 
 
* very intuitive, easy to understand
 
* very intuitive, easy to understand
 
* control components in fine-grained
 
* control components in fine-grained
  
'''MVVM''' advantage:
+
For those who use ZK for the first time or beginners, we suggest you using the MVC pattern. Because it's easy to use and debug.
 +
 
 +
== '''MVVM''' Advantages==
 
* suitable for design-by-contract programming
 
* suitable for design-by-contract programming
 
* loose coupling with View
 
* loose coupling with View
Line 36: Line 25:
  
  
Both approaches can achieve many things in common, but there are still some differences between them. Each of two approaches has its strength. Building an application with MVC approach is more intuitive because you directly control what you see. Its strength is that you have total control of components so that you can create child components dynamically, control custom components, or do anything a component can do.
+
Both approaches can achieve many things in common and have their own strength. But there are still some differences between them. Building an application with the MVC pattern is more intuitive because you directly control what you see. Its strength is that you have total control of components to create child components dynamically, control custom components, or do anything a component can do.
  
In MVVM, because ViewModel is loosely-coupled with View (it has no reference to components), one ViewModel may associate with multiple Views without modification. UI designers and programmers may work in parallel. If data and behavior do not change, a View's change doesn't cause ViewModel to be modified. In addition, as ViewModel is a POJO, it is easy to perform unit test on it without any special environment. That means ViewModel has better reusability, testability, and better resistance to View change.  
+
In the MVVM pattern, because ViewModel is loosely-coupled with View (it has no reference to components), one ViewModel may associate with multiple Views without modification. UI designers and programmers may work in parallel. If data and behavior do not change, a View's change doesn't cause ViewModel to be modified. In addition, as ViewModel is a POJO, it is easy to perform unit test on it without any special environment. That means ViewModel has better reusability, testability, and better resistance to View change.  
  
  
To summarize, a comparison table is illustrated below:
+
To summarize, see the comparison table below:
  
<div style="margin-left:auto;margin-right:auto;width:70%;">
+
<div>
{| border="2" style="text-align:center; font-size:18; padding:10px;"
+
{| class="wikitable"
 
|+  
 
|+  
 
! !! <center>MVC</center> !! <center>MVVM</center>
 
! !! <center>MVC</center> !! <center>MVVM</center>
Line 74: Line 63:
 
! UI Updating
 
! UI Updating
 
| Manipulate components
 
| Manipulate components
| &nbsp;&nbsp; Automatic(@NotifyChange) &nbsp;&nbsp;
+
| &nbsp;&nbsp; Automatic (@NotifyChange) &nbsp;&nbsp;
 
|-
 
|-
 
! Component Controlling Granularity
 
! Component Controlling Granularity

Latest revision as of 03:55, 19 November 2021

Approach Comparison

Here is the architectural picture to demonstrate the interaction between Model, View, and Controller/ViewModel.

Tutorial-mvc.pngTutorial-mvvm.png

The main differences are that Controller changes to ViewModel and there is a binder in MVVM to synchronize data instead of a Controller.


MVC Advantages

  • very intuitive, easy to understand
  • control components in fine-grained

For those who use ZK for the first time or beginners, we suggest you using the MVC pattern. Because it's easy to use and debug.

MVVM Advantages

  • suitable for design-by-contract programming
  • loose coupling with View
  • better reusability
  • better testability
  • better for responsive design


Both approaches can achieve many things in common and have their own strength. But there are still some differences between them. Building an application with the MVC pattern is more intuitive because you directly control what you see. Its strength is that you have total control of components to create child components dynamically, control custom components, or do anything a component can do.

In the MVVM pattern, because ViewModel is loosely-coupled with View (it has no reference to components), one ViewModel may associate with multiple Views without modification. UI designers and programmers may work in parallel. If data and behavior do not change, a View's change doesn't cause ViewModel to be modified. In addition, as ViewModel is a POJO, it is easy to perform unit test on it without any special environment. That means ViewModel has better reusability, testability, and better resistance to View change.


To summarize, see the comparison table below:

MVC
MVVM
Coupling with View Loose with layout Loose
Coupling with Component Tight Loose
Coding in View Component ID Data binding expression
Controller Implementation  Extends ZK's composer  a POJO
UI Data Access Direct access Automatic
Backend Data Access Direct access Direct access
UI Updating Manipulate components    Automatic (@NotifyChange)   
Component Controlling Granularity Fine-grained Normal
Performance High Normal