Immutable model 簡介 - Speaker Deck

Slide 1

Slide 1 text

Immutable Model 簡介

Slide 2

Slide 2 text

Jeremy Lu @thecat | [email protected] Founder and builder, Lovelyreader | Pubulous | Visualmarks | Docknote

Slide 3

Slide 3 text

Developer 10+ years of hands-on experience

Slide 4

Slide 4 text

Consulting Social Media Finance Real Estate Digital Publishing

Slide 5

Slide 5 text

Founder Lovelyreader Pubulous Visualmarks Docknote

Slide 6

Slide 6 text

FullstackRocks.com LATEST

Slide 7

Slide 7 text

Immutable 是什麼？每次對 model 操作，不會變動原始內容，⽽而是返還新的物件

Slide 8

Slide 8 text

Immutable 是什麼？ - 以 Array.map() 為例 var arr1 = ['a', 'b', 'c']; var arr2 = arr1.map( function(item){ return 'x_' + item} ) // ["x_a", "x_b", "x_c"] - arr1 原始內容不變，map 處理後的值在 arr2 內

Slide 9

Slide 9 text

為何需要？ - user.info.arrPhones.push({'02-1111-2222'}); - 無界不易偵知物件內部的 arrPhones[] 值已改變 - 傳統解法有 KVO, watcher, Object.observe()，各有不同爛法 - 最乾淨解法是 immutable data types

Slide 10

Slide 10 text

有何好處？ - 元件 dirty check 無敵快 - shouldComponentUpdate: function(nextProps, nextState) - react 元件⽣生命週期依賴 shouldComponentUpdate() 判斷此輪是否需要重繪 - ⺫⽬目前⼀一律 return true 讓元件重繪 - 如果採⽤用 immutable，可⽤用⼀一句話 nextProps === this.props ⽐比對出資料是否變動

Slide 11

Slide 11 text

有何好處？ - 運算速度快 (因為不是 clone object，⽽而是 clone reference) - 節省記憶體消耗 - 也因為其值保証不變，因此可當 hash key

Slide 12

Slide 12 text

現⾏行 react 可⽤用⽅方案 - update helper - 輕量⼿手法 - 對原本程式影響最⼩小 - 語法⿇麻煩(尤其遇到深層結構時) - 無法防呆 * http://goo.gl/jpSxnB

Slide 13

Slide 13 text

現⾏行 react 可⽤用⽅方案 - immutablejs - 較重 - 要根本改變資料結構 - 可充份防呆 - 輕易操作深層物件結構 - 內部使⽤用 hash maps tries & vector tries - ⽀支援 chaining 操作 * http://goo.gl/GdrcfL

Slide 14

Slide 14 text

現⾏行 react 可⽤用⽅方案 - view plugin - 是個 React mixin，直接跟 view 綁在⼀一起 * http://goo.gl/HWkloq

Slide 15

Slide 15 text

現⾏行 react 可⽤用⽅方案 - Transducers * https://github.com/jlongster/transducers.js - Mori - 最像 clojure 語法，較怪異 * https://github.com/swannodette/mori - Cortex * https://github.com/mquan/cortex

Slide 16

Slide 16 text

現⾏行 react 可⽤用⽅方案 - OM - 純 clojure 語法，純欣賞兼致敬⽤用... * https://github.com/swannodette/om

Slide 17

Slide 17 text

推薦哪個？ - 資料結構單純的⽤用 update helper - ⼤大案⼦子⽤用 immutable.js - immutablejs 與 update 的差異 - immutablejs 可以防呆，update 不⾏行

Slide 18

Slide 18 text

為何不該⽤用 immutable？ - 90% 的案⼦子都沒這麼複雜 - 並且 VDOM 的 diff 本⾝身很有效率，可先⽤用它擋著

Slide 19

Slide 19 text

為何不該採⽤用 immutable？ - 現⾏行⼤大部份 immutable ⽅方案都讓程式碼變的更⻑⾧長、更⿇麻煩、也更難寫 - 因此⼀一定要先 benchmark 確認瓶頸在 dirty checking，才值得改⽤用 immutable - 你會⽤用 devtools 的 timeline 與 proﬁler 對吧？

Slide 20

Slide 20 text

你會⽤用 devtools 的 timeline 與 proﬁler 對吧？

Slide 21

Slide 21 text

為何不該採⽤用 immutable？ - 官⽅方也強調⽤用在 performance critical 的地⽅方才會有明顯好處

Slide 22

Slide 22 text

何時該⽤用 immutable model? - 程式裏有幾百個元件同時運⾏行導致效率不佳時

Slide 23

Slide 23 text

何時該⽤用 immutable model? - 需要 undo/redo 時 - 每次變動 model 後，皆會返還⼀一份新 model - 每次將舊的 model 塞⼊入 array 內保存，就免費獲得 undo/redo 功能 - ⼤大前提是 view 真的有忠實反應 model state - single source of truth + always redraw 原則 - Undo 就是抽換不同版本 model，view 就保証重繪 - 但如果某些狀態值只保存在 view 端，這招就 gg

Slide 24

Slide 24 text

何時該⽤用 immutable model? - 就算要⽤用 - 可以只選部份關鍵資料採⽤用 - 其它不會共⽤用的資料結構仍可延⽤用普通 js 資料格式

Slide 25

Slide 25 text

其它注意事項 - 範例裏常⽤用 ES6 語法 - 例如 fat arrow function =>

Slide 26

Slide 26 text

其它注意事項 - 選擇正確的 data structure ，剩下的問題都好解決

Slide 27

Slide 27 text

其它注意事項 - 有類似 OM 的 cursor 功能 - 可深⼊入 model 內部取出⼀一⼩小部份資料餵給元件當作 state - 因此操作⼿手續上較單純 * http://goo.gl/ZTpRXL

Slide 28

Slide 28 text

其它注意事項 - ⾄至少 2015 年初再開始⽤用 immutable.js，那時⼤大概出到 v4 版，API 會更穩定

Slide 29

Slide 29 text

90% 以上的機會你不需要⽤用到 immutable，或有其它更佳解法，因此⾏行動前請務必三思。