DEV Community

Discussion on: Explain how MVVM architecture work like I'm five.

Collapse
 
bgadrian profile image
Adrian B.G. • Edited

You are 5y and trying to learn basic algebra.
You mother makes you a cool software in which you can learn in an interactive way.
Math is a big field, the software your mother made is made out of 2 sides:

  • the back end, which encapsulate a mathematical model, where your results are verfied
  • the front end, which draws the pretty UI and let's your small fingers interacts with the software

Imgur

All the state of the front end, how many exercises you did since you started the cool software, what results you wrote and how many apple to draw on the screen are kept in a cool front end software box called the ViewModel.

While the mathematical model is in charge to replicate the business logic, in this case the basic algebra operators and functions, the ViewModel is in charge of storing user interface stuff like

  • score
  • results
  • where are the images of the apples

You can appreciate your mother using this pattern, otherwise it will had to pollute the mathematical model with lesser things like apples.


mathematical model - MVVM, model, the business logic of your app
ViewModel - it stores data needed for the UI AND transforms the data from the Model to be represented on the screen in a friendly way.

The model decides what exercise you should do next and corrects the results, the information is sent to the ViewModel, the VM translates the information from ugly (number 5) math to beautiful apple's icons (5 apples).

Some info is kept in both Models, but for different purposes:

  • score - the Model need it to store it in the DB or decide what the next exercise
  • current exercise - VM to display apples, Model created it The only source of truth must be the Model, picture it like server client, Model is the server and can have multiple clients (VM).

Each Model can have special data that is not shared with the other one, for example the VM can have the Display resolution which is needed to calculate how big the apples should be on the screen, the Model doesn't care about this.

There are some environments where the VM is the principal actor in the app, you can learn and have fun making mini games in Unity3D, where you have components attached to objects, they are usually ViewModels where you keep data and logic for the UI, size of the text, shaders etc.

This story was inspired from a real story, my father made me a multiplication Basic software in which I learned math, it was way cooler than boring exercises from school on paper.

Collapse
 
smontiel profile image
Salvador Montiel

Nice explanation!

Collapse
 
bgadrian profile image
Adrian B.G. • Edited

I haven't explained the Controller or Model parts, because they are same in both patterns.

If you are not using the ViewModel pattern most likely its logic and data is scattered around, usually in the View.

I made a graph, for the data (not event flow) differences, as another example.

Imgur