React/Flux in Action 實戰經驗分享
by
Jeremy Lu
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
React+Flux in Action 實戰經驗分享
Slide 2
Slide 2 text
Jeremy Lu @thecat |
[email protected]
Founder and builder, Lovelyreader | Pubulous | Visualmarks | Docknote
Slide 3
Slide 3 text
開發者 ⼗十年前後端開發經驗" 講求實戰、其餘免談" !
Slide 4
Slide 4 text
顧問服務" 社群媒體" 証券業" 房地產業" 出版業"
Slide 5
Slide 5 text
創辦⼈人" Lovelyreader" Pubulous" Visualmarks" Docknote"
Slide 6
Slide 6 text
React/Flux 是什麼? - Facebook 於 2013 年中開源" - React 是內建 VDOM 的輕量顯⽰示套件" - Flux 管理 Data + Flow" - React 負責 view,Flux 負責 model,兩者合作無間
Slide 7
Slide 7 text
誰在使⽤用? - Facebook" - Instagram" - Github" - Firefox" - Yahoo Mail" …
Slide 8
Slide 8 text
React 亮點 - 元件式架構" - VDOM 虛擬⾴頁⾯面模型" - JSX 標記語法
Slide 9
Slide 9 text
元件式架構 - 捨棄 template 直接⽤用 js 控制版⾯面邏輯" - 因為 markup 與背後掌管它的程式本來就是⼀一 體的" - 硬要分離反⽽而削弱兩邊的⼒力量" - 想想 Handlebar 裏要寫邏輯處理的痛苦
Slide 10
Slide 10 text
Slide 11
Slide 11 text
元件可層層組合 - 以⼤大化⼩小,個個擊破" - ⽅方便分⼯工合作,最後再組合起來" - ⼩小元件組合後可構成新功能
Slide 12
Slide 12 text
Docknote
Slide 13
Slide 13 text
Dissected
Slide 14
Slide 14 text
Tree ToolBar In details
Slide 15
Slide 15 text
完整⽣生命週期指令 componentWillMount()" componentDidMount()" shouldComponentUpdate()" render()" …
Slide 16
Slide 16 text
元件俱⾼高度封裝性 - 可將 javascript/css/html 三位⼀一體封裝於個別 元件內" - ⽅方便重覆使⽤用
Slide 17
Slide 17 text
VDOM - 虛擬⽂文件模型在記憶體內進⾏行⾼高效能運算與批 次更新" - 有效減少對 DOM 的操作因⽽而加快反應速度" - ⽀支援多種 backend,例如 DOM, Canvas, SVG 與 WebGL (famo.us)
Slide 18
Slide 18 text
JSX - 類似 HTML,可直接寫在 js 內的標記語⾔言" - 完美結合模板與程式語⾔言的優點" - 設計師也看的懂,可以幫忙改" - 有⼯工具可 jsx <> html 互轉
Slide 19
Slide 19 text
Hello {this.props.name}
; React.DOM.div(null, "Hello ", this.props.name); 或
Slide 20
Slide 20 text
Flux 亮點
Slide 21
Slide 21 text
掌管 Data + Flow
Slide 22
Slide 22 text
兩個基本概念 - ⼀一律重繪" - 單向資料流
Slide 23
Slide 23 text
⼀一律重繪 - model 是描述程式狀態的唯⼀一真理" - 只要 model 有變動,⼀一律重繪整個 ui,不需個別更新 DOM" - 簡⾔言之,每次都當第⼀一次繪圖,只是給定的初始值不同" - 所以開發流程就是⼀一直做元件,然後餵 model 資料進 去,畫⾯面就保証正確
Slide 24
Slide 24 text
單向資料流 - Model 只讀不寫,是唯⼀一真理之所在" - 讓系統複雜度⼤大幅降低,程式⻑⾧長再⼤大也不怕" - ⼀一舉排除過往 MVC 掛⼀一漏萬的問題," *唯⼀一真理 = Single Source of Truth
Slide 25
Slide 25 text
掌管 Data + Flow
Slide 26
Slide 26 text
掌管 Data + Flow
Slide 27
Slide 27 text
以往⼿手法
Slide 28
Slide 28 text
以往⼿手法
Slide 29
Slide 29 text
兩相⽐比較
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
解決了哪些問題? - ⼈人才難覓" - 技能難學" - 框架複雜" - ⼿手法岐異" - 引誘犯罪"
Slide 32
Slide 32 text
⼈人才難覓 → angular 難學,會的⼈人本就不多,⾼高⼿手更稀有" ! - 熟悉 javascript/jquery 並有⼀一兩年 web 開發經 驗者即是潛在招募對象" - 如果原本就會 angular/backbone/ember 等框 架者更是⼈人中之⻯⿓龍
Slide 33
Slide 33 text
技能難學 → 概念複雜,新⼿手⾄至少要半年才能獨當⼀一⾯面" " " - 整體概念單純好學易懂" - 學習曲線極平滑,⽽而且之後沒有隱藏陷井" - 只要熟 javascript ⼤大約兩天即可上⼿手實戰
Slide 34
Slide 34 text
Angularjs 學習曲線
Slide 35
Slide 35 text
React/Flux 學習曲線
Slide 36
Slide 36 text
框架複雜 → 除錯與客製化皆不易" " " " - React 只做好元件系統,單純⽽而不易出錯" - Flux 只是⼀一個⼿手法概念,容易理解,也好調整
Slide 37
Slide 37 text
引誘犯罪 → 設計複雜容易引⼈人犯錯,導致維護成本上升、 客⼾戶滿意度下降" ! - 程式結構單純,本不易出錯,⻑⾧長期維護成本就降 低" " " " - 當出錯時問題很容易⼀一分為⼆二,不是 model 就 是 view 有問題,可快速修復
Slide 38
Slide 38 text
總的來說 - 讓系統架構更單純穩定,不易出錯且好維護" - 總體擁有成本就會下降" - 開發者寫的開⼼心,臉上洋溢幸福笑容 XDDD
Slide 39
Slide 39 text
專案最後都會搞⼤大,如果⼀一開始 ⼿手法單純,將來還有機會控制, 反之,則必然悲劇收場。 我的⾎血淚教訓史 ⼼心法
Slide 40
Slide 40 text
Case Study
Slide 41
Slide 41 text
Docknote 幫助⼯工程師快速蒐集、整理與分享個⼈人技術筆記
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
歷程 - 第⼀一版使⽤用 angularjs 開發" - ⼀一半時間在與框架本⾝身戰⾾鬥(學習、除錯、熟練)" - 耗時四個⽉月完成 MVP" - 框架本⾝身太多⿊黑魔法⼀一旦出事很難找問題源" - 雙向綁定造成資料流向錯綜複雜控管不易" - ⾴頁⾯面效能不佳(60FPS 成為⼀一種謠傳)" - 記憶體耗⽤用極⼤大(dirty checking 不穩定⼜又佔⽤用⼤大量 資源)
Slide 44
Slide 44 text
歷程 - 第⼆二版使⽤用 react/flux 開發" - 兩星期就重寫完成之前的進度" - 之後開始忍不住添加各種功能 (不要學" - ⾴頁⾯面反應快,意外問題減少" - 還能 server pre-render
Slide 45
Slide 45 text
導⼊入 React/Flux 後的 具體好處
Slide 46
Slide 46 text
好教、易學、快上⼿手 - 原本熟悉 js 的⼯工程師⼤大約 2 天即可學完整套概念" - 即戰⼒力⽴立即體現" - 終於不再怕缺⼈人了
Slide 47
Slide 47 text
加快開發速度 - 程式可切成許多獨⽴立⼩小元件,每個⼈人分頭開發,最 後再組合" - 框架本⾝身單純,撰寫元件容易且速度快" - 每個⼈人⼿手法⼀一致,容易除錯與相互⽀支援
Slide 48
Slide 48 text
提升程式穩定度 - 單向資料流 + 永遠重繪 兩⼤大原則讓程式複雜度⼤大幅 降低" - 等於內建防呆措施因此不易製造 bug" - 更少的 bug 等於更早下班或開發更多新功能
Slide 49
Slide 49 text
降低維護成本 - 程式單純因此不易出錯, ⾃自然也不需維護" - ⾏行為⾼高度可預測,因此就算出錯也很容易排除" - 通常不是 model 就是 view 有問題
Slide 50
Slide 50 text
提升客⼾戶滿意度 - 因為產品不易出包" - ⼜又能即時交貨" - 客⼾戶沒抱怨" - ⾃自然滿意度++
Slide 51
Slide 51 text
完美實現 full stack 流程 - 從頭到尾都是 javascript" - 突顯 isomorphic javascript 優勢" - 與 node.js / Express 搭配良好" - 與 real-time API server 搭配良好"
Slide 52
Slide 52 text
其它 - Accessibility (aria, role…)" - Immutable model" - Pre-rendering" - Server-side templating" - Gulp/Browserify" - Jest testing
Slide 53
Slide 53 text
晚上睡的好
Slide 54
Slide 54 text
中⽂文社群 reactjs.tw https://www.facebook.com/groups/reactjs.tw/ " 有問必答喔~
Slide 55
Slide 55 text
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"
Slide 56
Slide 56 text
lead developer of angularjs
Slide 57
Slide 57 text
[email protected]
Questions?