Fabulous: Better getting started app?

[dsyme]

This is a discussion thread for a better getting started app.

The starting position is that the "counter/increment/decrement/timer" app is

• reasonable for demonstrating the basics of MVU programming to experienced programmers
• not great for exciting people about creating imaginative apps.

Basically, if you give people a counter and some buttons then the only thing they imagine creating is, well, an app with counter and buttons.

Some ideas from me and @TimLariviere on slack:

• contains images
• maybe an animation
• use Shell + Visual (as they will become the defacto in the future)
• Maybe have a "Welcome to Fabulous" page with some images and text
• And another page with some interactions (much like the current template)
• Maybe another "About" page, accessible from the fly-out menu

Notes:

The difficulty is that we need to keep the code as small as possible, to let people easily read it and delete it when they start

Ideas:

Don says "let's take a look at the getting-started apps for Swift and Flutter"

[garethhubball]

One thing I would like to see is some navigation, another is something network-related, so we can see how navigation fits into the MVU archietecture and how to integrate external sources.

[Happypig375]

And please additionally provide an empty template as well. I don't want to delete code every time I start a new app...

[drk-mtr]

As a newcomer, the main blocker is understanding how to scale.

Threads like this are gold: https://github.com/fsprojects/Fabulous/issues/144 - but it took me a while to find resources like this.

If the template could do more to provide a starters approach for scaling/multi page navigation, this would significantly lower the barrier for entry in my view.

For me this would ideally contain examples of various layout styles, though I appreciate this might become too complex to maintain as the app shell (for example) has its own configuration overhead that might be overkill for a template.

I agree with happypig though, an empty template should exist too.

Other useful pages would include:

• an example of making an http call, maybe some serialization/deserialization
• an example of a component being used multiple times in a page, and passing messages back to the parent
• an example of one page / component interacting with another
• an authentication example

I realize the above are far more "general F# / Elmish" than Fabulous specific, so the more experienced users might be reluctant to include these. However for some F#, Elmish and Fabulous are all new so this is just a list of what I would find useful when getting started.

[SergejDK]

We have to be careful on this one.
If we put too many things in a starting app it would be something like the AllControls-Sample and we don't want this.

Other useful pages would include:
an example of making an http call, maybe some serialization/deserialization ....

I think that the ideas are great to have many samples. Instead of building all into the starting app, which could be a lot. Maybe we can think about including a samples project into Fabulous or make a website with those examples. This way we could seperate them a little bit and still have a clear and small starting app. The advantage of a website would be that the devs don't have to open another instance of VS - normally the browser is always open when coding... (Moved a little bit away from the point of the starting app...)

And please additionally provide an empty template as well.

We can do this but the question ist "What is empty". With the function in place like update, view and runner or really empty only the project.

Some ideas from me and @TimLariviere on slack:

I think that you nearly covered everything. Personally I wouldn't include many more features because it could be a too much. If we make this right it should be enough for the starting app.

---

Starting app idea:

1. Loading Screen at startup with Fabulous Logo, temporary it could be just F#.
2. A TabbedPage with Shell (1st is the "HomeScreen", 2nd is the IntercationScreen )
3. First Screen "Fabulous" would jump into your face with maybe a 'FadeTo' and some "sparkling border color changes". Below this we could input some data (did not think of sth. yet)
4. InteractionScreen. We could take a lot from the current template but I would love to use some MaterialDesign or MaterialVisual on some elements to show how to do it.
5. The flyout as you show with a Tab for the About page. The Aboutpage can be taken from Fabimals which @TimLariviere made.
6. A Toolbaritem which shows a picker to navigate through the app. e.g. Pick "Go to About" -> This way we can show how to navigate.

[dsyme]

I think that the ideas are great to have many samples. Instead of building all into the starting app, which could be a lot. Maybe we can think about including a samples project into Fabulous or make a website with those examples.

I think the important step here is to change https://github.com/fsprojects/Fabulous/tree/master/Fabulous.XamarinForms/samples so that they are xcopy-cloneable, i.e. fully buildable outside the Fabulous repo - and, crucially, put that build under CI, so that all the samples compile and will continue to compile on every commit to Fabulous.

Then we can rapidly build a samples gallery, and add that samples gallery to the docs.

It's possible we could also auto-templatize every sample too somehow, e.g.

dotnet new fabulous-sample-planets -n MyPlanets
dotnet new fabulous-sample-contacts -n MyListApp