Differenze fra .Net MAUI app e .Net MAUI Blazor Hybrid App

Differenze fra .Net MAUI app e .Net MAUI Blazor Hybrid App

Indice – Differenze fra .Net MAUI app e .Net MAUI Blazor Hybrid App

1. Introduzione: due approcci, un unico ecosistema
2. Cos’è la .NET MAUI App: architettura e UI nativa
3. Cos’è la .NET MAUI Blazor Hybrid App: Blazor nel guscio nativo
4. Differenze architetturali fondamentali
5. Esempi di codice a confronto
6. Tabella riepilogativa di confronto
7. Best practice: quando scegliere l’una o l’altra
8. Uso integrato: i due approcci possono coesistere?
9. Prospettive future: la roadmap Microsoft
10. Formazione continua: il vantaggio competitivo del team

1. Introduzione: due approcci, un unico ecosistema

Quando si affronta un nuovo progetto cross-platform in ambiente Microsoft .NET, una delle prime domande che ogni team di sviluppo deve porsi è: quale template scegliere in Visual Studio? La scelta non è banale, perché dietro due voci apparentemente simili — .NET MAUI App e .NET MAUI Blazor Hybrid App — si celano filosofie architetturali ben distinte, con implicazioni concrete su performance, manutenzione del codice e skill necessarie nel team.

.NET MAUI (Multi-platform App UI) è il framework Microsoft per costruire applicazioni native cross-platform con un singolo codebase C#, evolutosi da Xamarin.Forms a partire da .NET 6 e consolidato nelle versioni successive fino all’attuale .NET 9/.NET 10. Blazor, d’altra parte, è il framework ASP.NET Core che permette di costruire interfacce utente web interattive usando C# al posto di JavaScript. Quando Blazor incontra MAUI nasce il modello Hybrid, che porta l’UI web all’interno di un contenitore nativo.

In questo articolo tecnico analizziamo le due soluzioni in profondità, con esempi di codice concreti, per aiutare sviluppatori junior e senior a fare la scelta giusta fin dal kick-off del progetto.

2. Cos’è la .NET MAUI App: architettura e UI nativa

Una .NET MAUI App è un’applicazione che utilizza XAML e controlli nativi di piattaforma per costruire l’interfaccia grafica. Ciò significa che ogni control (.NET MAUI Button, Label, Entry, CollectionView…) viene tradotto a runtime nel corrispondente componente nativo del SO: un Button su Android è un android.widget.Button, su iOS un UIButton, su Windows un controllo WinUI 3.

L’architettura si basa su un singolo progetto .NET con target multipli definiti nel .csproj. La classe di entry point è MauiProgram.cs, dove si configura la Dependency Injection, si registrano i servizi e si avvia l’applicazione. Il pattern architetturale consigliato è MVVM (Model-View-ViewModel), benché siano supportati anche MVU (Model-View-Update) tramite community toolkit.

// MauiProgram.cs - .NET MAUI App

var builder = MauiApp.CreateBuilder();

builder

    .UseMauiApp<App>()

    .ConfigureFonts(fonts => {

        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");

    });

builder.Services.AddSingleton<IProductService, ProductService>();

builder.Services.AddTransient<ProductViewModel>();

return builder.Build();

La pagina XAML pura usa controlli nativi:

<!-- MainPage.xaml - .NET MAUI App -->

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             x:Class="MyApp.MainPage">

    <VerticalStackLayout Padding="24">

        <Label Text="Prodotti" FontSize="24" FontAttributes="Bold" />

        <CollectionView ItemsSource="{Binding Products}">

            <CollectionView.ItemTemplate>

                <DataTemplate>

                    <Label Text="{Binding Name}" />

                </DataTemplate>

            </CollectionView.ItemTemplate>

        </CollectionView>

    </VerticalStackLayout>

</ContentPage>

Vantaggi chiave: performance native, accesso diretto a tutte le API del dispositivo (fotocamera, GPS, Bluetooth, sensori), look and feel perfettamente integrato con ogni piattaforma e nessuna dipendenza da un motore web.

3. Cos’è la .NET MAUI Blazor Hybrid App: Blazor nel guscio nativo

La .NET MAUI Blazor Hybrid App è un’applicazione MAUI in cui l’intera UI (o parte di essa) non è scritta in XAML, ma in Razor Components: gli stessi componenti usati per le web app Blazor. Il collegamento tra il mondo nativo e quello web avviene tramite un controllo specifico: BlazorWebView, che espone un WebView embedded (WebView2 su Windows, WKWebView su iOS/macOS, Chromium su Android) capace di eseguire i componenti Razor nativamente nel processo .NET, senza passare per un browser esterno e senza WebAssembly.

Come documentato ufficialmente su Microsoft Learn, i componenti Razor girano nel processo nativo .NET dell’applicazione e rendono il loro output HTML/CSS attraverso un canale di interop locale. Questo significa accesso completo alle API native del device tramite MAUI, combinato con la familiarità della sintassi Razor.

<!-- MainPage.xaml - .NET MAUI Blazor Hybrid App -->

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:local="clr-namespace:MyBlazorApp"

             x:Class="MyBlazorApp.MainPage">

    <BlazorWebView HostPage="wwwroot/index.html">

        <BlazorWebView.RootComponents>

            <RootComponent Selector="#app"

                           ComponentType="{x:Type local:Components.Routes}" />

        </BlazorWebView.RootComponents>

    </BlazorWebView>

</ContentPage>

Il componente Razor corrispondente è identico a quello di una Blazor Web App:

<!-- Home.razor - identico in Hybrid e in Blazor Web -->

@page "/"

@inject IProductService ProductService

<h1>Prodotti</h1>

@foreach (var p in products)

{

    <p>@p.Name</p>

}

@code {

    private List<Product> products = new();

    protected override async Task OnInitializedAsync()

        => products = await ProductService.GetAllAsync();

}

La grande promessa del modello Hybrid è la condivisione del codice UI tra la versione mobile/desktop e la versione web tramite una Razor Class Library (RCL). Lo stesso componente Home.razor può essere usato in una Blazor Web App e in una MAUI Blazor Hybrid App senza modifiche.

4. Differenze architetturali fondamentali – Differenze fra .Net MAUI app e .Net MAUI Blazor Hybrid App

La differenza più sostanziale riguarda il layer di rendering. In una MAUI App pura, XAML viene compilato in UI handler che mappano ogni elemento su un control nativo del sistema operativo: nessun intermediario, nessun overhead web. In una Blazor Hybrid App, l’HTML generato dai Razor Components viene iniettato in un WebView embedded: la pipe di rendering è quella del browser integrato nella piattaforma.

Questo ha conseguenze concrete:

• Performance: l’UI XAML pura è mediamente più reattiva nelle animazioni complesse e nelle liste molto grandi. La differenza è percettibile soprattutto su dispositivi Android di fascia media.
• Debugging: in Hybrid si possono usare i DevTools del browser (Chrome DevTools su Android, Safari Web Inspector su iOS) per ispezionare i componenti Blazor, un vantaggio che i web developer apprezzeranno.
• Stile e CSS: in Hybrid l’intera UI è governata da CSS; in MAUI pura dallo stile XAML. Non sono intercambiabili.
• WebView2 su Windows: le app Hybrid richiedono che gli utenti Windows abbiano installato il runtime WebView2 (già incluso in Windows 11 e aggiornabile su Windows 10).

Un’altra differenza importante riguarda la curva di apprendimento: XAML richiede la conoscenza di un paradigma dichiarativo specifico e dei data binding MVVM. Blazor Hybrid è più accessibile a sviluppatori provenienti dal web che conoscono HTML, CSS e Razor, ma richiede comunque comprensione dell’hosting MAUI per accedere alle API native.

5. Esempi di codice a confronto

Vediamo un esempio pratico: accedere alla fotocamera del dispositivo. In entrambe le tecnologie l’accesso avviene tramite le API MAUI, ma l’integrazione nel codice UI è diversa.

In .NET MAUI App (XAML + code-behind):

// MainPage.xaml.cs

private async void OnTakePhotoClicked(object sender, EventArgs e)

{

    var photo = await MediaPicker.CapturePhotoAsync();

    if (photo != null)

    {

        var stream = await photo.OpenReadAsync();

        PhotoImage.Source = ImageSource.FromStream(() => stream);

    }

}

In .NET MAUI Blazor Hybrid (Razor Component con injection MAUI):

// CameraComponent.razor

@inject IMediaPicker MediaPicker

<button @onclick="TakePhoto">Scatta foto</button>

@if (imageUrl != null) { <img src="@imageUrl" /> }

@code {

    private string? imageUrl;

    private async Task TakePhoto()

    {

        var photo = await MediaPicker.CapturePhotoAsync();

        if (photo != null)

            imageUrl = photo.FullPath;

    }

}

In entrambi i casi il risultato finale è lo stesso: la logica nativa viene esposta tramite Dependency Injection. La differenza è solo nella sintassi dell’UI: XAML nel primo caso, Razor/HTML nel secondo.

6. Tabella riepilogativa di confronto

La seguente tabella sintetizza le principali differenze tra le due tecnologie per facilitare la scelta in fase di progettazione:

Caratteristica	.NET MAUI App	MAUI Blazor Hybrid
Modello UI	XAML nativo (Controls nativi)	HTML/CSS in WebView (BlazorWebView)
Performance	⭐⭐⭐⭐⭐ Nativa, massima fluidità	⭐⭐⭐⭐ Ottima, lieve overhead WebView
Curva di apprendimento	XAML + MVVM (richiede formazione)	HTML/CSS + Razor (più familiare per web dev)
Riuso codice web	Limitato	Elevato (stesse Razor Components)
Accesso API native	Diretto e completo	Completo via MAUI interop
Funzionamento offline	Sì, nativo	Sì (dipende dalla logica Blazor)
Template VS 2024	.NET MAUI App	.NET MAUI Blazor Hybrid App
Piattaforme target	Android, iOS, macOS, Windows	Android, iOS, macOS, Windows (+Web)
Sharing UI con Web App	No	Sì (via Razor Class Library)
WebView2 richiesto (Win)	No	Sì
Ideale per	App native ad alte prestazioni, brand consumer	App aziendali, portali, riuso codice Blazor
Pattern architetturali	MVVM, MVU, DI	MVVM, DI, Component-based Blazor

7. Best practice: quando scegliere l’una o l’altra

Scegli .NET MAUI App (XAML) quando:

• L’app è il prodotto principale dell’azienda e rappresenta il brand verso i consumatori finali (es. app bancaria, app retail): la qualità visiva nativa è critica.
• Le performance UI sono prioritarie: animazioni fluide, liste da migliaia di elementi, grafica intensa.
• Il team ha esperienza con XAML e MVVM (ex Xamarin, WPF) e non possiede competenze web.
• L’app richiede accesso intensivo a hardware specifico (Bluetooth LE, USB, sensori industriali) senza mediazione.

Scegli .NET MAUI Blazor Hybrid quando:

• Hai già una Blazor Web App e vuoi portarla su mobile/desktop con il minimo sforzo: i componenti Razor possono essere condivisi in una Razor Class Library.
• Il team è composto da sviluppatori full-stack C# con background web: la curva di apprendimento è molto più bassa.
• Stai costruendo un’applicazione enterprise/interna (gestionale, portale operatori, dashboard) dove la consistenza UI tra web e desktop è più importante del look nativo.
• Vuoi abilitare il testing dell’app tramite browser prima della distribuzione negli store (funzionalità disponibile con il template MAUI Blazor + Web App in .NET 9).

Best Practice: Non usare Blazor Hybrid per app consumer che devono competere con app native di alto profilo (Marriott, Delta, banking app): in quel contesto la qualità native-first di MAUI XAML è imbattibile. Blazor Hybrid eccelle nelle app B2B e negli strumenti interni.

8. Uso integrato: i due approcci possono coesistere?

La risposta è sì, e questa è una delle evoluzioni più interessanti dell’ecosistema .NET. A partire da .NET 8 e .NET 9, Microsoft ha introdotto un template ufficiale chiamato “Build a .NET MAUI Blazor Hybrid app with a Blazor Web App” che permette di creare una soluzione composta da:

• Un progetto .NET MAUI Blazor Hybrid (per Android, iOS, macOS, Windows)
• Un progetto Blazor Web App (per il browser)
• Una Razor Class Library condivisa (per tutti i componenti UI riutilizzabili)

In questa architettura, la UI è scritta una volta sola nei componenti Razor della RCL e funziona su tutti i target. Le parti specifiche per piattaforma (accesso a sensori, file locali) vengono astratte tramite interfacce e implementate separatamente con Dependency Injection.

// MauiProgram.cs - Hybrid con RCL condivisa

builder.Services.AddMauiBlazorWebView();

// Registrazione servizi nativi (implementazione MAUI)

builder.Services.AddSingleton<IDeviceService, MauiDeviceService>();

// Program.cs - Blazor Web App con la stessa RCL

builder.Services.AddRazorComponents().AddInteractiveServerComponents();

// Stessa interfaccia, implementazione web

builder.Services.AddScoped<IDeviceService, WebDeviceService>();

Questo pattern è ideale per aziende che sviluppano sia applicazioni mobile/desktop per i propri operatori sia portali web per i clienti: un solo team, un solo codebase UI, target multipli.

9. Prospettive future: la roadmap Microsoft

Le prospettive per entrambe le tecnologie sono decisamente positive. Microsoft ha dichiarato ufficialmente che Blazor è il framework UI web principale per .NET, con investimenti crescenti in ogni release. Con .NET 10 sono in arrivo:

• Migliori tool di debugging e hot reload per Blazor Hybrid in Visual Studio e VS Code
• Template migliorati per la soluzione MAUI Blazor + Web App
• Supporto Passkey per ASP.NET Core, Blazor Hybrid e MAUI
• Profilazione browser-based per WebAssembly
• Convergenza sempre più stretta tra componenti Blazor e controlli MAUI

Per .NET MAUI specificamente, la roadmap include ottimizzazioni delle performance, un adaptive UI toolkit migliorato, integrazione nativa con i servizi Azure AI e — soprattutto — MAUI su Linux tramite partnership con il progetto Avalonia (che diventerà il layer di rendering MAUI su Linux).

Il grande scenario futuro è quello della convergenza: Blazor come linguaggio universale per l’UI, MAUI come runtime e bridge nativo, con la Razor Class Library come collante tra web, mobile e desktop. Le aziende che investono oggi in Blazor e MAUI si posizionano per raccogliere i frutti di questa convergenza nei prossimi anni, riducendo sensibilmente i costi di manutenzione e moltiplicando i target con un singolo team.

Tendenza 2026: Blazor + MAUI Hybrid sta diventando lo stack di elezione per le app enterprise B2B cross-platform nel mondo .NET, con un riuso del codice che può raggiungere il 90% tra web e nativo.

10. Formazione continua: il vantaggio competitivo del team

Scegliere la tecnologia giusta è solo metà del lavoro. L’altra metà è garantire che il team abbia le competenze per usarla correttamente fin dal primo sprint. Avviare un progetto .NET MAUI o Blazor Hybrid senza una formazione adeguata espone l’azienda a rischi concreti: architetture errate difficili da correggere, bug sottili legati alle differenze tra piattaforme, tempi di sviluppo dilatati e — nei contesti con contratti a corpo — rischio di penali per ritardi.

Ma c’è un aspetto spesso sottovalutato: un team formato è un team motivato. Investire nella crescita professionale dei propri sviluppatori aumenta il senso di appartenenza, riduce il turnover e trasforma ogni progetto in un’opportunità di apprendimento condiviso. Chi si sente supportato dall’azienda nella propria crescita lavora meglio e rimane più a lungo.

La formazione su MAUI e Blazor Hybrid non è opzionale: è un investimento strategico che si ripaga già nelle prime settimane di progetto, evitando refactoring costosi e garantendo scelte architetturali solide fin dall’inizio.

Scegli Innovaformazione per la formazione aziendale del team IT

Innovaformazione è il partner formativo per le aziende informatiche che vogliono preparare i propri team su tecnologie Microsoft .NET. Il catalogo comprende corsi verticali su misura, attivabili su richiesta con calendario concordato in modalità online classe virtuale.

Corsi consigliati:

Corso MAUI .NET — innovaformazione.net Calendario da concordare · Modalità online classe virtuale · Attivato su richiesta

Corso Blazor – innovaformazione.net Calendario da concordare · Modalità online classe virtuale · Attivato su richiesta

Tutti i corsi a catalogo: naviga QUI.

Fondimpresa: Per le aziende aderenti, Innovaformazione può seguire il piano formativo finanziato dalla presentazione fino alla rendicontazione.

Richiedi un preventivo:

Email: info@innovaformazione.net 📞  Tel. 347 101 2275 — Dario Carrassi

(fonte) (fonte) (fonte)