---
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**

![Blazor WebAssembly](/img/introduction/Blazor-WebAssembly.png)

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**

![Blazor Server](/img/introduction/Blazor-Server.png)

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
```

![Create my first app](/img/introduction/creer-ma-premiere-application.png)

## Launch my first app

```cmd
cd MyBeautifulFirstApp
dotnet run
```

![Launch my first app](/img/introduction/lancer-ma-premiere-application.png)

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 :

![Example design bootstrap](/img/introduction/exemple-design-bootstrap.png)

## Binding

Razor provides data binding functionality with `@bind`.

![Binding](/img/introduction/binding.png)


## 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.

![Code location](/img/introduction/emplacement-code-01.png)

To do this you just need to create a new class with the name `MyRazorPage.razor.cs`.
This must be partial:

![Code location](/img/introduction/emplacement-code-02.png)

## Navigation

Declare the url of the page:

![Navigation](/img/introduction/navigation-01.png)

Navigate to a page from code:

![Navigation](/img/introduction/navigation-02.png)

## Create a new page

To create a new page, nothing could be simpler, just create a new Razor component.

![Create a new page](/img/introduction/creer-une-nouvelle-page-01.png)

![Create a new page](/img/introduction/creer-une-nouvelle-page-02.png)