core VS tauri

Websharper[1] lets you develop web apps all in F# or C#. Its reactive HTML layer is particularly useful.

1: https://websharper.com/

I was using websharper in the past, but is that still a good F# centric method of web development, or are there better frameworks now?

With F# you can compile your app as an html5 app.

A WebSharper application may be developed and deployed using Linux or Windows.

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)

Hi, dear Tauri! Long time no see. I published my first post, Developing a Desktop Application via Rust and NextJS. The Tauri Way almost a year ago. Since then, Tauri has become stronger. I'm happy about that! And now, I am very pleased to make a useful contribution to the Tauri community. As a full-stack developer, I frequently face situations where I need to start a DB-based UI project as fast as possible. It's stressful if I need to start the project from 100% scratch. I prefer to keep some boilerplates on hand, which will save me time and nerves and will be the subject of this article.

Hey Thanks!

Just electron & vite. I might actually migrate off electron, Tauri (https://tauri.app/) seems to be getting more stable and it's gotten great reviews.

I think this is the boilerplate I used though https://github.com/cawa-93/vite-electron-builder.

Well the great thing about WebAssembly is that you can port QT or anything else to be at a layer below -- thanks to WebAssembly Interface Types[0] and the Component Model specification that works underneath that.

To over-simplify, the Component Model manages language interop, and WIT constrains the boundaries with interfaces.

IMO the problem here is defining a 90% solution for most window, tab, button, etc management, then building embeddings in QT, Flutter/Skia, and other lower level engines. Getting a good cross-platform way of doing data passing, triggering re-renders, serializing window state is probably the meat of the interesting work.

On top of that, you really need great UX. This is normally where projects fall short -- why should I use this solution instead of something like Tauri[2] which is excellent or Electron?

[0]: https://github.com/WebAssembly/component-model/blob/main/des...

[1]: https://github.com/WebAssembly/component-model/blob/main/des...

[2]: https://tauri.app/

Welcome to the 2nd episode of our series “Building with Tauri”, where we chat with developers who build amazing projects and products using Tauri.

Tauri seemed like the "thing" I should switch to because everybody loves Rust (heh), and because it ships significantly smaller apps.

First of all, I will be using npm as my package manager but feel free to use whatever you prefer. Find more info here.

Today I'm talking about Tauri! Do you know all the various tools that allow you to develop native applications starting from web languages? They often need an intermediate compilation, in the middle of which you end up encountering various problems not always transparent and directly solvable with a language mostly detached from native development. On the other hand, there's still the ease of developing attractive and easily usable interfaces, which are more difficult to develop with low level languages.