https://github.com/jwosty/denverfp-frp
A functional reactive web application template using F#, WebSharper, and .NET Core. Use this as a starting point to tinker and build your own application.
https://github.com/jwosty/denverfp-frp
dotnet-core fsharp functional-reactive-programming websharper
Last synced: about 2 months ago
JSON representation
A functional reactive web application template using F#, WebSharper, and .NET Core. Use this as a starting point to tinker and build your own application.
- Host: GitHub
- URL: https://github.com/jwosty/denverfp-frp
- Owner: jwosty
- Created: 2019-07-16T20:05:14.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-07-17T16:44:27.000Z (almost 7 years ago)
- Last Synced: 2025-03-02T13:37:43.707Z (over 1 year ago)
- Topics: dotnet-core, fsharp, functional-reactive-programming, websharper
- Language: F#
- Homepage:
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DenverFP-FRP
This project was the starting point Alan and I used in [our talk](https://www.meetup.com/denverfp/events/263198218/?comment_table_id=263045508&comment_table_name=reply) 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](https://fpish.net/topic/Some/0/86609) and is an [open Websharper issue](https://github.com/dotnet-websharper/core/issues/1044).\*
*\* 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](https://github.com/dotnet-websharper/core/issues/1044#issuecomment-478963571). 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](https://developers.websharper.com/docs/v3.x/fs/ui.next-templating3x) 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](https://github.com/jwosty/DenverFP-FRP/blob/master/Site.fs#L43). This client-side code uses reactive variables to compute [an output text node](https://github.com/jwosty/DenverFP-FRP/blob/master/Client.fs#L20) based on an [input text field](https://github.com/jwosty/DenverFP-FRP/blob/master/Client.fs#L12) and [a server computation](https://github.com/jwosty/DenverFP-FRP/blob/master/Remoting.fs#L11)
* `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](https://github.com/dotnet-websharper/templates/blob/0baf2861df31658d7aa087273031ba200a2e655a/FSharp/ClientServer/Client.fs#L22), 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](https://developers.websharper.com/docs/v4.x/fs), then in the left sidebar, navigate to Basics>Reactive HTML>HTML Templates.*