Introduction To Blazor

Microsoft’s Blazor development framework is a Single Page Application development framework. Blazor is a free and open source framework. The name Blazor is a mash-up of the words Browser and Razor (the .NET HTML view generating engine).The implication being that instead of having to execute Razor views on the server to present HTML to the browser, Blazor can execute these views on the client.

Benefits of using the Blazor framework

  • It is an SPA framework that uses Razor syntax and can be developed using Microsoft’s exceptional tooling.
  • Blazor is a free and open-source framework built on Microsoft’s robust .NET framework.

.NET Framework

Blazor is based on the Microsoft.NET Framework. The Blazor framework makes use of the.NET Framework’s robust ecosystem of.NET libraries and NuGet packages. Furthermore, because both the client and the server code are written in C#, they can share code and libraries, such as the application logic used for data validation.

SPA framework

The Blazor framework is an SPA framework. As the name implies, an SPA is a web app that consists of a single page. The application dynamically rewrites the single page instead of loading an entirely new page in response to each UI update. The goal is faster transitions that make the web app feel more like a native app. When a page is rendered, Blazor creates a render tree that is a graph of the components on the page. It is like the Document Object Model (DOM) created by the browser. However, it is a virtual DOM. Updates to the UI are applied to the virtual DOM and only the differences between the DOM and the virtual DOM are updated by the browser.

Razor syntax

The term Blazor is a combination of the word browser and the word razor. Razor is the ASP.NET view engine used to create dynamic web pages with C#. Razor is a syntax for combining HTML markup with C# code that was designed for developer productivity. It allows the developer to use both HTML markup and C# in the same file. Blazor web apps are built using Razor Components. Razor Components are reusable UI elements that contain C# code, markup, and other Razor Components. Razor Components are quite literally the building blocks of the Blazor framework.

Hosting models

Blazor offers two different hosting options. The Blazor Server model was the first hosting model released by Microsoft. The web app is executed on the server in this hosting model. The Blazor WebAssembly model is the second hosting model released by Microsoft and the subject of this book. The web app is executed on the browser in this hosting model. Each hosting model has its own set of benefits and drawbacks. They do, however, share the same underlying architecture. As a result, you can write and test your code regardless of the hosting model. The primary distinctions between the two hosting models are latency, security, data access, and offline support.

Blazor Server

Microsoft’s first hosting model was the Blazor Server hosting model. It was released in September 2019 as part of the.NET Core 3 release.

[Figure 1: Blazor Server (Reference: https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-6.0)]

The web app is executed on the server in this hosting model, and only UI updates are sent to the client’s browser. The browser is treated as a thin client, and all processing takes place on the server. UI updates, event handling, and JavaScript calls are all handled via an ASP.NET Core SignalR connection when using Blazor Server.

There are a few benefits to using Blazor Server over Blazor WebAssembly. The main advantage, however, is that everything takes place on the server. Because the web app runs on the server, it has access to all the server’s resources. As a result, data access and security are simplified. Furthermore, because everything occurs on the server, the assemblies (DLLs) containing the web app’s code remain on the server. Another advantage of using Blazer Server is that it can run on thin clients and older browsers that do not support WebAssembly, such as Internet Explorer. Because there are fewer files to download, the initial load time for a web app that uses Blazor Server can be much less than that of a web app that uses Blazor WebAssembly.

Because the browser must maintain a constant connection to the server, the Blazor Server hosting model has several disadvantages when compared to Blazor WebAssembly. Because there is no offline support, every user interaction necessitates a network roundtrip. Blazor Server web apps have higher latency than Blazor WebAssembly web apps because of all these roundtrips and can feel sluggish as a result. Another disadvantage of using Blazor Sever is that it is completely reliant on SignalR for every UI update. Microsoft’s SignalR support has been improving, but scaling can be difficult.

Blazor WebAssembly

The Blazor WebAssembly hosting model is Microsoft’s most recent hosting model.

The web app is executed on the browser in this hosting model. The browser must support WebAssembly for both the web app and the.NET runtime to run on it. WebAssembly is a web standard that all modern browsers, including mobile browsers, support. While Blazor WebAssembly does not require a server to function, the web app may require one for data access and authentication. Blazor WebAssembly has many advantages.

  • It runs in the browser and uses client resources rather than server resources. As a result, unlike Blazor Server, there is no latency because of each UI interaction necessitating a roundtrip to the server.
  • WebAssembly can be used to create a Progressive Web App
  • The Blazor WebAssembly web app is not dependent on an ASP.NET Core server. In fact, a Blazor WebAssembly web app can be deployed without a server.

Disadvantages of Blazor WebAssembly:

  • When using Blazor WebAssembly, the.NET runtime, the dotnet.wasm file, and the assemblies must all be downloaded to the browser for the web app to function. As a result, a Blazor WebAssembly application typically takes longer to load than a Blazor Server application.
  • Blazor WebAssembly web applications are only as powerful as the browser on which they are run. As a result, thin clients are not supported. Blazor WebAssembly is only compatible with browsers that support WebAssembly.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
yasith wimukthi

yasith wimukthi

Associate Software Engineer | Software Engineering Undergraduate | Full Stack Developer