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

  • 1,528 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,528
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
23
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. It’s Just a ViewAn Introduction tomodel view controllerAaron Nordyke, Sr. Software Engineer
  • 2. Separation ofConcerns
  • 3. Spaghetti Code UGLY g the
  • 4. There once wasa drug namedXigris…
  • 5. Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris XigrisXigris
  • 6. Modules GOOD th e
  • 7. TwoEngineersMade a bet
  • 8. MaximizeDeveloper Sanity
  • 9. MVC BADASS g the
  • 10. DATA DOM
  • 11. Controller  View to Model Interaction  One Direction View Model User Interaction  Data HTML  Business Logic  DB Interaction Observer Pattern
  • 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. 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. Controller  View to Model Interaction  One Direction View Model User Interaction  Data HTML  Business Logic  DB Interaction Observer Pattern
  • 15. Percentage of Code Views Models Controllers
  • 16. The page is not the view View
  • 17. The page contains the views View View View View View View View View View View View View View View View
  • 18. MVC’s Bestest FriendsObserver Pattern Templating Library MVC Framework
  • 19. Best Friend #1Observer Pattern
  • 20. Controller  View-Model Interaction  One Direction View Model User Interaction  Data HTML  Business Logic  DB Interaction Observer Pattern
  • 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. 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. Observer Observer ObserverObserver Subject ObserverObserver Observer Observer
  • 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. 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. 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. Best Friend #2{{Templating}} Library
  • 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. 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. Popular Templates}mustache.js Logic-less templates Minimal Templating on Steroidshttp://mustache.github.com/ http://www.handlebarsjs.com/
  • 31. Best Friend #3Framework
  • 32. Sole focusHelp you do MVC
  • 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. “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. SUMMARYSeparation of concernsModel-View-ControllerFriends of MVC