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