Download to read offline
![<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> →](https://image.slidesharecdn.com/ember-140920194844-phpapp02/75/Building-Apps-with-Ember-7-2048.jpg)
![<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> →](https://image.slidesharecdn.com/ember-140920194844-phpapp02/75/Building-Apps-with-Ember-9-2048.jpg)
![[
"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
→](https://image.slidesharecdn.com/ember-140920194844-phpapp02/75/Building-Apps-with-Ember-10-2048.jpg)
![<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> →](https://image.slidesharecdn.com/ember-140920194844-phpapp02/75/Building-Apps-with-Ember-13-2048.jpg)
![<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> →](https://image.slidesharecdn.com/ember-140920194844-phpapp02/75/Building-Apps-with-Ember-14-2048.jpg)
![<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> →](https://image.slidesharecdn.com/ember-140920194844-phpapp02/75/Building-Apps-with-Ember-15-2048.jpg)
![<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> →](https://image.slidesharecdn.com/ember-140920194844-phpapp02/75/Building-Apps-with-Ember-16-2048.jpg)
Uploaded byFITC
Building Apps with Ember
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.
More Related Content
![Number_Guessing_Game_Dsbsbssbzboc[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/numberguessinggamedoc1-251206215042-a076fc05-thumbnail.jpg?width=640&height=640&fit=bounds)
Building Apps with Ember
- 2.
- 3. What is "DataBinding"
- 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 • Verypredictable performance • Transparent Updates • Maximal Decoupling Cons • Requires .set (except O.o) • Can obscure data flow
- 20. Child Mutation, PubSub <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, DirtyChecking <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, VirtualDOM <input value="{{name}}"> <h1>{{name}}</h1> (React, Ember.next?) Parent Component
- 25. Pros • Explicitdata 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.
- 33. Router, Observable Objects instantiation & navigation internal mutation & external mutation
- 34. Instantation Navigation InternalExternal 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 InternalExternal 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.