fabulous-dev / Fabulous

Declarative UI framework for cross-platform mobile & desktop apps, using MVU and F# functional programming
https://fabulous.dev
Apache License 2.0
1.13k stars 122 forks source link

Do we really need to learn MVU before using this library? #1073

Closed ken-okabe closed 2 months ago

ken-okabe commented 3 months ago

Hi,

Thanks for developing this great product!

I've read #1034 (Give Fabulous a strong, independent identity).

I'm thrilled about the potential of Fabulous.Avalonia because, thanks to WASM and the Avalonia adaptation, it offers true cross-platform development, including web apps.

This means we can avoid using TypeScript for web app development, opening up a huge potential target audience: the entire community of front-end web developers.

Here is my big concern.

Although the Elm is a great functional reactive language, and MVU is an established framework, not every web developer employs MVU, and they don't have to.

Many just use React or SolidJS alone without Redux(MVU framework)

React + Redux = MVU SolidJS + Redux = MVU

and the most of the SolidJS users won't use Redux or MVU simply because they don't need it.

https://hackernoon.com/state-management-in-solidjs-applications


I studied fabulous a bit.


https://github.com/fabulous-dev/Fabulous

It aims to bring you a great development experience and confidence in your code by combining an expressive UI syntax, the simple & robust Model-View-Update (MVU) architecture, and functional programming.


https://fabulous.dev/

✔ multi‑platform apps ✔ Declarative UI ✔ Functional programming ✔ Powered by .NET

image

https://zaid-ajaj.github.io/the-elmish-book/#/chapters/elm/


https://docs.fabulous.dev/

Model-View-Update architecture (shorten to MVU), with a great F# DSL for building dynamic UIs. The combination of F# and MVU makes for a great development experience.


I have a strong impression that Fabulous is coupled with Elm-like MVU style, and definitely this state management style becomes a hazard for newcomers.

Elm-like MVU style is great for those who use React-Redux already, but many SolidJS developers are not big fans of MVU.

That said, I was very surprised to see a sample code for SimpleCounter based on non-MVU Components.

https://github.com/fabulous-dev/Fabulous.MauiControls/blob/main/samples/Components/SimpleCounter/App.fs

In fact, this is exactly what I've been looking for.

My suggestion for promoting this library in the web ecosystem is:

In the documentation:

h0lg commented 3 months ago

I understand you want to use Fabulous with a Component architecture instead of buying into MVU - because web devs who have worked with React or something similar aren't that familiar with it.

I believe there's something in the works and the maintainers may be able to answer that question - but to me it seems like you're about to throw out the best part and I just wanted to share an excellent MVU intro that I found helpful to get familiar with the lingo and concepts. That should take the edge off the learning curve.

For building non-trivial apps, the Fabulous doco and Elmish book you already found are good resources for understanding some of the more complex patterns with examples.

Lastly, https://github.com/fabulous-dev/Fabulous.Avalonia and https://github.com/fabulous-dev/Fabulous.Avalonia.Samples contain many helpful examples for using the Avalonia specific controls. HTH!

ken-okabe commented 3 months ago

@h0lg! I appreciate your insights.

Here, I'm not asking for help, and actually, I understand MVU well enough to explain why it's not best for the community.

Now, let’s discuss new generation framework: VanJS

https://vanjs.org/

VanJS (abbreviated Vanilla JavaScript) is an ultra-lightweight, zero-dependency, and unopinionated Reactive UI framework

The point is Model minimal granularity and unopinionated of frameworks.

Although you believe MVU is the best part, that is your opinion, and my opinion is different.

It's basically the binary operation that is

newModel = oldModel |> update Msg

One of the interesting reading might be

https://medium.com/@bradfordlemley/why-state-management-is-all-wrong-ca9f3bbde869

Once we technically bundled Elmish with the core part, the granularity of the framework becomes big and opinionated, that many would not want, I think :)

We can still compose them

FabulousCore + Elmish_extension

edgarfgp commented 3 months ago

Hi @ken-okabe,

Fabulous was designed and implemented with MVU from the ground and in its stable version 2.X MVU its the only way. However e wanted to make Fabulous more flexible and in the current 3.x preview version we testing a new Component API that will allow users choose between

ken-okabe commented 2 months ago

Hi @edgarfgp

That sounds really nice. Thank you for the update on the project.