狠狠撸

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

Reactive
Programming
?An API for asynchronous
programming
with observable streams

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.
? 在物件之間定義一個主題和多個觀察者，當主題的狀態改變，觀
察者都會收到通知，並自行更新。

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.

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

RxJS 基本元素
? Observable
? Observer
? Subscription
? Subject
? Operators
? Schedulers

什麼是 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

什麼是 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接收到完成的訊息

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

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

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

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

什麼是 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

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

範例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))
)

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

範例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();

範例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));

楊捷凱 (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 線上讀書會

狠狠撸

Reactive Programmin

Recommended

More Related Content

Similar to Reactive Programmin (20)

More from Chieh Kai Yang (11)

Recently uploaded (20)

Reactive Programmin