Introduction à BlazorIntroduction to Blazor

Par Daniel Roth et Luke LathamBy Daniel Roth and Luke Latham

Bienvenue dans Blazor !Welcome to Blazor!

Blazor est une infrastructure pour la création d’interfaces utilisateur d’applications web interactives côté client avec .NET :Blazor is a framework for building interactive client-side web UI with .NET:

  • Créez des interfaces utilisateur interactives riches à l’aide de C# plutôt que JavaScript.Create rich interactive UIs using C# instead of JavaScript.
  • Partagez la logique d’application côté serveur et côté client écrite dans .NET.Share server-side and client-side app logic written in .NET.
  • Affichez l’interface utilisateur en langage HTML et CSS pour une large prise en charge des navigateurs, y compris les navigateurs mobiles.Render the UI as HTML and CSS for wide browser support, including mobile browsers.

L’utilisation de .NET dans le développement web côté client offre les avantages suivants :Using .NET for client-side web development offers the following advantages:

  • Écriture de code dans C# plutôt que dans JavaScript.Write code in C# instead of JavaScript.
  • Tirez parti de l’écosystème .NET existant des bibliothèques .NET.Leverage the existing .NET ecosystem of .NET libraries.
  • Partagez la logique de l’application sur le serveur et le client.Share app logic across server and client.
  • Bénéficiez des performances, de la fiabilité et de la sécurité de .NET.Benefit from .NET's performance, reliability, and security.
  • Restez productif grâce à Visual Studio sur Windows, Linux et macOS.Stay productive with Visual Studio on Windows, Linux, and macOS.
  • Développez avec un ensemble commun de langages, de frameworks et d’outils stables, riches en fonctionnalités et faciles à utiliser.Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

ComposantsComponents

Les applications Blazor sont basées sur des composants.Blazor apps are based on components. Dans Blazor, un composant est un élément d’interface utilisateur, comme une page, une boîte de dialogue ou un formulaire de saisie de données.A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Les composants sont des classes .NET intégrées dans des assemblys .NET qui :Components are .NET classes built into .NET assemblies that:

  • Définissent la logique de rendu de l’interface utilisateur flexible.Define flexible UI rendering logic.
  • Gèrent les événements de l’utilisateur.Handle user events.
  • Peuvent être imbriqués et réutilisés.Can be nested and reused.
  • Peuvent être partagés et distribués en tant que bibliothèques de classes Razor ou packages NuGet.Can be shared and distributed as Razor class libraries or NuGet packages.

La classe de composant est généralement écrite sous la forme d’une page de balisage Razor avec une extension de fichier .razor.The component class is usually written in the form of a Razor markup page with a .razor file extension. Les composants dans Blazor sont appelés composants Razor.Components in Blazor are formally referred to as Razor components. Razor est une syntaxe pour la combinaison de balisage HTML et de code C# conçu pour la productivité des développeurs.Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor permet de basculer entre le balisage HTML et C# dans le même fichier avec le support d’IntelliSense.Razor allows you to switch between HTML markup and C# in the same file with IntelliSense support. Razor Pages et MVC utilisent également Razor.Razor Pages and MVC also use Razor. Contrairement à Razor Pages et à MVC, qui reposent sur un modèle requête/réponse, les composants sont utilisés spécifiquement pour la logique et la composition de l’interface utilisateur côté client.Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Le balisage Razor suivant montre un composant (Dialog.razor), qui peut être imbriqué dans un autre composant :The following Razor markup demonstrates a component (Dialog.razor), which can be nested within another component:

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
    }
}

Le contenu du corps (ChildContent) et le titre (Title) de la boîte de dialogue sont fournis par le composant qui utilise ce composant dans son interface utilisateur.The dialog's body content (ChildContent) and title (Title) are provided by the component that uses this component in its UI. OnYes est une méthode C# déclenchée par l’événement onclick du bouton.OnYes is a C# method triggered by the button's onclick event.

Blazor utilise des balises HTML naturelles pour la composition de l’interface utilisateur.Blazor uses natural HTML tags for UI composition. Les éléments HTML spécifient des composants et les attributs d’une balise passent les valeurs aux propriétés d’un composant.HTML elements specify components, and a tag's attributes pass values to a component's properties.

Dans l’exemple suivant, le composant Index utilise le composant Dialog.In the following example, the Index component uses the Dialog component. ChildContent et Title sont définis par les attributs et le contenu de l’élément <Dialog>.ChildContent and Title are set by the attributes and content of the <Dialog> element.

Index.razor :Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Dialog Title="Blazor">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

La boîte de dialogue est affichée lorsque le parent (Index.razor) est accessible dans un navigateur :The dialog is rendered when the parent (Index.razor) is accessed in a browser:

Composant de boîte de dialogue affiché dans le navigateur

Quand ce composant est utilisé dans l’application, IntelliSense dans Visual Studioet Visual Studio Code accélère le développement avec l’achèvement de la syntaxe et des paramètres.When this component is used in the app, IntelliSense in Visual Studio and Visual Studio Code speeds development with syntax and parameter completion.

Les composants s’affichent dans une représentation en mémoire du DOM (Document Object Model) du navigateur appelé arborescence de rendu, utilisée pour mettre à jour l’interface utilisateur de manière flexible et efficace.Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.

Blazor côté clientBlazor client-side

Blazor côté client est un framework d’application monopage pour la création d’applications web interactives côté client avec .NET.Blazor client-side is a single-page app framework for building interactive client-side web apps with .NET. Blazor côté client utilise les normes web ouvertes sans transpilation de plug-ins ou de codes et fonctionne dans tous les navigateurs web modernes, y compris les navigateurs mobiles.Blazor client-side uses open web standards without plugins or code transpilation and works in all modern web browsers, including mobile browsers.

L’exécution de code .NET à l’intérieur des navigateurs web est rendue possible grâce à WebAssembly (abrégé en wasm).Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly est un format bytecode compact optimisé pour un téléchargement rapide et une vitesse d’exécution maximale.WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly est un standard web ouvert pris en charge dans les navigateurs web sans plug-in.WebAssembly is an open web standard and supported in web browsers without plugins.

Le code WebAssembly peut accéder à toutes les fonctionnalités du navigateur via JavaScript, appelé interopérabilité JavaScript (ou interop JavaScript).WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability (or JavaScript interop). Le code .NET exécuté via WebAssembly dans le navigateur s’exécute dans le bac à sable JavaScript du navigateur avec les protections offertes par le bac à sable contre les actions malveillantes sur l’ordinateur client..NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

Blazor côté client exécute du code .NET dans le navigateur avec WebAssembly.

Quand une application Blazor côté client est créée et exécutée dans un navigateur :When a Blazor client-side app is built and run in a browser:

  • Les fichiers de code C# et les fichiers Razor sont compilés dans des assemblys .NET.C# code files and Razor files are compiled into .NET assemblies.
  • Les assemblys et le runtime .NET sont téléchargés dans le navigateur.The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor côté client amorce le runtime .NET et configure le runtime pour charger les assemblys de l’application.Blazor client-side bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. Le runtime Blazor côté client utilise l’interopérabilité de JavaScript pour traiter la manipulation DOM et les appels d’API du navigateur.The Blazor client-side runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

La taille de l’application publiée, sa taille de charge utile, est un facteur de performance essentiel pour qu’une application soit facile à utiliser.The size of the published app, its payload size, is a critical performance factor for an app's useability. Le téléchargement d’une application volumineuse dans un navigateur prend un certain temps, ce qui nuit à l’expérience utilisateur.A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor côté client optimise la taille de la charge utile pour réduire les temps de téléchargement :Blazor client-side optimizes payload size to reduce download times:

  • Du code inutilisé est extrait de l’application lorsqu’elle est publiée par l’éditeur de liens de langage intermédiaire (IL).Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • Réponses HTTP compressées.HTTP responses are compressed.
  • Le runtime .NET et les assemblys sont mis en cache dans le navigateur.The .NET runtime and assemblies are cached in the browser.

Blazor côté serveurBlazor server-side

Blazor dissocie la logique de rendu de composant de la manière dont les mises à jour de l’interface utilisateur sont appliquées.Blazor decouples component rendering logic from how UI updates are applied. Blazor côté serveur prend en charge l’hébergement des composants Razor sur le serveur dans une application ASP.NET Core.Blazor server-side provides support for hosting Razor components on the server in an ASP.NET Core app. Les mises à jour de l’interface utilisateur sont gérées par le biais d’une connexion SignalR.UI updates are handled over a SignalR connection.

Le runtime gère l’envoi des événements d’interface utilisateur du navigateur au serveur et applique les mises à jour de l’interface utilisateur renvoyées par le serveur dans le navigateur après avoir exécuté les composants.The runtime handles sending UI events from the browser to the server and applies UI updates sent by the server back to the browser after running the components.

La connexion utilisée par Blazor côté serveur pour communiquer avec le navigateur est aussi utilisée pour gérer les appels d’interopérabilité JavaScript.The connection used by Blazor server-side to communicate with the browser is also used to handle JavaScript interop calls.

Blazor côté serveur exécute le code .NET sur le serveur et interagit avec le modèle DOM (Document Object Model) sur le client par le biais d’une connexion SignalR.

Interopérabilité JavaScriptJavaScript interop

Pour les applications qui nécessitent des bibliothèques JavaScript tierces et l’accès à des API de navigateur, les composants interagissent avec JavaScript.For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Les composants peuvent utiliser les mêmes API ou bibliothèques que JavaScript.Components are capable of using any library or API that JavaScript is able to use. Le code C# peut appeler du code JavaScript, et le code JavaScript peut appeler du code C#.C# code can call into JavaScript code, and JavaScript code can call into C# code. Pour plus d’informations, consultez ASP.NET Core l’interopérabilité avec le JavaScript éblouissant.For more information, see ASP.NET Core l’interopérabilité avec le JavaScript éblouissant.

Partage de code et .NET StandardCode sharing and .NET Standard

Blazor implémente également .NET Standard 2.0.Blazor implements .NET Standard 2.0. .NET Standard est une spécification formelle d’API .NET qui sont communes aux implémentations .NET..NET Standard is a formal specification of .NET APIs that are common across .NET implementations. Vous pouvez partager les bibliothèques de classes .NET Standard entre les différentes plateformes .NET, comme Blazor, .NET Framework, .NET Core, Xamarin, Mono et Unity..NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.

Les API qui ne sont pas applicables à l’intérieur d’un navigateur web (par exemple l’accès au système de fichiers, l’ouverture d’un socket et le threading) lèvent une PlatformNotSupportedException.APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.

Ressources supplémentairesAdditional resources