Model View Madness

By 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 is updated by the Controller

MVC Defined…?

Is this the only way to do it?

Traditional MVC is the View observes the Model which is updated by the Controller

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

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

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

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

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

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

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

Now that we understand MVC...

Why MVC?

Why MVC?Separates development between Data, Code and UI

Why MVC?Separates development between Data, Code and UI

Each layer can be developed independently

Why MVC?Separates development between Data, Code and UI

Each layer can be developed independently

Minimizes turnaround time

Why MVC?Separates development between Data, Code and UI

Each layer can be developed independently

Minimizes turnaround time

Less overlap between developers and designers

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

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!

Let’s all work together!

Let’s all work together!

ValidationUI/UXStyling

Business Logic

Let’s all work together!

ValidationUI/UXStyling

Business Logic

Merge Hell

MVC History

MVC History

MVC HistoryCreated in the late 70s by the famous Xerox Parc labs, for their Smalltalk system

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

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 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

MVC History

MVC HistoryAs Smalltalk developed in the 80's and 90's this led to some significant variations on the classic MVC model

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

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

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

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.

MVC HistoryNewer, derived patterns

MVC History

MVP - Model View Presenter

Newer, derived patterns

MVC History

MVP - Model View Presenter

Specialized MVC with dominant controller

Newer, derived patterns

MVC History

MVP - Model View Presenter

Specialized MVC with dominant controller

MVVM - Model View ViewModel

Newer, derived patterns

MVC History

MVP - Model View Presenter

Specialized MVC with dominant controller

MVVM - Model View ViewModel

binds events to application methods

Newer, derived patterns

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.

MVC JavaScript Library Overview

Smalltalk

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

Backbone

Backbone

BackboneModeldomain-level dataprovides REST-persistable Models with simple routing

BackboneModeldomain-level dataprovides REST-persistable Models with simple routing

ViewUI and InteractionChoose your own Most devs used handlebars.js

BackboneModeldomain-level dataprovides REST-persistable Models with simple routing

ViewUI and InteractionChoose your own Most devs used handlebars.js

CollectionsGroups of Models

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

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

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

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*

Ember

Ember

EmberModeldomain-level datarelationships between models

EmberModeldomain-level datarelationships between models

ViewHTML templates

EmberModeldomain-level datarelationships between models

ViewHTML templates

ControllerManages array of objects

EmberModeldomain-level datarelationships between models

ViewHTML templates

State ManagerMediates between MVC parts

ControllerManages array of objects

EmberModeldomain-level datarelationships between models

ViewHTML templates

State ManagerMediates between MVC parts

ControllerManages array of objects

MV*

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*

Spine.js

Spine.js

No Logo.

Spine.jsModelDomain-dataControllers bind to Model events

No Logo.

Spine.jsModelDomain-dataControllers bind to Model events

ViewHTML fragmentsUse any template language

No Logo.

Spine.jsModelDomain-dataControllers bind to Model events

ViewHTML fragmentsUse any template language

ControllersRespond to DOM eventsRender templatesSync Models and Views

No Logo.

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.

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*

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*

Angular.js

Angular.js

Angular.jsModelSingle entity object or entire data model (all entities)Live in data-bindings

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

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

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

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

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

Knockout.js

Knockout.js

Knockout.jsModelViewModels communicate with Modelobservable Models with automatic dependency detection

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

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

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

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

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

Conclusion

ConclusionRouters are widely considered to not be part of the MVC pattern

ConclusionRouters are widely considered to not be part of the MVC pattern

All libraries have templates and bindings in common

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

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

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

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.

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