|
|
|
|
|
---
|
|
|
|
|
|
sidebar_position: 3
|
|
|
|
|
|
title: 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
|
|
|
|
|
|
|
|
|
|
|
|
```cmd
|
|
|
|
|
|
dotnet new blazorwasm -o MyBeautifulFirstApp
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Launch my first app
|
|
|
|
|
|
|
|
|
|
|
|
```cmd
|
|
|
|
|
|
cd MyBeautifulFirstApp
|
|
|
|
|
|
dotnet run
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Open in browser: [https://localhost:5001](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.
|
|
|
|
|
|
|
|
|
|
|
|
## Design
|
|
|
|
|
|
|
|
|
|
|
|
Blazor's default graphics system is `Bootstrap v4.3.1`.
|
|
|
|
|
|
|
|
|
|
|
|
Example :
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Binding
|
|
|
|
|
|
|
|
|
|
|
|
Razor provides data binding functionality with `@bind`.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Code location
|
|
|
|
|
|
|
|
|
|
|
|
By default the code is in the `.razor` page.
|
|
|
|
|
|
|
|
|
|
|
|
In order to separate the code and the design of your pages, you must create a class file containing your code.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
To do this you just need to create a new class with the name `MyRazorPage.razor.cs`.
|
|
|
|
|
|
This must be partial:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Navigation
|
|
|
|
|
|
|
|
|
|
|
|
Declare the url of the page:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Navigate to a page from code:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Create a new page
|
|
|
|
|
|
|
|
|
|
|
|
To create a new page, nothing could be simpler, just create a new Razor component.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
