Blazor Server vs Blazor Web Assembly

28 juli 2021 om 10:00 by ParTech Media - Post a comment

Bij webontwikkeling speelt JavaScript een cruciale rol bij het realiseren van client-side functionaliteiten. Het werkt door het Document Object Model (DOM) van de browser te wijzigen. Dit bespaart op zijn beurt veel backend-calls. Het resultaat - je kunt moeiteloos functionaliteiten bouwen.

In de afgelopen tijd zijn er geavanceerde versies van op JavaScript gebaseerde UI-frameworks ontwikkeld (Angular, Vue, React en nog veel meer). Deze UI-frameworks gebruiken typescripts (een superset van JavaScript die helpt bij de ontwikkeling van grote applicaties).

Om de clientside functionaliteiten met betere prestaties te bereiken, is het nodig om Javascript te leren. Afhankelijk van het UI-framework verschilt echter ook de versie van JavaScript die men moet leren. Om de afhankelijkheid van JavaScript te verminderen, heeft Microsoft zijn nieuwste webframework genaamd Blazor uitgebracht.

Het helpt ontwikkelaars om dezelfde JavaScript-functionaliteiten te bereiken via het Blazor-webframework. Laten we in dit bericht in detail kijken naar Blazor en zijn hostingmodellen.

Inhoudsopgave

  1. Wat is Blazor?
  2. Wat is Blazor Server?
  3. Voor- en nadelen van Blazor Server
  4. Voor- en nadelen van Blazor Web Assembly
  5. Blazor Server implementeren
  6. Blazor Web Assembly implementeren
  7. Conclusie

Wat is Blazor?

Blazor is een open-source webframework van het huis van Microsoft. Het werd uitgebracht in het jaar 2018. Het stelt ontwikkelaars in staat om applicaties te bouwen met C# en de .Net-bibliotheken in plaats van JavaScript aan de clientside. Het helpt bij het uitvoeren van de applicatie in de browser en het kan worden gehost met twee technieken, namelijk. Blazor-webassemblage en Blazor-webserver.

Wat is Blazer Server?

Blazor Server is een hostingtechniek die samen met de .Net Core 3.0-versie is uitgebracht. Het maakt gebruik van de ASP.Net Core-toepassing, die helpt bij het integreren van de serverfunctionaliteit.

Daarnaast worden de pagina's aan de clientside gemaakt met behulp van Razor-componenten. Bij het uitvoeren van de applicatie wordt een verbinding tot stand gebracht tussen de browser en de server-side met behulp van SignalR (een open-source bibliotheek voor op ASP.Net gebaseerde applicaties die wordt gebruikt om asynchrone meldingen naar client-side webapplicaties te verzenden).

De server stuurt vervolgens de payloads naar de client, die de pagina bijwerkt. Het maakt ook tweerichtingscommunicatie tussen server en client-side mogelijk.

Voor- en nadelen van Blazor server

Hier zijn enkele voordelen van het gebruik van Blazor Server:

  • Applicatie wordt snel geladen en weergegeven, omdat gebruikers geen applicatiebibliotheken downloaden
  • De backend-code is geïsoleerd omdat de C#-bestanden niet naar de client worden verzonden * Het ondersteunt en werkt ook in oudere versies van browsers

Hier zijn enkele van de nadelen van het gebruik van Blazor Server:

  • Omdat de pagina's van de server naar de clientside worden verzonden, zal offline ondersteuning een probleem zijn wanneer er netwerkinstabiliteiten zijn
  • Omdat de applicatie voor elke verbinding nieuwe WebSockets maakt, zal schaalbaarheid een uitdaging zijn omdat de hoeveelheid geheugen die wordt verbruikt enorm zal zijn.

Wat is Blazor web assembly?

Blazor Web Assembly (WASM) werd uitgebracht in mei 2020. Het werkt op dezelfde manier als Single Page Application (SPA) frameworks (Angular, React, Vue...). Hier worden de C#- en Razor-componenten gecompileerd als .Net-assemblies, vervolgens gedownload en uitgevoerd aan de browserzijde (clientside).

Zodra de applicatie aan de clientside is gedownload en begint te draaien, is SignalR hier niet vereist voor het onderhouden van de verbinding tussen server en client. Functionaliteiten aan de serverzijde kunnen niet worden geïntegreerd met deze applicatie en er is een web-API voor nodig om de vereiste gegevens te communiceren en uit te wisselen.

Voor- en nadelen van Blazor Web Assembly

Hier zijn enkele van de positieve punten van het gebruik van Blazor Web Assembly:

  • Na de eerste keer laden reageert de gebruikersinterface sneller op gebruikersverzoeken (behalve externe API-aanroepen), omdat de volledige inhoud van de website aan de clientside wordt gedownload
  • Omdat de applicatie aan de clientside wordt gedownload, is offline ondersteuning mogelijk in geval van netwerkproblemen

Het enige negatieve van het gebruik van Blazor Web Assembly is de hoge initiële laadtijd van de applicatie.

Implementeren van Blazor Server

Open Visual Studio 2019, selecteer ‘Creëer nieuw project' en zoek naar Blazor Server.

Selecteer het project en geef een geldige naam op voor de oplossing en kies vervolgens het raamwerk van uw keuze. Nadat het project is gemaakt, ziet de mappenstructuur er als volgt uit.

Dit is hoe een standaard Blazor-servergebaseerde applicatie wordt gemaakt. Om de datacommunicatie tussen server en client te begrijpen, open je de ontwikkelaarstools vanuit je browser en ga je naar het tabblad Netwerken en laadt je de pagina opnieuw.

Zoals je ziet merk je dat er blazor.server.js en serverstijlen aanwezig zijn, samen met de SignalR-communicatie. SignalR-communicatie helpt bij datacommunicatie die in binair formaat plaatsvindt. Elke klik op de webpagina voegt extra netwerkoproepen toe in het berichtentabblad onder de SignalR-communicatie, wat aangeeft dat de pagina's worden opgevraagd en opgehaald van de serverzijde.

Implementeren van Blazor Web Assembly

Open Visual Studio 2019 en selecteer ‘Creëer nieuw project’ maken en zoek naar Blazor Web-assembly-app.

En herhaal stap 2 uit het vorige gedeelte.

Laten we, om de werking van de Blazor Web Assembly te begrijpen, de applicatie starten en het tabblad Netwerken openen vanuit de ontwikkelaarstools van de browser.

Zoals je ziet, merk je dat de blazor.webassembly.js-bestanden aanwezig zijn met het dotnet.version.js-bestand. Dit geeft aan dat de web assembly is geladen.

En zodra je tussen de tabbladen schakelt, vind er geen communicatie plaats tussen de server en de client (in tegenstelling tot de Blazor Server via SignalR). In plaats daarvan worden alleen de vereiste gegevens opgehaald in JSON indeling.

Ga naar het tabblad gegevens ophalen, een netwerkoproep met het weather.JSON-bestand wordt onmiddellijk toegevoegd. Hier worden de gegevens opgeslagen in een JSON-bestand dat direct wordt opgehaald.

Conclusie

Beide hostingmethoden van Blazor hebben hun eigen voor- en nadelen. Ga voor Blazor Server als je een gevoelige code hebt die niet openbaar kan worden gemaakt. Ga voor Blazor-web assembly als je juist een groot klantenbestand wilt bedienen.