These are the slides from my presentation at Angular Connect 2016. Check out http://onehungrymind.com/ for additional resources.

1. Go Beast Mode
with Realtime
Reactive Interfaces
in Angular and Firebase

2. State management

3. Controlling flow

4. Code volume

5. Enter Observables

6. return this.http.get(this.URLS.FETCH)
.map(res => res.json())
.toPromise();
Problem solved!

7. Observables give us a powerful way to encapsulate,
transport and transform data from user interactions
to create powerful and immersive experiences.

8. Encapsulate
Transport
Transform

9. Encapsulate
Transport
Transform

10. Encapsulate
Transport
Transform

11. Iterator Pattern Observer Pattern
State Communication

12. Communicate
state over time

13. Observable stream

14. Values over time
SINGLE MULTIPLE
SYNCHRONOUS Function Enumerable
ASYNCHRONOUS Promise Observable

15. Value consumption
SINGLE MULTIPLE
PULL Function Enumerable
PUSH Promise Observable

16. But
observables
are hard!!!

17. The
Observable
Stream

18. input output

19. output input

20. The
Basic
Sequence

21. final input
initial output
magic

22. subscribe
event
operators

23. @ViewChild('btn') btn;
message: string;
ngOnInit() {
Observable.fromEvent(this.getNativeElement(this.btn), 'click')
.subscribe(result => this.message = 'Beast Mode Activated!');
}
getNativeElement(element) {
return element._elementRef.nativeElement;
}

24. @ViewChild('btn') btn;
message: string;
ngOnInit() {
Observable.fromEvent(this.getNativeElement(this.btn), 'click')
.subscribe(result => this.message = 'Beast Mode Activated!');
}
getNativeElement(element) {
return element._elementRef.nativeElement;
}
Initial output

25. @ViewChild('btn') btn;
message: string;
ngOnInit() {
Observable.fromEvent(this.getNativeElement(this.btn), 'click')
.subscribe(event => this.message = 'Beast Mode Activated!');
}
getNativeElement(element) {
return element._elementRef.nativeElement;
}
Final input

26. @ViewChild('btn') btn;
message: string;
ngOnInit() {
Observable.fromEvent(this.getNativeElement(this.btn), 'click')
.map(event => 'Beast Mode Activated!')
.subscribe(result => this.message = result);
}
getNativeElement(element) {
return element._elementRef.nativeElement;
}
Everything in between

27. @ViewChild('btn') btn;
message: string;
ngOnInit() {
Observable.fromEvent(this.getNativeElement(this.btn), 'click')
.filter(event => event.shiftKey)
.map(event => 'Beast Mode Activated!')
.subscribe(result => this.message = result);
}
getNativeElement(element) {
return element._elementRef.nativeElement;
}
Everything in between

28. BASIC SEQUENCE

29. How do we
preserve state
in a stream?

30. <button #right>Right</button>
<div class="container">
<div #ball class="ball"
[style.left]="position.x + 'px'"
[style.top]="position.y + 'px'">
</div>
</div>

31. @ViewChild('right') right;
position: any;
ngOnInit() {
Observable
.fromEvent(this.getNativeElement(this.right), 'click')
.map(event => 10)
.startWith({x: 100, y: 100})
.scan((acc, curr) => { return { y: acc.y, x: acc.x + curr}})
.subscribe(result => this.position = result);
}

32. @ViewChild('right') right;
position: any;
ngOnInit() {
Observable
.fromEvent(this.getNativeElement(this.right), 'click')
.map(event => 10)
.startWith({x: 100, y: 100})
.scan((acc, curr) => { return { y: acc.y, x: acc.x + curr}})
.subscribe(result => this.position = result);
}

33. @ViewChild('right') right;
position: any;
ngOnInit() {
Observable
.fromEvent(this.getNativeElement(this.right), 'click')
.map(event => 10)
.startWith({x: 100, y: 100})
.scan((acc, curr) => { return { y: acc.y, x: acc.x + curr}})
.subscribe(result => this.position = result);
}

34. @ViewChild('right') right;
position: any;
ngOnInit() {
Observable
.fromEvent(this.getNativeElement(this.right), 'click')
.map(event => 10)
.startWith({x: 100, y: 100})
.scan((acc, curr) => { return { y: acc.y, x: acc.x + curr}})
.subscribe(result => this.position = result);
}

35. MAINTAINING STATE

36. What if we have
more than one stream?

37. @ViewChild('left') left;
@ViewChild('right') right;
position: any;
ngOnInit() {
const left$ = Observable.fromEvent(this.getNativeElement(this.left), 'click')
.map(event => -10);
const right$ = Observable.fromEvent(this.getNativeElement(this.right), 'click')
.map(event => 10);
Observable.merge(left$, right$)
.startWith({x: 100, y: 100})
.scan((acc, curr) => { return { y: acc.y, x: acc.x + curr}})
.subscribe(result => this.position = result);
}

38. @ViewChild('left') left;
@ViewChild('right') right;
position: any;
ngOnInit() {
const left$ = Observable.fromEvent(this.getNativeElement(this.left), 'click')
.map(event => -10);
const right$ = Observable.fromEvent(this.getNativeElement(this.right), 'click')
.map(event => 10);
Observable.merge(left$, right$)
.startWith({x: 100, y: 100})
.scan((acc, curr) => { return { y: acc.y, x: acc.x + curr}})
.subscribe(result => this.position = result);
}

39. MERGING STREAMS

40. What can we
put in a stream?

41. increment(obj, prop, value) {
return Object.assign({}, obj, {[prop]: obj[prop] + value})
}
decrement(obj, prop, value) {
return Object.assign({}, obj, {[prop]: obj[prop] - value})
}
ngOnInit() {
const leftArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowLeft')
.mapTo(position => this.decrement(position, 'x', 10));
const rightArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowRight')
.mapTo(position => this.increment(position, 'x', 10));
Observable.merge(leftArrow$, rightArrow$)
.startWith({x: 100, y: 100})
.scan((acc, curr) => curr(acc))
.subscribe(result => this.position = result);
}

42. increment(obj, prop, value) {
return Object.assign({}, obj, {[prop]: obj[prop] + value})
}
decrement(obj, prop, value) {
return Object.assign({}, obj, {[prop]: obj[prop] - value})
}
ngOnInit() {
const leftArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowLeft')
.mapTo(position => this.decrement(position, 'x', 10));
const rightArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowRight')
.mapTo(position => this.increment(position, 'x', 10));
Observable.merge(leftArrow$, rightArrow$)
.startWith({x: 100, y: 100})
.scan((acc, curr) => curr(acc))
.subscribe(result => this.position = result);
}

43. increment(obj, prop, value) {
return Object.assign({}, obj, {[prop]: obj[prop] + value})
}
decrement(obj, prop, value) {
return Object.assign({}, obj, {[prop]: obj[prop] - value})
}
ngOnInit() {
const leftArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowLeft')
.mapTo(position => this.decrement(position, 'x', 10));
const rightArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowRight')
.mapTo(position => this.increment(position, 'x', 10));
Observable.merge(leftArrow$, rightArrow$)
.startWith({x: 100, y: 100})
.scan((acc, curr) => curr(acc))
.subscribe(result => this.position = result);
}

44. MAPPING TO FUNCTIONS

45. How can we
sequence a stream?

46. @ViewChild('ball') ball;
position: any;
ngOnInit() {
const OFFSET = 50;
const move$ = Observable.fromEvent(document, 'mousemove')
.map(event => {
return {x: event.pageX - OFFSET, y: event.pageY - OFFSET};
});
const down$ = Observable.fromEvent(this.ball.nativeElement, 'mousedown');
down$
.switchMap(event => move$)
.startWith({ x: 100, y: 100})
.subscribe(result => this.position = result);
}

47. @ViewChild('ball') ball;
position: any;
ngOnInit() {
const OFFSET = 50;
const move$ = Observable.fromEvent(document, 'mousemove')
.map(event => {
return {x: event.pageX - OFFSET, y: event.pageY - OFFSET};
});
const down$ = Observable.fromEvent(this.ball.nativeElement, 'mousedown');
down$
.switchMap(event => move$)
.startWith({ x: 100, y: 100})
.subscribe(result => this.position = result);
}

48. @ViewChild('ball') ball;
position: any;
ngOnInit() {
const OFFSET = 50;
const move$ = Observable.fromEvent(document, 'mousemove')
.map(event => {
return {x: event.pageX - OFFSET, y: event.pageY - OFFSET};
});
const down$ = Observable.fromEvent(this.ball.nativeElement, 'mousedown');
down$
.switchMap(event => move$)
.startWith({ x: 100, y: 100})
.subscribe(result => this.position = result);
}

49. @ViewChild('ball') ball;
position: any;
ngOnInit() {
const OFFSET = 50;
const move$ = Observable.fromEvent(document, 'mousemove')
.map(event => {
return {x: event.pageX - OFFSET, y: event.pageY - OFFSET};
});
const down$ = Observable.fromEvent(this.ball.nativeElement, 'mousedown');
down$
.switchMap(event => move$)
.startWith({ x: 100, y: 100})
.subscribe(result => this.position = result);
}

50. @ViewChild('ball') ball;
position: any;
ngOnInit() {
const OFFSET = 50;
const move$ = Observable.fromEvent(document, 'mousemove')
.map(event => {
return {x: event.pageX - OFFSET, y: event.pageY - OFFSET};
});
const down$ = Observable.fromEvent(this.ball.nativeElement, 'mousedown');
const up$ = Observable.fromEvent(document, 'mouseup');
down$
.switchMap(event => move$.takeUntil(up$))
.startWith({ x: 100, y: 100})
.subscribe(result => this.position = result);
}

51. TRIGGERS

52. What effect does the
origin of the stream
have on the output?

53. <div class="container">
<app-line
*ngFor="let line of lines" [line]="line">
</app-line>
</div>

54. <svg>
<line [attr.x1]="line.x1" [attr.y1]="line.y1"
[attr.x2]="line.x2" [attr.y2]="line.y2"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

55. lines: any[] = [];
ngOnInit() {
Observable.fromEvent(document, 'click')
.map(event => {
return {x: event.pageX, y: event.pageY};
})
.pairwise(2)
.map(positions => {
const p1 = positions[0];
const p2 = positions[1];
return { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y };
})
.subscribe(line => this.lines = [...this.lines, line]);
}

56. STREAM ORIGINS

57. lines: any[] = [];
ngOnInit() {
Observable.fromEvent(document, 'mousemove')
.map(event => {
return {x: event.pageX, y: event.pageY};
})
.pairwise(2)
.map(position => {
const p1 = positions[0];
const p2 = positions[1];
return { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y };
})
.subscribe(line => this.lines = [...this.lines, line]);
}

58. STREAM ORIGINS

59. What are some fun
things we can do with
a stream?

60. @ViewChild('ball') ball;
ngOnInit() {
const OFFSET = 50;
Observable.fromEvent(document, 'click')
.map(event => {
return {x: event.clientX - OFFSET, y: event.clientY - OFFSET}
})
.subscribe(props => TweenMax.to(this.ball.nativeElement, 1, props))
}

61. SIMPLE ANIMATION

62. What are some MOAR
fun things we can do
with a stream?

63. circles: any[] = [];
ngOnInit() {
const OFFSET = 25;
Observable.fromEvent(document, 'mousemove')
.map(event => {
return { x: event.clientX - OFFSET, y: event.clientY - OFFSET}
})
.subscribe(circle => this.circles = [ ...this.circles, circle])
}

64. <div class="container">
<app-circle
*ngFor="let circle of circles"
[style.left]="circle.x + 'px'"
[style.top]="circle.y + 'px'">
</app-circle>
</div>

65. export class CircleComponent implements OnInit {
@ViewChild('circle') circle;
ngOnInit() {
TweenMax.to(this.circle.nativeElement, 2,
{alpha: 0, width: 0, height: 0});
}
}

66. ANIMATION

67. The
Realtime
Observable
Stream

68. Start with a
realtime database

69. You
called?

70. import { AngularFireModule } from 'angularfire2';
export const firebaseConfig = {
apiKey: 'PETERBACONDARWINISABEASTINSHEEPSCLOTHING',
authDomain: 'rxjsbeastmode.firebaseapp.com',
databaseURL: 'https://rxjsbeastmode.firebaseio.com',
storageBucket: ''
};
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AngularFireModule.initializeApp(firebaseConfig),
],
bootstrap: [AppComponent]
})
export class AppModule {}

71. import { AngularFireModule } from 'angularfire2';
export const firebaseConfig = {
apiKey: 'PETERBACONDARWINISABEASTINSHEEPSCLOTHING',
authDomain: 'rxjsbeastmode.firebaseapp.com',
databaseURL: 'https://rxjsbeastmode.firebaseio.com',
storageBucket: ''
};
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AngularFireModule.initializeApp(firebaseConfig),
],
bootstrap: [AppComponent]
})
export class AppModule {}

72. Consume the
realtime stream

73. const remote$ = this.af.database.object('clicker/');
remote$
.subscribe(result => this.count = result.ticker);

74. Update the
realtime stream

75. const remote$ = this.af.database.object('clicker/');
Observable.fromEvent(this.getNativeElement(this.btn), 'click')
.startWith({ticker: 0})
.scan((acc, curr) => { return { ticker: acc.ticker + 1 }; })
.subscribe(event => remote$.update(event));

76. const remote$ = this.af.database.object('clicker/');
// Outgoing
Observable.fromEvent(this.getNativeElement(this.btn), 'click')
.startWith({ticker: 0})
.scan((acc, curr) => { return { ticker: acc.ticker + 1 }; })
.subscribe(event => remote$.update(event));
// Incoming
remote$
.subscribe(result => this.message = result.message);

77. const remote$ = this.af.database.object('clicker/');
// Outgoing ——>
Observable.fromEvent(this.getNativeElement(this.btn), 'click')
.startWith({ticker: 0})
.scan((acc, curr) => { return { ticker: acc.ticker + 1 }; })
.subscribe(event => remote$.update(event));
// <—— Incoming
remote$
.subscribe(result => this.message = result.message);

78. BEAST MODE TIME!

79. REALTIME COUNTER

80. REALTIME SLIDESHOW

81. REALTIME LOCATION

82. REALTIME MAP

83. REALTIME ANNOTATIONS

84. REALTIME GAME

85. BUSINESS MODE TIME!

86. REALTIME SLIDER

87. But
observables
are hard!!!

88. I YOU!

89. @simpulton

90. https://egghead.io/courses/step-by-step-async-javascript-with-rxjs

91. https://egghead.io/courses/introduction-to-reactive-programming

93. Thanks!