Fabulous: Question: Can we have multiple windows?

[JordanMarr]

Is it possible to open multiple windows now? For example, let's say I want to open a new modal window from the main app/window where the modal window has its own separate update loop.

[TimLariviere]

@JordanMarr Unfortunately no, not currently at least. I don't think Xamarin.Forms even support it at all.
On which platform do you need to open a new window, WPF?

[JordanMarr]

I only need to target WPF. It doesn't necessarily have to be two separate windows, as much as the ability to run multiple loops at the same time. What I would love to be able to recreate is the experience in Fable.React of being able to create multiple views with their own dispatch loops. This makes it so much easier to have a multi-page app because you don't have to deal with wiring up all the messages. This has become a staple for me.

In React, each view is declared as a function component, and I can use a function like "useReducer" or "useElmish" to start up an isolated dispatch loop just for that view. This makes it trivial to have multiple views, where each view is somewhat isolated and self-contained by having its own dispatch loop.

/// EditUserDialog.fs
module EditUserDialog

type Model = { User: User }
type Msg = | Load | Save | Cancel ...
let init (user: User) = ...
let update msg model = ...

type Props = { IsDialogOpen: bool; User: User; OnSave: User -> unit }

let dialog = React.functionComponent(fun (props: Props) ->   
    let model, dispatch = React.useElmish(init props, update, [||])

    div [ Visible model.IsDialogOpen ] [ 
        div [] [
            label [] [ str "First Name:" ]
            input [ Value model.User.FName ]
        ]
        div [] [
            label [] [ str "Last Name:" ]
            input [ Value model.User.LName ]
        ]
        div [] [
            button [ Click (dispatch Save) ] [ str "Save" ]
        ]
    ]
)

/// UsersPage.fs
module UsersPage

type Model = { ... }
type Msg = | ListUsers | EditUser ...
let init () = ...
let update msg model = ...

let page = React.functionComponent(fun () ->   
    let model, dispatch = React.useElmish(init props.Type, update, [||])

    div [] [
        for user in model.Users do 
            ...

        EditUserDialog.dialog 
            { IsDialogOpen = model.SelectedUser.IsSome
              User = user
              OnSave = (fun user -> dispatch (UpdateUser user)) }        
    ]
)

The "downside" in this approach is that you have multiple disparate dispatch loops as opposed to one unified loop.
But really, this doesn't feel like a downside to me, and the ease of adding introducing new views more than makes up for it.

[TimLariviere]

You might be interested by https://github.com/TimLariviere/Fabulous/issues/25
There, I tried to create something similar touseElmish that would be compatible with Fabulous and support bidirectional communication (receive messages from outside the loop and send messages to outside the loop).

Let me know if this is the concept you need.
And if the API (usability) makes sense to you.

[JordanMarr]

That looks very promising!

In the CounterApp sample, I really like AboutCard.asComponent(model.Count, CardChanged). The way you are splicing that view element directly into the view is exactly what I had in mind.

The optional withExternalMessages is a pretty slick way of routing messages back to another view.

This looks great!

[JordanMarr]

Any chance of this fabulous feature making making it into a release in the near future?

[TimLariviere]

Thanks for the feedback!

I fear it will take a few months before I can add that feature, since it is dependent on the new architecture I've been playing with.
I need to do a few things before being able to implement that.

Currently my priorities are as follow:

• Complete the picture for the new shapes controls (PR #782)
• Migrate the documentation website to Fornax
• Reduce allocations in Fabulous
• Rework the experiments to take into account the optimizations done for the allocations
• Write the specifications to implement the new architecture (that would enable that new feature) while being backward-compatible with the existing DSL.
• ... and finally implement bit by bit the new architecture and the new features.