timlariviere / fabulous Goto Github PK

One big issue with MVU is how it scales. A big application will do a lot of things, which implies a lot of Msg to implement and handle.
One could split up the application into smaller components and compose everyting, but the way MVU works means it's still up to the developer to manually wire all components messages into application messages. This leads to a lot of work.

Inspired by Feliz's UseElmish, I thought Fabulous could achieve the same use case by encapsulating the "runner" (responsible for the update-view loop) inside a ViewElement for making it transparent when declaring a view.

So, leveraging the (potential) new architecture of Fabulous, I wrote a ComponentViewElement that creates a runner for its child, just like Program.run creates a runner for the application.
This way, the component is isolated and has its own init/update/view & msgs that don't trigger a refresh of the parent.

It does support two-way communication with its parent.
A parent can pass down a state to the component (if the parent is updated, then the new state is pushed to the component) through the withState extension method.
A component can push an update to its parent through the withExternalMessages extension method.

Implementation:
https://github.com/TimLariviere/Fabulous/blob/play/Fabulous.XamarinForms/Fabulous.XamarinForms/Component.fs

This then allows to write independent components (can be pages, groups of controls, or even a single control).

You can write init/update/view functions with their own Model and Msg.
They are linked together into a program.
Then, a helper function will create a ComponentView taking the program definition.

The parent view can mix usual controls with components.

If a parent wants to listen to the component's external messages, it can simply add a new entry to its Msg union.

If a component wants to listen to the state its parent is giving it, it can also add a new entry to its Msg union.

Note: I got a working sample of it. Though the implementation is awful and most likely not working in every cases.
I just wanted to prove that it was possible to achieve such behavior in a way that is idiomatic to Fabulous.
Put another way: Works on my machine™