Gave speech on React.js tw Meetup #5 about flux discussions. Including my personal experiences and notes after attending React.js conf 2015 in Jan, 28 and 29.

1. @tomchentwhttp://goo.gl/j9M1Nr
REACT.JS TW MEETUP #5
FLUX ANALYSIS
http://www.qrcode-monkey.com

2. @tomchentwhttp://goo.gl/j9M1Nr
TOM CHEN
REACT/FLUX ENTHUSIAST
JAVASCRIPT EXPERT

3. @tomchentw
FLUX 解決什麼問題

4. @tomchentwhttp://goo.gl/j9M1Nr
flux 解決什麼問題
跨元件溝通
同階層或跨好幾個階層
資料相依性
維護性

5. @tomchentw
FLUX ⽤用什麼⽅方式解決

6. @tomchentwhttp://goo.gl/j9M1Nr
flux ⽤用什麼⽅方式解決
資料流
明確定義資料流向
單向資料流
唯⼀一真相

7. @tomchentw
初探各種 FLUX 實作

8. @tomchentwhttp://goo.gl/j9M1Nr
初探各種 flux 實作
flux 只是⼀一個「概念」
應⽤用情境不同
pure client side
client side + routing
server side + routing = isomorphic
封裝⽅方式不同

9. @tomchentw
跟著FLUX去旅⾏行

10. @tomchentwhttp://goo.gl/j9M1Nr
圖解資料流
以臉書使⽤用者按讚為例

11. @tomchentwhttp://goo.gl/j9M1Nr
圖解資料流
以臉書使⽤用者按讚為例

12. @tomchentwhttp://goo.gl/j9M1Nr
圖解資料流
以臉書使⽤用者按讚為例

13. @tomchentwhttp://goo.gl/j9M1Nr
圖解資料流
以臉書使⽤用者按讚為例

14. @tomchentwhttp://goo.gl/j9M1Nr
圖解資料流
以臉書使⽤用者按讚為例

15. @tomchentw
跟著FLUX去旅⾏行
OVER THE WEB

16. @tomchentwhttp://goo.gl/j9M1Nr
圖解資料流
以臉書使⽤用者按讚為例

17. @tomchentwhttp://goo.gl/j9M1Nr
圖解資料流
以臉書使⽤用者按讚為例

18. @tomchentwhttp://goo.gl/j9M1Nr
圖解資料流
以臉書使⽤用者按讚為例

19. @tomchentwhttp://goo.gl/j9M1Nr
圖解資料流
以臉書使⽤用者按讚為例

20. @tomchentwhttp://goo.gl/j9M1Nr
圖解資料流
以臉書使⽤用者按讚為例

21. @tomchentw
回到應⽤用情境

22. @tomchentwhttp://goo.gl/j9M1Nr
應⽤用情境不同
pure client side
client side + routing
server side + routing = isomorphic

23. @tomchentw
簡單分類三種 FLUX 實作

24. @tomchentwhttp://goo.gl/j9M1Nr
需要考慮什麼問題
不需考慮什麼問題
實際應⽤用例⼦子
對應flux實作

25. @tomchentw
PURE CLIENT SIDE

26. @tomchentwhttp://goo.gl/j9M1Nr
需要考慮什麼問題
觸發Action時機
componentDidMount
跟API要資料
放在action內
放在store getter function內
資料回來後
再次觸發成功或失敗的Action
直接改store值，然後emit change

27. @tomchentwhttp://goo.gl/j9M1Nr
不需考慮什麼問題
伺服器⼀一般設定
在index.html引⼊入⼀一個傳統的script tag，收⼯工
伺服器路由設定
Singleton Issue

28. @tomchentwhttp://goo.gl/j9M1Nr
實際應⽤用例⼦子
Facebook Power Editor
http://conf.reactjs.com/schedule.html#flux-panel
Music Player DEMO (Randy)
http://www.slideshare.net/randylien/introduce-flux-react-
in-kkbox

29. @tomchentwhttp://goo.gl/j9M1Nr
對應flux實作
Facebook official flux

30. @tomchentw
CLIENT SIDE + ROUTING

31. @tomchentwhttp://goo.gl/j9M1Nr
需要考慮什麼問題
載⼊入⾴頁⾯面相關資料時機
componentDidMount in each “Page” components
伺服器⼀一般設定
必須把可能的路徑都導向該index.html⾴頁⾯面 (catch all route)
可能是 /#! hash based，或使⽤用 HTML5 History API
或採⽤用傳統 SPA 做法，使⽤用404.html === index.html

32. @tomchentwhttp://goo.gl/j9M1Nr
不需考慮什麼問題
伺服器路由設定
bootstrap initial page, then send ajax requests
Singleton Issue

33. @tomchentwhttp://goo.gl/j9M1Nr
實際應⽤用例⼦子
Ryan Florence - Hype
http://conf.reactjs.com/schedule.html#hype
Instagram web
https://instagram.com

34. @tomchentwhttp://goo.gl/j9M1Nr
對應flux實作
Facebook official flux
Fluxxor
react-router

35. @tomchentw
SERVER SIDE + ROUTING =
ISOMORPHIC

36. @tomchentwhttp://goo.gl/j9M1Nr
需要考慮什麼問題
載⼊入⾴頁⾯面相關資料時機
分兩種
1. 定義好 routing -> Handler 對應關係，由 Handler
內去拿資料
2. 視 route 改變為⼀一種 flux action，在該action內拿
資料

37. @tomchentwhttp://goo.gl/j9M1Nr
需要考慮什麼問題（續
伺服器路由設定
考慮⼀一個關鍵問題：什麼時候我才可以吐html回去給客⼾戶
端？
都需要對現有架構做⼀一點改寫
1. 在定義routing時，⼀一起給⼀一個 load function，回
傳 promise
2. 讓 action 可以回傳 promise，代表所需資料載⼊入
完畢

38. @tomchentwhttp://goo.gl/j9M1Nr
需要考慮什麼問題（續
Singleton Issue
傳統架構 (official flux) 下的 dispatcher/stores 會是
singleton，但node架構會使得所有 request 共享⼀一份
Yahoo 做法：每個 request 皆產⽣生新的 Class instance，⽤用
props 傳⼊入 root component使⽤用
Airbnb 做法：使⽤用 Backbone 的 App instance (also an EE)

39. @tomchentwhttp://goo.gl/j9M1Nr
實際應⽤用例⼦子
Yahoo Fluxible Samples
Airbnb
https://medium.com/code-stories/dev-chats-spike-brehm-
of-airbnb-87e155f3475d

40. @tomchentwhttp://goo.gl/j9M1Nr
對應flux實作
Yahoo fluxible
Goflux

41. @tomchentw
結論

42. @tomchentwhttp://goo.gl/j9M1Nr
結論
flux 是⼀一種處理資料流的概念
因此允許多種實作
簡單三個分類 flux app
pure client side
client side + routing
server side + routing = isomorphic
以分類來選擇實作

43. @tomchentw
GOFLUX 簡介

44. @tomchentw
感謝⼤大家聆聽