Improve the UX for the Extensions Template

[nickrandolph]

Current user interface (UX) for the extensions template is generated by VS based on parameters in the dotnet new template. It would be good to have a UX that walks developer through picking what options they want included in the template (perhaps similar to the Template Studio interface)

[nickrandolph]

Refined list of options to be supported in the template interface:

Application Id
-- This affects the Mobile Targets using the MSBuild props available from net6+ (appid -> -id, --app-id <app-id>)

Framework
-- this is a toggle between two options with the default being net6.0 (as it's the LTS version)
net6.0/net7.0 (tfm -> -tfm <net6.0|net7.0>)

Presentation (architecture -> -arch, --architecture <mvux|mvvm>)

• Mvvm - Using CommunityToolkit.Mvvm
• MVU-X - Using Uno.Extensions.Reactive - Default

UI - Markup
-- this is a toggle between two options with default being XAML (markup -> -markup, --csharp-markup)

• XAML - Default
• C# Markup

Theme (theme -> -theme, --app-theme <Material|Fluent|Cupertino>)

• Material - Default
• Fluent
• Cupertino

Platforms
-- this is multi-select (i.e. toggle each platform on/off)
-- we need icons for each platform

Mobile

• iOS (ios -> -ios)
• Android (android -> -droid, --android)

Desktop

• Windows (Windows App SDK) (winAppSdk -> -win, --windows-app-sdk)
• Windows (Wpf) (skia-wpf -> -wpf, --skia-wpf)
• Linux (GTK) (skia-gtk -> -gtk, --skia-gtk)
• Linux (Frame Buffer) (skia-linux-fb -> -linux, --skia-linux-fb)
• Mac (MacOS) (macos -> -macos)
• Mac (Catalyst) (maccatalyst -> -catalyst, --maccatalyst)

Web

• Wasm (WebAssembly) (wasm -> -wasm, --webassembly)

Projects

• Server - API & WASM host like what's currently in the Uno App template (server -> -server)
• MyExtensionsApp.DataContracts - Added to the Solution if the Server or Uno.Extensions.Http are enabled.
  Contains the WeatherForecast data contract to be used by both the App and API

Tests

• Unit Tests (unittests -> -unit-tests)
• UI Tests (tests -> -ui-tests)

Features

• Wasm - PWA Manifest for WASM (wasm-pwa-manifest -> -pwa, --wasm-pwa-manifest)
• VSCode - Visual Studio Code Debugging for WASM (vscode -> -vscode)

Extensions
-- this section is multi-select (i.e. toggle individual items to enable/disable the section)

• Extensions - Configuration (appsettings.json) (configuration -> -config, --configuration)
• Extensions - Logging (logging -> -log, --logging)
  • Logging using Serilog (serilog -> -serilog --logging-serilog)
• Extensions - Localization (localization -> -loc, --localization)
• Extensions - Navigation (navigation -> -nav, --navigation <Frame|Toolkit>)
  • Frame option will use basic blank hello world like unoapp template. ViewModels will be excluded.
  • Toolkit will use Uno.Extensions.Navigation with Uno.Extensions.Navigation.Toolkit.WinUI
• Extensions - Http & Refit - Add & Register Refit client configured to work with the Server API (http -> -http, --http-client)

Hidden Parameters

• Central Package Management - This is currently buggy on mobile targets and disabled by default and will not be part of the UI (cpm)
• Skip NuGet Restore (skipRestore -> -skip, --skipRestore)
• Is being created from VSIX - Needed for Template Studio to exclude the sln file (is-vsix)

For later

• Remembering the options selected so that they're the default when running the template next time

• Authentication
  - Custom
  - MSAL
  - OIDC Connect
  - Web

• Navigation
  - Blank (Effectively what you get when you disable all of the extensions) (Frame option)
  - NavigationView
  - TabBar
  - Responsive - uses NavigationView (landscape) and TabBar (portrait)

[NVLudwig]

@nickrandolph we would have to as I have no idea what this is for :)

[dansiegel]

Something else that should be added is the ability to set the App Id. This may not be relevant for all platforms but it is relevant for the 4 contained in the Mobile project and is worth exposing an ability to set up front when you create the app.

[dansiegel]

As part of the update for the single location project style, some suggested updates for the spec above:

Extensions

• Extensions - Http & Refit - Add & Register Refit client configured to work with the Server API (http -> -http, --http-client)

Projects

• Server - API & WASM host like what's currently in the Uno App template (server -> -server)
• MyExtensionsApp.DataContracts - Added to the Solution if the Server or Uno.Extensions.Http are enabled.
  Contains the WeatherForecast data contract to be used by both the App and API

[francoistanguay]

Is the DataContracts suffix standard? Could we just name this project MyApp.Data ?

[dansiegel]

Data would be more of we're storing data in a Sqlite database in the app... vs Data Contracts or DTO's indicating that it's being used with an API

[nickrandolph]

Design Discussion

Overview

The aim is for this template experience to be the single experience for creating Uno applications. For new users there should be a simple path for creating a new Uno project but for more advanced users they should have the ability to customise how the application is generated.

Template options

These are covered in detail in the above comment, so rather than repeat all the different values this section will provide more description on "why" each option exists. The names of these sections are likely to change based on feedback

Framework
Each year Microsoft releases new versions of .NET, with release alternating between long term support (LTS) and standard term support (STS) (see here for details on the support policy). The current LTS release is .NET 6, released a year ago; .NET 7, which was just released is a STS release. If there are more than one releases currently supported by Microsoft, the template should provide the ability for the developer to switch between version.
The default should be the most recent version (with the caveat that it should be fully supported by Uno)

Presentation
This option allows the developer to define how the views are connected to the logic of the application. The options here are Mvvm (well known and very popular for XAML applications) and MVU-X (new model that is more reactive in style)
Defaults to MVU-X

Markup
This option defines the way that the views are defined and is a choice between XAML and Csharp markup.
Defaults to XAML

**Design System / Theme **
Options to switch between Material, Cupertino or Fluent.
Defaults to Material

Platforms
This is a multi-select option that defines which platforms the application will be targetting. Since there are a lot of platforms, they should be grouped into Mobile, Desktop and Web

Projects
This section includes some optional projects that a developer may want to include in order to have a more complete starting point for their application. For example the Server option would create an additional web project that exposes an API and can host the WASM application

Testing
This include options for selecting from different types of testing projects that would be added to the application.

Features
This section include a number of features that can be toggled on/off. For example the PWA option will include the PWA manifest file required for the WASM application to be able to be installed as a PWA.

Extensions
This is multi-select options for each of the Extensions we have. Should we be separating these into separate sections? For example Navigation or Authentication will end up having a number of options, so it may be worth separating theses out.

Application
This section includes properties, such as the application id, that the developer can set for the application.

Wizard Structure

One source of inspiration is the TemplateStudio experience

This is broken into four areas:
1 - List of all the steps, allowing developer to easily jump to any of the steps
2 - Shows the details of the current step
3 - Shows a summary of all currently selected options
4 - Allows stepping forward/backward and completing the wizard

We might want to consider having an initial screen in the wizard that allows for selection of pre-defined configurations. A suggestion would be for a vanilla/blank option (this would be the bare minimum with none of the options) and a recommended option. After selecting on of the pre-defined configurations, the developer can either click finish, or can customise the configuration.

We should also remember the last configuration that the developer selected. If this is either the blank or recommended option, we can just select the option; if the developer customised the configuration last time, we could either add a "Custom" option to the opening screen, or we could automatically push the developer to the customization screen (ie the main area of the wizard).

There should be a way for the developer to exit out of the customization screen, back to the opening screen of the wizard. This could be called "Start Over".

[NVLudwig]

@nickrandolph Questions:

1. Once all options are selected OR once the user has opted for the "Quick Start" is there a long loading time that would require a loading experience?

2. If this is a stand alone app what is the final outcome of completing the Wizard here? Is it an Edit screen where the user can code in app, or is it an "Export to" experience targeting Visual Studio / Uno Flow?

3. Is there a login or authentication experience?