Bolero Enables Writing F# Apps Running in WebAssembly Using Blazor

Bolero makes it possible to build WebAssembly apps in F#. Bolero leverages the Blazor Microsoft technology to enable running C# in the browser.

Bolero apps are based on the model-view-update pattern, which is derived from Elm and React. The general idea is that the UI is described using a specific type whose values represent the different allowed UI states. User actions produce transitions from the current value to the next, which is then used to update the UI. For example, this is how a counter app would be defined:

type Model = { value: int }
let initModel = { value = 0 }

type Message = Increment | Decrement
let update message model =
    match message with
    | Increment -> { model with value = model.value + 1 }
    | Decrement -> { model with value = model.value - 1 }

let view model dispatch =
    div [] [
        button [on.click (fun _ -> dispatch Decrement)] [text "-"]
        text (string model.value)
        button [on.click (fun _ -> dispatch Increment)] [text "+"]
    ]

In this case the model contains just an integer value. The user can generate two kinds of messages, to increment or decrement the counter, by clicking on the corresponding button. The message is handled to update the model and generate the new UI state.

In addition to Model-View-Update, Bolero adopts HTML-in-F#, which is a collection of F# functions that will output HTML elements. For example, you could write:

let myElement name =
    div [] [
        h1 [] [text "My app"]
        p [] [textf "Hello %s and welcome to my app!" name]
    ]

Alternatively, HTML templates could be used, which define an app's HTML with "holes" that are filled in with content generated using F#. For example:

type Hello = Template<"""<div id="hello">Hello, world!</div>""">

let hello =
    Hello()
        .Id("hello")
        .Who("world")
        .Elt()

As Microsoft F# engineer Philip Carter explains, Bolero only uses some components of Blazor's under the covers, but it is mostly an independent effort. What is interesting with Bolero's approach is the browser is actually executing F# code using the F# Compiler Services, which is a component derived from the official F# compiler and included the F# repl.

As an example of the kind of advanced developer experience this model enables, Carter demonstrated how F# code can be written in a browser window powered by Bolero. Although it takes some time to launch the F# compiler, once it is ready it will flag almost instantaneously any syntax error within the code. Interestingly, the whole implementation is done in plain F#, running on Bolero with Blazor.

To create a Bolero application a developer will need to install .NET Core SDK 3.0 or newer. The easiest way to get started is to use Bolero's dotnet template. To install this and create a sample app, run the following commands:

dotnet new -i Bolero.Templates
dotnet new bolero-app -o HelloWorld

The official Bolero documentation can be found on Bolero website.