Slides from talk given at JS-Kongress and YGLF

1. Like A Surgeon:
Dissecting a completely
Functional-Reactive app
for the very first time...
Netta Bondy: @_bondit_

4. FRP Building Blocks
Streams
Pure Functions

5. FRP Building Blocks
Streams
Pure Functions
Streams - Observables
Pure Functions

6. FRP Building Blocks
Streams - Observables
Pure FunctionsPure Functions - Operators

7. FRP Building Blocks
Streams - Observables
Pure Functions - Operators

8. Separate reactive logic from I/O
Inputs: Outputs:
startBtn = document
.getElementById('start');
pauseBtn = document
.getElementById('pause');
timerDisplay = document
.getElementById('timer');

9. A Stream Connects
Input to Output

10. The timer
25:00 , 24:59 ...
Emit
periodically
Calculate
value
Start
click

11. Main stream - The timer
fromEvent(startBtn, 'click')
.pipe(exhaustMap(e => timer(0, 1000)))

12. Streams
of Streams

13. Main stream - The timer
fromEvent(startBtn, 'click')
.pipe(
exhaustMap(e => timer(0, 1000))
)

14. Main stream - The timer
fromEvent(startBtn, 'click')
.pipe(
exhaustMap(e => timer(0, 1000)),
map(i => 1500 - i),
)

15. Main stream - The timer
fromEvent(startBtn, 'click')
.pipe(
exhaustMap(e => timer(0, 1000)),
map(i => 1500 - i),
takeWhile(secs => secs >= 0)
)

16. The pause functionality

17. Pause Functionality
1500 , 1499, ...
Start
click
Pause
click
1400 , 1399, ...
Start
click

18. Pause Functionality
start = startClick.pipe(mapTo(1))
pause = pauseClick.pipe(mapTo(0))
merge(start, pause)
.pipe(switchMap(val =>
val ? countdown : NEVER ))

19. Storing State
Subjects

20. start
click
pause
click
Getting latest timer value
1500, 1499, ... 1399, 1398, ...
1400

21. pausedTimer Subject
pausedTimer = new Subject();
countdown.pipe(sample(pause))
.subscribe(pausedTimer);

22. Update timer stream
pausedTimer = new Subject();
timer(0, 1000).pipe(
withLatestFrom(pausedTimer),

23. Update timer stream
timer(0, 1000).pipe(
withLatestFrom(pausedTimer),
map(([i, lastValue]) => lastValue - i))

24. Update timer stream
pausedTimer = new BehaviorSubject(1500);
timer(0, 1000).pipe(
withLatestFrom(pausedTimer),
map(([i, lastValue]) => lastValue - i))

26. - Repo:
https://github.com/NettaB/reactive-pomodoro
- Medium: https://medium.com/@NettaB
- Twitter: @_bondit_
Thank you!