Fabulous: Add more simple samples

[TimLariviere]

AllControls became more of a playground for testing new features than a real sample.
So before we can release Fabulous 1.0, we need to make simpler samples.

I'm thinking something like the XAML Controls Gallery in the Microsoft Store (https://www.microsoft.com/en-us/p/xaml-controls-gallery/9msvh128x2zt) can be a good thing to do.
It would both act as an interactive documentation, show code samples on how to use a control, and demonstrate how to implement a complete application with Fabulous.

[SergejDK]

Just to clarify what exactly is needed here...

Should this be a new documentation style like the offical Xamarin.Forms documentation? or for example something like this: MKDocs

or should we write a program as the XAML Controls Gallery.

[TimLariviere]

Yes, my comment was not really clear.

We already have documentation here: https://fsprojects.github.io/Fabulous/guide.html
So there's no real need for another one.

Initially, I meant to add more samples like TicTacToe and CounterApp.
Or at least a rewrite of AllControls, because currently it's one big file and it's hard to go into it for newcomers.

Then I thought maybe a program like XAML Controls Gallery could be a good option.
There, we can showcase all the controls, along with some minimal documentation (the control itself to play with, a code sample showing how to use the control, a link to the Xamarin.Forms MSDN doc of the control, etc.)
And at the same time, it can inform people on how to make an app that can scale in size. (the gallery app will be pretty big)

[SergejDK]

There are some parts I would like to do better in the current documentation.

• add a searchbar
• create a menu for better navigation
• add all missing parts (e.g. Switch) but I need to check what else is missing

When this is done then we can add some examples as in the XF e.g. like the TODO-App and so on.
Maybe we can take some of these existing ones and rewrite them in F#. These apps can have some of the typical needed librarys and how to use them.

The AllControls Example is as you wrote it in another Issue more like a Sandbox( Proof of Concept) so I don't think it would be great to rewrite it.
Instead of rewriting I think that it would be better to create the "XAML Gallery" but only when the doc has every viewpart in it.

I think this is more clear where to go from here... what do you think about this?

[TimLariviere]

Regarding the documentation, it's a reasonable request.
We sure could use a complete doc with every controls that we support. (still without going to too far in details, MSDN is there for that) and a better way to navigate / search.
Can you open another issue for this point ?

I don't have enough rights to change the website itself.
It's handled there: https://github.com/fsprojects/fsprojects.github.io
And it's shared between multiple projects owned by fsprojects.

[SergejDK]

The new issue belongs to the link you posted, right?

[TimLariviere]

No, I meant a new issue in Fabulous so we can track where we are with the docs.

I want to keep this issue for samples, like adding the Todo app you mentioned.

[SergejDK]

For anyone who wants to do a sample app but does not which one...

Take a look at the Xamarin.Forms samples: Xamarin.Forms-Samples

[SergejDK]

@TimLariviere
Will try to make an initial app like the Xaml gallery. Now the "most bugs" for desktop parts are gone, so i could try.
I'll make the app with Gtk, UWP, WPF and macOS.

Anything specific what I should include or not include?

When I have the initial app running - should I include it into Fabulous? or where to put?

[chrisevans9629]

How is the progress going on this? Also the @SergejDK link to the samples seems to be broken. Here's some links to samples for Xamarin.Forms microsoft docs and github

I'd be interested in helping out on this. Maybe we could recreate some of the Xamarin.Forms samples, such as the Weather app or the Bug sweeper to show how fabulous scales into a real app?

[TimLariviere]

How is the progress going on this?

I'll let @SergejDK answer to that. For my part, I haven't worked on it.

I'd be interested in helping out on this. Maybe we could recreate some of the Xamarin.Forms samples, such as the Weather app or the Bug sweeper to show how fabulous scales into a real app?

Absolutely! Any help is really appreciated. :)

We already have a TicTacToe sample, so BugSweeper might not add much.
Weather app on the other hand is a good example of a typical app that display data from an API.

You could also take a look at https://github.com/jamesmontemagno/app-pretty-weather
It's dead simple (no API, could reuse the one from the other Weather app), but pretty fancy.

[chrisevans9629]

Awesome! I think the app pretty weather would be even better and looks super simple. I'll go ahead and fork fabulous and work on this.

[SergejDK]

How is the progress going on this?

I did not get the time to work on pretty much in the last months... Please go ahead and work on this :)

One thing to mention is that Don had a great idea:

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.

Maybe this is something that we should think about in this issue?

[chrisevans9629]

Progress Update

I wanted to give an update on what I have done so far. I have successfully created a replica of the pretty weather app and created a view extension for the pancake view.

I really like the overall development experience (especially the hot reload). I'm curious of the progress of the type provider for extending the view module? I think that'd be really valuable in speeding up the development process (I'd love to help). Additionally, I'd love to see hot reload become faster (maybe using binary requests instead json if not done so already?)

Making the samples buildable outside the Fabulous repo

I'm curious as to how we should accomplish making the samples buildable outside the Fabulous repo and also build under CI? Maybe you could have something in MSBuild that would use Fabulous if building CI, but use nuget if being built locally? That would allow samples to be seperate, but still test changes to fabulous.

Screenshots

[TimLariviere]

Awesome, thanks! Will take a look at the PR.

I'm curious of the progress of the type provider for extending the view module?

We don't work on a type provider because even though it may seem like a good idea, in fact, there's a lot of subtleties that make it impractical.
See https://github.com/fsprojects/Fabulous/issues/396

Instead, the new Fabulous.XamarinForms.Generator can help you with that.
You need to pass it a json file (like this one) that points to the dll containing your controls and it will generate the same code as the one composing Fabulous.XamarinForms.
Stil need to add a little thing to it to allow using it for extensions though.

Additionally, I'd love to see hot reload become faster (maybe using binary requests instead json if not done so already?)

There's a lot of room to improve LiveUpdate.
Unfortunately, I haven't had time to work on it seems Don created it.

So if you feel like it, you can take a look :)

I'm curious as to how we should accomplish making the samples buildable outside the Fabulous repo and also build under CI? Maybe you could have something in MSBuild that would use Fabulous if building CI, but use nuget if being built locally?

That's an interesting thought.
Maybe we can use Directory.Build.props to declare a global variable like <IsFabulousRepository>True</IsFabulousRepository> and in the samples projects do something like:

<ItemGroup Condition="'$(IsFabulousRepository)' == 'True'">
    <ProjectReference Include="..\..\..\src\Fabulous.XamarinForms\Fabulous.XamarinForms.fsproj" />
    <ProjectReference Include="..\..\..\src\Fabulous.XamarinForms.LiveUpdate\Fabulous.XamarinForms.LiveUpdate.fsproj" />
</ItemGroup>

<ItemGroup Condition="'$(IsFabulousRepository)' != 'True'">
    <PackageReference Include="Fabulous.XamarinForms" Version="0.50.3" />
    <PackageReference Include="Fabulous.XamarinForms.LiveUpdate" Version="0.50.3" />
</ItemGroup>

The only real difficulty will be to automatically update the hard-coded version numbers when we update the version number of Fabulous.

[chrisevans9629]

Instead, the new Fabulous.XamarinForms.Generator can help you with that.
You need to pass it a json file (like this one) that points to the dll containing your controls and it will generate the same code as the one composing Fabulous.XamarinForms.
Stil need to add a little thing to it to allow using it for extensions though.

Awesome! I think this would be something good to add to these docs as this is what I was following to make the view extension.

I'll take a look at the LiveUpdate and see what I can do 😄.

As far as the hard coded version numbers, for people who are downloading the samples it would be easy to update the nugets and we could update the nugets manually as well.
Maybe to make it automatic we could have nuget update Fabulous.XamarinForms called on before build or something like that?

[TimLariviere]

Since we have a new cool sample thanks to @chrisevans9629, I'll close this issue.
Don't hesitate to open a new issue if you find we're missing samples.