Blazor

8.5 KiB

Raw Blame History Unescape Escape

sidebar_position	title
3	Introduction

What is Blazor?

Blazor is an open-source web framework from the house of Microsoft. It was released in the year 2018. It allows developers to build applications using C# and the .Net libraries instead of JavaScript on the client-side. It helps in running the application in the browser, and it can be hosted with several techniques. The main technique are Blazor Web Assembly (WASM) and Blazor Web Server (Server).

As the name suggests, Blazor relies on Razor syntax to build web applications.
For this, the writing of .razor and .cs files, as well as the classic .css files for the design part will be necessary.
Most obvious point: Since the Blazor application is written in C#, sharing code between client and server parts is obviously very simple, and one gets access to NuGet packages as well, etc.!

Multiple versions of Blazor?

Blazor WebAssembly

Your .Net dlls are sent directly to the web browser and executed from there, like any static file.

Not supported on IE11 and old browser
API call possibly refused by firewall
Executed on the client

Blazor Server

Based on SignalR technology, offers to keep all the execution of your app on the server side.

Source code not accessible
All access executed in server
Requires high-performance servers

Blazor WebAssembly, more details

Blazor Web Assembly (WASM) was released in May 2020. It works very similarly to Single Page Application (SPA) frameworks (Angular, React, Vue..). Here, the C# and Razor components are compiled as .Net assemblies, then downloaded and run on the browser side (client-side).

Once the application is downloaded on the client-side and as it begins to run, there is no requirement of SignalR here for maintaining the connection between Server and client. Server-side functionalities cannot be integrated with this application, and it requires a Web API to communicate and exchange required data.

Here are some of the positives of using Blazor Web Assembly

After the initial load, the UI reacts faster to user requests (except external API calls), as the entire content of the website is being downloaded on the client-side.
Since the application is downloaded on the client-side, offline support is possible in case of network issues.

Here are some of the disadvantages of using Blazor Web Assembly

The high initial load time of the application.
File manipulation.
Interaction with another system.

Blazor Server, more details

Blazor Server is a hosting technique that was released along with the .Net Core. It uses the ASP.Net Core application, which helps integrate the server-side functionality.

Along with this, the client-side pages are created using Razor components. On running the application, a connection is established between the browser and server-side using SignalR (an open-source library for ASP.Net-based applications used to send asynchronous notifications to client-side web applications).

The server then sends the payloads to the client, which updates the page. It also enables two-way communication between server and client-side.

Here are some of the advantages of using Blazor Server

Application is loaded and rendered in a quick time as users do not download application libraries.
The backend code is isolated as the C# files are not being sent to the client-side.
It supports and works in older versions of browsers as well.

Here are some of the disadvantages of using Blazor Server

As the pages are being sent from the server to the client-side, whenever there are network instabilities, offline support will be a problem.
As the application creates new WebSockets for each connection, scalability will be challenging as the amount of memory consumed will be huge.

Summary of differences

Characteristics	Blazor WebAssembly	Blazor Server
Can use C# code for Web Apps	✔️	✔️
Small download size	Have to download .NET Runtime + dependencies	✔️
Works well with devices with limited resources	All the code have to be run in the browser	✔️
Execution speed	✔️	Can have latency
Serverless	✔️	Needs a server
Independent from ASP.NET Core	✔️	Require ASP.NET Core
Independent from WebAssembly	Requires WebAssembly	✔️
Scability	✔️	Can be a challenge after a thousand users depending on server capabilities
Can be served from a CDN	✔️	Needs a server
Offline mode	✔️	Needs a continuous connection
Sensitive code are protected	The code is available of the user	✔️
Use .NET tooling support	No	✔️

Blazor Hybrid (.NET MAUI Blazor app) ???

.NET Multi-platform App UI (MAUI) is a cross-platform framework. It enables you to build cross-platform apps with a shared code base that can run natively on Android, iOS, macOS and Windows.

Out of the box, .NET MAUI provides support for data-binding; cross-platform APIs for accessing native device features like GPS, accelerometer, battery and network states; a layout engine (for designing pages) and cross-platform graphics functionality (for drawing, painting shapes and images).

The promise of .NET MAUI is that you’ll be able to build a single app and have it run on all four operating systems. But it goes even further when you add Blazor to the mix.

Create my first app

dotnet new blazorwasm -o MyBeautifulFirstApp

Launch my first app

cd MyBeautifulFirstApp
dotnet run

Open in browser: https://localhost:5001

Anatomy of the app

Based on classic ASP.NET Core, a Program.cs file will call a Startup.cs file. Responsible for referencing the Blazor root component, conventionally called App.
For the Blazor part, an App.razor file defining the root component, as well as a default page, usually called Index.razor, placed inside a Pages folder.
Finally, a linking file index.html, contained in the wwwroot folder.
In this file, we will find in particular a reference to the blazor.webassembly.js framework which will allow you to load the runtime in its webassembly version, as well as all the .NET libraries (.dll).
Below is a short summary of all the files mentioned:
- A C# project .csproj file.
- A Program.cs input file.
- A Startup.cs file.
- A root Blazor component defined in an App.razor file.
- An Index.razor page defined in a Pages folder (by convention).
- Then finally an index.html file inside the wwwroot folder which will be the entry point.

Host a Blazor app

IIS Server
- Blazor offers "out-of-the-box" integration, and provides a web.config file necessary for hosting, which can be found directly among our application's publication files. the installation of the URL Rewrite module is necessary.
Docker container
- With a Dockerfile, use Nginx or Apache servers.
Azure Blob Storage
- Use of the Static website functionality which allows to expose the files contained in the storage in http.
Github pages
- With some modification, it is possible to host Blazor (WASM) apps.
ASP.NET Core
- The best option for hosting Blazor is still the aspnetcore app with a Kestrel server.