Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: debba3b1f0
Fetching contributors…

Cannot retrieve contributors at this time

472 lines (387 sloc) 53.406 kb
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="talk.js"></script>
</head>
<body>
<div id="slides">
<div id="title" class="slide center" style="display:none">
<h1 id="title_title">Better AJAX UIs<br/>with<br/>Functional Reactive Programming</h1>
<p id="title_email">jake@donham.org</p>
</div>
<div id="gui_hard" class="slide" style="display:none">
<h2>GUIs are hard!</h2>
<p>Typical GUI impl consists of</p>
<ul>
<li>state</li>
<li>events</li>
<li>callbacks</li>
</ul>
<p>Problems:</p>
<ul>
<li>state + concurrency = pain</li>
<li>callback soup, control inversion</li>
</ul>
<p>Adobe: 1/3 code and 1/2 bugs due to event handling</p>
</div>
<div id="gui_not_hard" class="slide" style="display:none">
<h2>GUIs should not be hard!</h2>
<p>Model: <code style="margin-left: 20px"><span class="type">var</span> <span class="variable-name">e</span> = <span class="keyword">new</span> <span class="type">Elephant</span>();</code></p>
<p>View: <img style="margin-left: 50px; vertical-align: middle" src="elephant.jpg"></p>
<p>View is a function of model, model is a function of events.</p>
<p>Functional reactive programming: write them that way!</p>
<p>Slogan: <b>Dependencies, not callbacks.</b></p>
</div>
<div id="ocaml_etc" class="slide" style="display:none">
<h2>OCaml et al.</h2>
<ul>
<li>OCaml: a nice programming language
<table id="ocaml_etc_syntax" style="border-collapse: collapse">
<tr>
<td class="border_bottom">Javascript</td>
<td class="border_bottom border_left">OCaml</td>
</tr>
<tr>
<td><code>f<span class="tuareg-font-lock-operator">(</span>x<span class="tuareg-font-lock-operator">,</span> y<span class="tuareg-font-lock-operator">)</span></code></td>
<td class="border_left"><code>f x y</code></td>
</tr>
<tr>
<td><code>foo.bar<span class="tuareg-font-lock-operator">(</span>x<span class="tuareg-font-lock-operator">)</span></code></td>
<td class="border_left"><code>foo<span class="tuareg-font-lock-operator">#</span>bar x</code></td>
</tr>
<tr>
<td><code><span class="type">Foo</span>.bar<span class="tuareg-font-lock-operator">(</span>x<span class="tuareg-font-lock-operator">)</span></code></td>
<td class="border_left"><code><span class="type">Foo</span>.bar x</code></td>
</tr>
<tr>
<td><code><span class="keyword">function</span> <span class="tuareg-font-lock-operator">(</span><span class="variable-name">x</span><span class="tuareg-font-lock-operator">)</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">{</span> <span class="tuareg-font-lock-operator">...</span> <span class="tuareg-font-lock-operator">}</span></code></td>
<td class="border_left"><code><span class="keyword">fun</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">-&gt;</span> <span class="tuareg-font-lock-operator">...</span></code></td>
</tr>
<tr>
<td><code><span class="tuareg-font-lock-governing">var</span> <span class="variable-name">x</span> <span class="tuareg-font-lock-operator">=</span> <span class="tuareg-font-lock-operator">...;</span></code></td>
<td class="border_left"><code><span class="tuareg-font-lock-governing">let</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">=</span> <span class="tuareg-font-lock-operator">...</span> <span class="tuareg-font-lock-governing">in</span></code></td>
</tr>
<tr>
<td><code>x <span class="tuareg-font-lock-operator">?</span> y <span class="tuareg-font-lock-operator">:</span> z</code></td>
<td class="border_left"><code><span class="keyword">if</span> x <span class="keyword">then</span> y <span class="keyword">else</span> z</code></td>
</tr>
<tr>
<td></td>
<td class="border_left"><code><span class="tuareg-font-lock-governing">val</span> <span class="variable-name">foo </span><span class="tuareg-font-lock-operator">:</span> <span class="type">int </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> <span class="type">int </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> string</span></code></td>
</tr>
<tr>
<td></td>
<td class="border_left"><code><span class="tuareg-font-lock-governing">type</span> <span class="tuareg-font-lock-operator">'</span><span class="type">a t </span><span class="tuareg-font-lock-operator">=</span> <span class="tuareg-font-lock-operator">...</span></code></td>
</tr>
</table>
</li>
<li>ocamljs: compiles OCaml to Javascript</li>
<li><code>Froc</code>, <code>Dom</code>, <code>Froc_dom</code>: FRP library, access to DOM</li>
</ul>
</div>
<div id="behaviors" class="slide" style="display:none">
<h2>Behaviors</h2>
<p>A disembodied spreadsheet cell:</p>
<pre>
<span class="tuareg-font-lock-governing">type</span> <span class="tuareg-font-lock-operator">'</span><span class="type">a behavior</span>
</pre>
<p><b>Example:</b> <code><input size="1" id="behaviors_input"> <span class="tuareg-font-lock-operator">+</span> 1 <span class="tuareg-font-lock-operator">=</span> <span id="behaviors_output" class="output"></span></code></p>
<pre>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">input </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Dom</span>.document<span class="tuareg-font-lock-operator">#</span>getElementById <span class="string">"input"</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">value </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc_dom</span>.input_value_b input <span class="tuareg-font-lock-governing">in</span> <span class="tuareg-font-lock-operator">...</span>
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">lift </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">('</span><span class="type">a </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">b</span><span class="tuareg-font-lock-operator">)</span><span class="type"> </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a behavior </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">b behavior</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">int_value </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.lift int_of_string value <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">incr </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.lift <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">-&gt;</span> x <span class="tuareg-font-lock-operator">+</span> 1<span class="tuareg-font-lock-operator">)</span> int_value <span class="tuareg-font-lock-governing">in</span>
</pre>
<p>Dependents updated on changes.</p>
</div>
<div id="glitch_free" class="slide" style="display:none">
<h2>Glitch-free update</h2>
<p><b>Example:</b> <code><span class="tuareg-font-lock-governing">let</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">=</span> <input size="1" id="glitch_free_input"> <span class="tuareg-font-lock-governing">in</span> x <span class="tuareg-font-lock-operator">+</span> 2 <span class="tuareg-font-lock-operator">*</span> x <span class="tuareg-font-lock-operator">=</span> <span id="glitch_free_output" class="output"></span></code></p>
<pre>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">value </span><span class="tuareg-font-lock-operator">=</span> <span class="tuareg-font-lock-operator">...</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.lift int_of_string value <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">double </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.lift <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">-&gt;</span> 2 <span class="tuareg-font-lock-operator">*</span> x<span class="tuareg-font-lock-operator">)</span> x <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">triple </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.lift2 <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">s d </span><span class="tuareg-font-lock-operator">-&gt;</span> s <span class="tuareg-font-lock-operator">+</span> d<span class="tuareg-font-lock-operator">)</span> x double <span class="tuareg-font-lock-governing">in</span>
</pre>
<p>Must update in consistent order:</p>
<img style="margin-left: 250px" src="glitch_free.png">
<p>Update all behavior's deps before the behavior.</p>
</div>
<div id="dynamic_deps" class="slide" style="display:none">
<h2>Dynamic dependencies</h2>
<p><b>Example:</b>
<code><span class="tuareg-font-lock-governing">let</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">=</span> <input size="1" id="dynamic_deps_input"> <span class="tuareg-font-lock-governing">in</span> <span class="keyword">if</span> x <span class="tuareg-font-lock-operator">=</span> 0 <span class="keyword">then</span> 0 <span class="keyword">else</span> 100 <span class="tuareg-font-lock-operator">/</span> x <span class="tuareg-font-lock-operator">=</span> <span id="dynamic_deps_output" class="output"></code></p>
<pre>
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">return </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">'</span><span class="type">a </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a behavior</span>
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">bind </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">'</span><span class="type">a behavior </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">('</span><span class="type">a </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">b behavior</span><span class="tuareg-font-lock-operator">)</span><span class="type"> </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">b behavior</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">=</span> <span class="tuareg-font-lock-operator">...</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">b </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.lift <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">-&gt;</span> x <span class="tuareg-font-lock-operator">=</span> 0<span class="tuareg-font-lock-operator">)</span> x <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">result </span><span class="tuareg-font-lock-operator">=</span>
<span class="type">Froc</span>.bind b <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">b </span><span class="tuareg-font-lock-operator">-&gt;</span>
<span class="keyword">if</span> b
<span class="keyword">then</span> <span class="type">Froc</span>.return 0
<span class="keyword">else</span> <span class="type">Froc</span>.lift <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">-&gt;</span> 100 <span class="tuareg-font-lock-operator">/</span> x<span class="tuareg-font-lock-operator">)</span> x<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-governing">in</span>
</pre>
<p>Dependencies in scope of <code>bind</code> are removed on updates.</p>
<p>Compare:</p>
<pre>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">div_x </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.lift <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">-&gt;</span> 100 <span class="tuareg-font-lock-operator">/</span> x<span class="tuareg-font-lock-operator">)</span> x <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">result </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.bind <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">b </span><span class="tuareg-font-lock-operator">-&gt;</span> <span class="keyword">if</span> b <span class="keyword">then</span> <span class="type">Froc</span>.return 0 <span class="keyword">else</span> div_x<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-governing">in</span>
</pre>
</div>
<div id="notifications" class="slide" style="display:none">
<h2>Notifications</h2>
<p>To do something with a behavior:</p>
<pre>
<span class="type">Froc</span>.notify_b innerHTML <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">s </span><span class="tuareg-font-lock-operator">-&gt;</span> e<span class="tuareg-font-lock-operator">#</span>_set_innerHTML s<span class="tuareg-font-lock-operator">);</span>
</pre>
<p>Or:</p>
<pre>
<span class="type">Froc_dom</span>.attach_innerHTML_b e innerHTML<span class="tuareg-font-lock-operator">;</span>
</pre>
<p>"Hey, wait, that's just a callback!"</p>
<p>Yes, but:</p>
<ul>
<li>you only need them at the edge of the graph</li>
<li>glitch-free, dynamic dependencies handled</li>
</ul>
<p>Alternative: build behavior of whole UI, call <code>notify_b</code> once</p>
</div>
<div id="fritter" class="slide" style="display:none">
<h2>Example: Fritter</h2>
<div style="position:relative; width:525px">
<h3 id="fritter_what">What's happening?</h3>
<textarea id="fritter_text" cols="40" rows="2"></textarea>
<div id="fritter_count">140</div>
<button id="fritter_tweet">Tweet</button>
<pre style="font-size: 18px" id="fritter_code">
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">text </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Dom</span>.document<span class="tuareg-font-lock-operator">#</span>getElementById <span class="string">"text"</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">count </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Dom</span>.document<span class="tuareg-font-lock-operator">#</span>getElementById <span class="string">"count"</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">tweet </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Dom</span>.document<span class="tuareg-font-lock-operator">#</span>getElementById <span class="string">"tweet"</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">length </span><span class="tuareg-font-lock-operator">=</span>
<span class="type">Froc</span>.lift <span class="type">String</span>.length <span class="tuareg-font-lock-operator">(</span><span class="type">Froc_dom</span>.input_value_b <span class="tuareg-font-lock-operator">~</span><span class="variable-name">event</span><span class="tuareg-font-lock-operator">:</span><span class="string">"keyup"</span> text<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">left </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.lift <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">-&gt;</span> 140 <span class="tuareg-font-lock-operator">-</span> x<span class="tuareg-font-lock-operator">)</span> length <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">color </span><span class="tuareg-font-lock-operator">=</span>
<span class="type">Froc</span>.lift
<span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">-&gt;</span> <span class="keyword">if</span> x <span class="tuareg-font-lock-operator">&lt;</span> 10 <span class="keyword">then</span> <span class="string">"#D40D12"</span> <span class="keyword">else</span> <span class="keyword">if</span> x <span class="tuareg-font-lock-operator">&lt;</span> 20 <span class="keyword">then</span> <span class="string">"#5C0002"</span> <span class="keyword">else</span> <span class="string">"#CCC"</span><span class="tuareg-font-lock-operator">)</span>
left <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">disabled </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.lift <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">x </span><span class="tuareg-font-lock-operator">-&gt;</span> x <span class="tuareg-font-lock-operator">&lt;</span> 0<span class="tuareg-font-lock-operator">)</span> left <span class="tuareg-font-lock-governing">in</span>
<span class="type">Froc_dom</span>.attach_innerHTML_b count <span class="tuareg-font-lock-operator">(</span><span class="type">Froc</span>.lift string_of_int left<span class="tuareg-font-lock-operator">);</span>
<span class="type">Froc_dom</span>.attach_color_b count color<span class="tuareg-font-lock-operator">;</span>
<span class="type">Froc_dom</span>.attach_disabled_b tweet disabled<span class="tuareg-font-lock-operator">;</span>
</div>
</div>
<div id="sudoku" class="slide" style="display:none">
<h2>Example: Sudoku</h2>
<div id="sudoku_board"></div>
</div>
<div id="sudoku_src" class="slide" style="display:none">
<h2>Example: Sudoku source</h2>
<pre style="font-size: 18px">
<span class="tuareg-font-lock-governing">type</span> <span class="type">square </span><span class="tuareg-font-lock-operator">=</span> <span class="tuareg-font-lock-operator">{</span>
<span class="variable-name">i</span> <span class="tuareg-font-lock-operator">:</span> <span class="type">int</span><span class="tuareg-font-lock-operator">;</span>
<span class="variable-name">j</span> <span class="tuareg-font-lock-operator">:</span> <span class="type">int</span><span class="tuareg-font-lock-operator">;</span>
<span class="variable-name">cell</span> <span class="tuareg-font-lock-operator">:</span> <span class="type">int option Froc.behavior</span><span class="tuareg-font-lock-operator">;</span>
<span class="variable-name">input</span> <span class="tuareg-font-lock-operator">:</span> <span class="type">Dom.input</span><span class="tuareg-font-lock-operator">;</span>
<span class="tuareg-font-lock-operator">}</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">squares </span><span class="tuareg-font-lock-operator">=</span> <span class="tuareg-font-lock-operator">...</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">adjacents </span><span class="tuareg-font-lock-operator">{</span> i <span class="tuareg-font-lock-operator">=</span> i<span class="tuareg-font-lock-operator">;</span> j <span class="tuareg-font-lock-operator">=</span> j <span class="tuareg-font-lock-operator">}</span> <span class="tuareg-font-lock-operator">=</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">adj </span><span class="tuareg-font-lock-operator">{</span> i <span class="tuareg-font-lock-operator">=</span> i<span class="tuareg-font-lock-operator">';</span> j <span class="tuareg-font-lock-operator">=</span> j<span class="tuareg-font-lock-operator">'</span> <span class="tuareg-font-lock-operator">}</span> <span class="tuareg-font-lock-operator">=</span>
<span class="tuareg-font-lock-operator">(not</span> <span class="tuareg-font-lock-operator">(</span>i<span class="tuareg-font-lock-operator">'</span> <span class="tuareg-font-lock-operator">=</span> i <span class="tuareg-font-lock-operator">&amp;&amp;</span> j<span class="tuareg-font-lock-operator">'</span> <span class="tuareg-font-lock-operator">=</span> j<span class="tuareg-font-lock-operator">))</span> <span class="tuareg-font-lock-operator">&amp;&amp;</span>
<span class="tuareg-font-lock-operator">(</span>i<span class="tuareg-font-lock-operator">'</span> <span class="tuareg-font-lock-operator">=</span> i <span class="tuareg-font-lock-operator">||</span> j<span class="tuareg-font-lock-operator">'</span> <span class="tuareg-font-lock-operator">=</span> j <span class="tuareg-font-lock-operator">||</span>
<span class="tuareg-font-lock-operator">(</span>i<span class="tuareg-font-lock-operator">'</span> <span class="tuareg-font-lock-operator">/</span> 3 <span class="tuareg-font-lock-operator">=</span> i <span class="tuareg-font-lock-operator">/</span> 3 <span class="tuareg-font-lock-operator">&amp;&amp;</span> j<span class="tuareg-font-lock-operator">'</span> <span class="tuareg-font-lock-operator">/</span> 3 <span class="tuareg-font-lock-operator">=</span> j <span class="tuareg-font-lock-operator">/</span> 3<span class="tuareg-font-lock-operator">))</span> <span class="tuareg-font-lock-governing">in</span>
<span class="type">List</span>.map <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">sq </span><span class="tuareg-font-lock-operator">-&gt;</span> sq.cell<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-operator">(</span><span class="type">List</span>.filter adj squares<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-governing">in</span>
<span class="type">List</span>.iter
<span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">sq </span><span class="tuareg-font-lock-operator">-&gt;</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">bg </span><span class="tuareg-font-lock-operator">=</span>
<span class="type">Froc</span>.bindN <span class="tuareg-font-lock-operator">(</span>adjacents sq<span class="tuareg-font-lock-operator">)</span>
<span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">adjs </span><span class="tuareg-font-lock-operator">-&gt;</span>
<span class="type">Froc</span>.lift
<span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">v </span><span class="tuareg-font-lock-operator">-&gt;</span>
<span class="keyword">if</span> v <span class="tuareg-font-lock-operator">&lt;&gt;</span> None <span class="tuareg-font-lock-operator">&amp;&amp;</span> <span class="type">List</span>.mem v adjs
<span class="keyword">then</span> <span class="string">"#ff0000"</span>
<span class="keyword">else</span> <span class="string">"#ffffff"</span><span class="tuareg-font-lock-operator">)</span>
sq.cell<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-governing">in</span>
<span class="type">Froc_dom</span>.attach_backgroundColor_b sq.input bg<span class="tuareg-font-lock-operator">)</span>
squares<span class="tuareg-font-lock-operator">;</span>
</pre>
</div>
<div id="events" class="slide" style="display:none">
<h2>Events</h2>
<p>A disembodied event stream:</p>
<pre>
<span class="tuareg-font-lock-governing">type</span> <span class="tuareg-font-lock-operator">'</span><span class="type">a event</span>
</pre>
<p style="margin-bottom:0px"><b>Example:</b></p>
<p style="margin-top:0px; margin-left:20px">
<button id="events_button1">Button1</button> has been clicked <span id="events_output1"></span> times.</br>
<button id="events_button2">Button2</button> has been shift-clicked <span id="events_output2"></span> times.</br>
Either button has been clicked <span id="events_output3"></span> times.</br>
</p>
<pre>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">button </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Dom</span>.document<span class="tuareg-font-lock-operator">#</span>getElementById <span class="string">"button"</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">button2 </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Dom</span>.document<span class="tuareg-font-lock-operator">#</span>getElementById <span class="string">"button2"</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">clicks </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc_dom</span>.clicks button <span class="tuareg-font-lock-governing">in</span> <span class="tuareg-font-lock-operator">...</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">count </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.count clicks <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">filter </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">('</span><span class="type">a </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> bool</span><span class="tuareg-font-lock-operator">)</span><span class="type"> </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a event </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a event</span>
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">merge </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">'</span><span class="type">a event list </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a event</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">shift_clicks </span><span class="tuareg-font-lock-operator">=</span>
<span class="type">Froc</span>.filter <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">e </span><span class="tuareg-font-lock-operator">-&gt;</span> e<span class="tuareg-font-lock-operator">#</span>_get_shiftKey<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-operator">(</span><span class="type">Froc_dom</span>.clicks button2<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">either_clicks </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Froc</span>.merge <span class="tuareg-font-lock-operator">[</span> clicks<span class="tuareg-font-lock-operator">;</span> shift_clicks <span class="tuareg-font-lock-operator">]</span> <span class="tuareg-font-lock-governing">in</span>
</pre>
</pre>
</div>
<div id="signup" class="slide" style="display:none">
<h2>Example: Signup</h2>
<table>
<tr>
<td>Username</td>
<td><input type="text" id="signup_username"></td>
<td><span id="signup_username_ok"></span></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="signup_password"></td>
<td><span id="signup_password_ok"></span></td>
</tr>
<tr>
<td>Repeat password</td>
<td><input type="password" id="signup_password2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td><button id="signup_signup">Sign up</button></td>
<td></td>
</tr>
</table>
<pre style="font-size: 16px" id="signup_code">
<span class="tuareg-font-lock-governing">let</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">(~$)</span><span class="variable-name"> x </span><span class="tuareg-font-lock-operator">=</span> <span class="type">Dom</span>.document<span class="tuareg-font-lock-operator">#</span>getElementById x <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">(~&lt;)</span> x <span class="tuareg-font-lock-operator">=</span> <span class="type">Froc_dom</span>.input_value_b <span class="tuareg-font-lock-operator">~$</span>x <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">password_ok </span><span class="tuareg-font-lock-operator">=</span>
<span class="type">Froc</span>.blift2 <span class="tuareg-font-lock-operator">~&lt;</span><span class="string">"password"</span> <span class="tuareg-font-lock-operator">~&lt;</span><span class="string">"password2"</span> <span class="tuareg-font-lock-governing">begin</span> <span class="keyword">fun</span> <span class="variable-name">p p2 </span><span class="tuareg-font-lock-operator">-&gt;</span>
<span class="keyword">match</span> p<span class="tuareg-font-lock-operator">,</span> p2 <span class="keyword">with</span>
<span class="tuareg-font-lock-operator">|</span> <span class="string">""</span><span class="tuareg-font-lock-operator">,</span> _ <span class="tuareg-font-lock-operator">|</span> _<span class="tuareg-font-lock-operator">,</span> <span class="string">""</span> <span class="tuareg-font-lock-operator">-&gt;</span> `Unset
<span class="tuareg-font-lock-operator">|</span> p<span class="tuareg-font-lock-operator">,</span> p2 <span class="keyword">when</span> p <span class="tuareg-font-lock-operator">=</span> p2 <span class="tuareg-font-lock-operator">-&gt;</span> `Ok
<span class="tuareg-font-lock-operator">|</span> _ <span class="tuareg-font-lock-operator">-&gt;</span> `Mismatch
<span class="tuareg-font-lock-governing">end</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">username_ok </span><span class="tuareg-font-lock-operator">= ...</span>
<span class="type">Froc_dom</span>.attach_innerHTML_b <span class="tuareg-font-lock-operator">~$</span><span class="string">"password_ok"</span>
<span class="tuareg-font-lock-operator">(</span><span class="type">Froc</span>.blift password_ok <span class="tuareg-font-lock-governing">begin</span> <span class="keyword">function</span>
<span class="variable-name"> </span><span class="tuareg-font-lock-operator">|</span> `Unset <span class="tuareg-font-lock-operator">-&gt;</span> <span class="string">""</span>
<span class="tuareg-font-lock-operator">|</span> `Ok <span class="tuareg-font-lock-operator">-&gt;</span> <span class="string">"ok"</span>
<span class="tuareg-font-lock-operator">|</span> `Mismatch <span class="tuareg-font-lock-operator">-&gt;</span> <span class="string">"mismatch"</span>
<span class="tuareg-font-lock-governing">end</span><span class="tuareg-font-lock-operator">);</span>
<span class="type">Froc_dom</span>.attach_disabled_b <span class="tuareg-font-lock-operator">~$</span><span class="string">"signup"</span>
<span class="tuareg-font-lock-operator">(</span><span class="type">Froc</span>.bliftN <span class="tuareg-font-lock-operator">[</span> password_ok<span class="tuareg-font-lock-operator">;</span> username_ok <span class="tuareg-font-lock-operator">]</span> <span class="tuareg-font-lock-governing">begin</span> <span class="keyword">fun</span> <span class="variable-name">oks </span><span class="tuareg-font-lock-operator">-&gt;</span>
<span class="tuareg-font-lock-operator">not</span> <span class="tuareg-font-lock-operator">(</span><span class="type">List</span>.for_all <span class="tuareg-font-lock-operator">(</span><span class="keyword">function</span><span class="variable-name"> </span>`Ok <span class="tuareg-font-lock-operator">-&gt;</span> <span class="constant">true</span> <span class="tuareg-font-lock-operator">|</span> _ <span class="tuareg-font-lock-operator">-&gt;</span> <span class="constant">false</span><span class="tuareg-font-lock-operator">)</span> oks<span class="tuareg-font-lock-operator">)</span>
<span class="tuareg-font-lock-governing">end</span><span class="tuareg-font-lock-operator">);</span>
</pre>
</div>
<div id="signup_src" class="slide" style="display:none">
<h2>Example: Signup source</h2>
<pre style="font-size: 18px">
<span class="tuareg-font-lock-governing">let</span> <span class="function-name">check_username</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">=</span> <span class="keyword">function</span>
<span class="tuareg-font-lock-operator">|</span> <span class="string">"jaked"</span> <span class="tuareg-font-lock-operator">-&gt;</span> `Taken
<span class="tuareg-font-lock-operator">|</span> _ <span class="tuareg-font-lock-operator">-&gt;</span> `Ok <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">check_username_rpc </span><span class="tuareg-font-lock-operator">:</span>
<span class="type">string event </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">(</span>string <span class="tuareg-font-lock-operator">*</span> <span class="tuareg-font-lock-operator">[</span>`Taken<span class="tuareg-font-lock-operator">|</span>`Ok<span class="tuareg-font-lock-operator">|</span>`Checking<span class="tuareg-font-lock-operator">])</span> event <span class="tuareg-font-lock-operator">=</span> <span class="tuareg-font-lock-operator">...</span>
<span class="tuareg-font-lock-governing">let</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">(|&gt;)</span> x f <span class="tuareg-font-lock-operator">=</span> f x
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">map </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">('</span><span class="type">a </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">b</span><span class="tuareg-font-lock-operator">)</span><span class="type"> </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a event </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">b event</span>
<span class="tuareg-font-lock-governing">let</span> <span class="function-name">maybe_check_username</span><span class="variable-name"> reqs </span><span class="tuareg-font-lock-operator">=</span>
<span class="type">Froc</span>.merge <span class="tuareg-font-lock-operator">[</span>
reqs <span class="tuareg-font-lock-operator">|&gt;</span> <span class="type">Froc</span>.filter <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">req </span><span class="tuareg-font-lock-operator">-&gt;</span> req <span class="tuareg-font-lock-operator">=</span> <span class="string">""</span><span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-operator">|&gt;</span> <span class="type">Froc</span>.map <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">_ </span><span class="tuareg-font-lock-operator">-&gt;</span> <span class="string">""</span><span class="tuareg-font-lock-operator">,</span> `Unset<span class="tuareg-font-lock-operator">);</span>
reqs <span class="tuareg-font-lock-operator">|&gt;</span> <span class="type">Froc</span>.filter <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="variable-name">req </span><span class="tuareg-font-lock-operator">-&gt;</span> req <span class="tuareg-font-lock-operator">&lt;&gt;</span> <span class="string">""</span><span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-operator">|&gt;</span> check_username_rpc<span class="tuareg-font-lock-operator">;</span>
<span class="tuareg-font-lock-operator">]</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">changes </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">'</span><span class="type">a behavior </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a event</span>
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">sample </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">'</span><span class="type">a behavior </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a</span>
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">hold </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">'</span><span class="type">a </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a event </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a behavior</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">username_ok </span><span class="tuareg-font-lock-operator">=</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">username </span><span class="tuareg-font-lock-operator">=</span> <span class="tuareg-font-lock-operator">~&lt;</span><span class="string">"username"</span> <span class="tuareg-font-lock-governing">in</span>
<span class="type">Froc</span>.changes username <span class="tuareg-font-lock-operator">|&gt;</span>
maybe_check_username <span class="tuareg-font-lock-operator">|&gt;</span>
<span class="type">Froc</span>.filter <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="tuareg-font-lock-operator">(</span><span class="variable-name">req</span><span class="tuareg-font-lock-operator">,</span><span class="variable-name"> _</span><span class="tuareg-font-lock-operator">)</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">-&gt;</span> <span class="type">Froc</span>.sample username <span class="tuareg-font-lock-operator">=</span> req<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-operator">|&gt;</span>
<span class="type">Froc</span>.map <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="tuareg-font-lock-operator">(</span><span class="variable-name">_</span><span class="tuareg-font-lock-operator">,</span><span class="variable-name"> res</span><span class="tuareg-font-lock-operator">)</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">-&gt;</span> res<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-operator">|&gt;</span>
<span class="type">Froc</span>.hold `Unset <span class="tuareg-font-lock-governing">in</span>
</pre>
</div>
<div id="bounce" class="slide" style="display:none">
<h2>Example: Bounce</h2>
<canvas id="bounce_canvas" width="900" height="400" style="border-style:solid"></canvas>
<ul>
<li>ball position defined by velocity</li>
<li>velocity defined by collisions (events)</li>
<li>collisions defined by ball position</li>
</ul>
</div>
<div id="bounce_src" class="slide" style="display:none">
<h2>Example: Bounce source</h2>
<pre style="font-size:16px">
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">when_true </span><span class="tuareg-font-lock-operator">:</span> <span class="type">bool behavior </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> unit event</span>
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">collect_b </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">('</span><span class="type">b </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">b</span><span class="tuareg-font-lock-operator">)</span><span class="type"> </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">b </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a event </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">b behavior</span>
<span class="tuareg-font-lock-governing">val</span> <span class="variable-name">fix_b </span><span class="tuareg-font-lock-operator">:</span> <span class="tuareg-font-lock-operator">('</span><span class="type">a behavior </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a behavior</span><span class="tuareg-font-lock-operator">)</span><span class="type"> </span><span class="tuareg-font-lock-operator">-&gt;</span><span class="type"> </span><span class="tuareg-font-lock-operator">'</span><span class="type">a behavior</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">ball_point </span><span class="tuareg-font-lock-operator">=</span>
<span class="type">F</span>.fix_b <span class="tuareg-font-lock-governing">begin</span> <span class="keyword">fun</span> <span class="variable-name">bp </span><span class="tuareg-font-lock-operator">-&gt;</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">x_out_of_bounds </span><span class="tuareg-font-lock-operator">=</span>
bp <span class="tuareg-font-lock-operator">|&gt;</span>
<span class="type">F</span>.lift <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="tuareg-font-lock-operator">(</span><span class="variable-name">x</span><span class="tuareg-font-lock-operator">,</span><span class="variable-name"> _</span><span class="tuareg-font-lock-operator">)</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">-&gt;</span> x <span class="tuareg-font-lock-operator">&lt;=</span> xmin <span class="tuareg-font-lock-operator">||</span> x <span class="tuareg-font-lock-operator">&gt;=</span> xmax<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-operator">|&gt;</span>
<span class="type">F</span>.when_true <span class="tuareg-font-lock-operator">|&gt;</span>
<span class="type">F</span>.map <span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="tuareg-font-lock-operator">()</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">-&gt;</span> `X_bounds<span class="tuareg-font-lock-operator">)</span> <span class="tuareg-font-lock-governing">in</span>
<span class="tuareg-font-lock-governing">let</span> <span class="variable-name">v </span><span class="tuareg-font-lock-operator">=</span>
<span class="type">F</span>.fix_b <span class="tuareg-font-lock-governing">begin</span> <span class="keyword">fun</span> <span class="variable-name">v </span><span class="tuareg-font-lock-operator">-&gt;</span>
<span class="type">F</span>.merge <span class="tuareg-font-lock-operator">[</span> xy_out_of_bounds<span class="tuareg-font-lock-operator">;</span> x_out_of_bounds<span class="tuareg-font-lock-operator">;</span> y_out_of_bounds<span class="tuareg-font-lock-operator">;</span> hit_paddle <span class="tuareg-font-lock-operator">]</span> <span class="tuareg-font-lock-operator">|&gt;</span>
<span class="type">F</span>.map <span class="tuareg-font-lock-governing">begin</span> <span class="keyword">fun</span> <span class="variable-name">e </span><span class="tuareg-font-lock-operator">-&gt;</span>
<span class="tuareg-font-lock-governing">let</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">(</span><span class="variable-name">vx</span><span class="tuareg-font-lock-operator">,</span><span class="variable-name"> vy</span><span class="tuareg-font-lock-operator">)</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">=</span> <span class="type">F</span>.sample v <span class="tuareg-font-lock-governing">in</span>
<span class="keyword">match</span> e <span class="keyword">with</span>
<span class="tuareg-font-lock-operator">|</span> `X_bounds <span class="tuareg-font-lock-operator">-&gt;</span> <span class="tuareg-font-lock-operator">(-.</span>vx<span class="tuareg-font-lock-operator">,</span> vy<span class="tuareg-font-lock-operator">)</span>
<span class="tuareg-font-lock-operator">|</span> `Y_bounds <span class="tuareg-font-lock-operator">-&gt;</span> <span class="tuareg-font-lock-operator">(</span>vx<span class="tuareg-font-lock-operator">,</span> <span class="tuareg-font-lock-operator">-.</span>vy<span class="tuareg-font-lock-operator">)</span>
<span class="tuareg-font-lock-operator">|</span> `Xy_bounds <span class="tuareg-font-lock-operator">-&gt;</span> <span class="tuareg-font-lock-operator">(-.</span>vx<span class="tuareg-font-lock-operator">,</span> <span class="tuareg-font-lock-operator">-.</span>vy<span class="tuareg-font-lock-operator">)</span>
<span class="tuareg-font-lock-operator">|</span> `Paddle <span class="tuareg-font-lock-operator">-&gt;</span> <span class="tuareg-font-lock-operator">...</span> <span class="comment">(* bounce v off the tangent to the paddle *)</span>
<span class="tuareg-font-lock-governing">end</span> <span class="tuareg-font-lock-operator">|&gt;</span>
<span class="type">F</span>.hold init_v
<span class="tuareg-font-lock-governing">end</span> <span class="tuareg-font-lock-governing">in</span>
<span class="type">Fd</span>.ticks 20. <span class="tuareg-font-lock-operator">|&gt;</span>
<span class="type">F</span>.collect_b
<span class="tuareg-font-lock-operator">(</span><span class="keyword">fun</span> <span class="tuareg-font-lock-operator">(</span><span class="variable-name">x</span><span class="tuareg-font-lock-operator">,</span><span class="variable-name"> y</span><span class="tuareg-font-lock-operator">)</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">()</span><span class="variable-name"> </span><span class="tuareg-font-lock-operator">-&gt;</span> <span class="tuareg-font-lock-governing">let</span> <span class="variable-name">vx</span><span class="tuareg-font-lock-operator">,</span><span class="variable-name"> vy </span><span class="tuareg-font-lock-operator">=</span> <span class="type">F</span>.sample v <span class="tuareg-font-lock-governing">in</span> <span class="tuareg-font-lock-operator">(</span>x <span class="tuareg-font-lock-operator">+.</span> vx<span class="tuareg-font-lock-operator">,</span> y <span class="tuareg-font-lock-operator">+.</span> vy<span class="tuareg-font-lock-operator">))</span>
init_p
<span class="tuareg-font-lock-governing">end</span> <span class="tuareg-font-lock-governing">in</span>
</pre>
</div>
<div id="why_ocaml" class="slide" style="display:none">
<h2>Why OCaml for FRP?</h2>
<p>OCaml is a sweet-spot for FRP:</p>
<ul>
<li>value-oriented</li>
<li>functions are data</li>
<li>static typing, types inferred</li>
<li>imperative implementation possible</li>
</ul>
<p>Compare to:</p>
<ul>
<li>Flapjax (Javascript)</li>
<li>Fran et al. (Haskell)</li>
<li>FrTime (Scheme)</li>
<li>Scala.React</li>
</ul>
</div>
<div id="thanks" class="slide" style="display:none">
<h2>Thanks!</h2>
<p>Takeaways:</p>
<ul>
<li>functional programming matters</li>
<li>types matter</li>
</ul>
<p>Code:</p>
<ul>
<li><a href="http://github.com/jaked/froc">http://github.com/jaked/froc</a></li>
<li><a href="http://github.com/jaked/ocamljs">http://github.com/jaked/ocamljs</a></li>
</ul>
</div>
</div>
<div id="nav" style="display:none">
<span style="float:left" id="nav_time"></span>
<span id="nav_page_num"></span> / <span id="nav_page_total"></span>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.