狠狠撸

Functional Reactive Programming?はじめの一歩
～配线プログラミング～
@rf0444

おしながき
? スプレッドシートの话
? 配线プログラミング

スプレッドシートの话

スプレッドシート？
スプレッドシートでは当たり前の、ある機能のお話をします。

一般的なプログラム
JavaScript

4 になってほしいケース
? 値の変更があったら、関連する値も更新されて欲しい
? リアルタイムアプリケーション
? GUI

スプレッドシートの场合

JavaScript での実装例
?-?イベント駆動
function onChange() {
var a = Number($("#val1").val());
var b = Number($("#val2").val());
var c = a + b;
$("#val3").text(c);
}
$("#val1").change(onChange);
$("#val2").change(onChange);

JavaScript での実装
? イベント駆動プログラミング
? 変化が起きたときに実行する「処理」を書いていく
? 手続き的アプローチ
? Any other approach?

スプレッドシートと配線のイメージ
A1
B1
C1+

JavaScript での実装を考える
a
b
c+

Bacon.js
? JavaScript ライブラリ
? 配线プログラミングをサポート
? jQuery と連携できる
? 他の JavaScript フレームワークとも連携できる
? backbone.js との連携例あり

配線をつくる
a
b
c
Bus
Bus Bus
function Model() {
var me = this;
me.a = new Bacon.Bus();
me.b = new Bacon.Bus();
me.c = new Bacon.Bus();
}

配線をつくる
a
b
c
function Model() {
var me = this;
}

+
配線をつくる
a
b
c
function Model() {
var me = this;
Bacon.combineWith(function(a, b) { return a + b; }, me.a, me.b)
}

配線をつくる
+
a
b
c
function Model() {
var me = this;
Bacon.combineWith(function(a, b) { return a + b; }, me.a, me.b).change()
}

配線をつくる
+
a
b
c
function Model() {
var me = this;
me.c.plug(
Bacon.combineWith(function(a, b) { return a + b; }, me.a, me.b).change()
);
}

入力側をつなげる
+
a
b
c

busel
function InputView(el, bus) {
var me = this;
me.el = el;
}
a

var me = this;
me.el = el;
me.el.asEventStream("change")
}
a

(change event)
var me = this;
me.el = el;
}
a

“1”
var me = this;
me.el = el;
.map(function() { return me.el.val(); })
}
a

“1”初期値 ( “0” )
var me = this;
me.el = el;
.merge(Bacon.once(me.el.val()))
}
a“1” “0”

“1”初期値 ( “0” )
var me = this;
me.el = el;
.map(Number)
}
a“1” “0” 1 0

a
var me = this;
me.el = el;
bus.plug(
.map(Number)
);
}
“1”初期値 ( “0” ) 1 0“1” “0”

出力側をつなげる
+
a
b
c

c
function OutputView(el, bus) {
var me = this;
me.el = el;
}
bus
el

c
var me = this;
me.el = el;
bus.assign(function(val) {
});
}
val

c
var me = this;
me.el = el;
bus.assign(function(val) {
me.el.text(val);
});
}
val

完成
var model = new Model();
new InputView($("#a"), model.a);
new InputView($("#b"), model.b);
new OutputView($("#c"), model.c);
a b c
model
+

部品プログラミング
「他の言語を学んで自由になろう」(山本和彦, http://mew.org/~kazu/material/2013-lang.pdf) より引用

部品プログラミングとの組み合わせ
model
view1
(editable)
view2

設計例
View
Model
Storage
Ajax
request event for model
request to server response from server
response event for model

Functional Reactive Programming?(FRP)
? 下の 2 つを関数でつないでいくことで、プログラムを書いていく方法
? 時間によって変化する値 (Behavior)
? 発生するイベントの列 (Event)
? GUI だけでなく、ログなどのリアルタイム解析でも利用されている
? 「配线プログラミング」は、実は FRP のこと

利用ライブラリ
? Bacon.js
? https://github.com/raimohanska/
? Behavior → Property、Event → EventStream

狠狠撸

Start FRP

Convert to study materialsBETA

More Related Content

Start FRP