<h1>Hello {{name}}</h1> !<p> You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
function person() { !
!
!
}
<h1>Hello {{name}}</h1> !<p> You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
<h1>Hello {{name}}</h1> !<p> You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
name
"Yehuda Katz"
age
32
numbers
[ "718-‐877-‐1325" ]
( )<h1>Hello Yehuda Katz</h1> !<p> You are 32 years old </p> !<ul> <li>718-‐877-‐1325</li> </ul>→
<h1>Hello {{name}}</h1> !<p> You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
name
"Yehuda Katz"
age
32
numbers
[ "718-‐877-‐1325" ]
( )<h1>Hello Yehuda Katz</h1> !<p> You are 32 years old </p> !<ul> <li>718-‐877-‐1325</li> </ul>→
<h1>Hello Yehuda Katz</h1> !<p> You are 32 years old </p> !<ul> <li>718-‐877-‐1325</li> </ul>
<h1>Hello {{name}}</h1> !<p> You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
name
"Yehuda Katz"
age
33
numbers
[ "718-‐877-‐1325" ]
( )<h1>Hello Yehuda Katz</h1> !<p> You are 33 years old </p> !<ul> <li>718-‐877-‐1325</li> </ul>→
function person() { !
!
!
}
<h1>Hello {{name}}</h1> !<p> {{input value=age}} You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
<h1>Hello {{name}}</h1> !<p> {{input value=age}} You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
name
"Yehuda Katz"
age
32
numbers
[ "718-‐877-‐1325" ]
( )<h1>Hello Yehuda Katz</h1> !<p> <input value="32"> You are 32 years old </p> !<ul> <li>718-‐877-‐1325</li> </ul>
→
<h1>Hello {{name}}</h1> !<p> {{input value=age}} You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
name
"Yehuda Katz"
age
32
numbers
[ "718-‐877-‐1325" ]
( )<h1>Hello Yehuda Katz</h1> !<p> <input value="33"> You are 32 years old </p> !<ul> <li>718-‐877-‐1325</li> </ul>
→
<h1>Hello {{name}}</h1> !<p> {{input value=age}} You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
name
"Yehuda Katz"
age
33
numbers
[ "718-‐877-‐1325" ]
( )<h1>Hello Yehuda Katz</h1> !<p> <input value="33"> You are 32 years old </p> !<ul> <li>718-‐877-‐1325</li> </ul>
→
<h1>Hello {{name}}</h1> !<p> {{input value=age}} You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
name
"Yehuda Katz"
age
33
numbers
[ "718-‐877-‐1325" ]
( )<h1>Hello Yehuda Katz</h1> !<p> <input value="33"> You are 33 years old </p> !<ul> <li>718-‐877-‐1325</li> </ul>
→
Child Mutation, Observation
<input value="{{name}}">
<h1>{{name}}</h1>
Object Model
(Polymer, Knockout, Ember)
Pros
• Very predictable performance
• Transparent Updates
• Maximal Decoupling
Cons
• Requires .set (except O.o)
• Can obscure data flow
• Very simple
• Reasonable decoupling
• Very repetitive
• Often uses globals
• Obscures data flow
Pros Cons
• Mostly transparent updates*
• Good decoupling
• No .set and works today
• Unpredictable performance
• Can obscure data flow
• *Leaky watch abstraction
Pros Cons
Child Mutation, Virtual DOM
<input value="{{name}}">
<h1>{{name}}</h1>
Parent Component
(React, Ember.next?)
• Explicit data flow
• No .set and works today
• Reasonably predictable performance
Pros
• Explicit updates
• Performance edge cases
• Asterisks around server coordination
Cons
Bootstrap Instantiation, Frameworks
• Backbone and React: up to you
• Angular: Automatically, via the app attribute
• Ember: Automatically, via the router
Navigation Instantiation, Frameworks
• Backbone: Optionally, through the router
• React: Up to you
• Angular: Optionally, via the router
• Ember: Automatically, via the router
Parent Mutation, How?
• Option 1: Indirectly, through pub/sub or observation
• Option 2: Directly, by coupling the request or response to UI
Instantation Navigation Internal External
React Your choice Your choice Explicit via CallbacksNotify parent
component, which async triggers setState
Angular <app> Optional Router TransparentNotify $scope, which async updates itself,
then transparent
Ember Router Router TransparentNotify router, which
async updates model, then transparent
Backbone Your choice, optional router
Your choice, optional router "Pub Sub" "Pub Sub"
Instantation Navigation Internal External
React Your choice Your choice Explicit via CallbacksNotify parent
component, which async triggers setState
React w/ Flux
Same as React Same as React Same as React or "Pub Sub"
Same as React or notify Flux, which
notifies listening views ("Pub Sub")
React w/ React Router
React Router React Router Same as React Same as React
React w/ Both
React Router React Router Same as React or "Pub Sub"
Same as React or notify Flux, which
notifies listening views ("Pub Sub")