Model View Madness
2 likes3,184 views
The document discusses the Model-View-Controller (MVC) pattern, describing its purpose, history, and various implementations in modern frameworks. It emphasizes MVC's role in separating development concerns, allowing for independent development of data, code, and user interface, while also introducing newer patterns like MVP and MVVM. The document concludes by highlighting the importance of adhering to MVC principles for effective code organization and maintenance.
Model View Madness
- 1. Model View Madness By Mike Wilcox May 2013
- 2. What is MVC? Maybe a picture will help...
- 3. What is MVC?
- 4. What is MVC?
- 5. What is MVC?
- 6. What is MVC?
- 7. What is MVC?
- 8. What is MVC?
- 9. What is MVC?
- 10. What is MVC?
- 11. What is MVC?
- 12. What is MVC?
- 13. MVC Defined…?
- 14. MVC Defined…? Traditional MVC is the View observes the Model which is updated by the Controller
- 15. MVC Defined…? Is this the only way to do it? Traditional MVC is the View observes the Model which is updated by the Controller
- 16. MVC Defined…? Is this the only way to do it? No Traditional MVC is the View observes the Model which is updated by the Controller
- 17. MVC Defined…? Is this the only way to do it? No Does Controller read/write the Model Traditional MVC is the View observes the Model which is updated by the Controller
- 18. MVC Defined…? Is this the only way to do it? No Does Controller read/write the Model Yes Traditional MVC is the View observes the Model which is updated by the Controller
- 19. MVC Defined…? Is this the only way to do it? No Does Controller read/write the Model Yes Does Controller read/write the View? Traditional MVC is the View observes the Model which is updated by the Controller
- 20. MVC Defined…? Is this the only way to do it? No Does Controller read/write the Model Yes Does Controller read/write the View? Maybe Traditional MVC is the View observes the Model which is updated by the Controller
- 21. MVC Defined…? Is this the only way to do it? No Does Controller read/write the Model Yes Does Controller read/write the View? Maybe Does View read/write the Model? Traditional MVC is the View observes the Model which is updated by the Controller
- 22. MVC Defined…? Is this the only way to do it? No Does Controller read/write the Model Yes Does Controller read/write the View? Maybe Does View read/write the Model? Possibly Traditional MVC is the View observes the Model which is updated by the Controller
- 23. Now that we understand MVC...
- 24. Why MVC?
- 25. Why MVC? Separates development between Data, Code and UI
- 26. Why MVC? Separates development between Data, Code and UI Each layer can be developed independently
- 27. Why MVC? Separates development between Data, Code and UI Each layer can be developed independently Minimizes turnaround time
- 28. Why MVC? Separates development between Data, Code and UI Each layer can be developed independently Minimizes turnaround time Less overlap between developers and designers
- 29. Why MVC? Separates development between Data, Code and UI Each layer can be developed independently Minimizes turnaround time Less overlap between developers and designers Views can be swapped out for Mobile, desktop, apps, etc
- 30. Why MVC? Separates development between Data, Code and UI Each layer can be developed independently Minimizes turnaround time Less overlap between developers and designers Views can be swapped out for Mobile, desktop, apps, etc BLAH BLAH BLAH!
- 31. Let’s all work together!
- 32. Let’s all work together! Validation UI/UX Styling Business Logic
- 33. Let’s all work together! Validation UI/UX Styling Business Logic Merge Hell
- 34. MVC History
- 35. MVC History
- 36. MVC History Created in the late 70s by the famous Xerox Parc labs, for their Smalltalk system
- 37. MVC History Created in the late 70s by the famous Xerox Parc labs, for their Smalltalk system First attempts to do serious UI work on any kind of scale
- 38. MVC History Created in the late 70s by the famous Xerox Parc labs, for their Smalltalk system First attempts to do serious UI work on any kind of scale Interfaces in the 70s were not very gooey.
- 39. MVC History Created in the late 70s by the famous Xerox Parc labs, for their Smalltalk system First attempts to do serious UI work on any kind of scale Interfaces in the 70s were not very gooey. MVC was developed as a UI pattern - not an application structure
- 40. MVC History
- 41. MVC History As Smalltalk developed in the 80's and 90's this led to some significant variations on the classic MVC model
- 42. MVC History As Smalltalk developed in the 80's and 90's this led to some significant variations on the classic MVC model One could say that MVC disappeared in the 90s
- 43. MVC History As Smalltalk developed in the 80's and 90's this led to some significant variations on the classic MVC model One could say that MVC disappeared in the 90s if you consider the view/controller separation to be an essential part of MVC
- 44. MVC History As Smalltalk developed in the 80's and 90's this led to some significant variations on the classic MVC model One could say that MVC disappeared in the 90s if you consider the view/controller separation to be an essential part of MVC The key MVC takeaway was Separated Presentation and Observer Synchronization
- 45. MVC History As Smalltalk developed in the 80's and 90's this led to some significant variations on the classic MVC model One could say that MVC disappeared in the 90s if you consider the view/controller separation to be an essential part of MVC The key MVC takeaway was Separated Presentation and Observer Synchronization For many, this was MVC.
- 46. MVC History Newer, derived patterns
- 47. MVC History MVP - Model View Presenter Newer, derived patterns
- 48. MVC History MVP - Model View Presenter Specialized MVC with dominant controller Newer, derived patterns
- 49. MVC History MVP - Model View Presenter Specialized MVC with dominant controller MVVM - Model View ViewModel Newer, derived patterns
- 50. MVC History MVP - Model View Presenter Specialized MVC with dominant controller MVVM - Model View ViewModel binds events to application methods Newer, derived patterns
- 51. MVC History MVP - Model View Presenter Specialized MVC with dominant controller MVVM - Model View ViewModel binds events to application methods Newer, derived patterns Most modern JavaScript libraries are loosely based on these two patterns.
- 53. Smalltalk
- 54. Smalltalk Model domain-specific knowledge or data Notify observers about state Isolated from View Modified by the Controller View The UI Observes Models Controllers Handles the input Tells Model of change in state One of the languages from which JavaScript is based Smalltalk is an object-oriented, dynamically typed, reflective programming language Created by Alan Kay at Xerox Parc No it’s not JavaScript. This is for comparison! MVC
- 55. Backbone
- 56. Backbone
- 57. Backbone Model domain-level data provides REST- persistable Models with simple routing
- 58. Backbone Model domain-level data provides REST- persistable Models with simple routing View UI and Interaction Choose your own Most devs used handlebars.js
- 59. Backbone Model domain-level data provides REST- persistable Models with simple routing View UI and Interaction Choose your own Most devs used handlebars.js Collections Groups of Models
- 60. Backbone Model domain-level data provides REST- persistable Models with simple routing View UI and Interaction Choose your own Most devs used handlebars.js Collections Groups of Models Router Maps URLs to functions Optional
- 61. Backbone Model domain-level data provides REST- persistable Models with simple routing View UI and Interaction Choose your own Most devs used handlebars.js Collections Groups of Models Router Maps URLs to functions Optional Controller Mixed with the View
- 62. Backbone Model domain-level data provides REST- persistable Models with simple routing View UI and Interaction Choose your own Most devs used handlebars.js Collections Groups of Models Router Maps URLs to functions Optional Controller Mixed with the View Most minimal of all the libraries Most popular Not opinionated (gets out of your way) Created by Jeremy Ashkenas
- 63. Backbone Model domain-level data provides REST- persistable Models with simple routing View UI and Interaction Choose your own Most devs used handlebars.js Collections Groups of Models Router Maps URLs to functions Optional Controller Mixed with the View Most minimal of all the libraries Most popular Not opinionated (gets out of your way) Created by Jeremy Ashkenas MV*
- 64. Ember
- 65. Ember
- 67. Ember Model domain-level data relationships between models View HTML templates
- 68. Ember Model domain-level data relationships between models View HTML templates Controller Manages array of objects
- 69. Ember Model domain-level data relationships between models View HTML templates State Manager Mediates between MVC parts Controller Manages array of objects
- 70. Ember Model domain-level data relationships between models View HTML templates State Manager Mediates between MVC parts Controller Manages array of objects MV*
- 71. Ember Model domain-level data relationships between models View HTML templates State Manager Mediates between MVC parts Controller Manages array of objects Opinionated and “ambitious”. Largest MV* framework Decomposes your page into a hierarchy of controls Ties in with a statemachine, hierarchical routing system Inspired by Rails and Cocoa Created by Yehuda Katz MV*
- 72. Spine.js
- 74. Spine.js Model Domain-data Controllers bind to Model events No Logo.
- 75. Spine.js Model Domain-data Controllers bind to Model events View HTML fragments Use any template language No Logo.
- 76. Spine.js Model Domain-data Controllers bind to Model events View HTML fragments Use any template language Controllers Respond to DOM events Render templates Sync Models and Views No Logo.
- 77. Spine.js Model Domain-data Controllers bind to Model events View HTML fragments Use any template language Controllers Respond to DOM events Render templates Sync Models and Views Router Hash fragment based routing No Logo.
- 78. Spine.js Model Domain-data Controllers bind to Model events View HTML fragments Use any template language Controllers Respond to DOM events Render templates Sync Models and Views Router Hash fragment based routing No Logo. MV*
- 79. Spine.js Model Domain-data Controllers bind to Model events View HTML fragments Use any template language Controllers Respond to DOM events Render templates Sync Models and Views Router Hash fragment based routing No Logo. Written in CoffeeScript. Like Backbone but… different. O’Reilly book example grew into an actual OSS project Is a kind of modified clone of Backbone (hence the name) Created by Alex MacCaw MV*
- 80. Angular.js
- 81. Angular.js
- 82. Angular.js Model Single entity object or entire data model (all entities) Live in data-bindings
- 83. Angular.js Model Single entity object or entire data model (all entities) Live in data-bindings View Rendered DOM based on what’s in the Controller and Model Templates Bindings between View and Model
- 84. Angular.js Model Single entity object or entire data model (all entities) Live in data-bindings View Rendered DOM based on what’s in the Controller and Model Templates Bindings between View and Model Controller API for observing Models API for propagating changes through the system
- 85. Angular.js Model Single entity object or entire data model (all entities) Live in data-bindings View Rendered DOM based on what’s in the Controller and Model Templates Bindings between View and Model Controller API for observing Models API for propagating changes through the system Scope Classes for augmenting Angular Scopes Augments $scope
- 86. Angular.js Model Single entity object or entire data model (all entities) Live in data-bindings View Rendered DOM based on what’s in the Controller and Model Templates Bindings between View and Model Controller API for observing Models API for propagating changes through the system Scope Classes for augmenting Angular Scopes Augments $scope MVC
- 87. Angular.js Model Single entity object or entire data model (all entities) Live in data-bindings View Rendered DOM based on what’s in the Controller and Model Templates Bindings between View and Model Controller API for observing Models API for propagating changes through the system Scope Classes for augmenting Angular Scopes Augments $scope Strictly Opinionated The AngularJS guys expect DOM-based templating will be native in browsers Made by Google MVC
- 88. Knockout.js
- 89. Knockout.js
- 90. Knockout.js Model ViewModels communicate with Model observable Models with automatic dependency detection
- 91. Knockout.js Model ViewModels communicate with Model observable Models with automatic dependency detection View Your choice of template library DOM-based templates with declarative bindings Observe and change ViewModels Automatic UI refresh
- 92. Knockout.js Model ViewModels communicate with Model observable Models with automatic dependency detection View Your choice of template library DOM-based templates with declarative bindings Observe and change ViewModels Automatic UI refresh ViewModel Business logic Unaware of Views Makes heavy use of ko.observables
- 93. Knockout.js Model ViewModels communicate with Model observable Models with automatic dependency detection View Your choice of template library DOM-based templates with declarative bindings Observe and change ViewModels Automatic UI refresh ViewModel Business logic Unaware of Views Makes heavy use of ko.observables Scope Extensive management of the context stack
- 94. Knockout.js Model ViewModels communicate with Model observable Models with automatic dependency detection View Your choice of template library DOM-based templates with declarative bindings Observe and change ViewModels Automatic UI refresh ViewModel Business logic Unaware of Views Makes heavy use of ko.observables Scope Extensive management of the context stack Not opinionated Does one thing well (UI), even on IE 6. Can work in a small section of your page Created by Steve Sanderson
- 95. Knockout.js Model ViewModels communicate with Model observable Models with automatic dependency detection View Your choice of template library DOM-based templates with declarative bindings Observe and change ViewModels Automatic UI refresh ViewModel Business logic Unaware of Views Makes heavy use of ko.observables Scope Extensive management of the context stack Not opinionated Does one thing well (UI), even on IE 6. Can work in a small section of your page Created by Steve Sanderson MVVM
- 96. Conclusion
- 97. Conclusion Routers are widely considered to not be part of the MVC pattern
- 98. Conclusion Routers are widely considered to not be part of the MVC pattern All libraries have templates and bindings in common
- 99. Conclusion Routers are widely considered to not be part of the MVC pattern All libraries have templates and bindings in common Strict MVC adherence is as important as strict AJAX adherence
- 100. Conclusion Routers are widely considered to not be part of the MVC pattern All libraries have templates and bindings in common Strict MVC adherence is as important as strict AJAX adherence MVC is simply an agreed-upon pattern to help us understand code
- 101. Conclusion Routers are widely considered to not be part of the MVC pattern All libraries have templates and bindings in common Strict MVC adherence is as important as strict AJAX adherence MVC is simply an agreed-upon pattern to help us understand code MVC should separate business logic from the UI
- 102. Conclusion Routers are widely considered to not be part of the MVC pattern All libraries have templates and bindings in common Strict MVC adherence is as important as strict AJAX adherence MVC is simply an agreed-upon pattern to help us understand code MVC should separate business logic from the UI It’s all about the bindings.
- 103. References A special mention to Addy Osmani whom has written extensively on JavaScript MVC frameworks. http://addyosmani.com/blog/digesting-javascript-mvc-pattern-abuse-or-evolution/ http://addyosmani.com/resources/essentialjsdesignpatterns/book/ http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/ http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/ http://martinfowler.com/eaaDev/uiArchs.html