class: center, middle .center[![Patterns Word Cloud](wordcloud.png)] # A Journey Through the Land of # Model-View-* Patterns By S. M. Masoud Sadrnezhaad --- # MV* Families Model-View-Controller (MVC) is a common design pattern to integrate a user interface with the application domain logic. MVC separates the representation of the application domain (Model) from the display of the application’s state (View) and user interaction control (Controller). However, studying the literature reveals that a variety of other related patterns exists which we denote with Model-View-* (MV*) design patterns. We discusses existing MV* patterns classified in three main families: * Model-View-Controller (MVC) * Model-View-View Model (MVVM) * Model-View-Presenter (MVP) We take a practitioners point of view and emphasize the essentials of each family as well as the differences. --- # Problem Every software program that requires at least a bit of interactivity with users requires a user interface. This makes the integration of the user interface with the application domain a recurring engineering problem. We focus on design patterns to solve this integration problem. Design patterns provide generic solution schemes for recurring design problems. This talk aim to bring more clarity in the variety of MV* design patterns and help practitioners to make better grounded decisions when selecting patterns. --- # MV* Pattern Families .center[![Patterns Word Cloud](mv-star-patterns.png)] --- # Widget-based User Interfaces Also called Forms and Controls. The developer arranges a set of predefined user interface widgets on a form (window) writes code that handles all the logic in the Form class. Data displaying, user input handling, calculations, domain model handling is performed in the same class. The developer has unlimited access to both user interface widgets and domain data. Domain and user interface logic are mixed, there is no separation between the domain and user interface concerns, which may hamper maintainability. --- # Widget-based User Interfaces (Contd) Still, this approach has several benefits, which makes it a popular way of building user interfaces in many modern tools: * Simplicity: widget-based user interfaces are very sim- ple to understand: the widgets on the form become fields of a Form class, so the developer can access the widgets just as any other field. * Consistency: the approach employs flow synchro- nization. Synchronization is handled explicitly: target views/widgets are modified by direct calls, so the code is easy to understand. * Efficiency: creating of sophisticated multi-tier archi- tecture for applications that do not require rich user interfaces or synchronization logic would be overkill. Keeping the design simple in such cases redu Widget-based UI is a perfect choice for small applications or applications with simple user interfaces. --- # Smalltalk MVC Separate the concerns of the application domain and its representation in three modules, each handling a specific task: store and manage data, display data, and handle user input. .center[![Patterns Word Cloud](smalltalkmvc.png)] --- # Web MVC Separate the domain logic from the presentation logic for the domain of Web applications in three components with distinct responsibilities: Model for storing data, Controller for handling user actions, and View to generate HTML layout. .center[![Patterns Word Cloud](webmvc.png)] --- # Application Model Separate the domain logic from the presentation logic in three modules with distinct responsibilities: store and manage data, displaying data, and handling user input. Domain data and view state handling should be treated separately. .center[![Patterns Word Cloud](application-model.png)] --- # Microsoft MVVM Separate the domain logic from the presentation logic in three modules with distinct responsibilities: handle the domain data (Model), handle view state and user interaction (View Model), and handle rendering of the visual user interface (View). Furthermore, bind View and View Model in declarative manner by leveraging on observer synchronization. .center[![Patterns Word Cloud](microsoft-mvvm.png)] --- # Dolphin Smalltalk Separate the domain logic from the presentation logic in three modules with distinct tasks: handle the domain data (Model), handle basic user input functionality and user interface rendering (View), and supervise the synchronization between View and Model by direct access to the components (Presenter). .center[![Patterns Word Cloud](dolphin-smalltalk.png)] --- # Supervising Controller Separate the domain logic from the presentation logic by creating three modules with distinct tasks: handle the domain data and possibly the presentation state (Model), handle simple mapping between the user interface and the data of the model (View), and handle input response and complex view logic (Presenter). .center[![Patterns Word Cloud](supervising-controller.png)] --- # Passive View Separate the domain logic from the presentation logic by creating three modules with distinct tasks: handle the domain data (Model), provide a representation of the data (View), and handle user synchronisation and View state management (Presenter). .center[![Patterns Word Cloud](passive-view.png)] --- # Template View Template View allows you write the presentation in the structure of the page and embed markers into the page to indicate where dynamic content needs to go. .center[![Patterns Word Cloud](template-view-python.png)] --- # Template View (Contd) .center[![Patterns Word Cloud](template-view-php.png)] --- # Transform View The basic notion of Transform View is writing a program that looks at domain-oriented data and converts it to HTML. .center[![Patterns Word Cloud](transform-view.png)] --- # Two Steps View The first stage assembles the information in a logical screen structure that is suggestive of the display elements yet contains no HTML. The second stage takes that presentation-oriented structure and renders it into HTML. .center[![Patterns Word Cloud](two-steps.png)] --- # Two Steps View (Contd) .center[![Patterns Word Cloud](two-steps-view.png)] --- # Conclusions MV* design patterns provide reusable solutions to the recurring problem of synchronizing user interfaces with domain data. We have provided a overview of the major MV* pattern families and discussed concrete patterns of each family. The study shows that there is no single dominating leader, as each pattern family has its particular pros and cons. Widget-based user interfaces (which is not strictly a MV* pattern family) are easy to implement for simple applications. However, as the approach does not separates domain and interface concerns, maintainability may become problematic When the complexity of the user interface grows. --- # Conclusions (Contd) MVC patterns are the pioneering patterns for synchronizing user interfaces with domain data and an excellent choice for Web-based applications as the Web structure naturally supports the division of responsibilities of the components for MVC patterns. However, these patterns suffer from poor handling of view state logic, and assume decoupled View and Controller which does not mach with many state of the frameworks in practice. This evaluation summary brings us to the conclusion that the developer must be careful when selecting a pattern for a problem at hand. The decision must be grounded on the use cases at hand, the primary quality requirements, and the underlying technology that is chosen. One should not stick to particular realization of a pattern. Patterns provide flexibility and can be tailored to the problem at hand, or alternatively concepts of different patterns can be combined to provide a proper solution. --- # References * A Journey Through the Land of Model-View-* Design Patterns By Artem Syromiatnikov, Danny Weyns * Patterns of Enterprise Application Architecture, PP. (350-378) By Martin Fowler, David Rice, Matthew Foemmel, Edward Hieatt, Robert Mee, Randy Stafford * Patterns in Software Engineering Course By Raman Ramsin --- class: center, middle .center[![Patterns Word Cloud](wordcloud.png)] # Thank you. Any questions?