Mithril + Kefir で FRP する

紹介する package

Mithril
kefir

なにをしたかったのか

元ネタ

mithril と kefir で 巷で話題の FRP を体感してみました.

Mithril

"A Javascript Framework for Building Brilliant Applications" だそうです.

JS から virtual な dom を生成するらしいです. 他の選択肢として React とかあります.

API がシンプルな割に routing, http request, promise 等の気配りも備えるニクいやつです.
ファイルサイズが小さいのも選びたくなる一因です.

シンプルなゆえにコンポーネントの生死とか描画のタイミングとかpropsの差分判定とか適当な感じがします.
あと React べったりなライブラリも多いので, そこらへんの恩恵はうけれない気がします.

Kefir

"Kefir — is an Reactive Programming library for JavaScript inspired by Bacon.js and RxJS with focus on high performance and low memory usage." だそうです.

リアクティブにすごいことをしてくれるライブラリです. 他の選択肢として RxJS とかあります.
こちらも API がそこそこシンプルで軽量なのがウリらしいですが, 他のライブラリを触ったことないのでよくわかりません.
ファイルサイズが他と比べて小さいのが最高です.

こちらの記事で詳しい比較をされてます.
ECMAScript7を見据えた、JavaScript(TypeScript)で使えるFRPライブラリの比較調査

やってみた

import {interval, fromEvents, combine, merge} from 'kefir';
import m from 'mithril';
import {EventEmitter} from 'events';

必要なものを読み込みます

const button = new EventEmitter();
const buttonHandler = (e) => button.emit('data', e);
const buttonStream = fromEvents(button, 'data');

ボタンのハンドラと押されたことを表すストリームを用意します.

このやり方はアンチパターンっぽいので良くないかもですが, jsx と混ぜにくいので採用してます.

const counterStream = merge([
  interval(1000, 1),
  buttonStream.map(() => -1).toProperty(() => 0),
]).scan((curr, next) => curr + next, 0);

一秒ごとに +1 増やすストリーム と ボタンが押されたら -1 するストリームを合成します.

  function createView (counter) {
    return (<button onclick={buttonHandler}> {counter} </button>);
  }
  const viewStream = counterStream.map(createView);

上記のストリームの結果をうけて, ビューを返すストリームを用意します.

const Root = {
  controller () {
    this.currView = m.prop([]);
    viewStream.onValue((nextView) => {
      this.currView(nextView);
      m.redraw();
    });
  },
  view (controller) {
    return controller.currView();
  }
}

m.mount(document.body, (<Root />));

ストリームの結果を受けるたびに, redraw するコンポーネントを作って読み込ませます.

npm install browserify babelify babel-plugin-mjsx mithril kefir
browserify -t [ babelify --stage 0 --plugins mjsx ] qiita.js -o bundle.js

必要なパッケージを読み込んでビルドすれば完成です.