DevelopmentBlazor en .NET MAUI samen een goed huwelijk?

Blazor en .NET MAUI samen een goed huwelijk?

In mijn vorige blog schreef ik over .NET MAUI: een nieuw framework voor het ontwikkelen van cross platform native applicaties dat toen nog in de previewfase zat. Anno 2022 is dit niet meer het geval, .NET MAUI is beschikbaar gesteld aan het grote publiek om applicaties te bouwen voor iOS, macOS, Android, Tizen en het Windows platform. Hiervoor wordt gebruik gemaakt van XAML en C#.

Blazor Hybrid

Wat als je liever werkt met HTML dan met XAML? Heb je al een Blazor applicatie? Of ben je misschien door één van mijn Blazor blogs geïnspireerd geraakt om met Blazor aan de slag te gaan en wil jij die applicatie nu als native app aanbieden?

Dan is het mogelijk om een hybride applicatie te maken, waarbij je de kracht van Blazor en .NET MAUI combineert. Microsoft noemt dit Blazor Hybrid.

Hoe gaat dit in zijn werk? Razor componenten werken als native componenten op het OS waar de app op draait. De componenten draaien niet in een browser en WebAssembly wordt niet gebruikt. In plaats daarvan draaien componenten in een embedded webview control. Zowel de Native UI elementen als componenten in de Web UI draaien hetzelfde proces als .NET code. Er wordt hierbij geen gebruik gemaakt van een lokale web server of WebAssembly. De Razor componenten hebben volledige toegang tot de native API’s van het apparaat en OS waar deze op draait. Zowel de native als web componenten die in de app gebruikt worden, delen hun ‘state’ met elkaar door o.a. gebruik te maken van event handlers of dependency injection. Dat is mogelijk, omdat alle code in .NET wordt uitgevoerd. Hierdoor hoef je niet in te leveren op prestaties, omdat jouw app niet de ‘interpreted mode’ van Blazor gebruikt.

Voor het toevoegen van Blazor ondersteuning aan jouw .NET MAUI project moet je in de Program.cs de volgende regel toevoegen: ‘builder.Services.AddMauiBlazorWebView();’.

Zie afbeelding hieronder.

In .NET MAUI wordt Blazor beschikbaar gesteld via de BlazorWebView tag die de componenten in een embedded webview draait. In onderstaande afbeelding een voorbeeld waar de tag gebruikt wordt.

Alternatieven

Zijn er geen alternatieven? Of denk je nu wellicht: waarom zoveel moeite doen als ik mijn Blazor app ook als Progressive Web App (PWA) of via een Electron shell kan aanbieden?

Wanneer je Blazor als PWA verpakt en deze wil aanbieden als app voor op jouw smartphone dan zul je zelf extra handelingen moeten uitvoeren om je app geschikt te maken voor deze platformen. De mogelijkheden van een PWA zijn ook beperkt, want het ligt aan de ondersteuning van het platform waar de app op wordt aangeboden. Zo heeft Apple veel van zijn API's dichtgezet als je deze probeert te benaderen via een PWA. Ook heb je meer kennis van JavaScript nodig, omdat de service workers van een PWA geen .NET API ondersteuning hebben. Hierdoor kan je deze niet ontwikkelen in C#.

Ook het Electron framework heeft zo zijn nadelen. Net als een PWA leunt het erg op JavaScript. Wel heeft Electron meer Platform API's beschikbaar, omdat zij hier zelf functionaliteit voor hebben geschreven. Een nadeel van een Electron app is dat je deze niet kan publiceren als app naar een App store voor iOS of Android. Het is voor nu nog gericht op enkel desktop applicaties.

.NET MAUI is in samenwerking met Blazor één van de weinig frameworks, waarbij je in een keer je componenten en app kan maken. Tevens kan je deze  distribueren als web applicatie en als app naar stores voor smartphones en desktop. Voor een uitgebreider overzicht tussen de verschillen kun je de tabel hieronder bekijken.

Functionaliteit Blazor Hybrid Blazor Electron Blazor PWA
Installeerbaar Ja Ja Ja
Publiceren naar Store Ja Ja Nee
Toegang tot Native APIs Gebruikt .NET MAUI Gebruikt Electron.NET Gelimiteerd
WebAssembly Nee Ja Ja
HTML/CSS Ja Ja Ja
Desktop Ja Ja Ja
Android Ja Nee Ja
iOS Ja Nee Gelimiteerd
macOS Ja Ja Nee

Combinatie Blazor & .NET MAUI

De combinatie van Blazor en .NET MAUI zorgt ervoor dat je met beperkte kennis van verschillende platformen en programmeertalen/frameworks toch robuuste applicaties kan ontwikkelen. In eerste instantie begon Blazor als experiment en zou .NET MAUI alleen de opvolger worden van Xamarin.Forms. De positieve reacties vanuit de developers-community op deze frameworks hebben ervoor gezorgd dat ze verder werden uitgebreid tot het punt waarbij ze nu zelfs samen kunnen werken. De verwachting is ook dat Microsoft, samen met de community, de frameworks nog meer een boost gaan geven in de toekomst, waarbij de integratie en het gemak van ontwikkelen wordt verbeterd.

Mocht je deze blog nou interessant vinden? Vergeet dan niet in de toekomst terug te komen op onze website. Meer blogs over zowel Blazor als .NET MAUI verschijnen hier, waarbij we dieper op de techniek in zullen gaan.

Mitchel Hulst, Software ontwikkelaar

  • Applicatie-modernisering-banner