---
sidebar_position: 3
title: Introduction
---

## Qu'est-ce que Blazor ?

Blazor est un framework Web open source de Microsoft. Il est sorti en 2018.
Il permet aux développeurs de créer des applications à l'aide de C# et des bibliothèques .Net au lieu de JavaScript côté client.
Il aide à exécuter l'application dans le navigateur et peut être hébergé avec plusieurs techniques.
Les principales techniques sont Blazor Web Assembly (WASM) et Blazor Web Server (Server).

* Comme son nom l'indique, Blazor repose sur la syntaxe Razor pour générer des application web.
* Pour cela, l'écriture de fichier `.razor` et `.cs`, ainsi que les classiques fichiers .css pour la partie design sera nécessaire.
* Point le plus évident : Étant donné que l'application Blazor est écrite en C#, le partage de code entre les parties clientes et serveurs sont évidemment très simples, et l'on obtient accès aux packages NuGet également, etc.!

## Plusieurs versions de Blazor ?

**Blazor WebAssembly**

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

Vos dlls .Net sont envoyées directement au navigateur web et exécutées depuis celui-ci, comme n'importe quel fichier statique.

* Non pris en charge sur IE11 et d'anciens navigateurs
* Appel API éventuellement refusé par le pare-feu
* Exécuté sur le client

**Blazor Server**

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

Basé sur la technology SignalR, propose de conserver toute l'exécution de votre application côté serveur.

* Code source non accessible
* Tous les accès exécutés sur le serveur
* Nécessite des serveurs performants

## Blazor WebAssembly, plus de détail

Blazor Web Assembly (WASM) est sorti en mai 2020.
Il fonctionne de manière très similaire aux frameworks d'application à page unique (SPA) (Angular, React, Vue..).
Ici, les composants C# et Razor sont compilés en tant qu'assemblies .Net, puis téléchargés et exécutés côté navigateur (côté client).

Une fois que l'application est téléchargée côté client et qu'elle commence à s'exécuter, il n'y a aucune exigence de SignalR ici pour maintenir la connexion entre le serveur et le client.
Les fonctionnalités côté serveur ne peuvent pas être intégrées à cette application et nécessitent une API Web pour communiquer et échanger les données requises.

### Voici quelques-uns des avantages de l'utilisation de Blazor Web Assembly

* Après le chargement initial, l'interface utilisateur réagit plus rapidement aux demandes des utilisateurs (à l'exception des appels d'API externes), car l'intégralité du contenu du site Web est téléchargée côté client.
* Étant donné que l'application est téléchargée côté client, une utilisation hors ligne est possible en cas de problèmes de réseau.

### Voici quelques-uns des inconvénients de l'utilisation de Blazor Web Assembly

* Le temps de chargement initial élevé de l'application.
* La manipulation des fichiers.
* L'intéraction avec d'autre système.

## Blazor Server, plus de détail

Blazor Server est une technique d'hébergement publiée avec .Net Core.
Il utilise l'application ASP.Net Core, qui permet d'intégrer la fonctionnalité côté serveur.

Parallèlement à cela, les pages côté client sont créées à l'aide de composants Razor.
Lors de l'exécution de l'application, une connexion est établie entre le navigateur et le côté serveur à l'aide de SignalR (une bibliothèque open source pour les applications basées sur ASP.Net utilisée pour envoyer des notifications asynchrones aux applications Web côté client).

Le serveur envoie ensuite les charges utiles au client, qui met à jour la page. Il permet également une communication bidirectionnelle entre le serveur et le côté client.

### Voici quelques-uns des avantages de l'utilisation de Blazor Server

* L'application est chargée et rendue rapidement car les utilisateurs ne téléchargent pas les bibliothèques d'applications.
* Le code backend est isolé car les fichiers C# ne sont pas envoyés côté client.
* Il prend en charge et fonctionne également dans les anciennes versions des navigateurs.

### Voici quelques-uns des inconvénients de l'utilisation de Blazor Server

* Comme les pages sont envoyées du serveur au côté client, chaque fois qu'il y a des instabilités de réseau, le support hors ligne sera un problème.
* Comme l'application crée de nouveaux WebSockets pour chaque connexion, l'évolutivité sera difficile car la quantité de mémoire consommée sera énorme.

## Récapitulatif des différences

| Caractéristiques | Blazor WebAssembly | Blazor Server |
| ---- |:----:|:----:|
| Peut utiliser le code C # pour les applications Web | ✔️ | ✔️ |
| Petite taille de téléchargement | Il faut télécharger .NET Runtime + dépendances | ✔️ |
| Fonctionne bien avec les appareils aux ressources limitées | Tout le code doit être exécuté dans le navigateur | ✔️ |
| Vitesse d'exécution | ✔️ | Peut avoir des latences |
| Sans serveur | ✔️ | Besoin d'un serveur |
| Indépendant d'ASP.NET Core | ✔️ | Besoin d'ASP.NET Core |
| Indépendant de WebAssembly | Besoin de WebAssembly | ✔️ |
| Scabilité | ✔️ | Peut être un défi après un millier d'utilisateurs en fonction des capacités du serveur |
| Peut être servi à partir d'un CDN | ✔️ | Besoin d'un serveur |
| Mode hors-ligne | ✔️ | Nécessite une connexion continue |
| Les codes sensibles sont protégés | Le code est disponible de l'utilisateur | ✔️ |
| Utiliser la prise en charge des outils .NET | Non | ✔️ |

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

.NET Multi-platform App UI (MAUI) est un framework multiplateforme.
Il vous permet de créer des applications multiplateformes avec une base de code partagée pouvant s'exécuter de manière native sur Android, iOS, macOS et Windows.

Prêt à l'emploi, .NET MAUI prend en charge la liaison de données ; API multiplateformes pour accéder aux fonctionnalités natives de l'appareil telles que le GPS, l'accéléromètre, la batterie et les états du réseau ; un moteur de mise en page (pour concevoir des pages) et une fonctionnalité graphique multiplateforme (pour dessiner, peindre des formes et des images).

La promesse de .NET MAUI est que vous pourrez créer une seule application et la faire fonctionner sur les quatre systèmes d'exploitation. Mais cela va encore plus loin lorsque vous ajoutez Blazor au mélange.

## Créer ma première application

```cmd
dotnet new blazorwasm -o MyBeautifulFirstApp
```

![Créer ma première application](/img/introduction/creer-ma-premiere-application.png)

## Lancer ma première application

```cmd
cd MyBeautifulFirstApp
dotnet run
```

![Lancer ma première application](/img/introduction/lancer-ma-premiere-application.png)

Ouvrir dans le navigateur : [https://localhost:5001](https://localhost:5001)

## Anatomie de l’application

* Basé ASP.NET Core classique, un fichier `Program.cs` appellera un fichier `Startup.cs`. En charge de référencer le composant racine Blazor, appelé par convention App.
* Pour la partie Blazor, un fichier `App.razor` définissant le composant racine, ainsi qu'une page par défaut, généralement appelée `Index.razor`, placée à l'intérieur d'un dossier Pages.
* Pour finir, un fichier liant tout ça `index.html`, contenu dans le dossier `wwwroot`. 
* Dans ce fichier, on trouvera notamment une référence vers le framework `blazor.webassembly.js` qui permettra de charger le runtime dans sa version webassembly, ainsi que toutes les librairies .NET (.dll).
* Ci-dessous un petit récapitulatif de tous les fichiers mentionnés :
	* Un fichier `.csproj` de projet C#.
	* Un fichier d'entrée `Program.cs`.
	* Un fichier `Startup.cs`.
	* Un composant Blazor racine défini dans un fichier `App.razor`.
	* Une page `Index.razor` définie dans un dossier `Pages` (par convention).
	* Puis finalement un fichier `index.html` à l'intérieur du dossier `wwwroot` qui sera le point d'entrée.

## Héberger une application Blazor

* Serveur IIS
	* Blazor offre une intégration "out-of-the-box", et fournit un fichier `web.config` nécessaire pour l'hébergement, retrouvable directement parmi les fichiers de publication de notre application. l'installtion du module URL Rewrite est nécessaire.
* Docker conteneur
	* Grâce à un fichier Dockerfile, utiliser les serveurs Nginx ou Apache.
* Azure Blob Storage
	* Utilisation de la fonctionnalité Static website qui permet d'exposer les fichiers contenus dans le stockage en http.
* Github pages
	* Avec quelque modification, il est possible d'heberger des applications Blazor (WASM).
* ASP.NET Core
	* La meilleure option pour héberger Blazor reste l'application aspnetcore avec un serveur Kestrel.

## Design

Le système graphique par défaut de blazor est `Bootstrap v4.3.1`.
Exemple :

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

## Binding

Razor fournit des fonctionnalités de liaison de données avec `@bind`.

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


## Emplacement du code

Par défaut le code se trouve dans la page `.razor`.

Afin de séparer le code et le design de vos pages, il faut créer un fichier de classe contenant votre code.

![Emplacement du code](/img/introduction/emplacement-code-01.png)

Pour faire cela il vous suffit juste de créer une nouvelle classe avec le nom `MyRazorPage.razor.cs`.
Celle-ci doit être partiel :

![Emplacement du code](/img/introduction/emplacement-code-02.png)

## Navigation

Déclarer l’url de la page :

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

Naviguer vers une page à partir du code :

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

## Créer une nouvelle page

Pour créer une nouvelle page, rien de plus simple, il suffit de créer un nouveau composent Razor.

![Créer une nouvelle page](/img/introduction/creer-une-nouvelle-page-01.png)

![Créer une nouvelle page](/img/introduction/creer-une-nouvelle-page-02.png)


