Question: Why use a custom Navigation module ? about tabula-rasa

[Zaid-Ajaj]

How do you handle page navigation in Release mode ?

My bad, I will fix it right away 😄

Why a custom navigation module instead of the one from Elmish.Browser ?

Using the Parser api became messy real quick when you have nested pages and especially messy when you have parameters in the url.

Compare these two implementations, which one is easier to understad? this is the old one

let pageParser: Parser<Page -> Page, Page> =	
  oneOf [ map About (s Urls.about)	
          map (Admin Admin.Types.Page.Login) (s Urls.login)	
          map (PostsPage.Post >> Posts) (s Urls.posts </> str)	
          map (Posts PostsPage.AllPosts) (s Urls.posts )	
          map (Admin (Admin.Types.Page.Backoffice BackofficePage.Home)) (s Urls.admin)	
          map (Admin (Admin.Types.Page.Backoffice BackofficePage.NewPost)) (s Urls.admin </> s Urls.newPost)	
          map (fun id -> Admin (Admin.Types.Page.Backoffice (BackofficePage.EditArticle id))) (s Urls.admin </> s Urls.editPost </> i32)	
          map (Admin (Admin.Types.Page.Backoffice BackofficePage.Drafts)) (s Urls.admin </> s Urls.drafts)	
          map (Admin (Admin.Types.Page.Backoffice BackofficePage.PublishedPosts)) (s Urls.admin </> s Urls.publishedPosts)	
          map (Admin (Admin.Types.Page.Backoffice BackofficePage.Settings)) (s Urls.admin </> s Urls.settings) ]

and this is the new one

/// Tries to parse a url into a page 
let parseUrl (urlHash: string) = 
    let segments = 
        if urlHash.StartsWith "#" 
        then urlHash.Substring(1, urlHash.Length - 1) // remove the hash sign
        else urlHash
        |> fun hash -> hash.Split '/' // split the url segments
        |> List.ofArray
        |> List.filter (String.IsNullOrWhiteSpace >> not)  

    match segments with
    | [ Urls.about ] -> 
        // the about page
        App.Types.Page.About
        |> Some 

    | [ Urls.posts ] -> 
        // all posts page
        Posts.Types.Page.AllPosts
        |> App.Types.Page.Posts
        |> Some

    | [ Urls.posts; postSlug ] -> 
        // matches against a specific post by it's slug
        Posts.Types.Page.Post postSlug
        |> App.Types.Page.Posts
        |> Some  
    
    | [ Urls.admin ] -> 
        // the home page of the backoffice
        Admin.Backoffice.Types.Page.Home
        |> Admin.Types.Page.Backoffice
        |> App.Types.Page.Admin
        |> Some

    | [ Urls.login ] -> 
        // the login page 
        Admin.Types.Page.Login
        |> App.Types.Page.Admin
        |> Some 

    | [ Urls.admin; Urls.drafts ] ->
        // the drafts page 
        Admin.Backoffice.Types.Page.Drafts
        |> Admin.Types.Page.Backoffice
        |> App.Types.Page.Admin
        |> Some 

    | [ Urls.admin; Urls.publishedPosts ] ->
        // the page of published stories
        Admin.Backoffice.Types.Page.PublishedPosts
        |> Admin.Types.Page.Backoffice
        |> App.Types.Page.Admin
        |> Some 

    | [ Urls.admin; Urls.newPost ] ->
        // the new post page
        Admin.Backoffice.Types.Page.NewPost
        |> Admin.Types.Page.Backoffice
        |> App.Types.Page.Admin
        |> Some 
    
    | [ Urls.admin; Urls.settings ] ->
        // the settings page
        Admin.Backoffice.Types.Page.Settings
        |> Admin.Types.Page.Backoffice
        |> App.Types.Page.Admin
        |> Some 

    | [ Urls.admin; Urls.editPost; Urls.Int postId ] ->
        // editing a post by the post id 
        Admin.Backoffice.Types.Page.EditArticle postId 
        |> Admin.Types.Page.Backoffice
        |> App.Types.Page.Admin
        |> Some

    | _ -> None 

It is a bit longer, yes, but more obvious to read and understand.

Also the Elmish navigation module clutters the debug the messages with UserMsg because it wraps the main program which I didn't like, although it is a small inconvenience.

Thank you for pointing out the subscription in Debug mode and please let me know if you come across other bugs.

[MangelMaxime]

Ok, I do unterstand and agree about the pageParser becoming a bit messy.

At a time, I was wondering if doing a Suave/Giraffe like routing thing made sense or not.

please let me know if you come across other bugs.

Sure, I am just reading bit of the code to see how different your structure is from mine. :) As we have in general a different approach to the different problems :)

[Zaid-Ajaj]

Sure, I am just reading bit of the code to see how different your structure is from mine. :) As we have in general a different approach to the different problems :)

Yeah, I am still exploring the best ways to solve common problems in large apps, the result you see now is after many iterations on how to make the code scalable, readable, etc.