Just A View

An Introduction To The Model-View-Controller Design Pattern In JavaScript

Transcript

1. Aaron Nordyke, Sr. Software Engineer It’s Just a View model view controller An Introduction to
2. Separation of Concerns
3. g UGLY e Spaghetti Code h t
4. There once was a drug named Xigris…
5. Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris Xigris
6. Modules GOOD e h t
7. Engineers Made a bet Two
9. Developer Sanity Maximize
10. g MVC BADASS e h t
11. DATA DOM
12. Controller Model View  Data  Business Logic  DB Interaction  User Interaction  HTML  View to Model Interaction  One Direction Observer Pattern
13. Controller Model View User interacts with a view 1 View alerts controller of particular event 2 Controller Updates Model 3 Model alerts view that it has changed. 4 View grabs model data and updates itself. 5
14. Controller Model View 1 User interacts with a view 1 View alerts controller of particular event 2 Controller Updates Model 3 Model alerts view that it has changed. 4 View grabs model data and updates itself. 5 View 2
15. Controller Model View  Data  Business Logic  DB Interaction  User Interaction  HTML  View to Model Interaction  One Direction Observer Pattern
16. Models Controllers Views Percentage of Code
17. View The page is not the view
18. View View View View View View View View View View View View View View View The page contains the views
19. MVC’s Bestest Friends Observer Templating Pattern Library MVC Framework
20. Observer Pattern Best Friend #1
21. Controller Model View  Data  Business Logic  DB Interaction  User Interaction  HTML  View-Model Interaction  One Direction Observer Pattern
22. Mother Babysitter “If little Billy gets hurt, I want you to call this number immediately.” Little Billy breaks his arm while ice-skating, so babysitter calls the supplied number. 1 2 Lame Real-world Analogy
23. Observer Subject “If this thing I care about happens, call this function.” The things happens, so the subject calls the function. 1 2 Observer and Subject
24. Observer Subject Observer Observer Observer Observer Observer Observer Observer
25. View (Observer) Model (Subject) “If this certain data changes, call my function view.foo(). The change happens, so the model calls view.foo(). 1 2 3 The view grabs the changed data from the model and updates itself. View-Model Relationship
26. view.prototype.render = function(){ //grab model data and update view html } /* * view tells model that if “change” happens, * then call view’s render function */ model.subscribe(“change”,view.render); /* * The “change” happens, so the model alerts * any observers of “change” */ model.notify(“change”); 1 2 3 Observer Pattern – Basic Use
27. var 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 ]; Observer Pattern -- Internals
28. {{Templating}} Library Best Friend #2
29. 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); Look Familiar?
30. //template <div class="wrap"> <span class="name">{{firstName}}</span> <span class="name">{{lastName}}</span> </div> var html = Mustache.to_html(template,person) Replaced with {{Templates}}
31. Popular Templates mustache.js http://mustache.github.com/ Minimal Templating on Steroids http://www.handlebarsjs.com/ Logic-less templates }
32. Best Friend #3 Framework
33. Sole focus Help you do MVC
34. • 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
35. “It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server.” Jeremy Ashkenas, Creator of Backbone.js
36. SUMMARY Model-View-Controller Separation of concerns Friends of MVC