Model ViewMadnessBy Mike WilcoxMay 2013
What is MVC?Maybe a picture will help...
What is MVC?
What is MVC?
What is MVC?
What is MVC?
What is MVC?
What is MVC?
What is MVC?
What is MVC?
What is MVC?
What is MVC?
MVC Defined…?
MVC Defined…?Traditional MVC is the View observes the Model which isupdated by the Controller
MVC Defined…?Is this the only way to do it?Traditional MVC is the View observes the Model which isupdated by the Controller
MVC Defined…?Is this the only way to do it?NoTraditional MVC is the View observes the Model which isupdated by the Controller
MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelTraditional MVC is the View observes the M...
MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelYesTraditional MVC is the View observes th...
MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelYesDoes Controller read/write the View?Tra...
MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelYesDoes Controller read/write the View?May...
MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelYesDoes Controller read/write the View?May...
MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelYesDoes Controller read/write the View?May...
Now that weunderstand MVC...
Why MVC?
Why MVC?Separates development between Data, Code and UI
Why MVC?Separates development between Data, Code and UIEach layer can be developed independently
Why MVC?Separates development between Data, Code and UIEach layer can be developed independentlyMinimizes turnaround time
Why MVC?Separates development between Data, Code and UIEach layer can be developed independentlyMinimizes turnaround timeL...
Why MVC?Separates development between Data, Code and UIEach layer can be developed independentlyMinimizes turnaround timeL...
Why MVC?Separates development between Data, Code and UIEach layer can be developed independentlyMinimizes turnaround timeL...
Let’s all work together!
Let’s all work together!ValidationUI/UXStylingBusinessLogic
Let’s all work together!ValidationUI/UXStylingBusinessLogicMerge Hell
MVC History
MVC History
MVC HistoryCreated in the late 70s by the famous Xerox Parclabs, for their Smalltalk system
MVC HistoryCreated in the late 70s by the famous Xerox Parclabs, for their Smalltalk systemFirst attempts to do serious UI...
MVC HistoryCreated in the late 70s by the famous Xerox Parclabs, for their Smalltalk systemFirst attempts to do serious UI...
MVC HistoryCreated in the late 70s by the famous Xerox Parclabs, for their Smalltalk systemFirst attempts to do serious UI...
MVC History
MVC HistoryAs Smalltalk developed in the 80s and 90s this ledto some significant variations on the classic MVCmodel
MVC HistoryAs Smalltalk developed in the 80s and 90s this ledto some significant variations on the classic MVCmodelOne coul...
MVC HistoryAs Smalltalk developed in the 80s and 90s this ledto some significant variations on the classic MVCmodelOne coul...
MVC HistoryAs Smalltalk developed in the 80s and 90s this ledto some significant variations on the classic MVCmodelOne coul...
MVC HistoryAs Smalltalk developed in the 80s and 90s this ledto some significant variations on the classic MVCmodelOne coul...
MVC HistoryNewer, derived patterns
MVC HistoryMVP - Model View PresenterNewer, derived patterns
MVC HistoryMVP - Model View PresenterSpecialized MVC with dominant controllerNewer, derived patterns
MVC HistoryMVP - Model View PresenterSpecialized MVC with dominant controllerMVVM - Model View ViewModelNewer, derived pat...
MVC HistoryMVP - Model View PresenterSpecialized MVC with dominant controllerMVVM - Model View ViewModelbinds events to ap...
MVC HistoryMVP - Model View PresenterSpecialized MVC with dominant controllerMVVM - Model View ViewModelbinds events to ap...
MVC JavaScript LibraryOverview
Smalltalk
SmalltalkModeldomain-specific knowledge or dataNotify observers about stateIsolated from ViewModified by the ControllerViewT...
Backbone
Backbone
BackboneModeldomain-level dataprovides REST-persistable Models withsimple routing
BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost...
BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost...
BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost...
BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost...
BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost...
BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost...
Ember
Ember
EmberModeldomain-level datarelationships between models
EmberModeldomain-level datarelationships between modelsViewHTML templates
EmberModeldomain-level datarelationships between modelsViewHTML templatesControllerManages array ofobjects
EmberModeldomain-level datarelationships between modelsViewHTML templatesState ManagerMediates between MVCpartsControllerM...
EmberModeldomain-level datarelationships between modelsViewHTML templatesState ManagerMediates between MVCpartsControllerM...
EmberModeldomain-level datarelationships between modelsViewHTML templatesState ManagerMediates between MVCpartsControllerM...
Spine.js
Spine.jsNo Logo.
Spine.jsModelDomain-dataControllers bind to ModeleventsNo Logo.
Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageNo Logo.
Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageControllersRespond to DO...
Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageControllersRespond to DO...
Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageControllersRespond to DO...
Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageControllersRespond to DO...
Angular.js
Angular.js
Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindings
Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindingsViewRendered DOM based on what’...
Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindingsViewRendered DOM based on what’...
Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindingsViewRendered DOM based on what’...
Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindingsViewRendered DOM based on what’...
Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindingsViewRendered DOM based on what’...
Knockout.js
Knockout.js
Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection
Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of tem...
Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of tem...
Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of tem...
Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of tem...
Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of tem...
Conclusion
ConclusionRouters are widely considered to not be part of theMVC pattern
ConclusionRouters are widely considered to not be part of theMVC patternAll libraries have templates and bindings in common
ConclusionRouters are widely considered to not be part of theMVC patternAll libraries have templates and bindings in commo...
ConclusionRouters are widely considered to not be part of theMVC patternAll libraries have templates and bindings in commo...
ConclusionRouters are widely considered to not be part of theMVC patternAll libraries have templates and bindings in commo...
ConclusionRouters are widely considered to not be part of theMVC patternAll libraries have templates and bindings in commo...
ReferencesA special mention to Addy Osmani whom has written extensively on JavaScript MVCframeworks.http://addyosmani.com/...
Model View Madness
Upcoming SlideShare
Loading in …5
×

Model View Madness

2,674 views

Published on

MVC JavaScript libraries are the hot trendiness right now, and this gives a brief overview of all of the most popular, as well as what exactly is MVC, MVVM, MVP, what they do, and why, or if, we need them.

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,674
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
26
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Model View Madness

  1. 1. Model ViewMadnessBy Mike WilcoxMay 2013
  2. 2. What is MVC?Maybe a picture will help...
  3. 3. What is MVC?
  4. 4. What is MVC?
  5. 5. What is MVC?
  6. 6. What is MVC?
  7. 7. What is MVC?
  8. 8. What is MVC?
  9. 9. What is MVC?
  10. 10. What is MVC?
  11. 11. What is MVC?
  12. 12. What is MVC?
  13. 13. MVC Defined…?
  14. 14. MVC Defined…?Traditional MVC is the View observes the Model which isupdated by the Controller
  15. 15. MVC Defined…?Is this the only way to do it?Traditional MVC is the View observes the Model which isupdated by the Controller
  16. 16. MVC Defined…?Is this the only way to do it?NoTraditional MVC is the View observes the Model which isupdated by the Controller
  17. 17. MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelTraditional MVC is the View observes the Model which isupdated by the Controller
  18. 18. MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelYesTraditional MVC is the View observes the Model which isupdated by the Controller
  19. 19. MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelYesDoes Controller read/write the View?Traditional MVC is the View observes the Model which isupdated by the Controller
  20. 20. MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelYesDoes Controller read/write the View?MaybeTraditional MVC is the View observes the Model which isupdated by the Controller
  21. 21. MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelYesDoes Controller read/write the View?MaybeDoes View read/write the Model?Traditional MVC is the View observes the Model which isupdated by the Controller
  22. 22. MVC Defined…?Is this the only way to do it?NoDoes Controller read/write the ModelYesDoes Controller read/write the View?MaybeDoes View read/write the Model?PossiblyTraditional MVC is the View observes the Model which isupdated by the Controller
  23. 23. Now that weunderstand MVC...
  24. 24. Why MVC?
  25. 25. Why MVC?Separates development between Data, Code and UI
  26. 26. Why MVC?Separates development between Data, Code and UIEach layer can be developed independently
  27. 27. Why MVC?Separates development between Data, Code and UIEach layer can be developed independentlyMinimizes turnaround time
  28. 28. Why MVC?Separates development between Data, Code and UIEach layer can be developed independentlyMinimizes turnaround timeLess overlap between developers and designers
  29. 29. Why MVC?Separates development between Data, Code and UIEach layer can be developed independentlyMinimizes turnaround timeLess overlap between developers and designersViews can be swapped out for Mobile, desktop, apps,etc
  30. 30. Why MVC?Separates development between Data, Code and UIEach layer can be developed independentlyMinimizes turnaround timeLess overlap between developers and designersViews can be swapped out for Mobile, desktop, apps,etcBLAH BLAH BLAH!
  31. 31. Let’s all work together!
  32. 32. Let’s all work together!ValidationUI/UXStylingBusinessLogic
  33. 33. Let’s all work together!ValidationUI/UXStylingBusinessLogicMerge Hell
  34. 34. MVC History
  35. 35. MVC History
  36. 36. MVC HistoryCreated in the late 70s by the famous Xerox Parclabs, for their Smalltalk system
  37. 37. MVC HistoryCreated in the late 70s by the famous Xerox Parclabs, for their Smalltalk systemFirst attempts to do serious UI work on any kind ofscale
  38. 38. MVC HistoryCreated in the late 70s by the famous Xerox Parclabs, for their Smalltalk systemFirst attempts to do serious UI work on any kind ofscaleInterfaces in the 70s were not very gooey.
  39. 39. MVC HistoryCreated in the late 70s by the famous Xerox Parclabs, for their Smalltalk systemFirst attempts to do serious UI work on any kind ofscaleInterfaces in the 70s were not very gooey.MVC was developed as a UI pattern - not anapplication structure
  40. 40. MVC History
  41. 41. MVC HistoryAs Smalltalk developed in the 80s and 90s this ledto some significant variations on the classic MVCmodel
  42. 42. MVC HistoryAs Smalltalk developed in the 80s and 90s this ledto some significant variations on the classic MVCmodelOne could say that MVC disappeared in the 90s
  43. 43. MVC HistoryAs Smalltalk developed in the 80s and 90s this ledto some significant variations on the classic MVCmodelOne could say that MVC disappeared in the 90sif you consider the view/controller separation to be anessential part of MVC
  44. 44. MVC HistoryAs Smalltalk developed in the 80s and 90s this ledto some significant variations on the classic MVCmodelOne could say that MVC disappeared in the 90sif you consider the view/controller separation to be anessential part of MVCThe key MVC takeaway was Separated Presentation andObserver Synchronization
  45. 45. MVC HistoryAs Smalltalk developed in the 80s and 90s this ledto some significant variations on the classic MVCmodelOne could say that MVC disappeared in the 90sif you consider the view/controller separation to be anessential part of MVCThe key MVC takeaway was Separated Presentation andObserver SynchronizationFor many, this was MVC.
  46. 46. MVC HistoryNewer, derived patterns
  47. 47. MVC HistoryMVP - Model View PresenterNewer, derived patterns
  48. 48. MVC HistoryMVP - Model View PresenterSpecialized MVC with dominant controllerNewer, derived patterns
  49. 49. MVC HistoryMVP - Model View PresenterSpecialized MVC with dominant controllerMVVM - Model View ViewModelNewer, derived patterns
  50. 50. MVC HistoryMVP - Model View PresenterSpecialized MVC with dominant controllerMVVM - Model View ViewModelbinds events to application methodsNewer, derived patterns
  51. 51. MVC HistoryMVP - Model View PresenterSpecialized MVC with dominant controllerMVVM - Model View ViewModelbinds events to application methodsNewer, derived patternsMost modern JavaScript libraries are loosely based onthese two patterns.
  52. 52. MVC JavaScript LibraryOverview
  53. 53. Smalltalk
  54. 54. SmalltalkModeldomain-specific knowledge or dataNotify observers about stateIsolated from ViewModified by the ControllerViewThe UIObserves ModelsControllersHandles the inputTells Model of change in stateOne of the languages from which JavaScript is basedSmalltalk is an object-oriented, dynamically typed,reflective programming languageCreated by Alan Kay at Xerox ParcNo it’s not JavaScript.This is for comparison!MVC
  55. 55. Backbone
  56. 56. Backbone
  57. 57. BackboneModeldomain-level dataprovides REST-persistable Models withsimple routing
  58. 58. BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost devs used handlebars.js
  59. 59. BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost devs used handlebars.jsCollectionsGroups of Models
  60. 60. BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost devs used handlebars.jsCollectionsGroups of ModelsRouterMaps URLs to functionsOptional
  61. 61. BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost devs used handlebars.jsCollectionsGroups of ModelsRouterMaps URLs to functionsOptionalControllerMixed with the View
  62. 62. BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost devs used handlebars.jsCollectionsGroups of ModelsRouterMaps URLs to functionsOptionalControllerMixed with the ViewMost minimal of all the librariesMost popularNot opinionated (gets out of your way)Created by Jeremy Ashkenas
  63. 63. BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost devs used handlebars.jsCollectionsGroups of ModelsRouterMaps URLs to functionsOptionalControllerMixed with the ViewMost minimal of all the librariesMost popularNot opinionated (gets out of your way)Created by Jeremy AshkenasMV*
  64. 64. Ember
  65. 65. Ember
  66. 66. EmberModeldomain-level datarelationships between models
  67. 67. EmberModeldomain-level datarelationships between modelsViewHTML templates
  68. 68. EmberModeldomain-level datarelationships between modelsViewHTML templatesControllerManages array ofobjects
  69. 69. EmberModeldomain-level datarelationships between modelsViewHTML templatesState ManagerMediates between MVCpartsControllerManages array ofobjects
  70. 70. EmberModeldomain-level datarelationships between modelsViewHTML templatesState ManagerMediates between MVCpartsControllerManages array ofobjectsMV*
  71. 71. EmberModeldomain-level datarelationships between modelsViewHTML templatesState ManagerMediates between MVCpartsControllerManages array ofobjectsOpinionated and “ambitious”. Largest MV* frameworkDecomposes your page into a hierarchy of controlsTies in with a statemachine, hierarchical routing systemInspired by Rails and CocoaCreated by Yehuda KatzMV*
  72. 72. Spine.js
  73. 73. Spine.jsNo Logo.
  74. 74. Spine.jsModelDomain-dataControllers bind to ModeleventsNo Logo.
  75. 75. Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageNo Logo.
  76. 76. Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageControllersRespond to DOM eventsRender templatesSync Models and ViewsNo Logo.
  77. 77. Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageControllersRespond to DOM eventsRender templatesSync Models and ViewsRouterHash fragment basedroutingNo Logo.
  78. 78. Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageControllersRespond to DOM eventsRender templatesSync Models and ViewsRouterHash fragment basedroutingNo Logo.MV*
  79. 79. Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageControllersRespond to DOM eventsRender templatesSync Models and ViewsRouterHash fragment basedroutingNo Logo.Written in CoffeeScript.Like Backbone but… different.O’Reilly book example grew into an actual OSS projectIs a kind of modified clone of Backbone (hence the name)Created by Alex MacCawMV*
  80. 80. Angular.js
  81. 81. Angular.js
  82. 82. Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindings
  83. 83. Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindingsViewRendered DOM based on what’sin the Controller and ModelTemplatesBindings between View andModel
  84. 84. Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindingsViewRendered DOM based on what’sin the Controller and ModelTemplatesBindings between View andModelControllerAPI for observing ModelsAPI for propagating changesthrough the system
  85. 85. Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindingsViewRendered DOM based on what’sin the Controller and ModelTemplatesBindings between View andModelControllerAPI for observing ModelsAPI for propagating changesthrough the systemScopeClasses for augmentingAngular ScopesAugments $scope
  86. 86. Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindingsViewRendered DOM based on what’sin the Controller and ModelTemplatesBindings between View andModelControllerAPI for observing ModelsAPI for propagating changesthrough the systemScopeClasses for augmentingAngular ScopesAugments $scopeMVC
  87. 87. Angular.jsModelSingle entity object or entiredata model (all entities)Live in data-bindingsViewRendered DOM based on what’sin the Controller and ModelTemplatesBindings between View andModelControllerAPI for observing ModelsAPI for propagating changesthrough the systemScopeClasses for augmentingAngular ScopesAugments $scopeStrictly OpinionatedThe AngularJS guys expect DOM-based templatingwill be native in browsersMade by GoogleMVC
  88. 88. Knockout.js
  89. 89. Knockout.js
  90. 90. Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection
  91. 91. Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of template libraryDOM-based templates withdeclarative bindingsObserve and changeViewModelsAutomatic UI refresh
  92. 92. Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of template libraryDOM-based templates withdeclarative bindingsObserve and changeViewModelsAutomatic UI refreshViewModelBusiness logicUnaware of ViewsMakes heavy use ofko.observables
  93. 93. Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of template libraryDOM-based templates withdeclarative bindingsObserve and changeViewModelsAutomatic UI refreshViewModelBusiness logicUnaware of ViewsMakes heavy use ofko.observablesScopeExtensive managementof the context stack
  94. 94. Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of template libraryDOM-based templates withdeclarative bindingsObserve and changeViewModelsAutomatic UI refreshViewModelBusiness logicUnaware of ViewsMakes heavy use ofko.observablesScopeExtensive managementof the context stackNot opinionatedDoes one thing well (UI), even on IE 6.Can work in a small section of your pageCreated by Steve Sanderson
  95. 95. Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of template libraryDOM-based templates withdeclarative bindingsObserve and changeViewModelsAutomatic UI refreshViewModelBusiness logicUnaware of ViewsMakes heavy use ofko.observablesScopeExtensive managementof the context stackNot opinionatedDoes one thing well (UI), even on IE 6.Can work in a small section of your pageCreated by Steve SandersonMVVM
  96. 96. Conclusion
  97. 97. ConclusionRouters are widely considered to not be part of theMVC pattern
  98. 98. ConclusionRouters are widely considered to not be part of theMVC patternAll libraries have templates and bindings in common
  99. 99. ConclusionRouters are widely considered to not be part of theMVC patternAll libraries have templates and bindings in commonStrict MVC adherence is as important as strict AJAXadherence
  100. 100. ConclusionRouters are widely considered to not be part of theMVC patternAll libraries have templates and bindings in commonStrict MVC adherence is as important as strict AJAXadherenceMVC is simply an agreed-upon pattern to help usunderstand code
  101. 101. ConclusionRouters are widely considered to not be part of theMVC patternAll libraries have templates and bindings in commonStrict MVC adherence is as important as strict AJAXadherenceMVC is simply an agreed-upon pattern to help usunderstand codeMVC should separate business logic from the UI
  102. 102. ConclusionRouters are widely considered to not be part of theMVC patternAll libraries have templates and bindings in commonStrict MVC adherence is as important as strict AJAXadherenceMVC is simply an agreed-upon pattern to help usunderstand codeMVC should separate business logic from the UIIt’s all about the bindings.
  103. 103. ReferencesA special mention to Addy Osmani whom has written extensively on JavaScript MVCframeworks.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

×