DenverFP-FRP

This project was the starting point Alan and I used in our talk at the DenverFP meetup. It is a functional reactive web application template using F#, WebSharper, and .NET Core. This project is based on the websharper-web dotnet template for F#.

Getting Started

All you have to do is clone this repo and run dotnet restore, and then start it up with dotnet run.

Purpose

Normally, you would just start a new project with dotnet new websharper-web -lang f#, but as of the time of this writing on July 16, 2019, it's broken and is an open Websharper issue.*

* If you're on Windows, it might actually be working, in which case you don't need this repo.

This project uses a workaround as partially described here. More complete instructions on the exact steps that we took are coming.

Code Overview

• Site.fs
  • Contains server-side definitions for the HTTP page routes, as well as the server-side computed parts of all the pages. It has some WebSharper HTML templating to build most of each page.*
• Client.fs
  • Contains all of the client-side code, which gets transpiled to JavaScript (notice the JavaScript attribute on the module), and which gets inserted into the home page. This client-side code uses reactive variables to compute an output text node based on an input text field and a server computation
• Remoting.fs
  • Contains a remoting function that executes on the server side but can be called from the client side (internally using AJAX remoting mechanisms). It's only performing a string reversal for demonstration purposes; you can of course perform much more complicated server-side operations here.

Note: The one tweak in functionality we made is to remove the submit button next to the text box from the original template, in order to demonstrate how reactive values continuously update. It's obviously not a good idea to use it in that way, since every user keystroke in the input box ends up triggering a web request to the server. In real code, you'd want to use a submit button or to throttle the requests or something.

* This link is old, but unfourtunately you can't link to particular headers in the 4.x documentation. However AFAIK, templates didn't change in 4.x. If you want to find the 4.x documentation, first go here, then in the left sidebar, navigate to Basics>Reactive HTML>HTML Templates.