Just a View: An Introduction To Model-View-Controller Pattern
-
Upload
aaron-nordyke -
Category
Technology
-
view
1.636 -
download
2
description
Transcript of Just a View: An Introduction To Model-View-Controller Pattern
Aaron Nordyke, Sr. Software Engineer
It’s Just a View
model view controller
An Introduction to
Separation of Concerns
g
UGLY e
Spaghetti Code
h t
There once was
a drug named
Xigris…
Xigris
Xigris
Xigris
Xigris
Xigris
Xigris
Xigris
Xigris
Xigris
Xigris
Xigris Xigris
Xigris
Modules
GOOD e h t
Engineers Made a bet
Two
Developer Sanity Maximize
g
MVC
BADASS e h t
DATA DOM
Controller
Model View
Data
Business Logic
DB Interaction
User Interaction
HTML
View to Model
Interaction
One Direction
Observer
Pattern
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
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
Controller
Model View
Data
Business Logic
DB Interaction
User Interaction
HTML
View to Model
Interaction
One Direction
Observer
Pattern
Models
Controllers
Views
Percentage of Code
View
The page is not the view
View
View
View
View
View
View
View
View
View
View
View
View
View
View
View
The page contains the views
MVC’s Bestest Friends
Observer Templating Pattern Library
MVC Framework
Observer Pattern
Best Friend #1
Controller
Model View
Data
Business Logic
DB Interaction
User Interaction
HTML
View-Model
Interaction
One Direction
Observer
Pattern
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
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
Observer
Subject
Observer Observer Observer
Observer
Observer
Observer
Observer
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
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
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
{{Templating}} Library
Best Friend #2
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?
//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}}
Popular Templates
mustache.js
http://mustache.github.com/
Minimal Templating on Steroids
http://www.handlebarsjs.com/
Logic-less templates
}
Best Friend #3
Framework
Sole focus Help you do MVC
• 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
“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
SUMMARY
Model-View-Controller
Separation of concerns
Friends of MVC