Just a View: An Introduction To Model-View-Controller Pattern
•
4 likes•2,367 views
This document discusses model-view-controller (MVC), including its separation of concerns and observer pattern. It highlights templating libraries and MVC frameworks as useful tools. MVC separates an application into three components - the model, the view, and the controller - with the observer pattern coordinating changes between them. Templating libraries and MVC frameworks make implementing MVC easier by handling concerns like updating views on model changes and separating programming logic from user interface markup.
More Related Content
What's hot
What's hot (20)
Similar to Just a View: An Introduction To Model-View-Controller Pattern
Similar to Just a View: An Introduction To Model-View-Controller Pattern (20)
Recently uploaded
Recently uploaded (20)
Just a View: An Introduction To Model-View-Controller Pattern
- 1. It’s Just a View An Introduction to model view controller Aaron Nordyke, Sr. Software Engineer
- 3. Spaghetti Code UGLY g the
- 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 th e
- 10. MVC BADASS g the
- 11. DATA DOM
- 12. Controller View to Model Interaction One Direction View Model User Interaction Data HTML Business Logic DB Interaction Observer Pattern
- 13. 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 data 1 User interacts and updates itself. with a view
- 14. 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.
- 15. Controller View to Model Interaction One Direction View Model User Interaction Data HTML Business Logic DB Interaction Observer Pattern
- 16. Percentage of Code Views Models Controllers
- 17. The page is not the view View
- 18. The page contains the views View View View View View View View View View View View View View View View
- 19. MVC’s Bestest Friends Observer Pattern Templating Library MVC Framework
- 20. Best Friend #1 Observer Pattern
- 21. Controller View-Model Interaction One Direction View Model User Interaction Data HTML Business Logic DB Interaction Observer Pattern
- 22. 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.
- 23. 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.
- 24. Observer Observer Observer Observer Subject Observer Observer Observer Observer
- 25. 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.
- 26. 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”);
- 27. Observer Pattern -- Internals 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 ];
- 28. Best Friend #2 {{Templating}} Library
- 29. 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);
- 30. 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)
- 31. Popular Templates } mustache.js Logic-less templates Minimal Templating on Steroids http://mustache.github.com/ http://www.handlebarsjs.com/
- 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