Embed Size (px)
Citation preview
@tomchentwhttp://goo.gl/j9M1Nr
REACT.JS TW MEETUP #5FLUX ANALYSIS
http://www.qrcode-monkey.com
@tomchentw
FLUX 解決什麼問題
@tomchentw
FLUX ⽤用什麼⽅方式解決
@tomchentw
初探各種 FLUX 實作
@tomchentwhttp://goo.gl/j9M1Nr
初探各種 flux 實作
flux 只是⼀一個「概念」
應⽤用情境不同pure client side
client side + routing
server side + routing = isomorphic
封裝⽅方式不同
@tomchentw
跟著FLUX去旅⾏行
@tomchentw
跟著FLUX去旅⾏行OVER THE WEB
@tomchentw
回到應⽤用情境
@tomchentwhttp://goo.gl/j9M1Nr
應⽤用情境不同
pure client side
client side + routing
server side + routing = isomorphic
@tomchentw
簡單分類三種 FLUX 實作
@tomchentw
PURE CLIENT SIDE
@tomchentwhttp://goo.gl/j9M1Nr
需要考慮什麼問題觸發Action時機
componentDidMount
跟API要資料
放在action內
放在store getter function內
資料回來後再次觸發成功或失敗的Action
直接改store值，然後emit change
@tomchentwhttp://goo.gl/j9M1Nr
不需考慮什麼問題
伺服器⼀一般設定在index.html引⼊入⼀一個傳統的script tag，收⼯工
伺服器路由設定
Singleton Issue
@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
@tomchentw
CLIENT SIDE + ROUTING
@tomchentwhttp://goo.gl/j9M1Nr
需要考慮什麼問題
載⼊入⾴頁⾯面相關資料時機componentDidMount in each “Page” components
伺服器⼀一般設定必須把可能的路徑都導向該index.html⾴頁⾯面 (catch all route)
可能是 /#! hash based，或使⽤用 HTML5 History API
或採⽤用傳統 SPA 做法，使⽤用404.html === index.html
@tomchentwhttp://goo.gl/j9M1Nr
不需考慮什麼問題
伺服器路由設定
bootstrap initial page, then send ajax requests
Singleton Issue
@tomchentwhttp://goo.gl/j9M1Nr
實際應⽤用例⼦子
Ryan Florence - Hype
http://conf.reactjs.com/schedule.html#hype
Instagram web
https://instagram.com
@tomchentwhttp://goo.gl/j9M1Nr
對應flux實作
Facebook official flux
Fluxxor
react-router
@tomchentw
SERVER SIDE + ROUTING = ISOMORPHIC
@tomchentwhttp://goo.gl/j9M1Nr
需要考慮什麼問題
載⼊入⾴頁⾯面相關資料時機分兩種
1. 定義好 routing -> Handler 對應關係，由 Handler 內去拿資料
2. 視 route 改變為⼀一種 flux action，在該action內拿資料
@tomchentwhttp://goo.gl/j9M1Nr
需要考慮什麼問題（續伺服器路由設定考慮⼀一個關鍵問題：什麼時候我才可以吐html回去給客⼾戶端？
都需要對現有架構做⼀一點改寫
1. 在定義routing時，⼀一起給⼀一個 load function，回傳 promise
2. 讓 action 可以回傳 promise，代表所需資料載⼊入完畢
@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)
@tomchentwhttp://goo.gl/j9M1Nr
實際應⽤用例⼦子
Yahoo Fluxible Samples
Airbnb
https://medium.com/code-stories/dev-chats-spike-brehm-of-airbnb-87e155f3475d
@tomchentw
結論
@tomchentwhttp://goo.gl/j9M1Nr
結論flux 是⼀一種處理資料流的概念因此允許多種實作
簡單三個分類 flux app
pure client side
client side + routing
server side + routing = isomorphic
以分類來選擇實作
@tomchentw
GOFLUX 簡介
@tomchentw
感謝⼤大家聆聽
