Awesome
Fun.Blazor
This is a project to make F# developer to write blazor easier.
- Use F# ❤️😊 for blazor
- Computation expression (CE) style DSL for internal and third party blazor libraries
- Dependency injection (html.inject)
- Adaptive model (adaptiview/AdaptivieForm) (recommend), elmish model (html.elmish)
- Giraffe style routing (html.route/blazor official style)
- Type safe style (Fun.Css)
- Convert html to CE style by Fun.Dev.Tools
Check the WASM Docs for more 🚀
Donation
If you find my projects helpful and would like to support my work, consider making a donation via PayPal. Your support is greatly appreciated!
<a href="https://paypal.me/wubinwen" style="display: flex; align-items: center; gap: 12px;"> <img src="https://www.paypalobjects.com/paypal-ui/logos/svg/paypal-color.svg" height="30"> </a>Start to use
dotnet new install Fun.Blazor.Templates::4.0.2
dotnet new fun-blazor -o FunBlazorDemo1
Requires dotnet 8
Code samples
// Functional style
let demo (str) = fragment {
h2 { $"demo {str}" }
p { "hi here" }
}
// Class style
type Foo() =
inherit FunComponent()
let mutable count = 0
override _.Render() = main {
h1 { "foo" }
demo $"hi {count}"
button {
onclick (fun _ -> count <- count + 1)
"Click me"
}
}
CE build performance
- There is CE performance issue for inline or nest too much CE block.
There are some tests in here, in summary, below are some recommend ways for better build time performance (but it can reduce runtime performance because we cannot inline and need to allocate memory on head for creating array or list)
-
The best result is list-with-local-vars for multiple child items
let demo1 = div { class' "font-bold" "demo1" } let demo2 = div { class' "font-bold" "demo2" } let comp = div { style { color "red" } childContent [| // 👌✅ demo1 demo2 |] }
But you can also write like below even it will not build as fast as the above:
let comp = div { style { color "red" } childContent [| // 👌✅ div { class' "font-bold" "demo1" } div { class' "font-bold" "demo2" } |] }
-
nested-one is kind of ok
let comp = div { class' "font-bold" div { // 👌✅ class' "font-bold" "demo1" } }
But still prefer childContent:
let comp = div { class' "font-bold" childContent (div { // 👌✅✅ class' "font-bold" "demo1" }) }
-
nested-one-one is not ok (bad for build perf)
let comp = div { class' "font-bold" div { class' "font-bold" div { // ⛔🙅 class' "font-bold" "demo1" } } }
Write like below:
let comp = div { class' "font-bold" div { class' "font-bold" childContent [| // 👌✅ div { class' "font-bold" "demo1" } |] } }
-
inline local vars is not ok (bad for build perf)
let comp = div { class' "font-bold" let temp = div { // ⛔🙅 class' "font-bold" "demo1" } temp }
Local development
You can run dotnet fsi build.fsx -- -h to check what is available to help you get started.
Benchmark
BenchmarkDotNet v0.13.12, Windows 11 (10.0.22631.3007/23H2/2023Update/SunValley3) 12th Gen Intel Core i7-12700H, 1 CPU, 20 logical and 14 physical cores .NET SDK 8.0.100 [Host] : .NET 8.0.1 (8.0.123.58001), X64 RyuJIT AVX2 DEBUG DefaultJob : .NET 8.0.1 (8.0.123.58001), X64 RyuJIT AVX2
Method | Mean | Error | StdDev | Ratio | RatioSD | Gen0 | Allocated | Alloc Ratio |
---|---|---|---|---|---|---|---|---|
RenderWithRazorCSharp | 234.1 ns | 3.59 ns | 3.36 ns | 1.00 | 0.00 | 0.0298 | 376 B | 1.00 |
RenderWithFunBlazorInlineCE | 363.5 ns | 4.14 ns | 3.67 ns | 1.55 | 0.03 | 0.0443 | 560 B | 1.49 |
RenderWithFunBlazorArray | 499.0 ns | 9.82 ns | 10.91 ns | 2.14 | 0.05 | 0.1154 | 1448 B | 3.85 |
RenderWithBolero | 507.9 ns | 9.74 ns | 11.21 ns | 2.17 | 0.07 | 0.1173 | 1480 B | 3.94 |