picodomでVDOMの理解を深める

Transcript

1. picodomでVDOMの 理解を深める Takanori Oki @Megro.es
2. 自己紹介 • 大木 尊紀（オオキ タカノリ） / @takanorip • 株式会社スマートドライブ • フロントエンドエンジニア • React、Vue、Polymer、Web制作全般 • Polymer Japan 翻訳チーム • 「イヌでもわかる Web Components」
 好評配信中 • 輝夜月かわいい
3. Polymer Japan Cafe (2月6日@Google Tokyo Office)
4. hyperapp コードリーディング会
 （2月7日@チームスピリット）
5. picodom ?
6. picodom • VDOMでページを操作するJSライブラリ • 1kbしかない、軽い • hyperappのJorgeBucaranさんが書いてる • 提供するメソッドは2つだけ • h()：VDOMを生成する • patch()：VDOMへ差分適用 • JSXが使える
7. なんでpicodom？ • Fish shellのファンだから（JorgeBucaranさんはFish shellの開発者でもある） • hyperappよりも機能が絞られているから読みやすいか なと思った • VDOMの実装だけ読みたかった • picodom使ってオレオレライブラリ作れたら面白そう
8. picodomを読む
9. 構成とか • picodomの構成 • h.js：h()の定義 / 29行 • patch.js：patch()を定義 / 206行 • (index.jsは↑２つのファイルをimportしてるだけ)
10. picodomを読む: h() • VDOMを生成する • DOM構造をオブジェクトに変換する
 （VODMはオブジェクト） • めっちゃシンプルなので言うことない • Reactとかとやってることはだいたい同じ
11. h("div", {id: 'app'}, [ h("h1", {class: 'title'}, 'Title'), h("button", { onclick: () => {hoge: 'fuga'} }, "+"), 'some text' ]);
12. { name: "div", props: { id: "app" }, children: [ { name: "h1", props: { class : "title" }, children: ["Title"] }, { name: "button", props: { onclick: () => {hoge: 'fuga'} }, children: ["+"] }, "some text" ] }
13. picodomを読む: patch() patch patchElement setElementProp removeChildren createElement updateElement setElementProp oldNode == null patchElement true false
14. picodomを読む: patch() patch patchElementの結果を返す patchElement 差分更新の処理を司る setElementProp elementにpropsを挿入する createElement document.createElementを使って elementを作成する updateElement elementのvalueやpropsを更新する removeChildren elementを削除する
15. picodomを使う
16. import { h, patch } from picodom /** @jsx h */ let node function render(view, withState) { patch(node, (node = view(withState))) } function view(state) { return ( <div> <h1>{state}</h1> <input autofocus type="text" value={state} oninput={e => render(view, e.target.value)} /> </div> ) } render(view, "Hello!")
17. まとめ • 軽量なVDOMフレームワーク • 仮想DOMの仕組みがなんとなくわかった • コア機能のみの実装で、実装はとてもシンプル • picodomベースでオレオレフレームワークをつくる本 を書いてみたい
18. おわり （Rounded-L Mgen+ 2p）