# 一小時帶你掌握 RxJS 關鍵知識

[ToC]

## 簡介

[一小時帶你掌握 RxJS 關鍵知識](https://www.facebook.com/will.fans/videos/374391734497223)

如果你是 Angular 開發者，通常多多少少都會碰到 RxJS 相關的實作，但遇到複雜一點的非同步需求，可能就會不知道如何更好的撰寫程式碼，因此我們才開設「Angular 進階開發實戰：精通 RxJS 應用」這堂課程！ ( https://pse.is/mastering-rxjs ) 另一方面，你若是使用 Vue、React 或其他前端框架，又或是你還在用單純的使用 JS / jQuery 開發網站，可能就相對比較難入手 RxJS 這套優質的函式庫，甚至於不清楚如何套用在手邊的專案上。
本次直播我特別邀請到【打通 RxJS 任督二脈：從菜雞前進老鳥必學的關鍵知識】一書的作者「黃升煌 (Mike)」來為我們講解一些 RxJS 的關鍵知識，透過幾個小例子，搭配著各種變化，幫助大家更進一步的理解 RxJS 的開發與應用情境。歡迎大家踴躍參與這次直播，直播中也歡迎大家踴躍提問喔！

## Book
- [打通 RxJS 任督二脈](https://ithelp.ithome.com.tw/users/20020617/ironman/2959)
- [30 天精通 RxJS (00)：關於本系列文章](https://blog.jerry-hong.com/series/rxjs/thirty-days-RxJS-00/)

## Introduction

- 基本概念
- 可不可以抽換
- Observer Pattern 觀察者模式
- https://notfalse.net/10/observer-pattern
- Iterator pattern
-

### Design Pattern

- DI framework
- AOP

## About Rx

- new Subject() 可以被訂閱、被觀察
- https://ithelp.ithome.com.tw/articles/10188633
- subject.subscribe
- 訂閱
- stream
- 資料流，想像他是一個水管。你可以把不同規格的水管組合在一起
- subject.pipe

## Use case 應用情境

- 有一些不可控，或很難控制，或不好控制的非同步程式發生
- 超過一個非同步的程式要處理，並且至少一個的程式發生時間點不可控制
- 持續接收狀態

### 前端舉例

- 短時間內大量發送非同步 Request，在手機上會造成閃退，使用循序呼處理又慢到無法被使用者接受
- 您需要根據天氣狀況制定計划，以便您打開收音機並收聽 24/7 全天候廣播天氣狀況的天氣頻道。 在這種情況下，不是得到一個單一的響應，而是持續響應。 這個響應就像訂閱一個 observable。 observable 是“天氣”，訂閱是“讓你保持更新的無線電信號”。 只要您的收音機處於開啟狀態，您就會獲得所有可用的更新。 在關閉收音機之前，您不會丟失任何信息。
- 我說天氣是可以觀察到的，但你是在聽收音機而不是天氣。 所以收音機也是一個可觀察的對象。 天氣播報員說的是氣象學家發給他的天氣報告的功能。 氣象學家所寫的是來自氣象站的數據的函數。 來自氣象站的數據是與其相連的所有儀器（氣壓計、風衰、風速計）的功能，而這些儀器是天氣本身的功能。
- 在整個過程中至少有 5 個 observables。 在這個過程中，有兩種類型的 observables。 源可觀察和輸出可觀察。 在這個例子中，天氣是“源可觀察”，無線電是“輸出可觀察”。 兩者之間的一切都代表PIPE FUNCTION 。
- 管道函數是讓源 observable 對其執行操作以提供輸出 observable 並且所有這些操作都發生在內部。 操作都處理可觀察對象本身
- https://stackoom.com/zh/question/3ICx3

### 後端舉例

- 我們訊息都放進 Queue 裡，並且要非同步等待另一個服務處理完畢後回傳至 ReplyQueue，此時會用 Rx 來實現。
- 幾年前 Rx 後端應用最經典是 Netflix, 它當初使用 Rx-Java，用一個request 獲得各種 response 的內容，例如 netflix 的首頁
- https://netflixtechblog.com/optimizing-the-netflix-api-5c9ac715cf19

## Coding style

變數後面有 $ 代表可以被訂閱，例如：

- `count$`
- 將 `count$` 當成事件發佈的管道

## Reference

- Stackblitz - online editor
- https://stackblitz.com/
- [ReactiveX 中文](https://mcxiaoke.gitbooks.io/rxdocs/content/Intro.html)

### State machine

https://gihomn.blogspot.com/2017/03/statelessrx.html

### Training

- SOLID
- https://morosedog.gitlab.io/technology-20200225-tech-2/

### 延伸閱讀

- (ReactiveX)[https://reactivex.io/]
- [RxJS 学习线路推荐](https://zhuanlan.zhihu.com/p/27877381)
- [彈珠測試](https://cn.rx.js.org/manual/usage.html#h12)
- [RxJS 可视化工具推荐](https://zhuanlan.zhihu.com/p/27795028)
- [RX - 知乎](https://www.zhihu.com/topic/20027327/hot)