« Blazor » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
 
(19 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 8 : Ligne 8 :
= Description =
= Description =
* Développement frontend avec C#
* Développement frontend avec C#
* Sans transpilation ni plugin, utilise [https://webassembly.org/ WebAssembly]
* Intégration des bibliothèques .NET existantes (nuget)
 
{{warn |  
{{warn |  
* Pas de debug avec VScode
* Pas de debug avec VScode
* 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.}}


== 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.
! Hosting model
WebAssembly possède un runtime .NET, ce qui permet d'exécuter des assemblies .NET dans le navigateur.
! Description
 
|-
= [https://blazor.net/docs/get-started.html Environnement de développement] =
| Blazor Server || run components server-side. UI updates, event handling, and JavaScript calls are handled over a SignalR connection using the WebSockets protocol.
* .NET Core 2.1 SDK (2.1.300 or later)
|-
* Visual Studio 2017 (15.7 or later) with the ASP.NET and web development workload selected.
| Blazor WebAssembly || runs components client-side in the browser on a WebAssembly.
* Blazor Language Services extension from the Visual Studio
|-
 
| Blazor Hybrid || native client (MAUI, WPF) which renders web UI to an embedded Web View control.
Créer un nouveau projet:
|}
* File → New Project → Web → ASP.NET Core Web Application
* .NET Core → ASP.NET Core 2.1 → Blazor
 
<kode lang='ps'>
# en ligne de commande
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
dotnet new blazor -o BlazorApp
cd BlazorApp
dotnet run
</kode>
 
= Bouton =
<kode lang='cshtml'>
<p>Current count: @currentCount</p>
 
<button onclick="@IncrementCount">Click me</button>
 
@functions {
    int currentCount = 0;
 
    void IncrementCount()
    {
        currentCount++;
    }
}
</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()
= [https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-7.0#blazor-server 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.<br>
        var myObject = await Http.GetJsonAsync<MyClass[]>("file.json");
On the client, the Blazor script establishes the SignalR connection with the server.<br>
    }
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.
</filebox>


= Arborescence des fichiers =
= How Blazor Server is working =
* Startup.cs
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>
* Program.cs
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.
* 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] =
= [https://scientificprogrammer.net/2019/08/18/pros-and-cons-of-blazor-for-web-development/ Blazor Server Pros / Cons] =
{{ListPlusMinus|type=plus|list=
* .NET-based web framework that uses the C# and Razor languages.
* easy integration of Javascript libraries with JSInterop.
}}
{{ListPlusMinus|type=minus|list=
* 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.
}}

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 »