Your SlideShare is downloading. ×
0
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Just a View:  An Introduction To Model-View-Controller Pattern
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,643

Published on

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

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,643
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
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

×