2016-07-31 に書いた下期の目標にしたがって「ためした」を増やしていく。今回から trial tag で書いていく。

今日は yoshuawuyts/virtual-raf をためした。正確にはその実装および関連 package の実装を読んだ。

virtual-raf は virtual-dom を RAF loop に乗せる実装を簡易にする npm package 。関連 repository は次の通り。

• Matt-Esch/virtual-dom
• chrisdickinson/raf
• yoshuawuyts/virtual-raf

virtual-dom は bouzuya/b-o-a でも使用している Virtual DOM の実装のひとつ。過去に何度も書いているので説明は割愛する。

raf は RAF の polyfill 。まず RAF とは何か。

RAF: request animation frame 。 window.requestAnimationFrame() のこと。雑な説明をすると animation の frame で callback してくれる API 。再描画に便利で、基本は 60 fps になる。この API の callback 以上は早く描画しても無駄だと思っていい。

ちなみに bouzuya/b-o-a ではこのへんの実装は何もしていない。良くない。今回の bbn: blog.bouzuya.net の new version ではなんとかしたいな……。

で virtual-raf 。冒頭に書いたとおり raf と virtual-dom を使ったもの。次のような simple な API で RAF を利用できる (READMEより引用)。

const vraf = require('virtual-raf')
const vdom = require('virtual-dom')
const h = require('virtual-dom/h')

function render (state) {
  return h('div', [state.count])
}

const tree = vraf({ count: 1 }, render, vdom)
document.body.appendChild(tree.render())

tree.update({ count: 2 })

個人的には、初期化がいまひとつな印象。document.body.appendChild(tree.render()) して Real DOM を対応させる点に問題がある。この部分は SSR : server-side rendering を採用する際にまずくて client-side で一度すべての DOM を破棄することになってしまう。virtual-raf が参考にしている Raynos/main-loop ではこの点をきちんとしていて、opts.target で取れるようになっている。

yoshuawuyts/virtual-raf より Raynos/main-loop を使うほうが良いだろうな。