* What is Data Binding * Two-Way vs One-Time Binding * Demos & QA

1. Understand Data Binding
Cao Duy Khanh

2. Points
What is Data Binding
Two-Way vs One-Time Binding
Demos & QA

3. Background
Tool Age DOM manipulation tool like JQuery
Bronze Age Client-side templating tool like Mustache, Handlebars.js
Iron Age Angular, React

4. How we develop a web app
Before
1. HTML that defines your page
2. Get necessary data by AJAX
3. Client side templating (Script hack:
<script type="text/html">...</script>)
4. JavaScript renders the client-side template
5. JavaScript injects the template HTML into the
DOM
Today
1. HTML that defines your page and client-side
templates together
2. Get necessary data by AJAX

5. What is Data Binding
Connect the UI and business
logic of a web application
● New markup
-> Directives: ng-bind, ng-model
-> Expression {{foo}} syntax
● Controller interact through scope

6. What is Data Binding

7. How they made it? Dirty-checking
1. $$watchers are registered by directives, expression or $watch
2. $scope.$apply
3. $digest is the cycle that performs dirty checking
a. loop through $$watchers
b. fire any listener event if the watchExp does not equal the last known value
4. $digest runs till no changes detected.

8. PROS +
● Dirty-checking work on all browsers and
trustable
● Client side templates are cohesive with
your page
● No need manipulation of the DOM
● You have control over the scope of your
JavaScript
● Clean code
● Fast at rendering elements
CONS -
Dirty-checking is slow
Heavy parsing work, or extensive
manipulation and processing
Same binding directive more than once – can
break the data binding process
No built-in computed properties

9. 50ms
Slow — Anything faster than
50 ms is imperceptible to
humans and thus can be
considered as "instant".
POJO
All objects in AngularJS are
POJOs, which stands for
PLAIN OLD JAVA(SCRIPT)
OBJECTS.
10 times
If $digest loops more
than 10 times, app dies
2000
pieces
Limited — You can't really
show more than about 2000
pieces of information to a
human on a single page
10000
watchers
In modern browsers,
AngularJS just take under 6ms
to work on them

10. Demo

11. One-Time Binding
One-Time Binding IS NOT One-Way Binding
Allows for a model or view to be updated ONCE from the value set by the controller upon the first
digest cycle
Create only one watch for the expression
Digest loops faster, frees up resources once the binding is stabilized

12. How it works?
1. First $digest loop meet :: expression A, store value as V
a. If V is not undefined, mark A as deregistered watch
b. If V is undefined, A is still in watch list
1. Continue loop as normal
1. When loop finish, check all deregistered watches
a. If "value" of all deregistered watches are not undefined, remove them from watch list
b. If not, special deregistered watch is still in watch list then loop again

13. One-Time vs One-Way Binding
One-Way
One time merge
Not automatically
After merge, view and model can be updated
manually
$$watchers remains
One-Time
It's not mean run ONCE
View is updated automatically once
Model can change but view can't
Reduce $$watchers by 1

14. What else?
Reduce watch count
Avoid ng-repeat where possible
Avoid using $watch where possible
Limit DOM filters
Don't make life complicate

15. Extra Story
Angular 1.5x provide truly one-way binding
Two-way binding has been dropped from Angular 2 ?
React's one-way data flow (also called one-way binding)
There is no convention for specifying one way or two way bindings
New technologies like AngularJS will show up in ES7+

16. Q&A