• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Model View Madness
 

Model View Madness

on

  • 2,062 views

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

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.

Statistics

Views

Total Views
2,062
Views on SlideShare
2,062
Embed Views
0

Actions

Likes
3
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Model View Madness Model View Madness Presentation Transcript

    • 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 Model which isupdated by the Controller
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 timeLess overlap between developers and designers
    • 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
    • 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!
    • 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 work on any kind ofscale
    • 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 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
    • 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 could say that MVC disappeared in the 90s
    • 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
    • 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
    • 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.
    • 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 patterns
    • MVC HistoryMVP - Model View PresenterSpecialized MVC with dominant controllerMVVM - Model View ViewModelbinds events to application methodsNewer, derived patterns
    • 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.
    • MVC JavaScript LibraryOverview
    • Smalltalk
    • 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
    • Backbone
    • Backbone
    • BackboneModeldomain-level dataprovides REST-persistable Models withsimple routing
    • BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost devs used handlebars.js
    • BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost devs used handlebars.jsCollectionsGroups of Models
    • BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost devs used handlebars.jsCollectionsGroups of ModelsRouterMaps URLs to functionsOptional
    • BackboneModeldomain-level dataprovides REST-persistable Models withsimple routingViewUI and InteractionChoose your ownMost devs used handlebars.jsCollectionsGroups of ModelsRouterMaps URLs to functionsOptionalControllerMixed with the View
    • 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
    • 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*
    • 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 MVCpartsControllerManages array ofobjects
    • EmberModeldomain-level datarelationships between modelsViewHTML templatesState ManagerMediates between MVCpartsControllerManages array ofobjectsMV*
    • 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*
    • 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 DOM eventsRender templatesSync Models and ViewsNo Logo.
    • Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageControllersRespond to DOM eventsRender templatesSync Models and ViewsRouterHash fragment basedroutingNo Logo.
    • Spine.jsModelDomain-dataControllers bind to ModeleventsViewHTML fragmentsUse any template languageControllersRespond to DOM eventsRender templatesSync Models and ViewsRouterHash fragment basedroutingNo Logo.MV*
    • 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*
    • 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’sin the Controller and ModelTemplatesBindings between View andModel
    • 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
    • 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
    • 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
    • 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
    • Knockout.js
    • Knockout.js
    • Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection
    • Knockout.jsModelViewModels communicatewith Modelobservable Models withautomatic dependencydetection ViewYour choice of template libraryDOM-based templates withdeclarative bindingsObserve and changeViewModelsAutomatic UI refresh
    • 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
    • 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
    • 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
    • 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
    • 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 commonStrict MVC adherence is as important as strict AJAXadherence
    • 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
    • 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
    • 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.
    • 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