Reaction 0.1.0

¡Re:action!

Re:action is a lightweight Async Reactive (Rx) Elmish-ish library for F# targeting Fable and React. This means that the code is transpiled to JavaScript and thus the same code may be used both client and server side for full stack software development.

Currently a playground project for experimenting with MVU-based web applications using async reactive functional programming (Async Observables) in F#. The project is heavily inspired by Elm and Elmish but currently a separate project since it does not have any dependencies to any of these projects. The inspiration for Async Observables and plain old functions (POF) comes from my own work with aioreactive.

Async Observables

The difference between an "Async Observable" and an "Observable" is that with "Async Observables" you need to await operations such as subscribe, OnNext, OnError, OnCompleted. This enables subscribe in create type operators to do async operations i.e setup network connections, and observers may finally do async operations such as writing to disk (observers are all about side-effects right?).

Re:action uses simple functions instead of classes and the traditional Rx interfaces. Some of the operators uses mailbox processors (actors) to implement the observer pipeline in order to avoid locks and mutables. This makes the code more Fable friendly for easily transpiling to JavaScript. Here are the core types:

type Notification<'a> =
    | OnNext of 'a
    | OnError of exn
    | OnCompleted

type AsyncDisposable = unit -> Async<unit>
type AsyncObserver<'a> = Notification<'a> -> Async<unit>
type AsyncObservable<'a> = AsyncObserver<'a> -> Async<AsyncDisposable>

type AsyncMapper<'a, 'b> = 'a -> Async<'b>
type AsyncPredicate<'a> = 'a -> Async<bool>
type AsyncAccumulator<'s, 't> = 's -> 't -> Async<'s>

Operators

The following parameterized async observerable returning functions (operators) are currently supported. Other operators may be implemented on-demand, but there are currently no plans to make this into a full featured Rx implementation.

• map, mapIndexed, mapAsync, mapIndexedAsync
• filter, filterAsync
• scan, scanAsync
• merge
• flatMap, flatMapIndexed, flatMapAsync, flatMapIndexedAsync
• concat
• startWith
• distinctUntilChanged
• delay
• debounce
• combineLatest
• withLatestFrom (TBD)
• switch (TBD)

Elmish-ish example

Reactive MVU archtecture example (source code) using Re:action for impl. the classic Time Flies example from RxJS. No jQuery or other js-libraries in this example. This code is very simplar to Elmish but the difference is that we can compose powerful reactive queries to transform, filter, aggregate and time-shift our stream of messages.

// Messages for updating the model
type Msg =
    | MouseEvent of MouseEvent
    | LetterMove of int * char * float * float

// Model (state) for updating the view
type Model = {
    Pos: Map<int, char * float * float>
}

let update (currentModel : Model) (msg : Msg) =
    match currentModel.Pos, msg with
    | _, LetterMove (i, c, x, y) ->
        { currentModel with Pos = currentModel.Pos.Add (i, (c, x, y)) }
    | _ ->
        currentModel

// View for being observed by React
let view (model : Model) =
    let letters = model.Pos

    div [ Style [ FontFamily "Consolas, monospace"]] [
        for KeyValue(i, (c, x, y)) in letters do
            yield span [ Style [Top y; Left x; Position "absolute"] ] [
                str (string c)
            ]
    ]

let main = async {
    let initialModel = { Pos = Map.empty }

    // Query
    let moves = from <| Seq.toList "TIME FLIES LIKE AN ARROW"
                |> flatMapIndexed (fun x i ->
                        fromMouseMoves ()
                        |> delay (100.0 * float i)
                        |> map (fun m -> LetterMove (i, x, m.clientX + float i * 10.0 + 15.0, m.clientY))
                   )
                |> scan initialModel update
                |> map view

    // React observer
    let render n =
        async {
            match n with
            | OnNext dom -> renderReact "elmish-app" dom
            | _ -> ()
        }

    // Subscribe
    do! moves render |> Async.Ignore
}

main |> Async.StartImmediate