Giraffe style routing for Fun.Blazor
source link: https://www.slaveoftime.fun/blog/36
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
2021/07/01 11:04:44
Giraffe style routing for Fun.Blazor
Before I experimented Feliz.Router with Fun.Blazor and find some inconvenience so this time I tried to use giraffe style to see how it is going on.
Before I like the Feliz.Router very much, because it is very simple to start:
html.route (function
| [ "router" ]
| [ _; "router" ] -> html.text "Router"
| [ "router"; Route.Query [ "name", name; "age", Route.Int age ] ]
| [ _; "router"; Route.Query [ "name", name; "age", Route.Int age ] ] -> html.text $"name is: {name}, age is: {age}"
| _ -> html.text "Not my concern."
)
It is easily to extract data from url and also very explicity, its concept is very straightforward. But recently I found it is not easy to manage a little bit complex routes, and composing longer segments makes it hard to read. For example I can do
html.route (function
| [ Route.Ci "document"; Route.Int docId; Route.Ci "comments"; .... ]
)
I use Giraffe on backend a lot and like its style very much. So copy its code and integrate with blazor could make things funny. Now I can write things like:
html.route [
routeCi "/whatever"
subRouteCi "/router" [
routeCi "/document" (html.text "Dcoument page")
routeCif "/document/%i" (fun x -> html.text $"Document {x}")
routeCiWithQueries "/documents" (fun queries -> html.text $"Documents with query: {formatQueries queries}")
routeCifWithQueries "/documents/%s" (fun param queries -> html.text $"Documents(Param: {param}) with query: {formatQueries queries}")
]
]]
/// Or
let routes = [
routeCi "/antdesign" demoAntDesign
routeCi "/fluentui" demoFluentUI
routeCi "/mudblazor" demoMudBlazor
subRouteCi "/router" [ routeAny Router.Router.router ]
routeCi "/elmish" Elmish.Elmish.elmish
routeCi "/helper-functions" HelperFunctions.HelperFunctions.helperFunctions
routeCi "/cli-usage" CliUsage.CliUsage.cliUsage
routeAny QuickStart.QuickStart.quickStart
]
Extracting the queries is not gonna difficult, I may write some helper functions (like Zaid-Ajaj/Giraffe.QueryReader: HttpHandler for easily working with query string parameters within Giraffe apps. (github.com)) to do that if necessary. Or just use json serializer to handle dictionary directly to bind to some model. Now I just expose a map of the query.
For demo you can refer to: Fun Blazor (slaveoftime.fun)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK