Feliz VS Comet

NOTE: You can try this with the Feliz codebase, which is larger and has multiple .fsproj files. But as you will find out, the project structure is laid out just like we've seen here.

Feliz to create react apps, the most mature option.

The Feliz DSL https://zaid-ajaj.github.io/Feliz/ looks fairly similar to Reagent or there's Fable.Lit https://fable.io/Fable.Lit/ which is more like jsx in that you write the html directly, adding active components via interpolated string mechanisms. There is a VS Code add in that gives you html+css syntax highlighting and auto complete inside your F# files.

Feliz is a DSL for React, and paired with Vite give a hot reload experience that's close to the same as JS/TS, even the React dev tools work fine. Nobody has a ready to go package/template up right now but there's little stopping you from creating a NextJS app.

It means it's similar to the Feliz DSL used to build React web apps: https://zaid-ajaj.github.io/Feliz/

Feliz

I'm curious to see how this goes, F# seems to excel at these type of DSL's (e.g. Feliz, a react DSL is a joy), a big part thanks to type inference and list comprehensions which are a game changer for that pesky conditional rendering.

if you've ever used Feliz or Avalonia.FuncUI then this DSL will make you feel at home, it's less verbose than the original DSL and gives you basically the same benefits, in the case of Fun.Blazor is slightly less performant but it is a viable alternative

Along with Fable highly recommend a look at Feliz. A joy to work with and its ViewEngine can also be separately used w/ Giraffe if you enjoy the syntax:

https://zaid-ajaj.github.io/Feliz/

https://github.com/Zaid-Ajaj/Feliz

> the first, MVP-style, attempt will be using Electron.

Good choice.

If you want to stick to HTML...WebView2 is suppose to replace it, but it assumes your backend code is .NET or C++, instead of JS/Node.js. Microsoft Teams is using it.

If you want to use native Windows UI components from JS code, then React Native for Windows is recommended. Facebook Messenger is using it.

All approaches require C# or C++ modules to be used to interact with the Windows Platform. Or there is: https://github.com/tjanczuk/edge.

The recommended approach is WinUI 3 which would involve C#/C++ and XAML.

To SwiftUI/React/JetPack are called module-view-update (MVU). There is an MVU for C# called Comet. https://github.com/dotnet/Comet#key-concepts

The benefit at least with the approach instead of embedding Avalonia inside Maui is you could potentially use non xaml frameworks for ui as long as they support Maui as a target. Stuff like Comet or Blazor mobile bindings would be possible aside from xaml. Especially if they're coming from Blazor web or code based ui frameworks like flutter which makes it appealing.

That was using the experimental Comet extension and lib, based on .NET MAUI. You can find instructions here: https://github.com/dotnet/Comet

There are also experimental libraries for .NET MAUI, which let's you create UI only with C#: Comet, MauiReactor

The MVU library is called Comet. The lead developer recently left Microsoft but im still seeing commits on the repo which is a good sign!

Yeah the hybrid blazor stuff is interesting. So is https://github.com/dotnet/Comet.

The XAML API is definitely more compact overall which is unfortunate, mostly because a lot of the devs prefer XAML. I've always preferred code-based UI though. Theres some 2ndish/3rd party options with Comet, which changes the UI pattern to MVU and C# Markup, which might not be updated for MAUI yet.

All the C# parts for Hybrid (including the components themselves) are running natively. Only the UI part (e.g. html, css) under the Web View is running web tech (html, css) under a native webview of the platform. But you can also add native MAUI controls if you wanted to (either via XAML, or Comet) and mix and match as that webview control that Blazor uses is just a MAUI control.

There is an alternative using MAUI .Net Comet