Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React/Flux in Action 實戰經驗分享

Jeremy Lu
October 11, 2014
11k

React/Flux in Action 實戰經驗分享

這是 2014 年 10 月於台北舉辦的 JSDC 2014 大會上分享的簡報。

English version will be up soon.

Jeremy Lu

October 11, 2014
Tweet

Transcript

  1. React/Flux 是什麼? - Facebook 於 2013 年中開源" - React 是內建

    VDOM 的輕量顯⽰示套件" - Flux 管理 Data + Flow" - React 負責 view,Flux 負責 model,兩者合作無間
  2. 元件式架構 - 捨棄 template 直接⽤用 js 控制版⾯面邏輯" - 因為 markup

    與背後掌管它的程式本來就是⼀一 體的" - 硬要分離反⽽而削弱兩邊的⼒力量" - 想想 Handlebar 裏要寫邏輯處理的痛苦
  3. ⼀一律重繪 - model 是描述程式狀態的唯⼀一真理" - 只要 model 有變動,⼀一律重繪整個 ui,不需個別更新 DOM"

    - 簡⾔言之,每次都當第⼀一次繪圖,只是給定的初始值不同" - 所以開發流程就是⼀一直做元件,然後餵 model 資料進 去,畫⾯面就保証正確
  4. ⼈人才難覓 → angular 難學,會的⼈人本就不多,⾼高⼿手更稀有" ! - 熟悉 javascript/jquery 並有⼀一兩年 web

    開發經 驗者即是潛在招募對象" - 如果原本就會 angular/backbone/ember 等框 架者更是⼈人中之⻯⿓龍
  5. 歷程 - 第⼀一版使⽤用 angularjs 開發" - ⼀一半時間在與框架本⾝身戰⾾鬥(學習、除錯、熟練)" - 耗時四個⽉月完成 MVP"

    - 框架本⾝身太多⿊黑魔法⼀一旦出事很難找問題源" - 雙向綁定造成資料流向錯綜複雜控管不易" - ⾴頁⾯面效能不佳(60FPS 成為⼀一種謠傳)" - 記憶體耗⽤用極⼤大(dirty checking 不穩定⼜又佔⽤用⼤大量 資源)
  6. 完美實現 full stack 流程 - 從頭到尾都是 javascript" - 突顯 isomorphic

    javascript 優勢" - 與 node.js / Express 搭配良好" - 與 real-time API server 搭配良好"
  7. 其它 - Accessibility (aria, role…)" - Immutable model" - Pre-rendering"

    - Server-side templating" - Gulp/Browserify" - Jest testing
  8. References - Future of MVC frameworks - http://goo.gl/cUq1bh" - React

    introduction - http://goo.gl/7vbhI1" - Flux introduction - http://goo.gl/SZ10b2" - Single source of truth - http://goo.gl/FuwXv"