際際滷

徭失�B初
? Nakau Rie
? ��I�プログラマ�`
? twitter: @nakau
? ソシャゲ: おつかれ表

コンテンツ
? Functional Reactive Programming
? Re?ex

Functional Reactive
Programming

FRP
? インタラクティブなソフトウェアを
? pure 韓顎稼界岳庄看稼で�g�するためのパラダイム

Interactive software
? on Programming
? INPUTの鞭け秘れ
? イベント&イベントハンドラ
? ステ�`ト砿尖
? UIレンダリング etc.

pure function
? 険恬喘がない
? �v方の翌何にある�篳�筌禰`タを�筝釮靴覆�
? 匯�來がある
? 揖じ秘薦デ�`タを嚥えられると械に揖じ�､魴気�

FRP
? 秘薦やイベントを協�xされた侏に輝てはめる
? 協�xされた侏に輝てはめるの��Qをモジュ�`ル晒
? ★ 険恬喘のある�v方を富なく

var v = "";
function a(){
v += "a";
}
function b(){
v += "b";
}
a(); // v = "a"
a(); // v = "aa"
b(); // v = "aab"
b(); // v = "aabb"

var v = "";
function a(v){
return v += "a";
}
function b(v){
return v += "b";
}
v = a(v); // v = "a"
v = a(v); // v = "aa"
v = b(v); // v = "aab"
v = b(v); // v = "aabb"

function join(line,n){ return line + n; }
timeline = [""];
timeline.reduce(join);// ""
timeline = ["","a"];
timeline.reduce(join); // "a"
timeline = ["","a","a"];
timeline.reduce(join); // "aa"
timeline = ["","a","a","b"];
timeline.reduce(join); // "aab"
timeline = ["","a","a","b","b"];
timeline.reduce(join); // "aabb"

Behavior
? �r�gとともに�啜弔�篁�垢�1つ1つの��
? Behaviorの�r�gは�B�A議
? Behaviorを�桑宥りに�I尖して�啜弔�､魃蹐�
? B=[V1,V2,V3,V4,´]
? B[T1]★V1

Event
? デ�`タの送れを�r�gと�､離撻△捻蹐�
? Eventの�r�gは�x柊議
? E=[(T1,V1),(T2,V2),´]
? Tは�r�gを燕し、Eventの�R�e徨になる

猟忖秘薦???�r�gの送れ��B�A議�
B=[""];
B=["","メ"];
B=["","メ","メロ"];
B=["","メ","メロ","メロン"];
マウスクリック???�r�gの送れ�ばらばら�
E=[(0, (0,0))]
E=[(0, (0,0)), (25, (300,200))]
E=[(0, (0,0)), (25, (300,200)), (30, (310,250))]

FRP Library
? Haskell
? Reactive
? Yampa
? reactive-banana
? Javascript
? RxJS
? Bacon.js

Re?ex
Re?ex is a high-performance, deterministic, higher-order
Functional Reactive Programming system

Re?ex
? FRPシステム
? pull / push 塀
? WEBアプリケ�`ション
? コンパイラ ´ GHC

Re?ex.DOM
? HTML DOM荷恬をRe?exシステム貧で佩う
? DOM勣殆でおこるイベントをFRPで�I尖
? GHCJS.DOMがベ�`ス

install
? cabal-install
? try-re?ex
? https://github.com/ryantrinkle/try-re?ex
cabal install re?ex-dom
./try-re?ex

To create a simple web GUI:
$ cat >hello.hs <<EOF
import Re?ex.Dom
main = mainWidget $ text "Hello, world!"
EOF
$ ghcjs hello.hs
Then navigate your browser to
?le:///path/to/try-re?ex/hello.jsexe/index.html

/hello.jsexe
- all.js
- index.html
- lib.js
- manifest.webapp
- out.js
- out.stats
- rts.js
- runmain.js

Hello World
import Reflex.Dom
main = mainWidget $ text "Hello, world!"
<html>
<head>´</head>
<body>Hello, world!</body>
</html>
hello.hs

Widget
? Re?exシステムにおけるDOM
? アプリケ�`ションはmainWidgetから兵まる
? IOアクションを卦す
? text , el , textInputもWidget
mainWidget :: Widget Spider (Gui Spider (WithWebView
SpiderHost) (HostFrame Spider)) () -> IO ()

text
? DOMのテキストノ�`ドを燕すWidget
? arg1 ´テキストノ�`ドとなる猟忖双
? return ´ テキストノ�`ドWidget
text :: MonadWidget t m => String -> m ()

el
? HTML Elementを燕すWidget
? arg1 ´タグとなる猟忖双
? arg2 ´タグの徨勣殆になるWidget
? return ´ Widget
el :: MonadWidget t m => String -> m a -> m a

DOMの��B1
import Reflex.Dom
main = mainWidget $ el ＾div" $ text
"Hello, world!"
<html>
<head>
´
</head>
<body>
<div>Hello, world!</div>
</body>
</html>

DOMの��B2
import Reflex.Dom
main = mainWidget $ el "div" $ do
el "h1" $ text "タイトル"
el "p" $ text "猟嫗"
<html>
<head>´</head>
<body>
<div>
<h1>タイトル</h1>
<p>猟嫗</p>
</div>
</body>
</html>

text
text :: MonadWidget t m => String -> m ()
el
el :: MonadWidget t m => String -> m a -> m a

Re?ex.Dynamic
? Re?exの�啜弔�篁�垢��
? Behavior , Event ★ Dynamic
? Re?ex.DOM
? 勣殆が隔つ�､�篁�筌ぅ戰鵐箸魃蹶F
data Dynamic t a
= Dynamic (Behavior t a) (Event t a)

Re?ex.Event
? Event�k伏の送れを燕す
? 1つの�k伏につき、1つのデ�`タを隔つ
? occurrence type
? never ´ �k伏しないイベントを恬る�v方

�啜弔��
1. import Reflex.Dom
2.
3. main = mainWidget $ el "div" $ do
4. tx <- textInput
5. dynText $ _textInput_value tx

dynText
dynText :: MonadWidget t m => Dynamic t
String -> m ()
? text�v方のDynamic Stringを鞭け函る井
? 哈方 ´ Dynamic t String
? return ´ textノ�`ドWidget

textInput
dynText :: MonadWidget t m
=> Dynamic t String -> m ()
? テキスト秘薦フィ�`ルドWidgetを卦す�v方
? 哈方 ´ なし
? return ´ テキスト秘薦Widget
? input
? 兜豚�､篳�圓鰆原┐任④�

textInputの�C嬬
data TextInput t
= TextInput {
_textInput_value :: Dynamic t String
, _textInput_keypress :: Event t Int
, _textInput_keydown :: Event t Int
, _textInput_keyup :: Event t Int
, _textInput_hasFocus :: Dynamic t Bool
, _textInput_element :: HTMLInputElement
}

Dynamicの��Q
1.import Reflex
2.import Reflex.Dom
3.import Safe (readMay)
5.main = mainWidget $ do
6. result <- numberInput
7. resultString <- mapDyn show result
8. dynText resultString
9.
10.numberInput :: MonadWidget t m => m
(Dynamic t (Maybe Double))
11.numberInput = do
12. n <- textInput
13. mapDyn readMay $ _textInput_value n

elの�C嬬
data El t
= El { _el_element :: HTMLElement
, _el_clicked :: Event t ()
, _el_keypress :: Event t Int
, _el_scrolled :: Event t Int
}

檎艶?艶恰を編してみて

よいところ
? try-re?exが��g
? Re?ex.DOM, GHCJS
? ポ�`タブル
? GHC冱�Z��に�Hしむ
? RecursiveDo, TemplateHaskell, QuasiQuotes
? Re?ex�g悶でも聞える

廣吭する泣
? Re?ex.DOM, GHCJS
? �g佩するブラウザはChromeがよさそう
? javascriptで�咾�
? メモリリ�`ク

�Y創
hackage : Re?ex
https://hackage.haskell.org/package/re?ex
try-refrex README
https://github.com/ryantrinkle/try-re?ex/blob/master/README.md
Reddit :
http://www.reddit.com/r/haskell/comments/31rat9/
re?ex_practical_functional_reactive_programming/
YouTube : Re?ex: Practical Functional Reactive Programming
https://www.youtube.com/watch?v=dOy7zIk3IUI

際際滷

檎艶韓鉛艶恰の府初

More Related Content

檎艶韓鉛艶恰の府初