Blazor is een front-end framework van Microsoft dat .NET code in de browser laat draaien. Dit maakt het mogelijk om .NET assemblies te gebruiken in de browser, waardoor code hergebruikt kan worden tussen de front-end en back-end. Een groot voordeel van Blazor is dat je kunt programmeren in C#, waardoor je geen nieuwe syntax hoeft te leren. Voor het schrijven van een Blazor-applicatie gebruik je C# samen met standaard HTML en CSS.
De ontwikkeling van Blazor
Microsoft begon het Blazor-project als een experiment om te onderzoeken of er interesse was vanuit de developers community voor een front-end framework op basis van C#. De interesse groeide snel, wat ertoe leidde dat Blazor in ‘preview’ werd geplaatst. Dit betekent dat het project geen experiment meer is, maar een officiële Microsoft-oplossing.
WebAssembly: de basis voor Blazor
WebAssembly (Wasm) is een binaire instructie-indeling voor een stack-gebaseerde virtuele machine. Het is ontworpen als een draagbaar doel voor de compilatie van high-level talen zoals C/C++/Rust, waardoor implementatie op het web mogelijk is voor client- en serverapplicaties. Een van de voordelen van WebAssembly is dat het werkt op alle grote browser engines zoals Chrome, Firefox, Safari en Edge. Voor legacy browsers zoals IE 11 valt WebAssembly terug op JavaScript.
Hoe werkt Blazor in de browser?
De browserondersteuning van WebAssembly vormt de basis voor Blazor. Net als bij het ontwikkelen van een native mobiele applicatie met Xamarin, wordt de Mono Runtime gebruikt als .NET runtime in de browser. Mono, sinds 2016 onderdeel van Microsoft, heeft zich al bewezen in projecten zoals Xamarin en Unity3D.
Mono werkt in twee modi onder WebAssembly: ‘Interpreted’ en ‘Ahead-of-Time’ (AOT).
Interpreted modus
In de ‘Interpreted’ modus wordt de Mono runtime gecompileerd naar WebAssembly, maar de .NET assembly bestanden niet. De browser laadt en voert de Mono runtime uit, die op zijn beurt de standaard .NET assemblies kan laden en uitvoeren. Dit is te zien in onderstaande afbeelding.
 Ahead-of-time (AOT) modus
In de AOT-mode worden de .NET assemblies omgezet naar WebAssembly zodra de applicatie wordt gebouwd. Tijdens runtime is er geen interpretatie van de code meer nodig. De code wordt uitgevoerd als native WebAssembly code. Mono zelf wordt nog wel ingeladen, dit is alleen nodig bij het uitvoeren van  low-level .NET services zoals de Garbage Collector.
Afbeelding 1 en 2 zijn grotendeels hetzelfde, behalve dat de applicatie, in afbeelding 2,al van de extensie .wasm is voorzien. De applicatie is al omgezet naar WebAssembly en de transformatie is niet meer nodig.
Blazor in twee varianten
Bij Blazor wordt de nadruk gelegd op een ‘single client app model’ met meerde hostings modellen. Zo is er een server-side en client-side variant van Blazor beschikbaar.
Client-side Blazor
Bij de client-side variant worden de Blazor app, zijn afhankelijkheden en de Mono runtime gedownload naar de browser en direct uitgevoerd in de UI-thread van de browser. UI-updates en events worden allemaal afgehandeld in hetzelfde proces. Het client-side hosting model valt goed samen met de WebAssembly uitleg uit de vorige paragraaf.
Enkele voordelen van client-side hosting zijn:
- Er is geen server-side afhankelijkheid en de applicatie functioneert, net als bijvoorbeeld Angular en React, volledig op zichzelf in de browser.
- De client resources worden volledig gebruikt en de belasting van de server wordt verkleind.
Maar er zijn er ook nadelen verbonden aan client-side hosting:
- De applicatie wordt beperkt door de functionaliteiten van de browser.
- WebAssembly ondersteuning is vereist, legacy browsers zoal IE 11 ondersteunen geen WebAssembly.
- Het laden van de applicatie duurt langer vanwege de grotere omvang.
Server-side Blazor
In het server-side hosting model wordt de applicatie uitgevoerd op de server vanuit een ASP.NET Core app. UI-updates, events en JavaScript aanroepen worden via een SignalR connectie terug gecommuniceerd naar de server. Onderstaande afbeelding geeft het hosting model weer.
Server-side heeft zo zijn voordelen:
- Het downloaden van de applicatie gaat aanzienlijk sneller.
- De applicatie kan gebruik maken van alle server functionaliteiten.
- Thin clients worden ondersteund, het werkt met browsers die geen WebAssembly ondersteunen, zoals IE 11.
Maar ook zijn er enkele nadelen bij dit model:
- Hogere latency, een netwerkcyclus is nodig bij een gebruikers interactie.
- De applicatie werkt niet offline, zodra de connectie verloren gaat werkt de applicatie niet meer.
- Een ASP.NET Core server is vereist.
Ieder hosting model heeft dus zijn voor- en nadelen, zo lijkt het client-side model het meeste op een Single Page Application (SPA) zoals Angular en React. Het server-side model lijkt het meest op een traditionele MVC-applicatie met een netwerkcyclus tussen gebruikers interactie.
Welk hosting model het beste is, hangt sterk af van de projecteisen. Beide modellen hebben sterke en zwakkere punten, is IE 11 ondersteuning vereist. Dan is de logische keuze het server-side model, maar moet de applicatie ook offline werken, dan is client-side de beste keuze.
Zelf aan de slag met Blazor
Blazor is ideaal voor ontwikkelaar die al werken met C# en .NET en die willen profiteren van de integratie met bestaande infrastructuur. Ben je benieuwd naar wat Blazor voor jouw projecten kan betekenen? Begin eenvoudig met de officiële Get started-gids van Microsoft. In het vervolg van deze blog duiken we dieper in het ontwikkelen van Blazor-applicaties, zowel client-side als server-side.
Lees hier het vervolg op dit blog: Blazor webapps bouwen en Blazor en .Net MAUI, een goed huwelijk?
Mitchel Hulst, Software ontwikkelaar
