Four UI patterns: input to screen update (communication diagrams)

3c:I[286652,["$21","$22","$23","$24","$25","$26","$30"],"default"] 3d:T11e1b,{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Overview"}]},{"type":"paragraph","content":[{"type":"text","text":"Suppose an order screen has a quantity field whose change handler parses the input as a number, fills an error label if it exceeds stock, and otherwise calculates the total, updates its label and enables the order button. The button's click handler checks stock again, then saves the order to a database. Even checking the single rule \"an order cannot exceed available stock\" requires opening a window, connecting a database and entering a quantity. Input interpretation, screen updates, business rules and persistence are mixed into two handlers, so none can run or change on its own. An order screen makes a useful example because one input leads through validation, calculation, display and saving, letting us compare the responsibilities that need to be separated within one situation."}]},{"type":"paragraph","content":[{"type":"text","text":"In this document, "},{"type":"text","text":"architecture patterns","marks":[{"type":"bold"}]},{"type":"text","text":" name ways to divide this code at the screen or application level. Each pattern defines the roles, the route user input and screen updates take through those roles, and the direction of source-code dependencies. The GoF design patterns introduced in "},{"type":"text","text":"Programming Patterns","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/programming-patterns","target":null,"rel":null}}]},{"type":"text","text":" have a smaller scope: they describe how objects are created, assembled and made to cooperate. The two levels work together. In MVC, for example, the model notifies views of changes through the "},{"type":"text","text":"Observer pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/observer-pattern","target":null,"rel":null}}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Architecture patterns address two kinds of questions. The division of input, presentation and presentation rules within a screen is the subject of "},{"type":"text","text":"UI architecture patterns","marks":[{"type":"bold"}]},{"type":"text","text":" such as MVC, MVP, MVVM and MVU, each covered in its own article. Boundaries and dependencies between business rules and external technologies such as databases, web frameworks and external services are the subject of "},{"type":"text","text":"application structure patterns","marks":[{"type":"bold"}]},{"type":"text","text":". Layered, hexagonal, onion and clean architecture receive a brief introduction here. In the order screen above, separating the stock rule from its handler addresses the first question; preventing that rule from directly calling database code addresses the second."}]},{"type":"paragraph","content":[{"type":"text","text":"The two kinds overlap within a program. In his article on clean architecture, Robert C. Martin places the GUI's entire MVC structure in the interface adapters layer, the third concentric circle from the inside."},{"type":"footnote","attrs":{"id":"fn-clan01","body":"Robert C. Martin. [The Clean Architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html). The Clean Code Blog (August 13, 2012)."}}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Comparing UI architecture patterns"}]},{"type":"paragraph","content":[{"type":"text","text":"All four patterns separate screen code from other logic so that some of it can be tested without opening a window, but the testable part differs. They also differ in who receives user input first and how changed values reach the screen."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"When reading the table and diagrams, follow who first receives user input, who changes state, and who transfers changed values to the screen. Displaying a total after a quantity change, for example, requires both interpreting the input and applying the new total to the screen. The comparison below follows the roles involved in these two stages. The individual articles use counters, searches and carts to expose each flow on a small scale; the table does not compare four executions of the same ordering program."}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Pattern"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Who receives user input"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"How the view updates"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"What can be tested without a UI"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Where it is used"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVC Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvc-pattern","target":null,"rel":null}}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The controller translates input into calls to the model."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"When the model announces a change, registered views read the model again and render. In web MVC, the controller selects a view and passes data for each request, without change notifications."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The model: data and rules"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Smalltalk-80; server-side web frameworks such as JSP Model 2, Ruby on Rails and ASP.NET MVC"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVP Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvp-pattern","target":null,"rel":null}}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The view passes input to the presenter, which decides how to respond."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"In Passive View, the presenter supplies display values through the view interface. In original MVP and Supervising Controller, the view observes the model or stays synchronized through data binding."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The presenter, using a fake view, and the model"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Taligent (C++, Java), Dolphin Smalltalk, Windows Forms and ASP.NET Web Forms"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVVM Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvvm-pattern","target":null,"rel":null}}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The view. A command source such as a button calls the bound command's ("},{"type":"text","text":"ICommand","marks":[{"type":"code"}]},{"type":"text","text":") "},{"type":"text","text":"Execute","marks":[{"type":"code"}]},{"type":"text","text":", while data binding transfers field values to the ViewModel."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"When the ViewModel announces changes through "},{"type":"text","text":"PropertyChanged","marks":[{"type":"code"}]},{"type":"text","text":", the binding engine reads the values and puts them into the view."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"ViewModel and Model"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"WPF, Silverlight, .NET MAUI and JavaScript's Knockout"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVU Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvu-pattern","target":null,"rel":null}}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The screen elements built by the view function translate input into messages and send them to the runtime."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The runtime receives a new model from update and calls the view function with it to build the next screen."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Update and view: pure functions"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Elm; Redux, where the reducer serves as update; Fabulous in F#"}]}]}]}]},{"type":"animatedDiagramBlock","attrs":{"title":"Four UI patterns: from input to screen update","scene":{"svg":"","css":"","javascript":""},"width":0,"height":1136,"autoplay":false,"showControls":false,"fitMode":"contain","frameMode":"content"}},{"type":"paragraph","content":[{"type":"text","text":"The figure contains four UML communication diagrams. Each panel numbers the messages from one user input through the resulting screen update. Dots indicate nested calls: 1.1.2 is the second message sent while handling 1.1. Participant names come from the examples in the individual pattern articles; "},{"type":"text","text":"Button","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"TextBlock","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"BindingExpression","marks":[{"type":"code"}]},{"type":"text","text":" (WPF) and "},{"type":"text","text":"Html","marks":[{"type":"code"}]},{"type":"text","text":" (Elm) are framework types. The MVVM panel shows a binding engine such as WPF's, rather than the example's console "},{"type":"text","text":"Binder","marks":[{"type":"code"}]},{"type":"text","text":". As a command source, the button directly calls the bound command's "},{"type":"text","text":"Execute","marks":[{"type":"code"}]},{"type":"text","text":";"},{"type":"footnote","attrs":{"id":"fn-wpmd01","body":"Microsoft Learn. [Commanding Overview (WPF)](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/commanding-overview). Command Sources."}},{"type":"text","text":" binding ("},{"type":"text","text":"BindingExpression","marks":[{"type":"code"}]},{"type":"text","text":") appears only when it receives "},{"type":"text","text":"PropertyChanged","marks":[{"type":"code"}]},{"type":"text","text":" and updates a displayed value. In the MVU panel, "},{"type":"text","text":"Render(html)","marks":[{"type":"code"}]},{"type":"text","text":" names the runtime step that applies the new screen. Class and sequence diagrams appear in each pattern's article."}]},{"type":"paragraph","content":[{"type":"text","text":"MVC and MVVM both update the screen through change notifications, but different recipients handle them. In Smalltalk-80 MVC, a view registers as a dependent of the model and receives an "},{"type":"text","text":"update","marks":[{"type":"code"}]},{"type":"text","text":" message when the model changes."},{"type":"footnote","attrs":{"id":"fn-kp8801","body":"Glenn E. Krasner, Stephen T. Pope. \"A Cookbook for Using the Model-View-Controller User Interface Paradigm in Smalltalk-80\". *Journal of Object-Oriented Programming*, August/September 1988, pp. 26-49. [PDF](https://ics.uci.edu/~redmiles/ics227-SQ04/papers/KrasnerPope88.pdf)."}},{"type":"text","text":" In MVVM, the binding engine receives the ViewModel's "},{"type":"text","text":"PropertyChanged","marks":[{"type":"code"}]},{"type":"text","text":" notification and updates the view."},{"type":"footnote","attrs":{"id":"fn-inpc01","body":"Microsoft Learn. [INotifyPropertyChanged Interface](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=net-10.0). Remarks."}},{"type":"text","text":" MVP's Passive View updates through explicit presenter calls, so the view and model have no dependency in either direction."},{"type":"footnote","attrs":{"id":"fn-fopv01","body":"Martin Fowler. \"Passive View\". martinfowler.com (July 18, 2006). [Original article](https://martinfowler.com/eaaDev/PassiveScreen.html)."}},{"type":"text","text":" In MVU, messages go to update to calculate a new model instead of subscribing to model-property changes. Update is the sole route for state changes, and the view function recalculates the screen whenever a new model arrives."},{"type":"footnote","attrs":{"id":"fn-elar01","body":"Elm Guide. [The Elm Architecture](https://guide.elm-lang.org/architecture/)."}}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"History"}]},{"type":"paragraph","content":[{"type":"text","text":"This timeline combines the histories from the four UI pattern articles with the main publications on application structure, in chronological order. Links in the source column support each row."}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Year"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Event"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Source"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1978"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Reenskaug conceived MVC while visiting Xerox PARC's LRG, from summer 1978 to summer 1979."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Reenskaug's MVC page","marks":[{"type":"link","attrs":{"href":"https://web.archive.org/web/20250227144558/https://folk.universitetetioslo.no/trygver/themes/mvc/mvc-index.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1979"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The May 12 note \"Thing-Model-View-Editor\" explained Thing, Model, View and Editor through examples."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Note PDF","marks":[{"type":"link","attrs":{"href":"https://web.archive.org/web/20251224205518/https://folk.universitetetioslo.no/trygver/1979/mvc-1/1979-05-MVC.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1979"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The December 10 note \"Models-Views-Controllers\" settled on the names model, view and controller. The editor, which lets users modify a view's information, remained a supporting element."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Note PDF","marks":[{"type":"link","attrs":{"href":"https://web.archive.org/web/20260108034112/https://folk.universitetetioslo.no/trygver/1979/mvc-2/1979-12-MVC.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1988"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Krasner and Pope published their Smalltalk-80 MVC guide in JOOP's August/September issue."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Paper PDF","marks":[{"type":"link","attrs":{"href":"https://ics.uci.edu/~redmiles/ics227-SQ04/papers/KrasnerPope88.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1995"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"After building a widget-based UI framework, the Dolphin Smalltalk team began replacing it with MVC late that year, taking about two months."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Bower, McGlashan 2000","marks":[{"type":"link","attrs":{"href":"http://web.archive.org/web/20201108220908/http://www.object-arts.com/downloads/papers/TwistingTheTriad.PDF","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1996"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Mike Potel introduced Taligent's MVP in \"MVP: Model-View-Presenter, The Taligent Programming Model for C++ and Java\"."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Potel 1996","marks":[{"type":"link","attrs":{"href":"http://www.wildcrest.com/Potel/Portfolio/mvp.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1999"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Seshadri described the JSP Model 2 architecture as a server-side implementation of MVC."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"JavaWorld article","marks":[{"type":"link","attrs":{"href":"https://www.infoworld.com/article/2164578/understanding-javaserver-pages-model-2-architecture.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2000"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Andy Bower and Blair McGlashan described Dolphin Smalltalk's adoption of MVP in the ESUG 2000 tutorial paper \"Twisting the Triad\"."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Bower, McGlashan 2000","marks":[{"type":"link","attrs":{"href":"http://web.archive.org/web/20201108220908/http://www.object-arts.com/downloads/papers/TwistingTheTriad.PDF","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2002"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Michael Feathers described a logic object pushing values to a dialog through a view interface in \"The Humble Dialog Box\"."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Feathers 2002","marks":[{"type":"link","attrs":{"href":"http://web.archive.org/web/20030403033614/http://www.objectmentor.com:80/resources/articles/TheHumbleDialogBox.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2002"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fowler's Patterns of Enterprise Application Architecture was published. Dividing enterprise applications into layers is one of its main subjects."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"martinfowler.com","marks":[{"type":"link","attrs":{"href":"https://martinfowler.com/books/eaa.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2004"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Martin Fowler published drafts of Model View Presenter and Presentation Model on July 19."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fowler, Model View Presenter","marks":[{"type":"link","attrs":{"href":"https://martinfowler.com/eaaDev/ModelViewPresenter.html","target":null,"rel":null}}]},{"type":"text","text":", "},{"type":"text","text":"Fowler, Presentation Model","marks":[{"type":"link","attrs":{"href":"https://martinfowler.com/eaaDev/PresentationModel.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2005"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Alistair Cockburn documented Ports and Adapters, also called hexagonal architecture. The article is version 0.9, dated September 4."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Cockburn, Hexagonal Architecture","marks":[{"type":"link","attrs":{"href":"https://alistair.cockburn.us/hexagonal-architecture/","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2005"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"John Gossman published an introduction to Model/View/ViewModel on his blog on October 8."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Gossman, Introduction to Model/View/ViewModel","marks":[{"type":"link","attrs":{"href":"https://learn.microsoft.com/en-us/archive/blogs/johngossman/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2005"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ruby on Rails 1.0 was released. The Rails guide describes Action Controller as the C in MVC."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Rails blog","marks":[{"type":"link","attrs":{"href":"https://rubyonrails.org/2005/12/13/rails-1-0-party-like-its-one-oh-oh","target":null,"rel":null}}]},{"type":"text","text":", "},{"type":"text","text":"Rails guide","marks":[{"type":"link","attrs":{"href":"https://guides.rubyonrails.org/action_controller_overview.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2006"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Gossman published a discussion of M-V-VM's advantages and disadvantages."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Gossman, Advantages and disadvantages of M-V-VM","marks":[{"type":"link","attrs":{"href":"https://learn.microsoft.com/en-us/archive/blogs/johngossman/advantages-and-disadvantages-of-m-v-vm","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2006"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fowler retired the MVP entry after splitting it into Supervising Controller and Passive View on July 11. He then surveyed MVC and its variations in \"GUI Architectures\" on July 18."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fowler, Model View Presenter","marks":[{"type":"link","attrs":{"href":"https://martinfowler.com/eaaDev/ModelViewPresenter.html","target":null,"rel":null}}]},{"type":"text","text":", "},{"type":"text","text":"GUI Architectures","marks":[{"type":"link","attrs":{"href":"https://martinfowler.com/eaaDev/uiArchs.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2008"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Jeffrey Palermo published the first article in \"The Onion Architecture\" series on July 29."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Palermo, part 1","marks":[{"type":"link","attrs":{"href":"https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2009"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Josh Smith's WPF MVVM article appeared in MSDN Magazine's February issue, introducing "},{"type":"text","text":"RelayCommand","marks":[{"type":"code"}]},{"type":"text","text":" and "},{"type":"text","text":"ViewModelBase","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Smith, MSDN Magazine","marks":[{"type":"link","attrs":{"href":"https://learn.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2009"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Microsoft released ASP.NET MVC 1.0 at its MIX event."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"ScottGu's Blog","marks":[{"type":"link","attrs":{"href":"https://weblogs.asp.net/scottgu/asp-net-mvc-1-0","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2010"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Dino Esposito introduced MVP implementations for Web Forms and Windows Forms in MSDN Magazine."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Esposito 2010","marks":[{"type":"link","attrs":{"href":"https://learn.microsoft.com/en-us/archive/msdn-magazine/2010/september/msdn-magazine-cutting-edge-better-web-forms-with-the-mvp-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2012"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Evan Czaplicki's thesis \"Elm: Concurrent FRP for Functional GUIs\", dated March 30, described "},{"type":"text","text":"foldp","marks":[{"type":"code"}]},{"type":"text","text":" as \"fold from the past\"."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Paper PDF","marks":[{"type":"link","attrs":{"href":"https://elm-lang.org/assets/papers/concurrent-frp.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2012"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Robert C. Martin published \"The Clean Architecture\" on his blog on August 13."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Clean Code Blog","marks":[{"type":"link","attrs":{"href":"https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2015"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The elm-architecture-tutorial README presented a program skeleton divided into model, update and view in January."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"GitHub commit","marks":[{"type":"link","attrs":{"href":"https://github.com/evancz/elm-architecture-tutorial/commit/570709a0ff0bcebfd95572fe7d6b6e7ac993d42c","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2015"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Redux 1.0.0 was released on August 14."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"GitHub release","marks":[{"type":"link","attrs":{"href":"https://github.com/reduxjs/redux/releases/tag/v1.0.0","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2016"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Elm 0.17 introduced subscriptions and replaced signals: \"A Farewell to FRP\", May 10."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"elm-lang.org","marks":[{"type":"link","attrs":{"href":"https://elm-lang.org/news/farewell-to-frp","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2016"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Elm 0.18 announcement introduced exporting and importing event histories in debug mode, on November 14."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"elm-lang.org","marks":[{"type":"link","attrs":{"href":"https://elm-lang.org/news/the-perfect-bug-report","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2017"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Martin's Clean Architecture was published by Prentice Hall."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Google Books","marks":[{"type":"link","attrs":{"href":"https://books.google.com/books/about/Clean_Architecture.html?id=fwvetAEACAAJ","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2020"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The .NET MAUI announcement mentioned C# MVU as a future feature on May 19."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":".NET Blog","marks":[{"type":"link","attrs":{"href":"https://devblogs.microsoft.com/dotnet/introducing-net-multi-platform-app-ui/","target":null,"rel":null}}]}]}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"MVP and MVVM arose by adapting or specializing earlier patterns. Potel introduced MVP as a programming model that generalized Smalltalk MVC, and described the presenter as lifting the classical Smalltalk controller's responsibilities to the application level."},{"type":"footnote","attrs":{"id":"fn-poel01","body":"Mike Potel. \"MVP: Model-View-Presenter, The Taligent Programming Model for C++ and Java\". Taligent, Inc. (1996). [PDF](http://www.wildcrest.com/Potel/Portfolio/mvp.pdf). Opening paragraph; Summary and Three User Interface Questions sections."}},{"type":"text","text":" The Dolphin Smalltalk team found that MVC connected an application model and its views only indirectly, while native Windows controls already supplied most controller behavior. The team adopted Taligent's MVP after a colleague introduced it."},{"type":"footnote","attrs":{"id":"fn-trad01","body":"Andy Bower, Blair McGlashan. \"Twisting the Triad: The evolution of the Dolphin Smalltalk MVP application framework\". ESUG 2000 Tutorial Paper (2000). [Internet Archive copy](http://web.archive.org/web/20201108220908/http://www.object-arts.com/downloads/papers/TwistingTheTriad.PDF). Model-View-Controller and Twisting the triad sections."}},{"type":"text","text":" Fowler wrote that VisualWorks Smalltalk users knew Presentation Model as Application Model. In a later note, he said the pattern was increasingly known as MVVM."},{"type":"footnote","attrs":{"id":"fn-fopm01","body":"Martin Fowler. [Presentation Model](https://martinfowler.com/eaaDev/PresentationModel.html) (2004). Also Known as; the introductory Note."}},{"type":"text","text":" Gossman described MVVM as a variation of MVC for environments in which designers build views in declarative languages such as XAML,"},{"type":"footnote","attrs":{"id":"fn-gos501","body":"John Gossman. [Introduction to Model/View/ViewModel pattern for building WPF apps](https://learn.microsoft.com/en-us/archive/blogs/johngossman/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps) (2005). Full article."}},{"type":"text","text":" while Smith treated it as a specialization of Presentation Model for WPF and Silverlight."},{"type":"footnote","attrs":{"id":"fn-smth01","body":"Josh Smith. [WPF Apps With The Model-View-ViewModel Design Pattern](https://learn.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern). *MSDN Magazine*, February 2009. The Evolution of Model-View-ViewModel."}},{"type":"text","text":" On the MVU side, the Redux documentation says Elm's updater has the same role as Redux's reducer,"},{"type":"footnote","attrs":{"id":"fn-rdpa01","body":"Redux. [Prior Art](https://redux.js.org/understanding/history-and-design/prior-art). Elm."}},{"type":"text","text":" and the Elm guide notes that The Elm Architecture inspired projects such as Redux."},{"type":"footnote","attrs":{"id":"fn-elar02","body":"Elm Guide. [The Elm Architecture](https://guide.elm-lang.org/architecture/)."}}]},{"type":"paragraph","content":[{"type":"text","text":"Application structure patterns also refer to one another. Palermo wrote that hexagonal and onion architecture share the premise of moving infrastructure to the outside and using adapter code to avoid tight coupling to it."},{"type":"footnote","attrs":{"id":"fn-onn101","body":"Jeffrey Palermo. [The Onion Architecture : part 1](https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/) (July 29, 2008)."}},{"type":"text","text":" Martin's 2012 article lists hexagonal, onion and other architectures, explaining that although their details differ, they share the aim of separating concerns by dividing software into layers."},{"type":"footnote","attrs":{"id":"fn-clan02","body":"Robert C. Martin. [The Clean Architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html). The Clean Code Blog (August 13, 2012)."}}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Application structure patterns"}]},{"type":"paragraph","content":[{"type":"text","text":"The following four patterns divide an entire application, beyond a single screen. All ask whether business rules, or the domain, depend on external technologies such as databases, web frameworks and UI."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Moving total calculation out of the order screen's button handler makes it easier to test without a window. But if the extracted code must call a real database whenever it checks stock, that check still requires a database after the screen is separated. The scope now widens to how business rules connect to persistence technology. Instead of introducing more ordering code, the following sections compare where layers and interfaces sit and which parts reference which."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Layered architecture"}]},{"type":"paragraph","content":[{"type":"text","text":"Layered architecture divides a program into layers such as presentation (UI), domain logic and data access. In Fowler's account, dependencies generally flow downward: presentation depends on the domain, which depends on the data source. He identifies the main benefit as reducing the scope of attention, since these three subjects can be considered relatively separately. He adds that a variation placing a mapper between the domain and data source, so the domain does not depend on the source, is often called hexagonal architecture."},{"type":"footnote","attrs":{"id":"fn-pddd01","body":"Martin Fowler. [Presentation Domain Data Layering](https://martinfowler.com/bliki/PresentationDomainDataLayering.html). martinfowler.com (August 26, 2015)."}},{"type":"text","text":" His 2002 book Patterns of Enterprise Application Architecture also treats dividing enterprise applications into layers as a main subject."},{"type":"footnote","attrs":{"id":"fn-eaaa01","body":"Martin Fowler. [*Patterns of Enterprise Application Architecture*](https://martinfowler.com/books/eaa.html). Addison-Wesley Professional, 2002. The author's book page; publisher and publication date from [InformIT](https://www.informit.com/store/patterns-of-enterprise-application-architecture-9780321127426)."}}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Hexagonal architecture (ports and adapters)"}]},{"type":"paragraph","content":[{"type":"text","text":"Alistair Cockburn's Ports and Adapters pattern, also called Hexagonal Architecture, aims to let users, other programs, automated tests and batch scripts drive an application in the same way, and to let development and testing proceed without real devices or databases. The application communicates with the outside through a "},{"type":"text","text":"port","marks":[{"type":"bold"}]},{"type":"text","text":", an API defined around the purpose of the conversation. Each external device has an "},{"type":"text","text":"adapter","marks":[{"type":"bold"}]},{"type":"text","text":" that translates between this API and the device's signals. The application does not know the nature of its input device, and Cockburn requires code that belongs inside to stay inside. He described the pattern as a specific use of the "},{"type":"text","text":"Adapter pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/adapter-pattern","target":null,"rel":null}}]},{"type":"text","text":"."},{"type":"footnote","attrs":{"id":"fn-heex01","body":"Alistair Cockburn. [Hexagonal (Ports & Adapters) Architecture](https://alistair.cockburn.us/hexagonal-architecture/). September 4, 2005 version 0.9. Intent and The Pattern sections; the Adapter entry under Related Patterns."}}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Onion architecture"}]},{"type":"paragraph","content":[{"type":"text","text":"Jeffrey Palermo proposed Onion Architecture in a 2008 series. The domain model sits at the center, repository interfaces for storing and retrieving objects occupy the next layer ("},{"type":"text","text":"Repository pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/ko/wiki/리포지토리-패턴","target":null,"rel":null}}]},{"type":"text","text":"), and UI, infrastructure and tests sit at the outside. Code may depend only on layers farther inward, never on outer layers; all coupling points toward the center."},{"type":"footnote","attrs":{"id":"fn-onn102","body":"Jeffrey Palermo. [The Onion Architecture : part 1](https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/) (July 29, 2008)."}},{"type":"text","text":" Palermo used this direction to distinguish it from traditional layering, where each layer couples to the one below and to infrastructure. He identified inner layers defining interfaces and outer layers implementing them as a main principle."},{"type":"footnote","attrs":{"id":"fn-onn103","body":"Jeffrey Palermo. [The Onion Architecture : part 1](https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/) (July 29, 2008)."}},{"type":"footnote","attrs":{"id":"fn-onn301","body":"Jeffrey Palermo. [The Onion Architecture : part 3](https://jeffreypalermo.com/2008/08/the-onion-architecture-part-3/) (August 4, 2008). Key tenets of Onion Architecture."}}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Clean architecture"}]},{"type":"paragraph","content":[{"type":"text","text":"Robert C. Martin's 2012 article \"The Clean Architecture\" presented a diagram intended to combine hexagonal, onion and other architectures into one actionable idea. From the inside outward, its concentric circles contain entities, use cases, interface adapters, and frameworks and drivers. The Dependency Rule allows source-code dependencies to point only inward. When a use case must pass results to an outer presenter, it calls an interface, or output port, defined in an inner circle and implemented by the presenter, making the dependency point against the flow of control."},{"type":"footnote","attrs":{"id":"fn-clan03","body":"Robert C. Martin. [The Clean Architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html). The Clean Code Blog (August 13, 2012)."}},{"type":"text","text":" A book with the same title was published by Prentice Hall in 2017."},{"type":"footnote","attrs":{"id":"fn-clbk01","body":"Robert C. Martin. *Clean Architecture: A Craftsman's Guide to Software Structure and Design*. Prentice Hall, 2017. [Google Books](https://books.google.com/books/about/Clean_Architecture.html?id=fwvetAEACAAJ)."}}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Choosing a pattern"}]},{"type":"paragraph","content":[{"type":"text","text":"The UI technology often guides the choice. Frameworks built around data binding, such as WPF, tend to provide tools that support MVVM,"},{"type":"footnote","attrs":{"id":"fn-eso201","body":"Dino Esposito. \"Cutting Edge: Better Web Forms with the MVP Pattern\". *MSDN Magazine* 25(9) (September 2010). [Microsoft Learn archive](https://learn.microsoft.com/en-us/archive/msdn-magazine/2010/september/msdn-magazine-cutting-edge-better-web-forms-with-the-mvp-pattern). MVP and MVVM section."}},{"type":"text","text":" while Elm's standard browser-program API provides a structure connecting model, view and update."},{"type":"footnote","attrs":{"id":"fn-rdpa02","body":"Redux. [Prior Art](https://redux.js.org/understanding/history-and-design/prior-art). Elm."}},{"type":"text","text":" The table suggests which article to read first when a problem appears."}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Problem"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Pattern to read first"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Several screens must display the same model's state"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVC Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvc-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The server builds a response screen for each request"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVC Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvc-pattern","target":null,"rel":null}}]},{"type":"text","text":" (MVC in a web framework)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"You want to test a form's presentation rules without a form, in a UI with no binding engine"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVP Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvp-pattern","target":null,"rel":null}}]},{"type":"text","text":"(Passive View)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"You want to test screen state and button-enabling conditions in a UI with binding, such as WPF or .NET MAUI"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVVM Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvvm-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Several handlers change state, causing state and the screen to disagree"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVU Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvu-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"You want to reproduce an incorrect screen by replaying the messages it received"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVU Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvu-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Business rules are scattered among HTTP handlers or SQL"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Layered architecture"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI, automated tests and batch scripts must call the same business operation"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Hexagonal architecture"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Domain code directly references database-access code, preventing tests without a database"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Onion architecture, clean architecture, "},{"type":"text","text":"Repository pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/ko/wiki/리포지토리-패턴","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"External SDK calls spread throughout business code"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Adapter pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/adapter-pattern","target":null,"rel":null}}]},{"type":"text","text":", hexagonal architecture"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Signs of overuse"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adding MVVM to a form with two input fields and creating a ViewModel, command classes and binding configuration for it. Gossman also wrote that MVVM may be excessive for simple UI."},{"type":"footnote","attrs":{"id":"fn-gos601","body":"John Gossman. [Advantages and disadvantages of M-V-VM](https://learn.microsoft.com/en-us/archive/blogs/johngossman/advantages-and-disadvantages-of-m-v-vm) (2006). Full article."}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creating a view interface, view implementation and presenter for every screen, even when there are few presentation rules. Esposito wrote that MVP increases application-code complexity."},{"type":"footnote","attrs":{"id":"fn-espo01","body":"Dino Esposito. \"Cutting Edge: Better Web Forms with the MVP Pattern\". *MSDN Magazine* 25(9) (September 2010). [Microsoft Learn archive](https://learn.microsoft.com/en-us/archive/msdn-magazine/2010/september/msdn-magazine-cutting-edge-better-web-forms-with-the-mvp-pattern). Postback section."}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Splitting a screen with one input and one output into model, view and controller classes."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creating message types and a runtime loop for a screen with almost no state."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Building all four layers of entities, use cases, interface adapters and frameworks for a program with a few CRUD screens. Palermo said onion architecture was not suitable for small websites,"},{"type":"footnote","attrs":{"id":"fn-onn104","body":"Jeffrey Palermo. [The Onion Architecture : part 1](https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/) (July 29, 2008)."}},{"type":"text","text":" and Martin wrote that there need not be exactly four circles."},{"type":"footnote","attrs":{"id":"fn-clan04","body":"Robert C. Martin. [The Clean Architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html). The Clean Code Blog (August 13, 2012)."}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adding several layers of ports and adapters in front of persistence to support replacing a database that no one plans to replace. Fowler wrote that switching data-access mechanisms is often given as a reason to separate the data layer, but he rarely hears of it actually happening."},{"type":"footnote","attrs":{"id":"fn-pddd02","body":"Martin Fowler. [Presentation Domain Data Layering](https://martinfowler.com/bliki/PresentationDomainDataLayering.html). martinfowler.com (August 26, 2015)."}}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"See also"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"MVC Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvc-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"MVP Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvp-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"MVVM Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvvm-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"MVU Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvu-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Programming Patterns","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/programming-patterns","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Observer pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/observer-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adapter pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/adapter-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Repository pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/ko/wiki/리포지토리-패턴","target":null,"rel":null}}]}]}]}]}]}3e:T11e18,{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Overview"}]},{"type":"paragraph","content":[{"type":"text","text":"Suppose an order screen has a quantity field whose change handler parses the input as a number, fills an error label if it exceeds stock, and otherwise calculates the total, updates its label and enables the order button. The button's click handler checks stock again, then saves the order to a database. Even checking the single rule \"an order cannot exceed available stock\" requires opening a window, connecting a database and entering a quantity. Input interpretation, screen updates, business rules and persistence are mixed into two handlers, so none can run or change on its own. An order screen makes a useful example because one input leads through validation, calculation, display and saving, letting us compare the responsibilities that need to be separated within one situation."}]},{"type":"paragraph","content":[{"type":"text","text":"In this document, "},{"type":"text","text":"architecture patterns","marks":[{"type":"bold"}]},{"type":"text","text":" name ways to divide this code at the screen or application level. Each pattern defines the roles, the route user input and screen updates take through those roles, and the direction of source-code dependencies. The GoF design patterns introduced in "},{"type":"text","text":"Programming Patterns","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/programming-patterns","target":null,"rel":null}}]},{"type":"text","text":" have a smaller scope: they describe how objects are created, assembled and made to cooperate. The two levels work together. In MVC, for example, the model notifies views of changes through the "},{"type":"text","text":"Observer pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/observer-pattern","target":null,"rel":null}}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Architecture patterns address two kinds of questions. The division of input, presentation and presentation rules within a screen is the subject of "},{"type":"text","text":"UI architecture patterns","marks":[{"type":"bold"}]},{"type":"text","text":" such as MVC, MVP, MVVM and MVU, each covered in its own article. Boundaries and dependencies between business rules and external technologies such as databases, web frameworks and external services are the subject of "},{"type":"text","text":"application structure patterns","marks":[{"type":"bold"}]},{"type":"text","text":". Layered, hexagonal, onion and clean architecture receive a brief introduction here. In the order screen above, separating the stock rule from its handler addresses the first question; preventing that rule from directly calling database code addresses the second."}]},{"type":"paragraph","content":[{"type":"text","text":"The two kinds overlap within a program. In his article on clean architecture, Robert C. Martin places the GUI's entire MVC structure in the interface adapters layer, the third concentric circle from the inside."},{"type":"footnote","attrs":{"id":"fn-clan01","body":"Robert C. Martin. [The Clean Architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html). The Clean Code Blog (August 13, 2012)."}}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Comparing UI architecture patterns"}]},{"type":"paragraph","content":[{"type":"text","text":"All four patterns separate screen code from other logic so that some of it can be tested without opening a window, but the testable part differs. They also differ in who receives user input first and how changed values reach the screen."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"When reading the table and diagrams, follow who first receives user input, who changes state, and who transfers changed values to the screen. Displaying a total after a quantity change, for example, requires both interpreting the input and applying the new total to the screen. The comparison below follows the roles involved in these two stages. The individual articles use counters, searches and carts to expose each flow on a small scale; the table does not compare four executions of the same ordering program."}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Pattern"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Who receives user input"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"How the view updates"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"What can be tested without a UI"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Where it is used"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVC Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvc-pattern","target":null,"rel":null}}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The controller translates input into calls to the model."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"When the model announces a change, registered views read the model again and render. In web MVC, the controller selects a view and passes data for each request, without change notifications."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The model: data and rules"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Smalltalk-80; server-side web frameworks such as JSP Model 2, Ruby on Rails and ASP.NET MVC"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVP Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvp-pattern","target":null,"rel":null}}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The view passes input to the presenter, which decides how to respond."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"In Passive View, the presenter supplies display values through the view interface. In original MVP and Supervising Controller, the view observes the model or stays synchronized through data binding."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The presenter, using a fake view, and the model"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Taligent (C++, Java), Dolphin Smalltalk, Windows Forms and ASP.NET Web Forms"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVVM Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvvm-pattern","target":null,"rel":null}}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The view. A command source such as a button calls the bound command's ("},{"type":"text","text":"ICommand","marks":[{"type":"code"}]},{"type":"text","text":") "},{"type":"text","text":"Execute","marks":[{"type":"code"}]},{"type":"text","text":", while data binding transfers field values to the ViewModel."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"When the ViewModel announces changes through "},{"type":"text","text":"PropertyChanged","marks":[{"type":"code"}]},{"type":"text","text":", the binding engine reads the values and puts them into the view."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"ViewModel and Model"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"WPF, Silverlight, .NET MAUI and JavaScript's Knockout"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVU Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvu-pattern","target":null,"rel":null}}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The screen elements built by the view function translate input into messages and send them to the runtime."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The runtime receives a new model from update and calls the view function with it to build the next screen."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Update and view: pure functions"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Elm; Redux, where the reducer serves as update; Fabulous in F#"}]}]}]}]},{"type":"animatedDiagramBlock","attrs":{"title":"Four UI patterns: from input to screen update","scene":{"svg":"","css":"","javascript":""},"width":0,"height":1136,"autoplay":false,"showControls":false,"fitMode":"contain","frameMode":"content"}},{"type":"paragraph","content":[{"type":"text","text":"The figure contains four UML communication diagrams. Each panel numbers the messages from one user input through the resulting screen update. Dots indicate nested calls: 1.1.2 is the second message sent while handling 1.1. Participant names come from the examples in the individual pattern articles; "},{"type":"text","text":"Button","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"TextBlock","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"BindingExpression","marks":[{"type":"code"}]},{"type":"text","text":" (WPF) and "},{"type":"text","text":"Html","marks":[{"type":"code"}]},{"type":"text","text":" (Elm) are framework types. The MVVM panel shows a binding engine such as WPF's, rather than the example's console "},{"type":"text","text":"Binder","marks":[{"type":"code"}]},{"type":"text","text":". As a command source, the button directly calls the bound command's "},{"type":"text","text":"Execute","marks":[{"type":"code"}]},{"type":"text","text":";"},{"type":"footnote","attrs":{"id":"fn-wpmd01","body":"Microsoft Learn. [Commanding Overview (WPF)](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/commanding-overview). Command Sources."}},{"type":"text","text":" binding ("},{"type":"text","text":"BindingExpression","marks":[{"type":"code"}]},{"type":"text","text":") appears only when it receives "},{"type":"text","text":"PropertyChanged","marks":[{"type":"code"}]},{"type":"text","text":" and updates a displayed value. In the MVU panel, "},{"type":"text","text":"Render(html)","marks":[{"type":"code"}]},{"type":"text","text":" names the runtime step that applies the new screen. Class and sequence diagrams appear in each pattern's article."}]},{"type":"paragraph","content":[{"type":"text","text":"MVC and MVVM both update the screen through change notifications, but different recipients handle them. In Smalltalk-80 MVC, a view registers as a dependent of the model and receives an "},{"type":"text","text":"update","marks":[{"type":"code"}]},{"type":"text","text":" message when the model changes."},{"type":"footnote","attrs":{"id":"fn-kp8801","body":"Glenn E. Krasner, Stephen T. Pope. \"A Cookbook for Using the Model-View-Controller User Interface Paradigm in Smalltalk-80\". *Journal of Object-Oriented Programming*, August/September 1988, pp. 26-49. [PDF](https://ics.uci.edu/~redmiles/ics227-SQ04/papers/KrasnerPope88.pdf)."}},{"type":"text","text":" In MVVM, the binding engine receives the ViewModel's "},{"type":"text","text":"PropertyChanged","marks":[{"type":"code"}]},{"type":"text","text":" notification and updates the view."},{"type":"footnote","attrs":{"id":"fn-inpc01","body":"Microsoft Learn. [INotifyPropertyChanged Interface](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=net-10.0). Remarks."}},{"type":"text","text":" MVP's Passive View updates through explicit presenter calls, so the view and model have no dependency in either direction."},{"type":"footnote","attrs":{"id":"fn-fopv01","body":"Martin Fowler. \"Passive View\". martinfowler.com (July 18, 2006). [Original article](https://martinfowler.com/eaaDev/PassiveScreen.html)."}},{"type":"text","text":" In MVU, messages go to update to calculate a new model instead of subscribing to model-property changes. Update is the sole route for state changes, and the view function recalculates the screen whenever a new model arrives."},{"type":"footnote","attrs":{"id":"fn-elar01","body":"Elm Guide. [The Elm Architecture](https://guide.elm-lang.org/architecture/)."}}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"History"}]},{"type":"paragraph","content":[{"type":"text","text":"This timeline combines the histories from the four UI pattern articles with the main publications on application structure, in chronological order. Links in the source column support each row."}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Year"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Event"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Source"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1978"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Reenskaug conceived MVC while visiting Xerox PARC's LRG, from summer 1978 to summer 1979."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Reenskaug's MVC page","marks":[{"type":"link","attrs":{"href":"https://web.archive.org/web/20250227144558/https://folk.universitetetioslo.no/trygver/themes/mvc/mvc-index.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1979"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The May 12 note \"Thing-Model-View-Editor\" explained Thing, Model, View and Editor through examples."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Note PDF","marks":[{"type":"link","attrs":{"href":"https://web.archive.org/web/20251224205518/https://folk.universitetetioslo.no/trygver/1979/mvc-1/1979-05-MVC.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1979"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The December 10 note \"Models-Views-Controllers\" settled on the names model, view and controller. The editor, which lets users modify a view's information, remained a supporting element."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Note PDF","marks":[{"type":"link","attrs":{"href":"https://web.archive.org/web/20260108034112/https://folk.universitetetioslo.no/trygver/1979/mvc-2/1979-12-MVC.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1988"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Krasner and Pope published their Smalltalk-80 MVC guide in JOOP's August/September issue."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Paper PDF","marks":[{"type":"link","attrs":{"href":"https://ics.uci.edu/~redmiles/ics227-SQ04/papers/KrasnerPope88.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1995"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"After building a widget-based UI framework, the Dolphin Smalltalk team began replacing it with MVC late that year, taking about two months."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Bower, McGlashan 2000","marks":[{"type":"link","attrs":{"href":"http://web.archive.org/web/20201108220908/http://www.object-arts.com/downloads/papers/TwistingTheTriad.PDF","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1996"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Mike Potel introduced Taligent's MVP in \"MVP: Model-View-Presenter, The Taligent Programming Model for C++ and Java\"."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Potel 1996","marks":[{"type":"link","attrs":{"href":"http://www.wildcrest.com/Potel/Portfolio/mvp.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1999"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Seshadri described the JSP Model 2 architecture as a server-side implementation of MVC."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"JavaWorld article","marks":[{"type":"link","attrs":{"href":"https://www.infoworld.com/article/2164578/understanding-javaserver-pages-model-2-architecture.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2000"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Andy Bower and Blair McGlashan described Dolphin Smalltalk's adoption of MVP in the ESUG 2000 tutorial paper \"Twisting the Triad\"."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Bower, McGlashan 2000","marks":[{"type":"link","attrs":{"href":"http://web.archive.org/web/20201108220908/http://www.object-arts.com/downloads/papers/TwistingTheTriad.PDF","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2002"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Michael Feathers described a logic object pushing values to a dialog through a view interface in \"The Humble Dialog Box\"."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Feathers 2002","marks":[{"type":"link","attrs":{"href":"http://web.archive.org/web/20030403033614/http://www.objectmentor.com:80/resources/articles/TheHumbleDialogBox.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2002"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fowler's Patterns of Enterprise Application Architecture was published. Dividing enterprise applications into layers is one of its main subjects."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"martinfowler.com","marks":[{"type":"link","attrs":{"href":"https://martinfowler.com/books/eaa.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2004"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Martin Fowler published drafts of Model View Presenter and Presentation Model on July 19."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fowler, Model View Presenter","marks":[{"type":"link","attrs":{"href":"https://martinfowler.com/eaaDev/ModelViewPresenter.html","target":null,"rel":null}}]},{"type":"text","text":", "},{"type":"text","text":"Fowler, Presentation Model","marks":[{"type":"link","attrs":{"href":"https://martinfowler.com/eaaDev/PresentationModel.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2005"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Alistair Cockburn documented Ports and Adapters, also called hexagonal architecture. The article is version 0.9, dated September 4."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Cockburn, Hexagonal Architecture","marks":[{"type":"link","attrs":{"href":"https://alistair.cockburn.us/hexagonal-architecture/","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2005"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"John Gossman published an introduction to Model/View/ViewModel on his blog on October 8."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Gossman, Introduction to Model/View/ViewModel","marks":[{"type":"link","attrs":{"href":"https://learn.microsoft.com/en-us/archive/blogs/johngossman/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2005"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ruby on Rails 1.0 was released. The Rails guide describes Action Controller as the C in MVC."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Rails blog","marks":[{"type":"link","attrs":{"href":"https://rubyonrails.org/2005/12/13/rails-1-0-party-like-its-one-oh-oh","target":null,"rel":null}}]},{"type":"text","text":", "},{"type":"text","text":"Rails guide","marks":[{"type":"link","attrs":{"href":"https://guides.rubyonrails.org/action_controller_overview.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2006"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Gossman published a discussion of M-V-VM's advantages and disadvantages."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Gossman, Advantages and disadvantages of M-V-VM","marks":[{"type":"link","attrs":{"href":"https://learn.microsoft.com/en-us/archive/blogs/johngossman/advantages-and-disadvantages-of-m-v-vm","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2006"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fowler retired the MVP entry after splitting it into Supervising Controller and Passive View on July 11. He then surveyed MVC and its variations in \"GUI Architectures\" on July 18."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fowler, Model View Presenter","marks":[{"type":"link","attrs":{"href":"https://martinfowler.com/eaaDev/ModelViewPresenter.html","target":null,"rel":null}}]},{"type":"text","text":", "},{"type":"text","text":"GUI Architectures","marks":[{"type":"link","attrs":{"href":"https://martinfowler.com/eaaDev/uiArchs.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2008"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Jeffrey Palermo published the first article in \"The Onion Architecture\" series on July 29."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Palermo, part 1","marks":[{"type":"link","attrs":{"href":"https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2009"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Josh Smith's WPF MVVM article appeared in MSDN Magazine's February issue, introducing "},{"type":"text","text":"RelayCommand","marks":[{"type":"code"}]},{"type":"text","text":" and "},{"type":"text","text":"ViewModelBase","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Smith, MSDN Magazine","marks":[{"type":"link","attrs":{"href":"https://learn.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2009"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Microsoft released ASP.NET MVC 1.0 at its MIX event."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"ScottGu's Blog","marks":[{"type":"link","attrs":{"href":"https://weblogs.asp.net/scottgu/asp-net-mvc-1-0","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2010"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Dino Esposito introduced MVP implementations for Web Forms and Windows Forms in MSDN Magazine."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Esposito 2010","marks":[{"type":"link","attrs":{"href":"https://learn.microsoft.com/en-us/archive/msdn-magazine/2010/september/msdn-magazine-cutting-edge-better-web-forms-with-the-mvp-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2012"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Evan Czaplicki's thesis \"Elm: Concurrent FRP for Functional GUIs\", dated March 30, described "},{"type":"text","text":"foldp","marks":[{"type":"code"}]},{"type":"text","text":" as \"fold from the past\"."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Paper PDF","marks":[{"type":"link","attrs":{"href":"https://elm-lang.org/assets/papers/concurrent-frp.pdf","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2012"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Robert C. Martin published \"The Clean Architecture\" on his blog on August 13."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Clean Code Blog","marks":[{"type":"link","attrs":{"href":"https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2015"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The elm-architecture-tutorial README presented a program skeleton divided into model, update and view in January."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"GitHub commit","marks":[{"type":"link","attrs":{"href":"https://github.com/evancz/elm-architecture-tutorial/commit/570709a0ff0bcebfd95572fe7d6b6e7ac993d42c","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2015"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Redux 1.0.0 was released on August 14."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"GitHub release","marks":[{"type":"link","attrs":{"href":"https://github.com/reduxjs/redux/releases/tag/v1.0.0","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2016"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Elm 0.17 introduced subscriptions and replaced signals: \"A Farewell to FRP\", May 10."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"elm-lang.org","marks":[{"type":"link","attrs":{"href":"https://elm-lang.org/news/farewell-to-frp","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2016"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Elm 0.18 announcement introduced exporting and importing event histories in debug mode, on November 14."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"elm-lang.org","marks":[{"type":"link","attrs":{"href":"https://elm-lang.org/news/the-perfect-bug-report","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2017"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Martin's Clean Architecture was published by Prentice Hall."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Google Books","marks":[{"type":"link","attrs":{"href":"https://books.google.com/books/about/Clean_Architecture.html?id=fwvetAEACAAJ","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2020"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The .NET MAUI announcement mentioned C# MVU as a future feature on May 19."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":".NET Blog","marks":[{"type":"link","attrs":{"href":"https://devblogs.microsoft.com/dotnet/introducing-net-multi-platform-app-ui/","target":null,"rel":null}}]}]}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"MVP and MVVM arose by adapting or specializing earlier patterns. Potel introduced MVP as a programming model that generalized Smalltalk MVC, and described the presenter as lifting the classical Smalltalk controller's responsibilities to the application level."},{"type":"footnote","attrs":{"id":"fn-poel01","body":"Mike Potel. \"MVP: Model-View-Presenter, The Taligent Programming Model for C++ and Java\". Taligent, Inc. (1996). [PDF](http://www.wildcrest.com/Potel/Portfolio/mvp.pdf). Opening paragraph; Summary and Three User Interface Questions sections."}},{"type":"text","text":" The Dolphin Smalltalk team found that MVC connected an application model and its views only indirectly, while native Windows controls already supplied most controller behavior. The team adopted Taligent's MVP after a colleague introduced it."},{"type":"footnote","attrs":{"id":"fn-trad01","body":"Andy Bower, Blair McGlashan. \"Twisting the Triad: The evolution of the Dolphin Smalltalk MVP application framework\". ESUG 2000 Tutorial Paper (2000). [Internet Archive copy](http://web.archive.org/web/20201108220908/http://www.object-arts.com/downloads/papers/TwistingTheTriad.PDF). Model-View-Controller and Twisting the triad sections."}},{"type":"text","text":" Fowler wrote that VisualWorks Smalltalk users knew Presentation Model as Application Model. In a later note, he said the pattern was increasingly known as MVVM."},{"type":"footnote","attrs":{"id":"fn-fopm01","body":"Martin Fowler. [Presentation Model](https://martinfowler.com/eaaDev/PresentationModel.html) (2004). Also Known as; the introductory Note."}},{"type":"text","text":" Gossman described MVVM as a variation of MVC for environments in which designers build views in declarative languages such as XAML,"},{"type":"footnote","attrs":{"id":"fn-gos501","body":"John Gossman. [Introduction to Model/View/ViewModel pattern for building WPF apps](https://learn.microsoft.com/en-us/archive/blogs/johngossman/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps) (2005). Full article."}},{"type":"text","text":" while Smith treated it as a specialization of Presentation Model for WPF and Silverlight."},{"type":"footnote","attrs":{"id":"fn-smth01","body":"Josh Smith. [WPF Apps With The Model-View-ViewModel Design Pattern](https://learn.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern). *MSDN Magazine*, February 2009. The Evolution of Model-View-ViewModel."}},{"type":"text","text":" On the MVU side, the Redux documentation says Elm's updater has the same role as Redux's reducer,"},{"type":"footnote","attrs":{"id":"fn-rdpa01","body":"Redux. [Prior Art](https://redux.js.org/understanding/history-and-design/prior-art). Elm."}},{"type":"text","text":" and the Elm guide notes that The Elm Architecture inspired projects such as Redux."},{"type":"footnote","attrs":{"id":"fn-elar02","body":"Elm Guide. [The Elm Architecture](https://guide.elm-lang.org/architecture/)."}}]},{"type":"paragraph","content":[{"type":"text","text":"Application structure patterns also refer to one another. Palermo wrote that hexagonal and onion architecture share the premise of moving infrastructure to the outside and using adapter code to avoid tight coupling to it."},{"type":"footnote","attrs":{"id":"fn-onn101","body":"Jeffrey Palermo. [The Onion Architecture : part 1](https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/) (July 29, 2008)."}},{"type":"text","text":" Martin's 2012 article lists hexagonal, onion and other architectures, explaining that although their details differ, they share the aim of separating concerns by dividing software into layers."},{"type":"footnote","attrs":{"id":"fn-clan02","body":"Robert C. Martin. [The Clean Architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html). The Clean Code Blog (August 13, 2012)."}}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Application structure patterns"}]},{"type":"paragraph","content":[{"type":"text","text":"The following four patterns divide an entire application, beyond a single screen. All ask whether business rules, or the domain, depend on external technologies such as databases, web frameworks and UI."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Moving total calculation out of the order screen's button handler makes it easier to test without a window. But if the extracted code must call a real database whenever it checks stock, that check still requires a database after the screen is separated. The scope now widens to how business rules connect to persistence technology. Instead of introducing more ordering code, the following sections compare where layers and interfaces sit and which parts reference which."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Layered architecture"}]},{"type":"paragraph","content":[{"type":"text","text":"Layered architecture divides a program into layers such as presentation (UI), domain logic and data access. In Fowler's account, dependencies generally flow downward: presentation depends on the domain, which depends on the data source. He identifies the main benefit as reducing the scope of attention, since these three subjects can be considered relatively separately. He adds that a variation placing a mapper between the domain and data source, so the domain does not depend on the source, is often called hexagonal architecture."},{"type":"footnote","attrs":{"id":"fn-pddd01","body":"Martin Fowler. [Presentation Domain Data Layering](https://martinfowler.com/bliki/PresentationDomainDataLayering.html). martinfowler.com (August 26, 2015)."}},{"type":"text","text":" His 2002 book Patterns of Enterprise Application Architecture also treats dividing enterprise applications into layers as a main subject."},{"type":"footnote","attrs":{"id":"fn-eaaa01","body":"Martin Fowler. [*Patterns of Enterprise Application Architecture*](https://martinfowler.com/books/eaa.html). Addison-Wesley Professional, 2002. The author's book page; publisher and publication date from [InformIT](https://www.informit.com/store/patterns-of-enterprise-application-architecture-9780321127426)."}}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Hexagonal architecture (ports and adapters)"}]},{"type":"paragraph","content":[{"type":"text","text":"Alistair Cockburn's Ports and Adapters pattern, also called Hexagonal Architecture, aims to let users, other programs, automated tests and batch scripts drive an application in the same way, and to let development and testing proceed without real devices or databases. The application communicates with the outside through a "},{"type":"text","text":"port","marks":[{"type":"bold"}]},{"type":"text","text":", an API defined around the purpose of the conversation. Each external device has an "},{"type":"text","text":"adapter","marks":[{"type":"bold"}]},{"type":"text","text":" that translates between this API and the device's signals. The application does not know the nature of its input device, and Cockburn requires code that belongs inside to stay inside. He described the pattern as a specific use of the "},{"type":"text","text":"Adapter pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/adapter-pattern","target":null,"rel":null}}]},{"type":"text","text":"."},{"type":"footnote","attrs":{"id":"fn-heex01","body":"Alistair Cockburn. [Hexagonal (Ports & Adapters) Architecture](https://alistair.cockburn.us/hexagonal-architecture/). September 4, 2005 version 0.9. Intent and The Pattern sections; the Adapter entry under Related Patterns."}}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Onion architecture"}]},{"type":"paragraph","content":[{"type":"text","text":"Jeffrey Palermo proposed Onion Architecture in a 2008 series. The domain model sits at the center, repository interfaces for storing and retrieving objects occupy the next layer ("},{"type":"text","text":"Repository pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/repository-pattern","target":null,"rel":null}}]},{"type":"text","text":"), and UI, infrastructure and tests sit at the outside. Code may depend only on layers farther inward, never on outer layers; all coupling points toward the center."},{"type":"footnote","attrs":{"id":"fn-onn102","body":"Jeffrey Palermo. [The Onion Architecture : part 1](https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/) (July 29, 2008)."}},{"type":"text","text":" Palermo used this direction to distinguish it from traditional layering, where each layer couples to the one below and to infrastructure. He identified inner layers defining interfaces and outer layers implementing them as a main principle."},{"type":"footnote","attrs":{"id":"fn-onn103","body":"Jeffrey Palermo. [The Onion Architecture : part 1](https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/) (July 29, 2008)."}},{"type":"footnote","attrs":{"id":"fn-onn301","body":"Jeffrey Palermo. [The Onion Architecture : part 3](https://jeffreypalermo.com/2008/08/the-onion-architecture-part-3/) (August 4, 2008). Key tenets of Onion Architecture."}}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Clean architecture"}]},{"type":"paragraph","content":[{"type":"text","text":"Robert C. Martin's 2012 article \"The Clean Architecture\" presented a diagram intended to combine hexagonal, onion and other architectures into one actionable idea. From the inside outward, its concentric circles contain entities, use cases, interface adapters, and frameworks and drivers. The Dependency Rule allows source-code dependencies to point only inward. When a use case must pass results to an outer presenter, it calls an interface, or output port, defined in an inner circle and implemented by the presenter, making the dependency point against the flow of control."},{"type":"footnote","attrs":{"id":"fn-clan03","body":"Robert C. Martin. [The Clean Architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html). The Clean Code Blog (August 13, 2012)."}},{"type":"text","text":" A book with the same title was published by Prentice Hall in 2017."},{"type":"footnote","attrs":{"id":"fn-clbk01","body":"Robert C. Martin. *Clean Architecture: A Craftsman's Guide to Software Structure and Design*. Prentice Hall, 2017. [Google Books](https://books.google.com/books/about/Clean_Architecture.html?id=fwvetAEACAAJ)."}}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Choosing a pattern"}]},{"type":"paragraph","content":[{"type":"text","text":"The UI technology often guides the choice. Frameworks built around data binding, such as WPF, tend to provide tools that support MVVM,"},{"type":"footnote","attrs":{"id":"fn-eso201","body":"Dino Esposito. \"Cutting Edge: Better Web Forms with the MVP Pattern\". *MSDN Magazine* 25(9) (September 2010). [Microsoft Learn archive](https://learn.microsoft.com/en-us/archive/msdn-magazine/2010/september/msdn-magazine-cutting-edge-better-web-forms-with-the-mvp-pattern). MVP and MVVM section."}},{"type":"text","text":" while Elm's standard browser-program API provides a structure connecting model, view and update."},{"type":"footnote","attrs":{"id":"fn-rdpa02","body":"Redux. [Prior Art](https://redux.js.org/understanding/history-and-design/prior-art). Elm."}},{"type":"text","text":" The table suggests which article to read first when a problem appears."}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Problem"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Pattern to read first"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Several screens must display the same model's state"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVC Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvc-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The server builds a response screen for each request"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVC Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvc-pattern","target":null,"rel":null}}]},{"type":"text","text":" (MVC in a web framework)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"You want to test a form's presentation rules without a form, in a UI with no binding engine"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVP Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvp-pattern","target":null,"rel":null}}]},{"type":"text","text":"(Passive View)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"You want to test screen state and button-enabling conditions in a UI with binding, such as WPF or .NET MAUI"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVVM Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvvm-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Several handlers change state, causing state and the screen to disagree"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVU Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvu-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"You want to reproduce an incorrect screen by replaying the messages it received"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MVU Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvu-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Business rules are scattered among HTTP handlers or SQL"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Layered architecture"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI, automated tests and batch scripts must call the same business operation"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Hexagonal architecture"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Domain code directly references database-access code, preventing tests without a database"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Onion architecture, clean architecture, "},{"type":"text","text":"Repository pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/repository-pattern","target":null,"rel":null}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"External SDK calls spread throughout business code"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Adapter pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/adapter-pattern","target":null,"rel":null}}]},{"type":"text","text":", hexagonal architecture"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Signs of overuse"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adding MVVM to a form with two input fields and creating a ViewModel, command classes and binding configuration for it. Gossman also wrote that MVVM may be excessive for simple UI."},{"type":"footnote","attrs":{"id":"fn-gos601","body":"John Gossman. [Advantages and disadvantages of M-V-VM](https://learn.microsoft.com/en-us/archive/blogs/johngossman/advantages-and-disadvantages-of-m-v-vm) (2006). Full article."}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creating a view interface, view implementation and presenter for every screen, even when there are few presentation rules. Esposito wrote that MVP increases application-code complexity."},{"type":"footnote","attrs":{"id":"fn-espo01","body":"Dino Esposito. \"Cutting Edge: Better Web Forms with the MVP Pattern\". *MSDN Magazine* 25(9) (September 2010). [Microsoft Learn archive](https://learn.microsoft.com/en-us/archive/msdn-magazine/2010/september/msdn-magazine-cutting-edge-better-web-forms-with-the-mvp-pattern). Postback section."}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Splitting a screen with one input and one output into model, view and controller classes."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creating message types and a runtime loop for a screen with almost no state."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Building all four layers of entities, use cases, interface adapters and frameworks for a program with a few CRUD screens. Palermo said onion architecture was not suitable for small websites,"},{"type":"footnote","attrs":{"id":"fn-onn104","body":"Jeffrey Palermo. [The Onion Architecture : part 1](https://jeffreypalermo.com/2008/07/the-onion-architecture-part-1/) (July 29, 2008)."}},{"type":"text","text":" and Martin wrote that there need not be exactly four circles."},{"type":"footnote","attrs":{"id":"fn-clan04","body":"Robert C. Martin. [The Clean Architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html). The Clean Code Blog (August 13, 2012)."}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adding several layers of ports and adapters in front of persistence to support replacing a database that no one plans to replace. Fowler wrote that switching data-access mechanisms is often given as a reason to separate the data layer, but he rarely hears of it actually happening."},{"type":"footnote","attrs":{"id":"fn-pddd02","body":"Martin Fowler. [Presentation Domain Data Layering](https://martinfowler.com/bliki/PresentationDomainDataLayering.html). martinfowler.com (August 26, 2015)."}}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"See also"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"MVC Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvc-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"MVP Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvp-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"MVVM Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvvm-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"MVU Pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/mvu-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Programming Patterns","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/programming-patterns","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Observer pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/observer-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adapter pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/adapter-pattern","target":null,"rel":null}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Repository pattern","marks":[{"type":"link","attrs":{"href":"https://www.makonea.com/en-US/wiki/repository-pattern","target":null,"rel":null}}]}]}]}]}]}1d:["$","div",null,{"className":"mx-auto max-w-6xl space-y-5 px-4 py-8 sm:py-12","children":[["$","$L31",null,{"href":"/en-US/wiki/architecture-patterns/history","className":"underline","children":["← ","Revision history"]}],["$","h1",null,{"className":"text-2xl font-bold","children":"Compare revisions"}],[["$","h2",null,{"className":"break-words text-xl font-bold","children":"Architecture Patterns"}],["$","p",null,{"className":"text-sm","children":"Body changes between the two selected stored revisions. Code is not executed."}],["$","div",null,{"className":"flex flex-wrap gap-4 text-sm","children":[["$","$L31","Before: full revision",{"prefetch":false,"href":"/en-US/wiki/architecture-patterns/history/rev_96bd2db1329540a5b52947bcacff8521","className":"underline","children":["Before: full revision",": ","2026-10-26 21:06:23 UTC"]}],["$","$L31","After: full revision",{"prefetch":false,"href":"/en-US/wiki/architecture-patterns/history/rev_20b13232adbd45f49c85fab2260a5d1c","className":"underline","children":["After: full revision",": ","2026-10-26 21:47:03 UTC"]}]]}],["$","$L3c","rev_96bd2db1329540a5b52947bcacff8521:rev_20b13232adbd45f49c85fab2260a5d1c",{"before":"$3d","after":"$3e","locale":"en-US"}]]]}]

Compare revisions

Architecture Patterns

3 changed sections

Content blocks 26 → 26

Content blocks 31 → 31

Content blocks 35 → 35