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

1,896 views
1,843 views

Published on

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

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,896
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
44
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×