Wat is het Blazor Web Framework van Microsoft en moet u het gebruiken?

Blazor is een nieuw webframework van Microsoft dat is ontworpen om te concurreren met toonaangevende platforms zoals React. Alleen, in plaats van JavaScript te gebruiken, draait het op de .NET-runtime, en stelt het ontwikkelaars in staat om interactieve web-apps te maken met C# en HTML.

Wat is ASP .NET Even?

Als je uit de wereld van JavaScript-frameworks komt, ben je misschien in de war over de relatie van Blazor met ASP.NET. Het zijn beide “webframeworks,” maar Blazor is slechts een onderdeel van het ASP.NET-ecosysteem.

Hoewel het ASP.NET-platform op dit moment bijna 20 jaar oud is, is het geen dinosaurus-framework, het is constant verbeterd naast C# en .NET als geheel, aangezien Microsoft het intern gebruikt. Het is volledig platformonafhankelijk en zo performant als altijd.

In het begin was er alleen ASP.NET, dat kan worden gebruikt om allerlei soorten webapplicaties te maken. Er was ASP.NET MVC (Model-View-Controller), dat datagestuurde webpagina's maakt, en ASP.NET WebAPI, dat gespecialiseerd is in backend-API's. Deze zijn onlangs samengevoegd tot een uniform pakket met de gemoderniseerde ASP.NET Core.

Vijf jaar geleden werd Razor Pages (wat een ander ding is dan Blazor en een verwarrende naam heeft) uitgebracht om de expressieve syntaxis van MVC te vereenvoudigen, wat veel standaardwerk vereist en als zodanig niet goed speelt met de component- gericht ontwerp van moderne toepassingen. MVC vereist dat u voor elke pagina een weergave en model maakt in afzonderlijke bestanden:

Advertentie

Ondertussen kun je met Razor meer gestroomlijnde pagina's of componenten maken met geïntegreerde code op de pagina zelf. Dit werkt beter als de pagina's eenvoudiger zijn, maar beide zijn beschikbaar als opties die u kunt gebruiken.

Al deze functies maken deel uit van de “ASP.NET” ecosysteem. Het grote deel ervan zijn de pakketten en ondersteuning. Net als NPM voor JavaScript heeft C# ook een gezonde pakketomgeving met de NuGet-pakketbeheerder.

Dus wat is Blazor?

Blazor verandert niets aan de syntaxis van deze pagina's. Je zult nog steeds Razor-pagina's en/of MVC gebruiken. Dit is eigenlijk niet eens een slechte zaak, want er zijn al talloze UI- en componentbibliotheken gemaakt voor door C# ondersteunde Razor-pagina's.

Wat Blazor toevoegt, is interactiviteit. Traditionele MVC/Razor-pagina's die ASP.NET gebruiken, zijn altijd onhandig geweest en hadden moeite om realtime webapplicaties zoals React bij te houden. Realtime web-apps zijn zo snel dat ze ook de desktop beginnen over te nemen, met frameworks zoals Electron die apps draaien in een Chromium-container, waarbij gebruikers niet wijzer zijn.

Dus Blazor werd opgericht om aan deze vraag te voldoen. Het werkt veel zoals React, waar acties de status en rekwisieten wijzigen en updates voor de app activeren. Het framework zal de DOM voor u bijwerken op basis van welke componenten moeten worden bijgewerkt. Dit maakt realtime toepassingen mogelijk waarbij de pagina kan worden bijgewerkt of zelfs volledig opnieuw kan worden getekend zonder dat de browser daadwerkelijk hoeft te worden vernieuwd.

Het voordeel van Blazor ten opzichte van een gevestigd framework als React is de taal. Hiermee kun je web-apps bouwen met C#, en dat alleen al maakt het aantrekkelijk voor veel ontwikkelaars. Welke mening je ook hebt over het debat over dynamisch versus statisch typen, “desktop” talen zoals C#, en het web heeft een ernstig gebrek aan alternatieven voor JavaScript.

Advertentie

Als je een backend hebt die hoge prestaties vereist, zal C# ook een stuk sneller werken dan JavaScript. Hoewel JS zeker niet traag is en in de loop der jaren veel verbeterd is, zal het toch minder presteren dan C#, dat eigenlijk vrij dicht bij de native C++-prestaties komt.

Blazor zorgt voor een betere interoperabiliteit. Veel apps gebruiken ook al C# op de backend. U hebt bijvoorbeeld mogelijk een ASP.NET API die samenwerkt met uw React-frontend. Je hebt aparte modellen nodig voor de server en de client, evenals aparte code om ermee te communiceren. Als ze dezelfde taal zijn, kunt u eenvoudig code en bibliotheken delen tussen client en server. Dit is de hele reden waarom NodeJS aan de serverkant bestaat, ook al is JavaScript niet de ideale desktoptaal, het hebben van apps die in één taal zijn gebouwd, verkort de ontwikkelingstijd.

De toekomst van Blazor

Er zijn eigenlijk een paar verschillende soorten Blazor, aangezien Microsoft onlangs een grote ontwikkelingspoging heeft gedaan om het ASP.NET-ecosysteem te moderniseren. Momenteel zijn er twee versies uitgebracht:

• Blazor Server, die werkt als React Server Side Rendering en de meeste verwerking op de server doet.
• Blazor WebAssembly, dat de magie van WebAssembly gebruikt om echte .NET-code uit te voeren in een echte clientwebbrowser.

Microsoft is ook van plan nog drie versies van Blazor, die nog in ontwikkeling zijn en beschikbaar zijn voor preview:

• Blazor PWA, dat is ontworpen om de site te publiceren als een installeerbare Progressive Web App (PWA).
• Blazor Desktop/Hybrid, waarmee Blazor-apps kunnen worden verpakt in desktop-apps en is eigenlijk net als Electron, maar met betere prestaties.
• Blazor Native,die de webgebaseerde gebruikersinterface vervangt door een platformeigen interface. Het is niet duidelijk hoe nuttig dit zelfs is, afgezien van interoperabiliteit met bestaande Blazor-tools, en deze versie bevindt zich nog in de planningsfase.

In hun aankondiging voor Blazor Desktop verklaarde Microsoft dat “Blazor is een model voor applicatieprogrammering. Het is zeer aanpasbaar en kan op meerdere manieren worden uitgevoerd (afhankelijk van de behoefte).”

Microsoft lijkt Blazor te zien als hun volgende standaard voor het maken van applicatie-frontends. Hun werk is ook de moeite waard, want naarmate applicaties meer en meer webafhankelijk worden, is het moeilijker om het creëren van aparte frontends voor web en desktop te rechtvaardigen. Blazor heeft een mooie toekomst en webapplicaties die vandaag op Blazor Server en WebAssembly worden gemaakt, zullen veel ruimte hebben om te groeien.

Blazor Server vs. Blazor WebAssembly

Blazor Server gebruikt een SignalR-verbinding om te communiceren tussen de client en de server. Dit is slechts een fraaie laag bovenop een WebSocket-verbinding, die optioneel kan terugvallen op andere verbindingen wanneer dat nodig is. Hierdoor blijft alle verwerking op de server en blijft de client een eenvoudige weergave met een eenvoudige manier om de DOM te manipuleren.

Advertentie

Blazor WebAssembly is waar het serieus cool wordt. WebAssembly (WASM) is niet echt een taal waarin je schrijft, maar een compilerdoel. Het werkt eigenlijk bijna precies zoals de Microsoft Intermediary Language (MSIL) waarnaar alle C#, F# en VB.NET compileren. Behalve dat, in plaats van te werken met een .NET-runtime, het draait met behulp van de WebAssembly-runtime in de browser.

Het leuke van WebAssembly is dat het een relatief eenvoudig te bereiken doel is voor de compiler. Net zoals C# kan compileren naar MSIL, kan C# ook compileren naar WebAssembly. Nou, technisch gezien is het MSIL dat wordt gecompileerd naar WebAssembly (omdat dat eenvoudiger is), maar het punt is hetzelfde.

Elke taal kan compileren naar WASM, zelfs volledig native desktoptalen zoals C++. Dit is niet theoretisch, het werkt echt in de praktijk. AutoDesk was in staat om AutoCAD, een 30 jaar oude C++ codebase, in een paar maanden relatief gemakkelijk over te zetten naar een WebAssembly-gebaseerde web-app. Iemand heeft zelfs Doom 3 geporteerd.

Blazor WebAssembly neemt in feite de hele server en de .NET-runtime en draait deze bovenop WASM. Dan, in plaats van met de server te praten via SignalR, praat het rechtstreeks met de DOM. Hierdoor wordt de verwerking aan de serverzijde uitgeschakeld, wat voor sommige apps ideaal kan zijn.

Dit maakt het uniek gepositioneerd om te concurreren met frameworks zoals React, aangezien het in wezen de eerste echte concurrent is van JavaScript voor webapplicaties voor klanten. Hoewel je een paar scripttags moet toevoegen om de runtime te laden en je misschien je tenen in JavaScript-code moet onderdompelen voor een paar dingen, zou je voor het grootste deel in staat moeten zijn om een ​​volledige productie-webapp te maken zonder een enkele regel te schrijven van JavaScript.

Advertentie

Of u Blazor Server of Blazor WebAssembly gebruikt, is aan u. Ze hebben allebei hun voordelen. Blazor Server voert alle verwerkingscode uit in een vertrouwde omgeving en vereist geen openbare API. Blazor WASM is responsief en snel, en kan zelfs worden ingezet als een statische site die alleen met NGINX wordt bediend.

Hoe werkt Blazor met JavaScript?

In beide gevallen heb je eigenlijk volledige JavaScript-interoperabiliteit. Blazor kan JS-functies aanroepen vanuit beheerde code:

private async Task ConvertArray() { text = new(wacht JS.InvokeAsync<string>(“convertArray”, quoteArray)); }

En vice versa:

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

Houd er echter rekening mee dat dit natuurlijk reflectie zal gebruiken en zeker niet het meest performante ding ter wereld is.

Je kunt technisch gezien alle NPM-pakketten met Blazor gebruiken, hoewel het instellen en gebruiken ervan vanaf de .NET-kant een beetje hoofdpijn kan zijn, dus je zou meestal de voorkeur moeten geven aan een NuGet-pakket.