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

  • Published on
    07-May-2015

  • View
    1.634

  • Download
    2

Embed Size (px)

DESCRIPTION

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

Transcript

<ul><li>1.Its Just a ViewAn Introduction tomodel view controllerAaron Nordyke, Sr. Software Engineer</li></ul> <p>2. Separation ofConcerns 3. Spaghetti Code UGLYgthe 4. There once wasa drug namedXigris 5. XigrisXigris Xigris XigrisXigris Xigris XigrisXigris Xigris Xigris Xigris XigrisXigris 6. Modules GOOD th e 7. TwoEngineersMade a bet 8. MaximizeDeveloper Sanity 9. MVCBADASS g the 10. DATA DOM 11. Controller View to Model Interaction One DirectionView Model User Interaction Data HTML Business Logic DB InteractionObserverPattern 12. 2 View alertsControllerController Updates Modelcontroller of 3particularevent 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 alertsControllerController Updates Modelcontroller of 3particularevent View 1 Model 4 Model alerts view that it has changed.1 User interactswith a viewView 25 View grabs model dataand updates itself. 14. Controller View to Model Interaction One DirectionView Model User Interaction Data HTML Business Logic DB InteractionObserverPattern 15. Percentage of CodeViews ModelsControllers 16. The page is not the view View 17. The page contains the viewsViewView ViewViewView View ViewViewViewView View View ViewViewView 18. MVCs Bestest FriendsObserver Pattern Templating LibraryMVC Framework 19. Best Friend #1Observer Pattern 20. Controller View-Model Interaction One DirectionView Model User Interaction Data HTML Business Logic DB InteractionObserverPattern 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 SubjectObserverObserver Observer Observer 24. View-Model Relationship 1 If this certain data changes, call my function view.foo().ViewModel(Observer) (Subject)2 The change happens,3 The view grabs theso the model calls changed data from theview.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 views 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</p> <div>{{firstName}}{{lastName}}</div> <p>var html = Mustache.to_html(template,person) 30. Popular Templates}mustache.jsLogic-less templatesMinimal 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 ofModels, 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 </p>

Recommended

View more >