The document discusses data binding techniques in frontend frameworks. It explains that data binding involves instantiation, parent mutation, and child mutation. It provides examples of how different frameworks handle instantiation during app bootstrap and navigation. It also compares approaches for handling parent mutation from external sources like AJAX responses as well as internal mutations, and discusses the benefits and tradeoffs of various techniques like object observation, pub/sub, and virtual DOM approaches.

2. Hello World

3. What is "Data Binding"

4. <h1>Hello
{{name}}</h1>
!
<p>
You
are
{{age}}
years
old
</p>
!
<ul>
{{#each
number
in
numbers}}
<li>{{number}}</li>
{{/each}}
</ul>

5. Data Binding
• Instantiation
• Parent Mutation
• Child Mutation

6. function
person()
{
!
!
!
}
<h1>Hello
{{name}}</h1>
!
<p>
You
are
{{age}}
years
old
</p>
!
<ul>
{{#each
number
in
numbers}}
<li>{{number}}</li>
{{/each}}
</ul>

7. <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> →

8. Data Binding
• Instantiation
• Parent Mutation
• Child Mutation

9. <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> →

10. [
"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
33
numbers
33
→

11. Data Binding
• Instantiation
• Parent Mutation
• Child Mutation

12. 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>

13. <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> →

14. <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> →

15. <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> →

16. <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> →

17. Child Mutation, How
<input
value="{{name}}">
<h1>{{name}}</h1>

18. Child Mutation, Observation
<input
value="{{name}}">
<h1>{{name}}</h1>
(Polymer, Knockout, Ember)
Object Model

19. Pros
• Very predictable performance
• Transparent Updates
• Maximal Decoupling
Cons
• Requires .set (except O.o)
• Can obscure data flow

20. Child Mutation, Pub Sub
<input
value="{{name}}">
<h1>{{name}}</h1>
(Flux, Backbone)
Event Bus

21. Pros Cons
• Very simple
• Reasonable decoupling
• Very repetitive
• Often uses globals
• Obscures data flow

22. Child Mutation, Dirty Checking
<input
value="{{name}}">
<h1>{{name}}</h1>
(Angular)
Post-Event

23. Pros Cons
• Mostly transparent updates*
• Good decoupling
• No .set and works today
• Unpredictable performance
• Can obscure data flow
• *Leaky watch abstraction

24. Child Mutation, Virtual DOM
<input
value="{{name}}">
<h1>{{name}}</h1>
(React, Ember.next?)
Parent
Component

25. Pros
• Explicit data flow
• No .set and works today
• Reasonably predictable
performance
Cons
• Explicit updates
• Performance edge cases
• Asterisks around server
coordination

26. Data Binding
• Instantiation
• Parent Mutation
• Child Mutation

27. Instantiation, When?
• App bootstrap
• Page navigation

28. Bootstrap Instantiation, Frameworks
• Backbone and React: up to you
• Angular: Automatically, via the app attribute
• Ember: Automatically, via the router

29. Navigation Instantiation, Frameworks
• Backbone: Optionally, through the router
• React: Up to you
• Angular: Optionally, via the router
• Ember: Automatically, via the router

30. Parent Mutation, When?
• Ajax response
• WebSockets

31. Parent Mutation, How?
• Option 1: Indirectly, through pub/sub or observation
• Option 2: Directly, by coupling the request or response to UI

32. Ideally, Consistent

33. Router, Observable Objects
instantiation
&
navigation
internal mutation
&
external mutation

34. Instantation Navigation Internal External
React Your choice Your choice Explicit via Callbacks
Notify parent
component, which
async triggers setState
Angular <app> Optional Router Transparent
Notify $scope, which
async updates itself,
then transparent
Ember Router Router Transparent
Notify router, which
async updates model,
then transparent
Backbone Your choice, optional
router
Your choice, optional
router "Pub Sub" "Pub Sub"

35. Instantation Navigation Internal External
React Your choice Your choice Explicit via Callbacks
Notify 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")

36. Hello World