Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
It’s Just a ViewAn Introduction tomodel view controllerAaron Nordyke, Sr. Software Engineer
Separation ofConcerns
Spaghetti Code           UGLY      g          the
There once wasa drug namedXigris…
Xigris                Xigris           Xigris                         Xigris            Xigris Xigris                     ...
Modules       GOOD     th e
TwoEngineersMade a bet
MaximizeDeveloper Sanity
MVC      BADASS g     the
DATA   DOM
Controller                View to Model                 Interaction                One Direction      View              ...
2   View alerts                              Controller              Controller Updates Model    controller of            ...
2   View alerts                      Controller              Controller Updates Model    controller of                    ...
Controller                View to Model                 Interaction                One Direction      View              ...
Percentage of Code                Views     Models              Controllers
The page is not the view         View
The page contains the views                      View          View               View                      View          ...
MVC’s Bestest FriendsObserver Pattern   Templating Library          MVC Framework
Best Friend #1Observer                 Pattern
Controller                View-Model                 Interaction                One Direction      View                 ...
Lame Real-world Analogy           1   “If little Billy gets hurt,               I want you to call this               numb...
Observer and Subject           1   “If this thing I care               about happens,               call this function.”Ob...
Observer   Observer   ObserverObserver   Subject    ObserverObserver   Observer   Observer
View-Model Relationship                 1   “If this certain data                     changes, call my                    ...
Observer Pattern – Basic Use 3   view.prototype.render = function(){         //grab model data and update view html     } ...
Observer Pattern -- Internalsvar events = [     {“abitraryString1” : [function1, function2] },     //model.notify(“arbitra...
Best Friend #2{{Templating}}      Library
Look Familiar?var container = Util.cep("div",{    "className":"wrap",});var firstName = Util.cep("span",{   "className":"n...
Replaced with {{Templates}}//template<div class="wrap">  <span class="name">{{firstName}}</span>  <span class="name">{{las...
Popular Templates}mustache.js    Logic-less templates      Minimal Templating on Steroidshttp://mustache.github.com/    ht...
Best Friend #3Framework
Sole focusHelp you do MVC
• Classes for the separate concerns of    Models, Views, and Controllers•   Observer Pattern built-in•   Templating built-...
“Its all too easy to createJavaScript applications that endup as tangled piles of jQueryselectors and callbacks, all tryin...
SUMMARYSeparation of concernsModel-View-ControllerFriends of MVC
Just a View:  An Introduction To Model-View-Controller Pattern
Upcoming SlideShare
Loading in …5
×

Just a View: An Introduction To Model-View-Controller Pattern

2,546 views

Published on

Presentation I gave to my team as an introduction to MVC.

Published in: Technology, Business
  • Login to see the comments

Just a View: An Introduction To Model-View-Controller Pattern

  1. 1. It’s Just a ViewAn Introduction tomodel view controllerAaron Nordyke, Sr. Software Engineer
  2. 2. Separation ofConcerns
  3. 3. Spaghetti Code UGLY g the
  4. 4. There once wasa drug namedXigris…
  5. 5. Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris XigrisXigris
  6. 6. Modules GOOD th e
  7. 7. TwoEngineersMade a bet
  8. 8. MaximizeDeveloper Sanity
  9. 9. MVC BADASS g the
  10. 10. DATA DOM
  11. 11. Controller  View to Model Interaction  One Direction View Model User Interaction  Data HTML  Business Logic  DB Interaction Observer Pattern
  12. 12. 2 View alerts Controller Controller Updates Model controller of 3 particular event 4 Model alerts view that it has changed. View Model 5 View grabs model data1 User interacts and updates itself. with a view
  13. 13. 2 View alerts Controller Controller Updates Model controller of 3 particular event View 1 Model 4 Model alerts view that it has changed.1 User interacts with a view View 2 5 View grabs model data and updates itself.
  14. 14. Controller  View to Model Interaction  One Direction View Model User Interaction  Data HTML  Business Logic  DB Interaction Observer Pattern
  15. 15. Percentage of Code Views Models Controllers
  16. 16. The page is not the view View
  17. 17. The page contains the views View View View View View View View View View View View View View View View
  18. 18. MVC’s Bestest FriendsObserver Pattern Templating Library MVC Framework
  19. 19. Best Friend #1Observer Pattern
  20. 20. Controller  View-Model Interaction  One Direction View Model User Interaction  Data HTML  Business Logic  DB Interaction Observer Pattern
  21. 21. Lame Real-world Analogy 1 “If little Billy gets hurt, I want you to call this number immediately.” Mother Babysitter 2 Little Billy breaks his arm while ice-skating, so babysitter calls the supplied number.
  22. 22. Observer and Subject 1 “If this thing I care about happens, call this function.”Observer Subject 2 The things happens, so the subject calls the function.
  23. 23. Observer Observer ObserverObserver Subject ObserverObserver Observer Observer
  24. 24. View-Model Relationship 1 “If this certain data changes, call my function view.foo(). View Model (Observer) (Subject)2 The change happens, 3 The view grabs the so the model calls changed data from the view.foo(). model and updates itself.
  25. 25. Observer Pattern – Basic Use 3 view.prototype.render = function(){ //grab model data and update view html } /* * view tells model that if “change” happens, * then call view’s render function */ 1 model.subscribe(“change”,view.render); /* * The “change” happens, so the model alerts * any observers of “change” */ 2 model.notify(“change”);
  26. 26. Observer Pattern -- Internalsvar events = [ {“abitraryString1” : [function1, function2] }, //model.notify(“arbitraryString2”) would //cause function2 and function3 to be called. {“abritraryString2” : [function2, function3] }, //model.subscribe(“arbitraryString3”,function4) //would add function4 to this list {“abritraryString3” : [function3] }, //model.subscribe(“arbitraryString4”,function1) //would add a new member to the events array];
  27. 27. Best Friend #2{{Templating}} Library
  28. 28. Look Familiar?var container = Util.cep("div",{ "className":"wrap",});var firstName = Util.cep("span",{ "className":"name", "innerHTML":person.firstName});var lastName = Util.cep("span",{ "className":"name", "innerHTML":person.lastName});Util.ac(firstName,container);Util.ac(lastName,container);
  29. 29. Replaced with {{Templates}}//template<div class="wrap"> <span class="name">{{firstName}}</span> <span class="name">{{lastName}}</span></div>var html = Mustache.to_html(template,person)
  30. 30. Popular Templates}mustache.js Logic-less templates Minimal Templating on Steroidshttp://mustache.github.com/ http://www.handlebarsjs.com/
  31. 31. Best Friend #3Framework
  32. 32. Sole focusHelp you do MVC
  33. 33. • Classes for the separate concerns of Models, Views, and Controllers• Observer Pattern built-in• Templating built-in• Event Delegation built-in• Small -- 4.6kb, compressed
  34. 34. “Its all too easy to createJavaScript applications that endup as tangled piles of jQueryselectors and callbacks, all tryingfrantically to keep data in syncbetween the HTML UI, yourJavaScript logic, and the databaseon your server.” Jeremy Ashkenas, Creator of Backbone.js
  35. 35. SUMMARYSeparation of concernsModel-View-ControllerFriends of MVC

×