picodomでVDOMの 理解を深める Takanori Oki @Megro.es

自己紹介 • 大木 尊紀（オオキ タカノリ） / @takanorip • 株式会社スマートドライブ • フロントエンドエンジニア • React、Vue、Polymer、Web制作全般 • Polymer Japan 翻訳チーム • 「イヌでもわかる Web Components」
 好評配信中 • 輝夜月かわいい

Polymer Japan Cafe (2月6日@Google Tokyo Office)

hyperapp コードリーディング会
 （2月7日@チームスピリット）

picodom ?

picodom • VDOMでページを操作するJSライブラリ • 1kbしかない、軽い • hyperappのJorgeBucaranさんが書いてる • 提供するメソッドは2つだけ • h()：VDOMを生成する • patch()：VDOMへ差分適用 • JSXが使える

なんでpicodom？ • Fish shellのファンだから（JorgeBucaranさんはFish shellの開発者でもある） • hyperappよりも機能が絞られているから読みやすいか なと思った • VDOMの実装だけ読みたかった • picodom使ってオレオレライブラリ作れたら面白そう

picodomを読む

構成とか • picodomの構成 • h.js：h()の定義 / 29行 • patch.js：patch()を定義 / 206行 • (index.jsは↑２つのファイルをimportしてるだけ)

picodomを読む: h() • VDOMを生成する • DOM構造をオブジェクトに変換する
 （VODMはオブジェクト） • めっちゃシンプルなので言うことない • Reactとかとやってることはだいたい同じ

h("div", {id: 'app'}, [ h("h1", {class: 'title'}, 'Title'), h("button", { onclick: () => {hoge: 'fuga'} }, "+"), 'some text' ]);

{ name: "div", props: { id: "app" }, children: [ { name: "h1", props: { class : "title" }, children: ["Title"] }, { name: "button", props: { onclick: () => {hoge: 'fuga'} }, children: ["+"] }, "some text" ] }

picodomを読む: patch() patch patchElement setElementProp removeChildren createElement updateElement setElementProp oldNode == null patchElement true false

picodomを読む: patch() patch patchElementの結果を返す patchElement 差分更新の処理を司る setElementProp elementにpropsを挿入する createElement document.createElementを使って elementを作成する updateElement elementのvalueやpropsを更新する removeChildren elementを削除する

picodomを使う

import { h, patch } from picodom /** @jsx h */ let node function render(view, withState) { patch(node, (node = view(withState))) } function view(state) { return ( ) } render(view, "Hello!")

まとめ • 軽量なVDOMフレームワーク • 仮想DOMの仕組みがなんとなくわかった • コア機能のみの実装で、実装はとてもシンプル • picodomベースでオレオレフレームワークをつくる本 を書いてみたい

おわり （Rounded-L Mgen+ 2p）