速報：仮想 DOM は殺された。誰に？ magnum.js に

UPDATE@2016-01-26

MagJS のパフォーマンスを検証した結果、現時点では本番に投入できるレベルではないことが判明しました。

• 検証：MagJS の本当の描画パフォーマンス

どうやら、仮想 DOM はまだまだ死なないようです。

そして事件は起こった

Backbone ベースの Web アプリを恐る恐る作り出して、ようやく世界の状況が見えてきたこの頃。そろそろ次のステップを踏み出すべく、脱 Backbone を考えてます。

1. Angular あり得ない
2. Ember あり得ない
3. Vue あり得ない
4. React なんか違う
5. Mithril かなりイイ！

となって、Mithril に首までつかろうと決心したその矢先、Magnum.js が出てきてしまった。

Mithril や他のフレームワークからいいとこどりしていて、デジャブ感満載。ですが、ココロをギュギュッと鷲掴みされてしまいました。

特徴

• スーパークレイジーに速い
• HTML と JS が完全に分離している
• HTML に JS は入らないし、JS にも HTML が入らない
• シンプルな API(Mithril ライク)

サンプル

括目せよ！

test.html

<div id="lister">
  <h2></h2>
  <ul>
    <li class="item"></li>
  </ul>
</div>

test.js

mag.module('lister', {
  controller: function(props) {
    this.item = [1, 2, 3]
    this.title = 'Lister'
  },
  view: function(state, props, element) {
    state.h2 = {
      _text: state.title,
      _onclick: function() {
        state.show = state.show ? !state.show : true
        state.item.reverse()
        state.title = 'Gister' + state.show
      }
    }
  }
})

mag.module の第一引数、lister は <div id="lister"> と対応しており、ここで両者が結ばれます。controller 関数は一度だけ呼ばれて、view 関数は描画の度に呼ばれます。state はモデル DOM の変更をトリガーするためのオブジェクトであり、state を変更すると自動的に再描画が走りますが、もちろん最適化されています。props はいわゆるモデルに該当し、element は実際の lister 要素そのものになります。

重要なことは、HTML と JS が完全分離してお互いを侵食していないにも関わらず、state を通じてシームレスかつ協調的に動作すること。React や Mithril のような不格好な view はここでは一切登場しません。そして、Mithril 譲りのシンプル＆プレーンな関数やオブジェクトがそのまま使える気持ちよさ。フレームワークのゴリ押しを嫌々受け入れる必要など微塵もないわけです。

Mithril から拝借してきた概念なり部品が多く登場するので、Mithril な人は移行しやすいかもしれないけど、仮想 DOM がないので、view は完全に別物ですね。実際には、仮想 DOM に相当するものを裏で持っていると思いますが、少なくとも開発者レベルでは触れる必要がなさそうです。

まだ star もあんまりついていないので、本当に production に投入できるレベルかどうかの評価はこれからおいおいしていくことになります。でも、フルスクラッチではなく、巨人の肩乗りまくりでいいとこどりという戦法を取っているので、ある程度の品質は確保できていそうな予感があります。

仮想 DOM よ、さらば。永遠に。

結論

SPA はもうこれでいい気がする。KISS 万歳。