loading experience

Avalonia UI

Avalonia nel browser con WebAssembly

La stessa applicazione desktop pubblicata anche come pagina web, senza riscrivere l'interfaccia.

Avalonia nel browser con WebAssembly

Avalonia può eseguire un'applicazione direttamente nel browser grazie a WebAssembly: il codice .NET viene scaricato ed eseguito dal browser, e l'interfaccia viene disegnata in un'area della pagina.

Il codice dell'interfaccia è uno solo, i progetti di avvio sono minuscoli.
Il codice dell'interfaccia è uno solo, i progetti di avvio sono minuscoli.

Un progetto, più destinazioni

dotnet new avalonia.xplat -o Preventivi

Il template multipiattaforma crea un progetto condiviso con viste e ViewModel e un progetto "di avvio" per ogni destinazione: desktop, browser, Android e iOS. Il progetto per il browser è molto piccolo:

internal sealed partial class Program
{
    private static Task Main(string[] args) =>
        BuildAvaloniaApp().StartBrowserAppAsync("out");

    public static AppBuilder BuildAvaloniaApp() =>
        AppBuilder.Configure<App>();
}

La stringa "out" è l'identificativo dell'elemento HTML in cui viene disegnata l'applicazione.

Quando ha senso

  • Offrire una versione online di uno strumento desktop esistente, per esempio un configuratore o un calcolatore tecnico.
  • Demo e prove gratuite senza installazione.
  • Strumenti interni da usare anche da postazioni dove non si può installare software.

I limiti da conoscere

  • Il primo caricamento scarica il runtime e l'applicazione: va ottimizzato con trimming e compressione.
  • Il codice gira nella sandbox del browser: niente accesso libero a file e rete, chiamate HTTP soggette alle regole CORS.
  • Per un sito pubblico indicizzato dai motori di ricerca, HTML generato lato server resta la scelta giusta.

Usato nel posto giusto, permette di raggiungere gli utenti via browser riusando fino all'ultima riga il codice dell'applicazione desktop.

Commenti (0)

Nessun commento ancora.

Lascia un commento