bouzuya/exercise-in-mithril

bouzuya/exercise-in-mithril をつくった。

昨日 (2015-08-25) も書いたとおり b-html/b-html-plus の Mithril 対応を進める予定だ。……しかし問題がある。ぼくは Mithril を使ったことがない。そこで tutorial を進めつつ練習しようと考えた。その結果が bouzuya/exercise-in-mithril だ。

感想を書く。全体を通じて Mithril は API 数が少なくてシンプルで良い。そして決して悪くない。Virtual DOM 時代の Backbone.js として扱われてもおかしくはない。

property (getter/setter) を手軽に定義できる m.prop やリクエストを助ける m.request での Model 関連の機能……は割とどうでもいい。

View 関連の m() や m.component はおそらく特にハマることなく使えるだろう。MSX という React JSX like なものも提供されているが十分に短いので書いていてそこまでほしいとは感じなかった。JSX と同じ形式になれば使いまわせるような気はするけれど View 内でそのような部分で切り替え可能にするメリットは感じられない。

Controller は戻り値が view に渡される function だ。this が制御されていて view への引数と同じものになる。率直な感想を言って使い勝手が悪い。

Component は { controller, view } だ。controller は Component の constructor のような役割を果たすけれど Component は constructor ではないので new されない。 Component に ES6 (ES2015) class は使えない。先に書いたとおり controller の this が制御されているので view の this と controller の this が一致しない。

この辺りの構造が気に入らないので自分なりのひな形を次のようにした。

m = require 'mithril'

class Component
  constructor: (attrs) ->
    @list = attrs.list

  render: ->
    m 'ul', @list.map (i) ->
      m 'li', i.name

module.exports =
  controller: (attrs) ->
    new Component(attrs)
  view: (c) ->
    c.render()

module.exports している箇所が Mithril Component 向けの形式へ変換している。class Component 部分はぼくが欲しかった形だ。controller の this 制御がなければもっと簡単に書けるのだけど……。

Router (m.route) は特定 DOM tree を URL に合わせて別の component に差し替えてくれる。パラメーターは m.route.param(key) で取れる。生成後の DOM tree の部分を指定したい場合はどうするのだろう……。そこは自前で判断かな。

ひとまず 1 日だけざっと触ってみてシンプルでアプリケーションに最低限の機能を提供してくれるということが分かった。m() が生成する構造もシンプルなのでおそらく mithril-b-html-plus は問題なくつくれるだろう。

その他

火曜日会からだと思うのだけど bouzuya/fgb-admin を faithcreates/fgb-admin にしたのだけど private にしたら streak が途切れてしまった。