forms VS Giraffe

updates the two reactive Var that, guess what? will be updated automatically in any form bounded to it. I used two variables on purpose to demonstrate a couple of ways they can be used. The ```amountDueVarTxt``` is bounded in the ```RegisteredItemsForm``` . It updates the amount due text on the fly, after you register or remove an item. Look for ```textView AmountDueRv``` `. ```fsharp let UpdateAmountDueVar () = ... let total = transactionItemsVar.Value |> List.map (fun v -> PriceToFloat v.TotaPrice ) // convert List to List |> List.sumBy id // id is shorthand to (fun v -> v) amountDueVar.Value <- total amountDueVarTxt.Value <- $"{total}" ``` A Form have it's logic separated from the rendering. The CartForm is used in two different endpoints by two distinct render functions. It uses Form.YieldVar instead of Yield to use a reactive Var. On ```|> Form.Render```, itemsInCart refers to the transactionItemsVar bound in CartForm function The lambda function passed on this binding install the function that will be used to render whenever the transactionItemsVar is updated. ```fsharp itemsInCart.View |> Doc.BindView (fun items -> ``` This is the "remove registered item from sale" event handler. The ```items``` refers to ```transactionItemsVar``` contents. ```fsharp on.click (fun _ _ -> itemsInCart.Update(fun items -> items |> List.filter (fun i -> i <> item)) ``` ### Registered items form  ```fsharp let CartForm () = // simplified way for a form with a single yield // Use YieldVar when using a shared reactive Var. Form.YieldVar transactionItemsVar |> Form.WithSubmit let RegisteredItemsForm () = let AmountDueRv = amountDueVarTxt.View |> View.Map (fun x -> $"Amount due is {x}") div [] [ div [] [ // You could use textView amountDueVarTxt.View, but amountDueRv shows you how to manipulate the View textView AmountDueRv ] CartForm () |> Form.Render (fun itemsInCart _ -> itemsInCart.View |> Doc.BindView (fun items -> items |> List.map (fun item -> div [attr.``class`` "item"] [ text $"UID: {GuidHead (TransactionItemUid.value item.Uid)} Product {item.Description} Price {item.Price} Quantity {item.Quantity} TotalPrice {item.TotaPrice}" button [ on.click (fun _ _ -> itemsInCart.Update(fun items -> items |> List.filter (fun i -> i <> item)) UpdateAmountDueVar () ) ] [text "Remove"] ] ) |> Doc.Concat ) ) ] ``` When you hit the "Checkout" Button, the event handler defined on the ```TransitionArea().StartPayment()``` is triggered Here is a refresher: ```fsharp let TransactionArea (routerLocation:Var) = Templates.MainTemplate.TransactionArea() .RegisterItems(RegisterItemForm()) .RegisteredItems(RegisteredItemsForm()) .StartPayment(fun _ -> routerLocation.Set SPA.Checkout ) .Doc() ``` ## Checkout EndPoint  This form does not provide any functionality. I used it to demonstrate the EndPoint/Form transition, and a how a Form can be rendered using a different function. ```fsharp routerLocation.View.Doc(function ... | SPA.Checkout -> Doc.Concat [ h1 [] [text $"SPA checkout"] // link equivalent to the back button // a [attr.href (router.Link (EndPoint.SPA SPA.PointOfSale))] [text "Back"] // renders a button that, when clicked, change the browser to the PointOfSale EndPoint ("/") button [ on.click (fun _ _ -> routerLocation.Set SPA.PointOfSale ) ] [text "Back"] // renders a button that, when clicked, change the browser to the PointOfSale EndPoint ("/payment") button [ on.click (fun _ _ -> routerLocation.Set SPA.Payment ) ] [text "Proceed to Payment"] ItemsToCheckoutForm() ] ``` Here, ```CartForm``` is rendered in a different way. The ```items``` refers to ```transactionItemsVar``` contents. ```fsharp let ItemsToCheckoutForm () = CartForm () |> Form.Render (fun itemsInCart _ -> // gotcha: if you pass this code without the outer div [] [], only the last will be rendered, and no error wil be thrown. div [] [ div [] [ label [] [text "transactionUid: "]; label [] [text transactionUidVar.Value] ] itemsInCart.View |> Doc.BindView (fun items -> items |> List.map (fun item -> div [attr.``class`` "item"] [ text $"Product {item.Description} Price {item.Price} TotalPrice {item.TotaPrice}" ] ) |> Doc.Concat ) ] ) ``` ## Payment EndPoint  Dynamic forms: It may seem overwhelmingly difficult, but once you got the grasp of it, they're a lot of fun to work with. One more EndPoints to our collection. ```PaymentForm``` third's argument is a sequence of one ```CreditCardFormFields```. It's used to initialize the Multiple Credit Cards form. Had I passed two items, there would be two "Pay with Credit Card" lines. ```routerLocation``` is responsible to tell the browser to change to an EndPoint. As the code show, it handles this SPA EndPoints. ```fsharp type CreditCardFormFields = { Type : CreditCardType Flag : string Value : CheckedInput } let PointOfSaleMain () = StartSaleTransaction () let router = Router.Infer() let routerLocation = router |> Router.Slice (function | SPA spa -> Some spa | _ -> None) EndPoint.SPA |> Router.Install SPA.PointOfSale routerLocation.View.Doc(function | SPA.PointOfSale -> ... | SPA.Checkout -> ... | SPA.Payment -> Doc.Concat [ h1 [] [text $"SPA payment"] PaymentForm (routerLocation, SPA.Checkout, [|{ Type=Debit; Flag= "MasterCard"; Value= CheckedInput.Make(0.0) }|]) ] ``` The Payment Form arguments are: ```backLocation``` is used in the Back button event handler. The user is able to add as many Credit Cars as needed thanks to ```Form.Many```. Let's break down this line: ```<*> Form.Many creditCards { Type=Debit; Flag="Visa"; Value=CheckedInput.Make(0.0) } CreditCardPaymentForm``` ```crediCards``` The initial collection of values. Check out the ```| SPA.Payment``` EndPoint for a refresher. ```{ Type=Debit; Flag="Visa"; Value=CheckedInput.Make(0.0) }``` The value of type CreditCardFormFields with which the new sub-form should be initialized when the user adds a new Credit Card. ```CreditCardPaymentForm``` Is the form that will be rendered when ```creditCards.Render (fun ops cardType cardFlag cardValue ->``` ```fsharp let PaymentForm (routerLocation:Var, backLocation, creditCards:seq) = Form.Return (fun moneyAmount creditCards -> moneyAmount, creditCards) <*> (Form.Yield (CheckedInput.Make amountDueVar.Value) |> Validation.Is (ValidateCheckedFloatPositive) "Money must be positive number" |> Validation.Is (ValidateCheckedFloatDecimalPlaces 2) "Money must have up to two decimal places" ) <*> Form.Many creditCards { Type=Debit; Flag="Visa"; Value=CheckedInput.Make(0.0) } CreditCardPaymentForm |> Form.WithSubmit |> Form.Run (fun (moneyAmount, creditCards) -> let moneyPayment:list = if (MoneyFromCheckedInput moneyAmount) > 0m then [PaymentMethod.Money (MoneyFromCheckedInput moneyAmount)] else [] let creditCardPayments = creditCards |> Seq.toList |> List.map (fun x -> PaymentMethod.CreditCard {Type = x.Type; Flag = x.Flag; TransactionId = Guid.NewGuid().ToString(); Value = MoneyFromCheckedInput x.Value}) let payments = List.concat [ moneyPayment creditCardPayments ] |> Seq.toList let transaction:SaleTransaction = {Uid = (SaleTransactionUid.create (Guid.Parse(transactionUidVar.Value))); Datetime=System.DateTime.Now; Items = transactionItemsVar.Value; Payments = payments} async { let! res = Server.PerformSaleTransaction transaction // JS.Alert($"Transaction performed: {SaleTransactionUid.value res} %A{transaction}") routerLocation.Set (SPA.Receipt transactionUidVar.Value) } |> Async.StartImmediate ) |> Form.Render (fun paymentMethodAmount creditCards submit-> div [] [ button [ on.click (fun _ _ -> routerLocation.Set backLocation ) ] [text "Back"] Doc.Button "End transaction" [] submit.Trigger div [] [ label [] [text "transactionUid: "]; label [] [text transactionUidVar.Value] ] div [] [ label [] [text "Money"] Doc.InputType.Float [attr.``step`` "0.01"; attr.``min`` "0"] paymentMethodAmount ShowErrorsFor (submit.View.Through paymentMethodAmount) ] div [] [ creditCards.Render (fun ops cardType cardFlag cardValue -> div [] [ RenderCreditCardPaymentForm cardType cardFlag cardValue Doc.Button "Delete" [] ops.Delete ShowErrorsFor (submit.View.Through cardValue) ] ) Doc.Button "Add Payment Form" [] creditCards.Add ] ] ) ``` While other forms use reactive Var to share state, this one use EndPoint Argument. One of the benefits of this is that you can share the url. EndPoints be of GET or POST in case you're wondering. ## Receipt EndPoint  The Receipt EndPoint definition: ```Receipt of uid: string``` defines that this EndPoint have an argument of type string. The URL will have this format: "https://localhost:5001/spa/point-of-sale/receipt/string-containing-the-sale-uid" ```fsharp type SPA = ... | [] Receipt of saleUid: string ``` The Receipt EndPoint Handler: ```fsharp let PointOfSaleMain () = ... routerLocation.View.Doc(function ... | SPA.Receipt saleUid -> Doc.Concat [ h1 [] [text $"SPA receipt"] ReceiptForm (saleUid, routerLocation) ] ) ``` Finally e have some Server action! Brace yourself and prepare to write a bit of JavaScript and some DTOs. ### Just kidding. I know that wasn't funny. But writing client/server applications in WebSharper is! It takes care of it all. You write FSharp all the way down. The serialization is all done for you. You just need to call an RPC basically the same way you would call a local function. In ```Server.SaleReceipt``` I chose to let the rendering work to the server, and passing a simple list of strings to the client. The cash flow Report, on the other hand, the server will deliver a complex type. Client side: ```fsharp let ReceiptForm (uid:string, routerLocation:Var) = div [] [ div [] [ button [ on.click (fun _ _ -> StartSaleTransaction () routerLocation.Set SPA.PointOfSale ) ] [text "New"] ] async { let currentTransactionUid = (SaleTransactionUid.create (Guid.Parse(uid))) let! res = Server.SaleReceipt currentTransactionUid let render line = tr [] [ td [] [text line ] ] return Templates.MainTemplate.ReportTable().ReportRows( List.map render res |> Doc.Concat ).Doc() } |> Client.Doc.Async ] ``` Server side: ```fsharp [] let SaleReceipt (saleUid:SaleTransactionUid.T)= async { return match saleTransactions.TryGetValue(saleUid) with | true, sale -> RenderSaleTransactionReceiptTxt sale | _ -> [$"UID not found: {saleUid.ToString()}"] } ``` ## Cash flow report  We exited the SPA realm and are back to the client/server. The cash flow report EndPoint is defined here: ```fsharp [] let Main = Application.MultiPage (fun ctx endpoint -> match endpoint with | EndPoint.Home -> HomePage ctx | EndPoint.About -> AboutPage ctx | EndPoint.CashFlow -> CashFlowReportPage ctx | EndPoint.SPA _ -> PointOfSale ctx // the _ means that all routes e.g. "/spa/*" will be handed to PointOfSale function. The SPA takes care it's own routes. ) ``` Here is the cash flow report handler. It is marked to run on the client. Don't worry, we're not back to SPA again. This EndPoint is intended to open up the cash flow report page. The user clicks on the Report button. It then calls the server asynchronously, and receives a list of `````` Finally, the rendering occurs on the client side, thanks to that ```client (``` ```fsharp let CashFlowReportPage ctx = let title = $"Cash Flow Report" Templating.Main ctx EndPoint.CashFlow title [ div [] [client (Client.RetrieveCashFlowReport())] ] ``` Client side: ```fsharp let RetrieveCashFlowReport () = Templates.MainTemplate.ReportForm() .OnSend(fun e -> async { let! res = Server.GenerateCashFlowReport System.DateTime.Now let RenderSaleTransaction (sale:SaleTransaction) = tr [] [ td [] [text $"{sale.Datetime.ToShortDateString()} - {sale.Datetime.ToShortTimeString()}"] td [] [text $"Transaction UID: {SaleTransactionUid.value sale.Uid}"] td [] [text $"%A{sale.Items}"] td [] [text $"%A{sale.Payments}"] ] Templates.MainTemplate.ReportTable().ReportRows( List.map RenderSaleTransaction res |> Doc.Concat ).Doc() |> Client.Doc.RunById "report-container" } |> Async.StartImmediate ) .Doc() ``` Server side: ```fsharp [] let GenerateCashFlowReport (date:DateTime): Async = async { // returns complex data on purpose to demonstrate that you can pass complex data and treat it on the client. return GetSalesTransactions() } ``` The types that are being sent over the RPC call: ```fsharp type TransactionItem = { Uid: TransactionItemUid.T Sku: string Description: string Price: decimal TotaPrice: decimal // Unit of Measure that accepts ( times ) Quantity: decimal } type SaleTransaction = { Uid: SaleTransactionUid.T Datetime: System.DateTime Items: TransactionItem list Payments: PaymentMethod list } ``` ```fsharp (SaleTransactionUid.create (Guid.Parse("cca24efe-fffa-4a7f-86fc-38ea41016926"))), { Uid = SaleTransactionUid.create (Guid.Parse("cca24efe-ffff-4a7f-86fc-38ea41016926")) Datetime = DateTime.Now Items = [ { Uid = TransactionItemUid.create (Guid.Parse("3f57720d-4b16-4911-88ed-e6d266c72e4a")) Sku = "1" Description = "Bolt" Price = 1.5m TotaPrice = 3.0m Quantity = 2m } { Uid = TransactionItemUid.create (Guid.Parse("1fde5c26-3f00-4916-a5f4-3456bd0b93f2")) Sku = "2" Description = "Blue Wire" Price = 2.0m TotaPrice = 3m Quantity = 1.5m } ] Payments = [ PaymentMethodsDomain.Money 13m ] } ``` ## Resources - Introduction to F# web programming with WebSharper by Adam Granicz: - [](https://www.youtube.com/watch?v=CeMq9Fg-HME) - https://github.com/dotnet-websharper/forms/blob/master/docs/Introduction.md ## How to proceed from here? I intend to grow this project so, keep an eye on this article and the github project. ### What if I need some library that are not supported? - If you mean javascript libraries: - https://developers.websharper.com/docs/v4.x/fs/wig - also, take a look into some existing lib bindings on https://github.com/dotnet-websharper - For .net libraries: - https://developers.websharper.com/docs/v4.x/fs/proxying - https://www.yvesdennels.com/posts/websharper-proxy-project/ - https://github.com/dotnet-websharper/core/issues/1067 Fear not! Thsi issue is already closed! - proxima versão: banco de dados sql no servidor e armazenamento local no browser - comunicação com o servidr via rpc transparente, sem necessidade de DTO You can also ping me on Twitter [Diego Pego](https://twitter.com/sergey_tihon)

Giraffe is another interesting one to explore: https://giraffe.wiki/

Giraffe is nice because it is itself built "just" as ASP.NET Core Middleware so it plays a bit more nicely than Suave with a mixed stack of C#-defined Middleware.

It's more likely you accidentally fall back into just translating C# patterns to non-idiomatic F# with Giraffe, but it's also nicer when in that case of needing to live in both worlds and use a mixture of libraries built for C# ASP.NET projects.

There are also some F# frameworks built on top of ASP.NET core like https://giraffe.wiki

If you have an interest in F#, I highly recommend diving in because (1) it has a ton of things you might learn to appreciate in C#; (2) it has things C# cannot have. I do like some of the suggestions people have made regarding mixing your code bases, but I'll also say that building, say, endpoint routing in Giraffe is (to repeat myself) easy, simple, and elegant.

Bix is a micro-framework designed with F# in mind and that runs on both Deno and Bun! and in theory it also should even run in a service worker! (intercepting fetch requests) although I haven't tested that yet, it offers a general purpose handler that coupled with a set of route definitions it can bring a Giraffe/Saturn like framework to life in JavaScript runtimes which is incredibly awesome! useful? maybe not 😅, but awesome indeed. Let's see some code for it

Backend: Most likely it would be a toss between https://saturnframework.org or https://giraffe.wiki. They both combins the extremely good type system in F# combined with the ease of a minimal API.

I was wondering if its possible to simultaneously run a C# core MVC project in combination with https://github.com/giraffe-fsharp/Giraffe

By default Giraffe, the framework which I use as a web server, uses Newtonsoft.Json to serialize results to JSON. However, for discriminated union, it generates quite a lot of JSON so I've switched to System.Text.Json which is built into newer versions of .Net Core. In combination with FSharp.SystemTextJson package allows serializing discriminated unions more gracefully. All we need is to decorate Branch type with JsonFSharpConverter(JsonUnionEncoding.BareFieldlessTags) attribute.

Giraffe is a library that sits atop ASP.NET Core and allows developers to build web applications in a functional style; dotnet new giraffe is literally my starting point when I begin a new web application project. (Rather than write three more sentences filled with effusive praise, I’ll just leave it at that; it’s great.) It also provides a view engine (that builds upon Suave‘s “experimental” view engine) which uses an F# DSL to define HTML in a strongly-typed way. It has been incredibly efficient for a while, but with .NET’s work over the past two releases at improving performance, and Giraffe’s adoption of those techniques, it is lightning fast.

Wrapping ASP.NET Core to be easier and more idiomatic with F# seems to be a common domain. Out of curiosity, did you look at any existing projects? If so, what was lacking from them that made you decide to write WebFrame?

Giraffe: https://github.com/giraffe-fsharp/Giraffe