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.

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.

52. MVC JavaScript Library
Overview

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

66. Ember
Model
domain-level data
relationships between models

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

73. Spine.js
No Logo.

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