Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React/Flux in Action 實戰經驗分享
Search
Jeremy Lu
October 11, 2014
77
11k
React/Flux in Action 實戰經驗分享
這是 2014 年 10 月於台北舉辦的 JSDC 2014 大會上分享的簡報。
English version will be up soon.
Jeremy Lu
October 11, 2014
Tweet
Share
More Decks by Jeremy Lu
See All by Jeremy Lu
採用 TypeScript 前你該考慮的十件事
coodoo
1
2.3k
React Conf 2019 回顧 與 2020 前端開發趨勢展望
coodoo
0
590
前端開發的再次典範轉移 如何走出混亂並讓複雜變得可掌控
coodoo
9
2.1k
ReactVR - a quick glance
coodoo
2
160
React Native 帶來的跨平台 mobile app 開發典範轉移
coodoo
6
3k
GraphQL and Relay Intro
coodoo
0
210
Reactjs.tw meetup 7 - 技術匯報
coodoo
22
1.5k
從「學習一次、隨處應用」 談 React Native 帶來的開發典範轉移
coodoo
5
1.3k
Sneak Preivew of React Native
coodoo
18
2.5k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
31
6.3k
Docker and Python
trallard
40
3.1k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Producing Creativity
orderedlist
PRO
341
39k
Designing the Hi-DPI Web
ddemaree
280
34k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Transcript
React+Flux in Action 實戰經驗分享
Jeremy Lu @thecat |
[email protected]
Founder and builder, Lovelyreader |
Pubulous | Visualmarks | Docknote
開發者 ⼗十年前後端開發經驗" 講求實戰、其餘免談" !
顧問服務" 社群媒體" 証券業" 房地產業" 出版業"
創辦⼈人" Lovelyreader" Pubulous" Visualmarks" Docknote"
React/Flux 是什麼? - Facebook 於 2013 年中開源" - React 是內建
VDOM 的輕量顯⽰示套件" - Flux 管理 Data + Flow" - React 負責 view,Flux 負責 model,兩者合作無間
誰在使⽤用? - Facebook" - Instagram" - Github" - Firefox" -
Yahoo Mail" …
React 亮點 - 元件式架構" - VDOM 虛擬⾴頁⾯面模型" - JSX 標記語法
元件式架構 - 捨棄 template 直接⽤用 js 控制版⾯面邏輯" - 因為 markup
與背後掌管它的程式本來就是⼀一 體的" - 硬要分離反⽽而削弱兩邊的⼒力量" - 想想 Handlebar 裏要寫邏輯處理的痛苦
<EditorCore isFocusEditor={item.focused} content={item.content ? item.content : 'default texts'} ! ref={item.uid}
! onChange={this.handleContentChange}
元件可層層組合 - 以⼤大化⼩小,個個擊破" - ⽅方便分⼯工合作,最後再組合起來" - ⼩小元件組合後可構成新功能
Docknote
Dissected
Tree ToolBar <FileList> <Tree /> <ToolBar onAdd={this.add} /> </FileList> In
details
完整⽣生命週期指令 componentWillMount()" componentDidMount()" shouldComponentUpdate()" render()" …
元件俱⾼高度封裝性 - 可將 javascript/css/html 三位⼀一體封裝於個別 元件內" - ⽅方便重覆使⽤用
VDOM - 虛擬⽂文件模型在記憶體內進⾏行⾼高效能運算與批 次更新" - 有效減少對 DOM 的操作因⽽而加快反應速度" - ⽀支援多種
backend,例如 DOM, Canvas, SVG 與 WebGL (famo.us)
JSX - 類似 HTML,可直接寫在 js 內的標記語⾔言" - 完美結合模板與程式語⾔言的優點" - 設計師也看的懂,可以幫忙改"
- 有⼯工具可 jsx <> html 互轉
<div>Hello {this.props.name}</div>; React.DOM.div(null, "Hello ", this.props.name); 或
Flux 亮點
掌管 Data + Flow
兩個基本概念 - ⼀一律重繪" - 單向資料流
⼀一律重繪 - model 是描述程式狀態的唯⼀一真理" - 只要 model 有變動,⼀一律重繪整個 ui,不需個別更新 DOM"
- 簡⾔言之,每次都當第⼀一次繪圖,只是給定的初始值不同" - 所以開發流程就是⼀一直做元件,然後餵 model 資料進 去,畫⾯面就保証正確
單向資料流 - Model 只讀不寫,是唯⼀一真理之所在" - 讓系統複雜度⼤大幅降低,程式⻑⾧長再⼤大也不怕" - ⼀一舉排除過往 MVC 掛⼀一漏萬的問題,"
*唯⼀一真理 = Single Source of Truth
掌管 Data + Flow
掌管 Data + Flow
以往⼿手法
以往⼿手法
兩相⽐比較
None
解決了哪些問題? - ⼈人才難覓" - 技能難學" - 框架複雜" - ⼿手法岐異" -
引誘犯罪"
⼈人才難覓 → angular 難學,會的⼈人本就不多,⾼高⼿手更稀有" ! - 熟悉 javascript/jquery 並有⼀一兩年 web
開發經 驗者即是潛在招募對象" - 如果原本就會 angular/backbone/ember 等框 架者更是⼈人中之⻯⿓龍
技能難學 → 概念複雜,新⼿手⾄至少要半年才能獨當⼀一⾯面" " " - 整體概念單純好學易懂" - 學習曲線極平滑,⽽而且之後沒有隱藏陷井" -
只要熟 javascript ⼤大約兩天即可上⼿手實戰
Angularjs 學習曲線
React/Flux 學習曲線
框架複雜 → 除錯與客製化皆不易" " " " - React 只做好元件系統,單純⽽而不易出錯" -
Flux 只是⼀一個⼿手法概念,容易理解,也好調整
引誘犯罪 → 設計複雜容易引⼈人犯錯,導致維護成本上升、 客⼾戶滿意度下降" ! - 程式結構單純,本不易出錯,⻑⾧長期維護成本就降 低" " "
" - 當出錯時問題很容易⼀一分為⼆二,不是 model 就 是 view 有問題,可快速修復
總的來說 - 讓系統架構更單純穩定,不易出錯且好維護" - 總體擁有成本就會下降" - 開發者寫的開⼼心,臉上洋溢幸福笑容 XDDD
專案最後都會搞⼤大,如果⼀一開始 ⼿手法單純,將來還有機會控制, 反之,則必然悲劇收場。 我的⾎血淚教訓史 ⼼心法
Case Study
Docknote 幫助⼯工程師快速蒐集、整理與分享個⼈人技術筆記
None
歷程 - 第⼀一版使⽤用 angularjs 開發" - ⼀一半時間在與框架本⾝身戰⾾鬥(學習、除錯、熟練)" - 耗時四個⽉月完成 MVP"
- 框架本⾝身太多⿊黑魔法⼀一旦出事很難找問題源" - 雙向綁定造成資料流向錯綜複雜控管不易" - ⾴頁⾯面效能不佳(60FPS 成為⼀一種謠傳)" - 記憶體耗⽤用極⼤大(dirty checking 不穩定⼜又佔⽤用⼤大量 資源)
歷程 - 第⼆二版使⽤用 react/flux 開發" - 兩星期就重寫完成之前的進度" - 之後開始忍不住添加各種功能 (不要學"
- ⾴頁⾯面反應快,意外問題減少" - 還能 server pre-render
導⼊入 React/Flux 後的 具體好處
好教、易學、快上⼿手 - 原本熟悉 js 的⼯工程師⼤大約 2 天即可學完整套概念" - 即戰⼒力⽴立即體現" -
終於不再怕缺⼈人了
加快開發速度 - 程式可切成許多獨⽴立⼩小元件,每個⼈人分頭開發,最 後再組合" - 框架本⾝身單純,撰寫元件容易且速度快" - 每個⼈人⼿手法⼀一致,容易除錯與相互⽀支援
提升程式穩定度 - 單向資料流 + 永遠重繪 兩⼤大原則讓程式複雜度⼤大幅 降低" - 等於內建防呆措施因此不易製造 bug"
- 更少的 bug 等於更早下班或開發更多新功能
降低維護成本 - 程式單純因此不易出錯, ⾃自然也不需維護" - ⾏行為⾼高度可預測,因此就算出錯也很容易排除" - 通常不是 model 就是
view 有問題
提升客⼾戶滿意度 - 因為產品不易出包" - ⼜又能即時交貨" - 客⼾戶沒抱怨" - ⾃自然滿意度++
完美實現 full stack 流程 - 從頭到尾都是 javascript" - 突顯 isomorphic
javascript 優勢" - 與 node.js / Express 搭配良好" - 與 real-time API server 搭配良好"
其它 - Accessibility (aria, role…)" - Immutable model" - Pre-rendering"
- Server-side templating" - Gulp/Browserify" - Jest testing
晚上睡的好
中⽂文社群 reactjs.tw https://www.facebook.com/groups/reactjs.tw/ " 有問必答喔~
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"
lead developer of angularjs
[email protected]
Questions?