Bacon.js と自作HTMLスライドライブラリについて紹介した

久々にLT的なことをした

プライベートな勉強会みたいなやつで HTML/Markdown スライドライブラリの ahomu/Talkie を宣伝しつつ、そこで使ってみた baconjs/bacon.js について簡単な知見を共有した。

Talkie.js については、また機会を改めて（もうちょっと整えてから）ちゃんと詳しく紹介しようかと思う。

抜粋

Bacon.js は昨今の JavaScript ライブラリの文脈に合わせて言えば「Observer と Promise と足してあわせたやつ」という感じ。スーパーなやつ、と表現したい気もするが、これまた昨今の文脈においては古くから存在しているわりに流行ってはいないし、何らかの障壁が横たわってるように思う。

ともかく、ユニークな考え方 (FRP) に基づいたライブラリではあるし、試してみる分にはおすすめできる。

これを理解すれば OK な要素

• Bacon.EventStream
  • 処理の起点になる非同期データストリーム
• Bacon.Property
  • ストリームから生成される現在値(状態)を示すもの
• Bacon.Bus (便利な変種ストリーム)
  • 任意の値をpushしたり、他のStreamをplugできる

ふつうっぽいコード

// @type {Number} 現在の値
var current = 0;

// click されたら
plusEl.addEventListener('click', function(e) {
  // 加算/減算して
  current++;
  // 反映する
  counterEl.innerHTML = current;
});

minusEl.addEventListener('click', function(e) {
  current--;
  counterEl.innerHTML = current;
});

ベーコンがおいしいコード

// @type {Bacon.EventStream} +1/-1のストリーム
var plus  = Bacon.fromEventTarget(pEl,'click').map(1);
var minus = Bacon.fromEventTarget(mEl,'click').map(-1);
var src   = Bacon.mergeAll(plus, minus);
// @type {Bacon.Property} 現在の値
var current = src.scan(0, function(acc, v) {
  return acc + v;
});
// @type {Bacon.Bus} やってきたvalueをDOMに反映するバス
var counterBus = new Bacon.Bus();
counterBus.onValue(function(v) {
  counterEl.innerHTML = v;
});

counterBus.plug(current); // it works!

2/21 の Frontrend もよろしくお願いします

Frontrend Conference - A conference for front-end developer（2015年2月21日開催） では、Reactive Programming in JavaScript というタイトルでしゃべります。

近ごろJavaScript界隈でも、まことしやかに囁かれるようになった「リアクティブプログラミング」というキーワード。何がリアクティブなのか？ 従来のプログラミングと何が異なるのか？ JavaScriptにはどんなライブラリが？ 本セッションでは、Webフロントエンド開発者からみた「リアクティブ」の現状確認を紹介します。

Reactive Programing から Reactive Extensions 、JavaScript な FRP 方面の概観をお話する予定なので、ご来場予定でそっち方面に興味のあるかたは、ぜひ来てください。

---