2. 02.07.2016
2
About me …
• Manfred Steyer
• SOFTWAREarchitekt.at
• Trainer & Consultant
• Focus: Angular
Page 3
Manfred Steyer
Bindings in Angular 2
Page 4
3. 02.07.2016
3
Some Goals of Angular 2
Page 5
Performance Components
Predictability
Data-Binding in Angular 1.x
Page 6
Model Model Directive
Nearly everything can depend on everything
Solution: Multiple Digest-Cycles
4. 02.07.2016
4
Component-Tree in Angular 2
Page 7
Component for whole App
Component (e. g. list)
Component
(e. g. list-item)
Component
(e. g. list-item)
Rules for Property-Bindings
• A Component only depends on its own data (and indirectly on its
parents data)
• A Component must not depend on its children data!
• Dependency Graph is a tree
• Angular only needs one iteration („digest“)
to update tree
Page 9
11. 02.07.2016
11
Angular traverses the whole tree by default
flights
flight flight
{{ flight.id }} {{ flight.id }}
FlightSearch
Card Card
Immutables
• Objects that can not change
• When represented data changes, they have been replaced by
an other immutable
• Easy to find out if there was a change
• oldObject == newObject
• With or without libs (like immutable.js)
12. 02.07.2016
12
Immutables
const ONE_MINUTE = 1000 * 60;
let oldFlights = this.flights;
let oldFlight = oldFlights[0]; // Flight to change!
let oldFlightDate = new Date(oldFlight.date); // Date to change
Immutables
let newFlightDate = new Date(oldFlightDate.getTime() + ONE_MINUTE * 15);
let newFlight = {
id: oldFlight.id,
from: oldFlight.from,
to: oldFlight.to,
date: newFlightDate.toISOString()
};
let newFlights = [
newFlight,
...oldFlights.slice(1, this.flights.length)
];
this.flights = newFlights;
13. 02.07.2016
13
Checking for Change
console.debug("Array: " + (oldFlights == newFlights)); // false
console.debug("#0: " + (oldFlights[0] == newFlights[0])); // false
console.debug("#1: " + (oldFlights[1] == newFlights[1])); // true
Immutables and Angular 2
• Data flows top/down
• When Angular 2 assumes that every @Input of a component
is an immutable it just has to check if they changed
• If not: Skip component and every child component (whole
sub-tree)
14. 02.07.2016
14
Immutables and Angular
flights
flight flight
{{ flight.id }} {{ flight.id }}
FlightSearch
Card Card
Change
How to tell Angular to assume Immutables?
@Component({
[…]
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FlightCard {
[…]
@Input flight;
}