Tweet
Tweet

Slide 1

Slide 1 text

Implements Virtual DOM

Slide 2

Slide 2 text

せ⵸: @brn (ꫬꅿ⨳ⵃ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger ـؚٗ: http://abcdef.gets.b6n.ch/

Slide 3

Slide 3 text

FuelDOM FuelDOMהְֲReactjs✼䳔ךView㹋鄲׾⡲׶ת׃׋կ https://github.com/brn/fuel Ⰻ搫Ꟛ涪⚥זךדת׌הג׮劤殢דכ⢪ִתׇ׿ָծ ➙㔐כ׉ֿד䖤׋Virtual DOMךػؿؓ٦وٝأחꟼׅ׷濼鋅ך鑧דׅկ

Slide 4

Slide 4 text

What is virtual dom? ⟎䟝DOMהכծDOMך圓鸡׾JSךؔـآؙؑزדⱄ植׃ծ DOMך刿倜ח䗳銲ז䞔㜠׾ؔـآؙؑزך䊴ⴓד邌植ׅ׷ֿהדծ 湫䱸DOMח鍗׸׆חծ DOMך刿倜ח䗳銲זؔلٖ٦ءّٝ׾䬄⳿ׅ׷׋׭ך圓鸡 ـٓؐؠךDOMؔلٖ٦ءָّٝ鹼ְ׋׭ծ罋周ׁ׸׋կ

Slide 5

Slide 5 text

What is virtual dom? DOM node DOM node DOM node DOM node DOM node DOM node Virtual Node Virtual Node Virtual Node Virtual Node Virtual Node Virtual Node DOM tree VDom Tree

Slide 6

Slide 6 text

div span div text span p What is virtual dom? div span div text span p Removed VDom tree A VDom Tree B 嫰鯰

Slide 7

Slide 7 text

DOM node DOM node DOM node DOM node DOM node DOM node div span div text span p Removed What is virtual dom? VDom tree Dom Tree ؔلٖ٦ءّٝ׾黝欽 Remove OP

Slide 8

Slide 8 text

Virtual DOM Implementation ⟎䟝DOMכ㛇劤涸ח加圓鸡זךדծ加圓鸡嫰鯰ך،ٕ؞ٔؤي׾⢪ִלծ 넝鸞ח嫰鯰ծPatchָדֹ׷כ׆ Tree Edit Distance׏שְ䠬ׄד㹋鄲կ ׉׃גծvdom-benchmarkדكٝث https://vdom-benchmark.github.io/vdom-benchmark/

Slide 9

Slide 9 text

Virtual DOM Implementation Fuel 157628 React 187506

Slide 10

Slide 10 text

Virtual DOM Implementation ִִֶׇ

Slide 11

Slide 11 text

Virtual DOM Implementation ⟎䟝DOMך嫰鯰כ⽃秪ז加圓鸡ך嫰鯰דכזְկ剑׮ꅾ銲זךכծ 넝鸞ח加圓鸡׾׋ו׷✲דכזֻ •  ְַח嫰鯰׾׃זְַ •  דֹ׷׌ֽDOMؔلٖ٦ءّٝ׾⽃秪⻉ׅ׷ •  嫰鯰،ٕ؞ٔؤي ׌׏׋ ׁ׵חReactךJSX׮⸬桦ָהג׮䝤ְկ

Slide 12

Slide 12 text

Virtual DOM Implementation
{[1, 2, 3].map(v => {v})} test
React.createClass(‘div’, {}, [1, 2, 3].map(v => React.createClass(‘span’, {}, v)), React.createClass(‘span’, {}, ‘test’) )

Slide 13

Slide 13 text

Virtual DOM Implementation React.createClass(‘div’, {}, //䒷侧ה׃ג㶨銲稆׾「ֽ《׷ָծ㶨銲稆ך㘗ָ麩ֲկ [1, 2, 3].map(v => React.createClass(‘span’, {}, v)), //痥♧䒷侧כReactElementךꂁ⴨ծ痥✳䒷侧כReactElement React.createClass(‘span’, {}, ‘test’) )

Slide 14

Slide 14 text

Virtual DOM Implementation خٔ٦圓鸡׾䊡㔐ׅ׷ꥷחծ׉׸׊׸ךةؚせָ麩׏גְ׸ל㶨銲稆ך 嫰鯰׾أؗحف׃Ⰻג⡲׶湫ׅկ 鋵ךةؚせ׌ֽ׾㢌ִגծ㶨銲稆כ׉ךתתהְֲ؛٦أכַז׶㼰ז ְկ ְ ְַ ַח ח嫰 嫰鯰 鯰׾ ׾׃ ׃ז זְ ְַ ַ

Slide 15

Slide 15 text

Virtual DOM Implementation דֹ׷׌ֽծءٝفٕד넝鸞זDOMؔلٖ٦ءّٝ׾遤ֲկ •  ذؗأزظ٦سכדֹ׷׌ֽ⡲׵׆ծNode.firstChild.nodeValue פך➿ⰅַծtextContentך➿Ⰵדׅתׇ׷կ •  㶨銲稆ךⰋ⵴ꤐכtextContentפך瑞俑㶵➿Ⰵד遤ֲկ •  ⵴ꤐכ㹋ꥷחכ遤׻׆ծ֮הדתה׭ג遤ֲկ DOMؔ ؔل لٖ ٖ٦ ٦ء ءّ ّٝ ٝך ך⽃ ⽃秪 秪⻉ ⻉

Slide 16

Slide 16 text

Virtual DOM Implementation vidomךPatch،ٕ؞ٔؤي׾ػؙ׏׋կ keyך嫰鯰׾דֹ׷׌ֽ鳤剅׾⡲׵׆ח遤ֲկ ٔأزךؿٗٝز٥ٔ،٥ؙٗأד嫰鯰׾遤ֲկ 嫰 嫰鯰 鯰، ،ٕ ٕ؞ ؞ٔ ٔؤ ؤي ي

Slide 17

Slide 17 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“5” li key=“4” li key=“3” li key=“2” li key=“1” ؙ ؙٗ ٗأ أ Unmatch Match treeALeftIndex = 0 treeBLeftIndex = 0 treeARightIndex = 4 treeBRightIndex = 4

Slide 18

Slide 18 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“5” li key=“4” li key=“3” li key=“2” li key=“1” ؙ ؙٗ ٗأ أ Unmatch Match treeALeftIndex = 0 treeARightIndex = 3 treeBLeftIndex = 1 treeBRightIndex = 4

Slide 19

Slide 19 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“5” li key=“4” li key=“3” li key=“2” li key=“1” ؙ ؙٗ ٗأ أ Unmatch Match treeALeftIndex = 0 treeARightIndex = 2 treeBLeftIndex = 2 treeBRightIndex = 4

Slide 20

Slide 20 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“5” li key=“4” li key=“3” li key=“2” li key=“1” ؙ ؙٗ ٗأ أ Unmatch Match treeALeftIndex = 0 treeARightIndex = 2 treeBLeftIndex = 2 treeBRightIndex = 4

Slide 21

Slide 21 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“5” li key=“4” li key=“3” li key=“2” li key=“1” ؙ ؙٗ ٗأ أ Match treeALeftIndex = 0 treeARightIndex = 2 treeBLeftIndex = 2 treeBRightIndex = 4

Slide 22

Slide 22 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“3” li key=“1” li key=“2” li key=“4” li key=“5” ٔ ٔ، ، Unmatch Unmatch treeALeftIndex = 0 treeBLeftIndex = 0 treeARightIndex = 4 treeBRightIndex = 4 Match

Slide 23

Slide 23 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“3” li key=“1” li key=“2” li key=“4” li key=“5” ٔ ٔ، ، Unmatch Unmatch treeALeftIndex = 0 treeBLeftIndex = 0 treeARightIndex = 3 treeBRightIndex = 3 Match

Slide 24

Slide 24 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“3” li key=“1” li key=“2” li key=“4” li key=“5” ٔ ٔ، ، Unmatch Match treeALeftIndex = 0 treeBLeftIndex = 0 treeARightIndex = 2 treeBRightIndex = 2

Slide 25

Slide 25 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“3” li key=“1” li key=“2” li key=“4” li key=“5” ٔ ٔ، ، Match treeALeftIndex = 0 treeBLeftIndex = 1 treeARightIndex = 2 treeBRightIndex = 2

Slide 26

Slide 26 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“3” li key=“1” li key=“2” li key=“4” li key=“5” ٔ ٔ، ، Match treeALeftIndex = 1 treeBLeftIndex = 2 treeARightIndex = 2 treeBRightIndex = 2

Slide 27

Slide 27 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“4” li key=“2” li key=“3” li key=“1” li key=“5” ؙ ؙٗ ٗأ أ٥ ٥ٔ ٔ، ، Unmatch Unmatch treeALeftIndex = 0 treeBLeftIndex = 0 treeARightIndex = 4 treeBRightIndex = 4 Match

Slide 28

Slide 28 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“4” li key=“2” li key=“3” li key=“1” li key=“5” ؙ ؙٗ ٗأ أ٥ ٥ٔ ٔ، ، Unmatch Match treeALeftIndex = 0 treeBLeftIndex = 0 treeARightIndex = 3 treeBRightIndex = 3

Slide 29

Slide 29 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“4” li key=“2” li key=“3” li key=“1” li key=“5” ؙ ؙٗ ٗأ أ٥ ٥ٔ ٔ، ، Unmatch Unmatch treeALeftIndex = 0 treeBLeftIndex = 1 treeARightIndex = 2 treeBRightIndex = 3 Match

Slide 30

Slide 30 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“4” li key=“2” li key=“3” li key=“1” li key=“5” ؙ ؙٗ ٗأ أ٥ ٥ٔ ٔ، ، treeALeftIndex = 1 treeBLeftIndex = 1 treeARightIndex = 2 treeBRightIndex = 2 Match

Slide 31

Slide 31 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“4” li key=“2” li key=“3” li key=“1” li key=“5” ؙ ؙٗ ٗأ أ٥ ٥ٔ ٔ، ، treeALeftIndex = 2 treeBLeftIndex = 2 treeARightIndex = 2 treeBRightIndex = 2 Match

Slide 32

Slide 32 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“5” li key=“3” li key=“1” li key=“4” li key=“2” ֲ ֲת תֻ ְֻ ְַ ַז זְ ְ㜥 㜥さ さ Unmatch Match treeALeftIndex = 0 treeBLeftIndex = 0 treeARightIndex = 4 treeBRightIndex = 4

Slide 33

Slide 33 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“5” li key=“3” li key=“1” li key=“4” li key=“2” ֲ ֲת תֻ ְֻ ְַ ַז זְ ְ㜥 㜥さ さ Unmatch Unmatch treeALeftIndex = 0 treeBLeftIndex = 1 treeARightIndex = 3 treeBRightIndex = 4 Unmatch Unmatch

Slide 34

Slide 34 text

Virtual DOM Implementation li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“5” li key=“1” li key=“3” li key=“4” li key=“2” ֲ ֲת תֻ ְֻ ְַ ַז זְ ְ㜥 㜥さ さ treeALeftIndex = 0 treeBLeftIndex = 0 treeARightIndex = 4 treeBRightIndex = 4 {1: 1, 3: 2, 4: 3, 2: 4} = {key: index} Map

Slide 35

Slide 35 text

Virtual DOM Implementation ֲתְַֻ׆ծMapך欰䧭ָ䗳銲ז؛٦أד׮ծ 剑㼭ך眔㔲דMap׾欰䧭ׅ׷׌ֽד幥׬ךד⸬桦ָ״ְկ li key=“1” li key=“2” li key=“3” li key=“4” li key=“5” li key=“5” li key=“1” li key=“3” li key=“4” li key=“2” この範囲 この範囲

Slide 36

Slide 36 text

Virtual DOM Implementation 㛇劤涸חٓٝتيחؗ٦ָꂁ縧ׁ׸׷ⶴさכSortedծReversed״׶׮⡚ ְկ KeyMapָ㹋ꥷח䗳銲חז׷תד欰䧭׾鹼䒀ׅ׷ֿהדծًٌٔծ鸞䏝 涸זؔ٦غ٦قحس׾䫇ִ׵׸׷կ

Slide 37

Slide 37 text

Virtual DOM Implementation ReactךJSXכꬊ䌢ח⸬桦ָ䝤ְկ 暴ח㶨銲稆חꂁ⴨ה俑㶵⴨ָ幉׈׏גֻ׷ךד䪔ְב׵ְկ ReactכflattenChildrenהְֲꟼ侧ד㶨銲稆׾ٖؗ؎ח׃גְ׷կ ֿ׸ַָז׶鹼ֻג搀꼽ָ㢳ְկ זךדծ✮׭ReactElement׾⡲׏גְֶגծflyweightػة٦ٝדⱄⵃ欽 ׃אאծ؎ٝة٦ؿؑ٦أ׾֮׻ׇ׷կ JSX

Slide 38

Slide 38 text

Virtual DOM Implementation •  Ⰻג׾ٍؗحءُׅ׷կ •  createElementכ⢪׻זְկCloneׅ׷ •  ReactElementכؙٓأחׅ׷կ Others

Slide 39

Slide 39 text

Virtual DOM Implementation 灶唱ׅ׷ץֹDOM銲稆כ㶨銲稆ה㾩䚍׾《׶ꤐְ׋䖓ծ Recylcerח״׏ג㔐　ׁ׸ծ如ךcreateElementךؿؑ٦ؤדⱄⵃ欽ׁ׸ תׅկ ֿ׸ח״׏ג倜鋉DOM欰䧭ך؝أز׾קרחկ ׋׌׃ծًٌٔ׾㖇鶕ׅ׷ךד׉ֿכزٖ٦سؔؿկ Caches

Slide 40

Slide 40 text

Virtual DOM Implementation 倜鋉銲稆ך⡲䧭ָ䗳銲ז㜥さכծةؚせהDOM銲稆ךMapחٍؗحءُ ׃גֶֹծcloneElementׅ׷կ createElement״׶㼰׃傍ְկ cloneElement

Slide 41

Slide 41 text

Virtual DOM Implementation ReactElementכؔـآؙؑزדכזֻծ؝ٝأزؙٓةַ׵欰䧭ׅ׷ק ֲָծ鸞䏝ָ傍ֻז׏׋կ V8ךMapؔـآؙؑزך暴㹀ָ넝鸞חז׷ַ׵ַ׮׃׸זְկ Constructor over Object

Slide 42

Slide 42 text

Virtual DOM Implementation 穠卓 Fuel 96131 React 192195 React-lite 107019

Slide 43

Slide 43 text

Virtual DOM Implementation ׋׌׃ծֿךذأزכֻ֮תדծإٔ٦فحزךذأزד׃ַזְկ ٖ؎ذٝءכذأز穠卓חכ植׸זְկ זךדծrequestAnimationFrameהַ⢪ֲה׬׃׹䝤⻉ׅ׷կ ֿךذأزכֻ֮תדծPatchך♧꬗涸זػؿؓ٦وٝأկ ֿךذأز穠卓דؿٖ٦يٙ٦ؙך⮚⸋׾寸׭׷ץ ֹדכזְ

Slide 44

Slide 44 text

Thank you! ׀幠耮֮׶ָהֲ׀ְׂת׃׋կ