« Blazor » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
 
(16 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
[[Category:CSharp]]
[[Category:Blazor]]
= Liens =
= Liens =
* [https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.1 Introduction to ASP.NET Core Blazor]
* [https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.1 Introduction to ASP.NET Core Blazor]
Ligne 14 : Ligne 14 :
* Ne recharge pas la page lors de modification, il faut relancer le serveur.}}
* Ne recharge pas la page lors de modification, il faut relancer le serveur.}}


== [https://webassembly.org/ WebAssembly] ==
= [https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models Hosting models] =
Permet d'exécuter du bytecode (code intermediaire) dans le navigateur grâce à la javascript runtime sandbox.<br>
{| class="wikitable wtp"
WebAssembly est nativement présent dans les navigateurs moderne.<br>
! Hosting model
WebAssembly possède un runtime .NET (mono.wasm), ce qui permet d'exécuter des assemblies .NET dans le navigateur.
! Description
|-
| Blazor Server || run components server-side. UI updates, event handling, and JavaScript calls are handled over a SignalR connection using the WebSockets protocol.
|-
| Blazor WebAssembly || runs components client-side in the browser on a WebAssembly.
|-
| Blazor Hybrid || native client (MAUI, WPF) which renders web UI to an embedded Web View control.
|}


= [https://blazor.net/docs/get-started.html Environnement de développement] =
= [https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-7.0#blazor-server Blazor Server description] =
* .NET Core 2.1 SDK (2.1.300 or later)
Components are executed on the server. UI updates, event handling, and JavaScript calls are handled over a SignalR connection using the WebSockets protocol.<br>
* Visual Studio 2017 (15.7 or later) with the ASP.NET and web development workload selected.
On the client, the Blazor script establishes the SignalR connection with the server.<br>
* Blazor Language Services extension from the Visual Studio
The state on the server associated with each connected client is called a circuit.<br>
Circuits aren't tied to a specific network connection and can tolerate temporary network interruptions and attempts by the client to reconnect to the server when the connection is lost.


Créer un nouveau projet:
= How Blazor Server is working =
* File → New Project → Web → ASP.NET Core Web Application
Whenever the browser triggers a registered event (e.g. click on a button), it sends to the server a message saying that the button was clicked.<br>
* .NET Core → ASP.NET Core 2.1 → Blazor
The server executes the code associated with the event, manipulating the server's copy of the page, and replies a JSON message with the delta between server and client.


<kode lang='ps'>
= [https://scientificprogrammer.net/2019/08/18/pros-and-cons-of-blazor-for-web-development/ Blazor Server Pros / Cons] =
# en ligne de commande
{{ListPlusMinus|type=plus|list=
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
* .NET-based web framework that uses the C# and Razor languages.
dotnet new blazor -o BlazorApp
* easy integration of Javascript libraries with JSInterop.
cd BlazorApp
}}
dotnet run
{{ListPlusMinus|type=minus|list=
</kode>
* Performances: every client actions are routed to the server and will be delayed by the network latency and will use bandwidth.
 
* No offline support
= [https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-3.1 Bouton] =
* Reduced scalability: with SignalR there is a limit to how many simultaneous connections can be handled from the clients.
<kode lang='cshtml'>
}}
<p>Current count: @currentCount</p>
 
<button @onclick="IncrementCount">Click me</button>
<button @onclick="IncrementCountAsync">Click me</button>
 
@functions {
    int currentCount = 0;
 
    void IncrementCount()
    {
        currentCount++;
    }
 
    async Task IncrementCountAsync()
    {
        // ...
    }
}
</kode>
 
= Component =
<filebox fn='MyComponent.cshtml'>
<!-- gère les requêtes /mypage -->
@page "/mypage"
 
<!-- injection de dépendance d'une instance de HttpClient -->
@inject HttpClient Http
 
<p>Some HTML code</p>
 
<!-- insère un autre composant -->
<OtherComponent OtherParameter="10" />
 
@functions {
    // Paramètre du composant
    [Parameter]
    private int MyParameter { get; set; } = 1;
 
    // Some C# code
 
    protected override async Task OnInitAsync()
    {
        var myObject = await Http.GetJsonAsync<MyClass[]>("file.json");
    }
}
</filebox>
 
= Arborescence des fichiers =
* Startup.cs
* Program.cs
* App.cshtml
* _ViewImports.cshtml
* global.json
* Pages
** Index.cshtml
** _ViewImports.cshtml
* Shared
** MainLayout.cshtml
* wwwroot
** index.html
** css
*** site.css
 
= [https://useiconic.com/open Open Iconic] =

Dernière version du 26 octobre 2023 à 21:30

Liens

Description

  • Développement frontend avec C#
  • Intégration des bibliothèques .NET existantes (nuget)
  • Pas de debug avec VScode
  • Ne recharge pas la page lors de modification, il faut relancer le serveur.

Hosting models

Hosting model Description
Blazor Server run components server-side. UI updates, event handling, and JavaScript calls are handled over a SignalR connection using the WebSockets protocol.
Blazor WebAssembly runs components client-side in the browser on a WebAssembly.
Blazor Hybrid native client (MAUI, WPF) which renders web UI to an embedded Web View control.

Blazor Server description

Components are executed on the server. UI updates, event handling, and JavaScript calls are handled over a SignalR connection using the WebSockets protocol.
On the client, the Blazor script establishes the SignalR connection with the server.
The state on the server associated with each connected client is called a circuit.
Circuits aren't tied to a specific network connection and can tolerate temporary network interruptions and attempts by the client to reconnect to the server when the connection is lost.

How Blazor Server is working

Whenever the browser triggers a registered event (e.g. click on a button), it sends to the server a message saying that the button was clicked.
The server executes the code associated with the event, manipulating the server's copy of the page, and replies a JSON message with the delta between server and client.

Blazor Server Pros / Cons

  • .NET-based web framework that uses the C# and Razor languages.
  • easy integration of Javascript libraries with JSInterop.
  • Performances: every client actions are routed to the server and will be delayed by the network latency and will use bandwidth.
  • No offline support
  • Reduced scalability: with SignalR there is a limit to how many simultaneous connections can be handled from the clients.
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=Blazor&oldid=29632 »