Introduce Reactive programming and RxJS

1. Reactive Programming 是什麼?
能吃嗎?
By Kevin Yang

2. Reactive
Programming
•An API for asynchronous
programming
with observable streams

3. Observer pattern ( 觀察者模式)
• The observer pattern is a software design pattern in which an object,
called the subject, maintains a list of its dependents, called observers,
and notifies them automatically of any state changes, usually by
calling one of their methods.
• 在物件之間定義一個主題和多個觀察者，當主題的狀態改變，觀
察者都會收到通知，並自行更新。

5. Marble
Diagram (彈
珠圖)

6. Better Codebases
• Functional
• Avoid intricate stateful programs, using clean input/output functions over
observable streams.
• Less is more
• ReactiveX's operators often reduce what was once an elaborate challenge into a few
lines of code.
• Async error handling
• Traditional try/catch is powerless for errors in asynchronous computations, but
ReactiveX is equipped with proper mechanisms for handling errors.
• Concurrency made easy
• Observables and Schedulers in ReactiveX allow the programmer to abstract away
low-level threading, synchronization, and concurrency issues.

7. Support Languages
• Java: RxJava
• JavaScript: RxJS
• C#: Rx.NET
• C#(Unity): UniRx
• Scala: RxScala
• Clojure: RxClojure
• C++: RxCpp
• Lua: RxLua
• Ruby: Rx.rb
• Python: RxPY
• Go: RxGo
• Groovy: RxGroovy
• JRuby: RxJRuby
• Kotlin: RxKotlin
• Swift: RxSwift
• PHP: RxPHP
• Elixir: reaxive
• Dart: RxDart

8. RxJS

9. RxJS 基本元素
• Observable
• Observer
• Subscription
• Subject
• Operators
• Schedulers

10. 什麼是 Observable
• Any number of values
• Over any amount of time
• Lazy: Set up observation and resources when subscribed to
• Cancellable: Will tear down observation and resources
• Laziness bonus: Can be retried/replayed by calling them again.
• Can be thought of as functions

11. 什麼是 Observer
• Observer is a collection of callbacks that knows how to listen to values
delivered by the Observable.
• Collection of Callbacks如下
• next：Observer接收到一個值
• error ： Observer接收到一個錯誤
• complete ： Observer接收到完成的訊息

12. 什麼是 Subscription
• Subscription represents the execution of an Observable, is primarily
useful for cancelling the execution.

13. 什麼是 Operator
• Operators are pure functions that enable a functional programming
style of dealing with collections with operators like map, filter, concat,
mergeMap, etc.

14. Operators 的種類
• Filtering Operators: take, filter, first, ..
• Combination Operators: concat, merge, ..
• Transformation Operators: buffer, debounceTime, ...
• Utility Operation: do
• Error handling Operations: catch, retry …

15. 幾個 Operators 範例

16. 幾個 Operators 範例

17. 幾個 Operators 範例

18. 什麼是 Subject
• A Subject is a special type of Observable that allows values to be
multicasted to many Observables. Subjects are like EventEmitters.

19. 什麼是 Scheduler
• An execution context and a data structure to order tasks and schedule
their execution. Provides a notion of (potentially virtual) time,
through the now() getter method

20. RxJS Learning Resource
• https://reactive.how/
• https://www.learnrxjs.io/
• http://reactivex.io/rxjs

21. Demo

22. 範例1: Array 操作
var source = [1,2,3,4,5];
source.map((item) => {
console.log("onNext: "+item);
})
var source = [1,2,3,4,5];
from(source) .pipe(
map((item) => console.log("onNext: "+item))
)

23. 範例2: Event (原生寫法)
<div id="test"></div>
<script>
document.getElementById("test")
.addEventListener("click", function( event ) {
event.target.innerHTML = "click count: " +
event.detail;
}, false);
</script>

24. 範例2: Event (RxJS)
const ele = document.getElementById('test');
fromEvent(ele, 'click').pipe(
map((event: any)=> {
event.target.innerHTML = "click count: " +
event.detail;
return event;
})
).subscribe();

25. 範例3: Painting
範例程式: https://stackblitz.com/edit/rxjs-drag-paint?file=index.ts
import { paint } from './canvas.js';
import { of, fromEvent } from 'rxjs';
import { mergeMap, takeUntil } from 'rxjs/operators';
const move$ = fromEvent(document, 'mousemove');
const down$ = fromEvent(document, 'mousedown');
const up$ = fromEvent(document, 'mouseup');
const paints$ = down$.pipe(
mergeMap(down => move$.pipe(takeUntil(up$)))
);
paints$.subscribe(v=> paint(v));

26. 楊捷凱 (Kevin)
• 微軟 MVP
• Angular / Web Technologies GDE
• Blog：https://blog.kevinyang.net/
• FB Page：https://www.facebook.com/CKNotepad
• Organizers:
• Angular Taiwan
• Angular Girls Taiwan
• Angular 線上讀書會