« Blazor .NET Core 3.1 » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 53 : Ligne 53 :
* {{boxx|wwwroot}}: static files (css, js)
* {{boxx|wwwroot}}: static files (css, js)
* {{boxx|Data}}: service to access data
* {{boxx|Data}}: service to access data
== Code in the same page vs Code-behind ==
=== Code in the same page ===
<filebox fn='MyPage.razor'>
@page "/mypage"
<h1>Title</h1>
@code {
    // some C# code
}
</filebox>
=== Code-behind ===
<filebox fn='MyPage.razor'>
@page "/mypage"
@inherits MyPageBase
<h1>Title</h1>
</filebox>
<filebox fn='MyPageBase.cs'>
public class MyPageBase : ComponentBase
{
    // some C# code
}
</filebox>

Version du 10 janvier 2020 à 14:49

Liens

Description

  • Développement frontend avec C#
  • Intégration des bibliothèques .NET existantes (nuget)

WebAssembly

Permet d'exécuter du bytecode (code intermediaire) dans le navigateur grâce à la javascript runtime sandbox.
WebAssembly est nativement présent dans les navigateurs moderne.
WebAssembly possède un runtime .NET (mono.wasm), ce qui permet d'exécuter des assemblies .NET dans le navigateur.

Créer une application

Bash.svg 
# Blazor WebAssembly
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2
dotnet new blazorwasm -o blazorwasm
cd blazorwasm
dotnet run

# Blazor server
dotnet new blazorserver -o blazorserver
cd blazorserver
dotnet run

Hosting models

Blazor WebAssembly

L'application est téléchargée et exécutée dans le navigateur.

  • Excellentes performances
  • Pas besoin d'un serveur web ASP.NET Core pour héberger l'application
  • Permet une utilisation offline une fois chargée
  • Le temps de chargement est long, il faut télécharger l'application, ses dépendances et le .NET runtime
  • Les identifiants pour les accès aux bdd et web API sont chargés par chaque client

Blazor Server

L'application est exécutée sur le serveur. UI updates, event handling et les appels JavaScript sont pris en charge grâce à une connexion SignalR.

  • Pas besoin de WebAssembly
  • Chaque interaction utilisateur nécessite un appel au serveur
  • Un serveur web ASP.NET Core est nécessaire pour héberger l'application

Blazor server application

C'est une ASP.NET Core application.

Arborescence de fichiers

  • Program.cs: point d'entrée, appelle Startup.cs
  • Startup.cs: configuration (DI)
  • Pages: contient les Components
  • Shared: contient les layouts (main, menu)
  • App.razor: routing
  • _Imports.razor: import namespaces
  • wwwroot: static files (css, js)
  • Data: service to access data

Code in the same page vs Code-behind

Code in the same page

MyPage.razor 
@page "/mypage"
<h1>Title</h1>

@code {
    // some C# code
}

Code-behind

MyPage.razor 
@page "/mypage"
@inherits MyPageBase
<h1>Title</h1>
MyPageBase.cs 
public class MyPageBase : ComponentBase
{
    // some C# code
}
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=Blazor_.NET_Core_3.1&oldid=22709 »