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.
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.
Comments