21
 React, Functional Reactive Programming for OCaml Daniel Bünzli, freelance programmer http://erratique.ch daniel.buenzl [email protected]

React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

React,Functional Reactive Programming for OCaml

Daniel Bünzli, freelance programmer

http://erratique.ch daniel.buenzl [email protected]

Page 2: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

1FRP

What & Why

Page 3: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

Reactivevs.

Transforma-tional

Page 4: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

Functionalvs.

Imperative

Page 5: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

Reactive with

callbacks and side-effects

Page 6: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

A counter example

Page 7: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

let duration = ref 60let elapsed = ref 0

let () = let on_trigger () = elapsed := min (!elapsed + 1) !duration; notify_elapsed_changed () in Timer.each_second ~on_trigger

let duration_stepper = let on_change v = duration := v; elapsed := min !elapsed !duration; notify_duration_changed (); notify_elapsed_changed (); in Stepper.create ~value:!duration ~on_change

let restart_button = let on_click () = elapsed := 0; notify_elapsed_changed () in Button.create ~on_click

Callback joy

Page 8: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

FunctionalFunctional Reactive Animation, ICFP'97

Conal Elliott & Paul Hudak

Page 9: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

type 'a signal = 'a S.t ≈ time -> 'a

type 'a event = 'a E.t ≈ time -> 'a option

Signals&

Events

Page 10: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

val E.map : ('a -> 'b) -> 'a E.t -> 'b E.t

val S.map : ('a -> 'b) -> 'a S.t -> 'b S.t

val S.hold : 'a -> 'a E.t -> 'a S.t

...

Combinators !

Page 11: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

let restart : unit E.t = RButton.create () let duration : int S.t = RStepper.create ~value:60let secs : int S.t = RTimer.seconds ()

let elapsed : int S.t = let restart_t : int E.t = S.sample (fun _ t -> t) restart secs in let t0 : int S.t = S.hold (S.value secs) restart_t in S.l3 (fun d t t0 -> min d (t - t0)) duration secs t0

FRP joy

Page 12: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

2React

FRP engine

Page 13: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

Combinators

Createprimitives

Updates

Page 14: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

val E.create : unit -> 'a E.t * ('a -> unit)

val S.create : 'a -> 'a S.t * ('a -> unit)

Create primitives

Page 15: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

let value = 60let s_val : int S.t, set = S.create value inlet s = Stepper.create ~value ~on_change:set

Callbacks ▸ FRP

Page 16: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

Program structure

(* create primitives *)...

(* define derived signals & events *)...

let () = while true do update_primitives () done

Page 17: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

Try it !http://erratique.ch/software/react

http://erratique.ch/talks/ocamlum-2010

Page 18: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

OCaml & FRP

Frochttp://github.com/jaked/froc

Concurrent cellhttp://ccell.forge.ocamlcore.org/

Page 19: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

Other & FRP

Javascript

http://haskell.org/haskellwiki/Functional_Reactive_Programming

Schemehttp://docs.plt-scheme.org/frtime/index.html

Haskell

Scalahttp://lamp.epfl.ch/~imaier/

http://flapjax-lang.org/

Page 20: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

?

Page 21: React, Functional Reactive Programming for OCaml · let restart : unit E.t = RButton.create let duration : int S.t = RStepper.create ~value:60 let secs : int S.t = RTimer.seconds

   

Leaks

Recursive values

Side-effects (eq.)

Runtime costs

Program struct.