Create HTML user interfaces with a F# DSL and an embedded HTTP server.
TLDR: BackPanel Example | Document DSL | BackPanel NuGet
Use the BackPanel NuGet if possible. To compile the source you need to install Visual Studio 2017, TypeScript, Paket, and NPM. Then use paket restore and npm install.
Because the .NET services I am working on need a user interface for configuring settings while they run.
And also there is currently no simple way to create platform independent user interfaces for dotnet core applications, so HTML seems to be only option.
Furthermore, client side programming with JavaScript or the use of transpilers like Fable is not my preferred way to create web applications, so BackPanel tries something different and generates the DOM on the server. Practically, this is not recommended for creating web applications that need to feel responsive with slow internet connections, but after all, BackPanel UIs are not meant to be used remotely.
BackPanel provides a Docbook inspired DSL to specify a user interface which is translated to the browser DOM and served via Suave.
In addition to that, BackPanel follows the Elm Architecture for the creation of the user interface. For a simple one like the BackPanel Example only two methods need to be implemented:
- The
viewfunction takes in a model and creates the document. - The
updatefunction updates the view model in response to events.
To create a document, the Document DSL must be used. At the time of this writing, the document grammar and its elements are neither complete nor final. A final and stable version will be indicated by a release of Version 1.0.
If you add the BackPanel NuGet to your project, it comes with Suave, Bootstrap, and FlatUI. There is no need to use a single line of JavaScript, HTML, or CSS. The F# Document DSL should cover everything to build the UI. And if it does not, pull requests are appreciated.
Once the server starts serving the UI and the user opens the URL it is listening at, a index.html page with almost no HTML content is delivered to the browser. This page loads the BackPanel Client that connects back to the server utilizing a WebSocket which stays connected for the time the page is open. Whenever the server has new content, it sends it to the browser and whenever the user triggers an event, the browser sends the event to the server.
The content is delivered with a JSON encoded DOM representation and rendered by picodom on the client. Incremental updates are required to avoid messing up the view state of the browser.
The JavaScript event handlers that are attached to the HTML elements, are generated by the server and send back JSON serializations of the original F# events that are specified in the document's view method.
Here are a few answeres to questions you may have in mind.
There is no simple way to do this right now, because some code in the BackPanel Client is specifically tailored to FlatUI.
The BackPanel server implements a Post function that delivers an event to the update function, updates the model, renders a view, and sends it to the browser.
ATM this is only possible by hooking into the update function.
But I am planning to add a simple .NET event to the instance that is returned when the server starts up.
MIT License Copyright 2017 Armin Sander