Skip to content

Instantly share code, notes, and snippets.

@tomchentw
Last active August 29, 2015 14:17
Show Gist options
  • Select an option

  • Save tomchentw/549ff9dc842ed61b92df to your computer and use it in GitHub Desktop.

Select an option

Save tomchentw/549ff9dc842ed61b92df to your computer and use it in GitHub Desktop.
Flux Panel
1. Q: Relay and flux, flux future?
A: Relay -> big app & team
2. Data fetching
Kyle: do fetching in stores instead of action creators
1. large app, use getter of stores and do fetching if required, it'll eventually be there
2. switch api layer, nice to have data fetching logic in one store, the controller code (action creators) dont have to change
3. when fetch data, usually need info that you'll already know in stores
Ian: keep usually in action creators,
1. fecthing still in stores (same way as Kyle),
2. doing "writes" in action creators, fire SUCCESS or FAIL event. Since differ stores may need to listen to multiple events. No place to mess up.
3. Dispatcher scaling issues (106 stores)
interface laggy, two stores fire change event in respond to same action. debounce calls to setState, 237 -> 58 , 87 -> 24 on change
4. Dependencies of stores
use component as data passing layer, explicitly ask from storeA and pass it to storeB
later, create a mixin to declare dependencies.
5. Keep application maintainable?
160k LOC, 10 developers. Componentize everything, great for perf and maintainability. 700+ components.
6. Store singletons vs instances
Michael, concurrency issue of singleton in node.js. Testibility since no side effect.n
Andres, dont use store to fetch data.
7. Spike, incrementally introducing flux. Write new component in React instead of Backbone.View.
Wrap model/collections in stores. View and Models are coupled in ad-hoc way in Backbone.
8. Using dispatchers, use global Backbone app instance (also an EE) as flux dispatcher, injects (DI) that into stors and actions. Notice there's no waitFor.
9. Optimistic update and error handling: solve it at application level in Relay.
10. Routing,
Andres, dont do routing on component level. Instead, store level and respond to action
11. Question of reusability flux coupled component: container & UI components.
  • flux
    • flux 解決什麼問題

      • 資料流
      • 單向資料流
      • 唯一真相
    • 初探各種 flux 實作

      • 為何會有如此多種實作方式?
        • flux 只是一個「概念」
        • 應用情境不同
          • pure client side
          • client side + routing
          • server side + routing = isomorphic
        • 封裝方式不同
      • 利用GIF檔解釋資料如何在flux內傳遞
        • client event
        • client fetch data event
    • 簡單分類三種 flux 實作

      • (大綱)

        • 需要考慮什麼問題
        • 不需考慮什麼問題
        • 例子
        • 實作函式庫
      • pure client side

        • 需要考慮什麼問題

          • 載入資料時機(when to trigger flux actions)

            • componentDidMount in each compontnets that need data
          • data fetching

            • 放在 action 內
            • 放在 store 的getter function內
          • data response

            • 觸發成功或失敗的 action
            • 直接改 store 值,trigger change event
        • 不需考慮什麼問題

          • server config, 就是一個傳統的 script tag
          • server routing, 因此可以不用管什麼時候 data 載入完畢,反正資料總會在 store 內
          • singleton issue, 因為在客戶端只有一份實體
        • 例子

          • Facebook Power Editor
            • Flux Panel 影片
        • 實作函式庫

          • Facebook flux
          • Fluxxor
      • client side + routing

        • 需要考慮什麼問題

          • 載入資料時機(when to trigger flux actions)

            • componentDidMount in each "Page" components that need the data of that page
          • server config

            • 必須把可能的rounting都導向該頁面 (catch all route)
            • 可能是 /#! hash based,或 HTML5 History API
            • 就是一般 single page application (angular, backbone ...) 的做法:404.html === index.html
        • 不需考慮什麼問題

          • server routing, 只要 catch all 吐同一份資料就好,client自己在發ajax request拿資料
        • 例子

          • Instgram web
          • Ryan Florence
            • Hype demo 影片 @reactjsconf. Partially, no flux involved
        • 實作函式庫

          • 同上
          • react-router
      • server side + routing = isomorphic

        • 需要考慮什麼問題

          • 載入資料時機(when to trigger flux actions)

            • 分兩種
            • routing 決定負責的 component (Handler) 後,讓該component內的componentDidMount負責去拿資料
            • 把routing當成一個action,在該action內把資料載入完畢放進stores內,然後componentDidMount不觸發action,直接從store拿資料
          • server routing

            • 考慮一個關鍵問題:什麼時候我才可以吐html回去給客戶端?對這個route所需的資料完全載入完畢後
            • 都需要對現有架構做一點改寫
              • react-router在定義routes時,可以一起定義一個load function,此function可回傳一個Promise用以表示所需資料載入完畢
              • 若放入flux架構內,把routing當成一個action,此action呼叫後回傳一個Promise,當Promise被resolve時,表示資料載入完畢
          • singleton issue

            • Node.js非同步特性,同時間可能有多個request進來,但透過commonjs方式require而來的dispatcher/stores會變成singleton,即所有request共享一份
            • Yahoo 做法:用Class instances取代singleton,每個request new一份dispatcher/stores,並且傳入Root Component
            • Airbnb 做法:使用Backbone的App instance (an EE),也是per request per instance並且傳入Root Component
            • SoundCloud 做法:依然使用singleton dispatcher/stores,這邊我沒聽得很清楚&理解,請幫忙補充
        • 例子

          • Yahoo Fluxible 實作
          • Airbnb
        • 實作函式庫

          • Yahoo fluxible
          • Goflux
    • 介紹Goflux

      • 緣起
        • 致敬fluxxor與fluxible,建構official flux之上的library
        • routing agnostic
      • 定義Action
        • context為dependency injected
        • 不限制action實作方式
        • action有傳回值,可以用於isomorphic routing
      • 使用official flux dispatcher
      • 定義Store
        • context為dependency injected
        • action name對store method是一對一關係
        • store method沒有回傳值,為同步觸發
        • waitFor
      • 在Container Component內如何使用
        • trigger action
          • mixin [GofluxMixin]
          • use instance method, this.gofluxAction()
        • get data from store/register change listener
          • mixin [StoreWatchMixin]
          • use instance method, this.gofluxStore()
      • 組合起來
        • create instance of goflux
        • create context to render in the client
        • create context to render in the server
        • how dehydration/rehydration works
    • 結論

      • flux 是一種架構,多種實作方式
      • 簡單三個分類flux app
        • pure client side
        • client side + routing
        • server side + routing = isomorphic
      • 以分類來選擇實作
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment