Download - Building Apps with Ember
Hello World
What is "Data Binding"
<h1>Hello {{name}}</h1> !<p> You are {{age}} years old </p> !<ul> {{#each number in numbers}} <li>{{number}}</li> {{/each}} </ul>
Data Binding
• Instantiation
• Parent Mutation
• Child Mutation
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>→
Data Binding
• Instantiation
• Parent Mutation
• Child Mutation
<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>→
Data Binding
• Instantiation
• Parent Mutation
• Child Mutation
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, How
<input value="{{name}}">
<h1>{{name}}</h1>
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
Child Mutation, Pub Sub
<input value="{{name}}">
<h1>{{name}}</h1>
Event Bus
(Flux, Backbone)
• Very simple
• Reasonable decoupling
• Very repetitive
• Often uses globals
• Obscures data flow
Pros Cons
Child Mutation, Dirty Checking
<input value="{{name}}">
<h1>{{name}}</h1>
Post-Event
(Angular)
• 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
Data Binding
• Instantiation
• Parent Mutation
• Child Mutation
Instantiation, When?
• App bootstrap
• Page navigation
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, When?
• Ajax response
• WebSockets
Parent Mutation, How?
• Option 1: Indirectly, through pub/sub or observation
• Option 2: Directly, by coupling the request or response to UI
Ideally, Consistent
Router, Observable Objects
instantiation &
navigation
internal mutation &
external mutation
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")
Hello World
