F# Implementation of The Elm Architecture - Part 2

This is the second part of a prototype of The Elm Architecture in F#. The first post covered the logical UI and this covers using it with WPF and Xamarin.

Native UI Implementation

Below is the WPF implementation of the INativeUI interface. The Xamarin implementation is very similar.

Threading proves to be simple with all the updates being performed on the UI thread in a single call. UIUpdate maps well to the operations required to locate and update the native UI elements.

module WPF =
    let CreateNaiveUI (root:ContentControl) =
        
        let rec createUI ui : UIElement =
            match ui with
            |Text text ->
                let c = Label(Content=string text)
                upcast c
            |Input (text,event) ->
                let c = TextBox(Text=string text)
                let event = !event
                c.TextChanged.Add(fun _ -> let t = c.Text
                                           async { !event t } |> Async.Start)
                upcast c
            |Button (text,event) ->
                let c = Button(Content=string text)
                let event = !event
                c.Click.Add(fun _ -> async { (!event)() } |> Async.Start)
                upcast c
            |Div (layout,list) ->
                let children = List.map createUI list
                let c = StackPanel(Orientation=
                                    match layout with 
                                    |Vertical->Orientation.Vertical
                                    |Horizontal->Orientation.Horizontal)
                List.iter (c.Children.Add>>ignore) children
                upcast c

        let rec locatePanel loc : Panel =
            match loc with
            |[] -> root.Content :?> _
            |i::xs -> (locatePanel xs).Children.Item i :?> _

        let uiUpdate u =
            match u with
            | InsertUI (loc,ui) ->
                match loc with
                |[] -> root.Content <- createUI ui
                |i::xs -> (locatePanel xs).Children.Insert(i,createUI ui)
            | UpdateUI (loc,ui) ->
                let element = match loc with
                              |[] -> root.Content :?> _
                              |i::xs -> (locatePanel xs).Children.Item i
                match ui with
                | Text text -> (element :?> Label).Content <- string text
                | Input (text,_) -> (element :?> TextBox).Text <- string text
                | Button (text,_) -> (element :?> Button).Content <- string text
                | Div _ -> ()
            | ReplaceUI (loc,ui) ->
                match loc with
                |[] -> root.Content <- createUI ui
                |i::xs ->
                    let c = (locatePanel xs).Children
                    c.RemoveAt i
                    c.Insert(i,createUI ui)
            | RemoveUI loc ->
                match loc with
                |[] -> ()
                |i::xs -> (locatePanel xs).Children.RemoveAt i
            | EventUI _ -> ()

        { new INativeUI with
            member __.Send list =
                root.Dispatcher.Invoke (fun () -> List.iter uiUpdate list)
        }

Results

The same CounterList UI application from the previous post has been used across a number of native UIs. The example source produces the following mobile and desktop UIs.

Conclusion

The Elm Architecture continues to look to be a very promising pattern.

The INativeUI implementation is a single place for native UI element creation and is much more DRY than other UI models. So far, styling has not been considered, but this single place should make it easier with both an Elm and a CSS model being possible.

The Elm Architecture moves the view and event logic away from the native UI. This has the benefit of making the UI more testable and at the same time making migration of the native UI easier.

These benefits, combined with the type safety and composability outlined in the previous post, make this pattern compelling.

UPDATED: