User Interface Design Patterns (UI-DP)
- are Design Patterns that deals with the behavior of a User Interface/presentation (closely related to Behavioral Design Patterns especially Mediator & Observer Pattern)
UI Design Patterns
Link to originalModel-View-Whatever (MVW) - is not an actual UI Design Pattern but a term coined to refer to the various Model-View-* patterns. MVW is sometimes mistakenly referred as Model-View-Controller (MVC)
- Model-View-Controller (MVC) - unidirectional flow of events/data (i.e. Controller → Model → View → Back to Controller) (e.g. React.js)
- Model-View-Adaptor (MVA) - the Adaptors sits between Model and View (i.e. View ↔ Adaptors ↔ Model)
- Model-View-Presenter (MVP) - a MVA with only 1 adaptor (e.g. Spring, Rails, PHP PHP, ASP.net)
- Model-View-ViewModel (MVVM) - Model-View-Binder (MVB) - MVP/MVA but with data-binding between ViewModel/Binder and the View (e.g. Angular, Vue.js)
Model-View-* Hierarchy
MVW/ \MVA MVC_____| / \ \MVP Flux MVC1 MVC2| |?MVVM/MVB Redux
UI Design Patterns - History
In 1978, Trygve Reenskaugh and Adele Goldberg coined the name Model-View-Controller (MVC)
Real and Pure MVC is unidirectional
More than a decade ago, when server side frameworks like Apache Struts implemented a variant of MVC called Model-View-Presenter (MVP) pattern, they made every request go through controller and every response come back through controller. Everyone continued calling it MVC. Due to inherent nature of the web, any changes in the model cannot be propagated to the view without view sending a request or update. So Pure MVC is not implemented. Rather MVP is implemented.
Few years back, when frameworks like Angular, Ember, Knockout implemented MVC on front end, they implemented another variant of MVC called Model-View-ViewModel (MVVM) pattern which introduced databinding. A few folks continued called it MVC. (and few realized that terminology is not important and called it Model-View-Whatever (MVW)), none of them implemented pure MVC.