Why am I writing this?
There are many explanations, tutorials, blog posts on architectural patterns in applications, mostly MVVM, MVP and MVC, but most of them are too hard to digest for one who is not much familiar with the subject. Someone who is new to app architecture might want to know how its choice can affect her app in practice and what all the fuss is about in communities.
Trying to shed some light on the above, I made up this screenplay involving MVVM, MVP and MVC. The story begins by a user clicking on the ‘FIND’ button in a movie search app… .
Sound … Camera … Action
User: Click …
View: Who’s that? [MVVM|MVP|MVC]
User: I just clicked on the search button …
View: Ok, hold on a sec … . [MVVM|MVP|MVC]
( View calling the ViewModel|Presenter|Controller … ) [MVVM|MVP|MVC]
View: Hey ViewModel|Presenter|Controller, a User has just clicked on the search button, what shall I do? [MVVM|MVP|MVC]
ViewModel|Presenter|Controller: Hey View, is there any search term on that page? [MVVM|MVP|MVC]
View: Yes,… here it is … “piano” [MVVM|MVP|MVC]
—— This is the most important difference between MVVM AND MVP|MVC ———
Presenter: Thanks View,… meanwhile I’m looking up the search term on the Model, please show him/her a progress bar [MVP|MVC]
( Presenter|Controller is calling the Model … ) [MVP|MVC]
ViewController: Thanks, I’ll be looking up the search term on the Model but will not update you directly. Instead, I will trigger events to searchResultsListObservable if there is any result. So you had better observe on that. [MVVM]
(While observing on any trigger in searchResultsListObservable, the View thinks it should show some progress bar to the user, since ViewModel would not talk to it on that)
——————————————————————————————
ViewModel|Presenter|Controller: Hey Model, Do you have any match for this search term?: “piano” [MVVM|MVP|MVC]
Model: Hey ViewModel|Presenter|Controller, let me check … [MVVM|MVP|MVC]
( Model is making a query to the movie database … ) [MVVM|MVP|MVC]
( After a while … )
———— This is the diverging point between MVVM, MVP and MVC ————–
Model: I found a list for you, ViewModel|Presenter, here it is in JSON “[{“name”:”Piano Teacher”,”year”:2001},{“name”:”Piano”,”year”:1993}]” [MVVM|MVP]
Model: There is some result available, Controller. I have created a field variable in my instance and filled it with the result. It’s name is “searchResultsList” [MVC]
(Presenter|Controller thanks Model and gets back to the View) [MVP|MVC]
Presenter: Thanks for waiting View, I found a list of matching results for you and arranged them in a presentable format: [“Piano Teacher 2001″,”Piano 1993”]. Also please hide the progress bar now [MVP]
Controller: Thanks for waiting View, I have asked Model about your search query. It says it has found a list of matching results and stored them in a variable named “searchResultsList” inside its instance. You can get it from there. Also please hide the progress bar now [MVC]
ViewModel: Any observer on searchResultsListObservable be notified that there is this new list in presentable format: [“Piano Teacher 2001″,”Piano 1993”].[MVVM]
View: Thank you very much Presenter [MVP]
View: Thank you “Controller” [MVC] (Now the View is questioning itself: How should I present the results I get from the Model to the user? Should the production year of the movie come first or last…?)
View: Oh, there is a new trigger in searchResultsListObservable … , good, there is a presentable list, now I only have to show it in a list. I should also hide the progress bar now that I have the result. [MVVM]
Hello Ali,
You published a fantastic explanation. Very visual. I am working on an application in VBA that needs to capture some info in a series of step-by-step User Forms. Like a shopping/ordering machine. You select a product out of a few, then each button in one window leads to a different window, then based on different conditions other smaller windows may pop-up asking for more details. I read about the differences between the 2 main scenarios: MVP and MVC. Now some people say MVC structure suits better as you can have a single Controller governing multiple Views and on the other side MVP requires each View to have its own/separate/dedicated Presenter (I assume each Form needs to have its own View class module). How should I approach the Product Selector UI on multiple interlinked User Forms? Is there anything you would definitely exclude straight away?
Many thanks,
Peter
Thanks Peter for your comment.
I am not sure I have understood your question correctly, but your Product Selecter also has its own View and Presenter/Controller … . So no difference between MVC and MVP in that respect.
“ViewModel|Presenter|Controller: Hey View, is there any search term on that page? [MVVM|MVP|MVC]”
I think in the above line ViewModel should be removed. Because In MVVM, there is NO two sided communication between View and ViewModel.
You are right about the one-sided communication between the view and viewmodel and my sentence implies a two-sided communication which is clearly not what I intended to convey. What I meant was passing the search keyword as an argument to the respective method in the viewmodel.
Thanks so much for being so attentive 🙂