model view madness
DESCRIPTION
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.TRANSCRIPT
![Page 1: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/1.jpg)
Model View Madness
By Mike WilcoxMay 2013
![Page 2: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/2.jpg)
What is MVC?
Maybe a picture will help...
![Page 3: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/3.jpg)
What is MVC?
![Page 4: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/4.jpg)
What is MVC?
![Page 5: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/5.jpg)
What is MVC?
![Page 6: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/6.jpg)
What is MVC?
![Page 7: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/7.jpg)
What is MVC?
![Page 8: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/8.jpg)
What is MVC?
![Page 9: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/9.jpg)
What is MVC?
![Page 10: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/10.jpg)
What is MVC?
![Page 11: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/11.jpg)
What is MVC?
![Page 12: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/12.jpg)
What is MVC?
![Page 13: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/13.jpg)
MVC Defined…?
![Page 14: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/14.jpg)
MVC Defined…?Traditional MVC is the View observes the Model which is updated by the Controller
![Page 15: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/15.jpg)
MVC Defined…?
Is this the only way to do it?
Traditional MVC is the View observes the Model which is updated by the Controller
![Page 16: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/16.jpg)
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
![Page 17: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/17.jpg)
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
![Page 18: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/18.jpg)
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
![Page 19: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/19.jpg)
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
![Page 20: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/20.jpg)
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
![Page 21: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/21.jpg)
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
![Page 22: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/22.jpg)
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
![Page 23: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/23.jpg)
Now that we understand MVC...
![Page 24: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/24.jpg)
Why MVC?
![Page 25: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/25.jpg)
Why MVC?Separates development between Data, Code and UI
![Page 26: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/26.jpg)
Why MVC?Separates development between Data, Code and UI
Each layer can be developed independently
![Page 27: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/27.jpg)
Why MVC?Separates development between Data, Code and UI
Each layer can be developed independently
Minimizes turnaround time
![Page 28: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/28.jpg)
Why MVC?Separates development between Data, Code and UI
Each layer can be developed independently
Minimizes turnaround time
Less overlap between developers and designers
![Page 29: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/29.jpg)
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
![Page 30: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/30.jpg)
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!
![Page 31: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/31.jpg)
Let’s all work together!
![Page 32: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/32.jpg)
Let’s all work together!
ValidationUI/UXStyling
Business Logic
![Page 33: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/33.jpg)
Let’s all work together!
ValidationUI/UXStyling
Business Logic
Merge Hell
![Page 34: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/34.jpg)
MVC History
![Page 35: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/35.jpg)
MVC History
![Page 36: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/36.jpg)
MVC HistoryCreated in the late 70s by the famous Xerox Parc labs, for their Smalltalk system
![Page 37: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/37.jpg)
MVC HistoryCreated 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
![Page 38: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/38.jpg)
MVC HistoryCreated 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.
![Page 39: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/39.jpg)
MVC HistoryCreated 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
![Page 40: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/40.jpg)
MVC History
![Page 41: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/41.jpg)
MVC HistoryAs Smalltalk developed in the 80's and 90's this led to some significant variations on the classic MVC model
![Page 42: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/42.jpg)
MVC HistoryAs 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
![Page 43: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/43.jpg)
MVC HistoryAs 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
![Page 44: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/44.jpg)
MVC HistoryAs 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
![Page 45: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/45.jpg)
MVC HistoryAs 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.
![Page 46: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/46.jpg)
MVC HistoryNewer, derived patterns
![Page 47: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/47.jpg)
MVC History
MVP - Model View Presenter
Newer, derived patterns
![Page 48: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/48.jpg)
MVC History
MVP - Model View Presenter
Specialized MVC with dominant controller
Newer, derived patterns
![Page 49: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/49.jpg)
MVC History
MVP - Model View Presenter
Specialized MVC with dominant controller
MVVM - Model View ViewModel
Newer, derived patterns
![Page 50: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/50.jpg)
MVC History
MVP - Model View Presenter
Specialized MVC with dominant controller
MVVM - Model View ViewModel
binds events to application methods
Newer, derived patterns
![Page 51: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/51.jpg)
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.
![Page 52: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/52.jpg)
MVC JavaScript Library Overview
![Page 53: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/53.jpg)
Smalltalk
![Page 54: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/54.jpg)
Smalltalk
Modeldomain-specific knowledge or dataNotify observers about stateIsolated from ViewModified by the Controller
ViewThe UIObserves Models
ControllersHandles the inputTells Model of change in state
One of the languages from which JavaScript is basedSmalltalk 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
![Page 55: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/55.jpg)
Backbone
![Page 56: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/56.jpg)
Backbone
![Page 57: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/57.jpg)
BackboneModeldomain-level dataprovides REST-persistable Models with simple routing
![Page 58: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/58.jpg)
BackboneModeldomain-level dataprovides REST-persistable Models with simple routing
ViewUI and InteractionChoose your own Most devs used handlebars.js
![Page 59: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/59.jpg)
BackboneModeldomain-level dataprovides REST-persistable Models with simple routing
ViewUI and InteractionChoose your own Most devs used handlebars.js
CollectionsGroups of Models
![Page 60: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/60.jpg)
BackboneModeldomain-level dataprovides REST-persistable Models with simple routing
ViewUI and InteractionChoose your own Most devs used handlebars.js
CollectionsGroups of Models
RouterMaps URLs to functionsOptional
![Page 61: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/61.jpg)
BackboneModeldomain-level dataprovides REST-persistable Models with simple routing
ViewUI and InteractionChoose your own Most devs used handlebars.js
CollectionsGroups of Models
RouterMaps URLs to functionsOptional
ControllerMixed with the View
![Page 62: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/62.jpg)
BackboneModeldomain-level dataprovides REST-persistable Models with simple routing
ViewUI and InteractionChoose your own Most devs used handlebars.js
CollectionsGroups of Models
RouterMaps URLs to functionsOptional
ControllerMixed with the View
Most minimal of all the librariesMost popularNot opinionated (gets out of your way)Created by Jeremy Ashkenas
![Page 63: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/63.jpg)
BackboneModeldomain-level dataprovides REST-persistable Models with simple routing
ViewUI and InteractionChoose your own Most devs used handlebars.js
CollectionsGroups of Models
RouterMaps URLs to functionsOptional
ControllerMixed with the View
Most minimal of all the librariesMost popularNot opinionated (gets out of your way)Created by Jeremy Ashkenas
MV*
![Page 64: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/64.jpg)
Ember
![Page 65: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/65.jpg)
Ember
![Page 66: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/66.jpg)
EmberModeldomain-level datarelationships between models
![Page 67: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/67.jpg)
EmberModeldomain-level datarelationships between models
ViewHTML templates
![Page 68: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/68.jpg)
EmberModeldomain-level datarelationships between models
ViewHTML templates
ControllerManages array of objects
![Page 69: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/69.jpg)
EmberModeldomain-level datarelationships between models
ViewHTML templates
State ManagerMediates between MVC parts
ControllerManages array of objects
![Page 70: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/70.jpg)
EmberModeldomain-level datarelationships between models
ViewHTML templates
State ManagerMediates between MVC parts
ControllerManages array of objects
MV*
![Page 71: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/71.jpg)
EmberModeldomain-level datarelationships between models
ViewHTML templates
State ManagerMediates between MVC parts
ControllerManages array of objects
Opinionated 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 Katz
MV*
![Page 72: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/72.jpg)
Spine.js
![Page 73: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/73.jpg)
Spine.js
No Logo.
![Page 74: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/74.jpg)
Spine.jsModelDomain-dataControllers bind to Model events
No Logo.
![Page 75: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/75.jpg)
Spine.jsModelDomain-dataControllers bind to Model events
ViewHTML fragmentsUse any template language
No Logo.
![Page 76: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/76.jpg)
Spine.jsModelDomain-dataControllers bind to Model events
ViewHTML fragmentsUse any template language
ControllersRespond to DOM eventsRender templatesSync Models and Views
No Logo.
![Page 77: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/77.jpg)
Spine.jsModelDomain-dataControllers bind to Model events
ViewHTML fragmentsUse any template language
ControllersRespond to DOM eventsRender templatesSync Models and Views
RouterHash fragment based routing
No Logo.
![Page 78: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/78.jpg)
Spine.jsModelDomain-dataControllers bind to Model events
ViewHTML fragmentsUse any template language
ControllersRespond to DOM eventsRender templatesSync Models and Views
RouterHash fragment based routing
No Logo.
MV*
![Page 79: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/79.jpg)
Spine.jsModelDomain-dataControllers bind to Model events
ViewHTML fragmentsUse any template language
ControllersRespond to DOM eventsRender templatesSync Models and Views
RouterHash 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*
![Page 80: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/80.jpg)
Angular.js
![Page 81: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/81.jpg)
Angular.js
![Page 82: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/82.jpg)
Angular.jsModelSingle entity object or entire data model (all entities)Live in data-bindings
![Page 83: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/83.jpg)
Angular.jsModelSingle entity object or entire data model (all entities)Live in data-bindings
ViewRendered DOM based on what’s in the Controller and ModelTemplatesBindings between View and Model
![Page 84: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/84.jpg)
Angular.jsModelSingle entity object or entire data model (all entities)Live in data-bindings
ViewRendered DOM based on what’s in the Controller and ModelTemplatesBindings between View and Model
ControllerAPI for observing ModelsAPI for propagating changes through the system
![Page 85: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/85.jpg)
Angular.jsModelSingle entity object or entire data model (all entities)Live in data-bindings
ViewRendered DOM based on what’s in the Controller and ModelTemplatesBindings between View and Model
ControllerAPI for observing ModelsAPI for propagating changes through the system
ScopeClasses for augmenting Angular ScopesAugments $scope
![Page 86: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/86.jpg)
Angular.jsModelSingle entity object or entire data model (all entities)Live in data-bindings
ViewRendered DOM based on what’s in the Controller and ModelTemplatesBindings between View and Model
ControllerAPI for observing ModelsAPI for propagating changes through the system
ScopeClasses for augmenting Angular ScopesAugments $scope
MVC
![Page 87: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/87.jpg)
Angular.jsModelSingle entity object or entire data model (all entities)Live in data-bindings
ViewRendered DOM based on what’s in the Controller and ModelTemplatesBindings between View and Model
ControllerAPI for observing ModelsAPI for propagating changes through the system
ScopeClasses for augmenting Angular ScopesAugments $scope
Strictly OpinionatedThe AngularJS guys expect DOM-based templating will be native in browsersMade by Google
MVC
![Page 88: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/88.jpg)
Knockout.js
![Page 89: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/89.jpg)
Knockout.js
![Page 90: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/90.jpg)
Knockout.jsModelViewModels communicate with Modelobservable Models with automatic dependency detection
![Page 91: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/91.jpg)
Knockout.jsModelViewModels communicate with Modelobservable Models with automatic dependency detection View
Your choice of template libraryDOM-based templates with declarative bindingsObserve and change ViewModelsAutomatic UI refresh
![Page 92: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/92.jpg)
Knockout.jsModelViewModels communicate with Modelobservable Models with automatic dependency detection View
Your choice of template libraryDOM-based templates with declarative bindingsObserve and change ViewModelsAutomatic UI refresh
ViewModelBusiness logic Unaware of ViewsMakes heavy use of ko.observables
![Page 93: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/93.jpg)
Knockout.jsModelViewModels communicate with Modelobservable Models with automatic dependency detection View
Your choice of template libraryDOM-based templates with declarative bindingsObserve and change ViewModelsAutomatic UI refresh
ViewModelBusiness logic Unaware of ViewsMakes heavy use of ko.observables
ScopeExtensive management of the context stack
![Page 94: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/94.jpg)
Knockout.jsModelViewModels communicate with Modelobservable Models with automatic dependency detection View
Your choice of template libraryDOM-based templates with declarative bindingsObserve and change ViewModelsAutomatic UI refresh
ViewModelBusiness logic Unaware of ViewsMakes heavy use of ko.observables
ScopeExtensive management of the context stack
Not opinionatedDoes one thing well (UI), even on IE 6.Can work in a small section of your pageCreated by Steve Sanderson
![Page 95: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/95.jpg)
Knockout.jsModelViewModels communicate with Modelobservable Models with automatic dependency detection View
Your choice of template libraryDOM-based templates with declarative bindingsObserve and change ViewModelsAutomatic UI refresh
ViewModelBusiness logic Unaware of ViewsMakes heavy use of ko.observables
ScopeExtensive management of the context stack
Not opinionatedDoes one thing well (UI), even on IE 6.Can work in a small section of your pageCreated by Steve Sanderson
MVVM
![Page 96: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/96.jpg)
Conclusion
![Page 97: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/97.jpg)
ConclusionRouters are widely considered to not be part of the MVC pattern
![Page 98: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/98.jpg)
ConclusionRouters are widely considered to not be part of the MVC pattern
All libraries have templates and bindings in common
![Page 99: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/99.jpg)
ConclusionRouters 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
![Page 100: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/100.jpg)
ConclusionRouters 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
![Page 101: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/101.jpg)
ConclusionRouters 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
![Page 102: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/102.jpg)
ConclusionRouters 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.
![Page 103: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/103.jpg)
ReferencesA 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
![Page 104: Model View Madness](https://reader038.vdocuments.net/reader038/viewer/2022103109/545c5b01b0af9fa42c8b47b5/html5/thumbnails/104.jpg)