---

Septembre 2018

Volume 33, numéro 9

Cet article a fait l'objet d'une traduction automatique.

Cutting Edge - Never Mind JavaScript, Blazor Voici

Par Dino Esposito

À propos de dix ans auparavant le Web grand public arrêté à un carrefour. Traditionnellement interprétées, les technologies côté client telles que HTML, CSS et JavaScript ont été sur le point de disparaître, progressivement submergé par les technologies compilés et les langages tels que XAML et c#. En même temps, l’environnement du navigateur semblait prêt à intégrer natif, dédié moteur de traitement comme Silverlight, qui avait été installé comme un plug-in séparé. Les première brouillons de HTML 5 sont apparues à l’horizon, puis, peu de temps après, Silverlight a été sunsetted.

Début des événements shook inscrire le paysage comme les décideurs informatiques recherché une plateforme viable pour le développement Web inter-plateformes. HTML5 a reçu une amélioration et JavaScript a commencé le retour du son. Aujourd'hui, Angular, React et Vue sont très populaires infrastructures JavaScript qui choisissent de plus en plus d’équipes de développement pour la création de leurs serveurs frontaux.

Blazor s’affiche comme une alternative possible à React/Angular/Vue et, grâce à WebAssembly (WASM) s’ouvre et affiche le Web pour pouvoir tirer parti des écosystèmes de développement existant, y compris .NET. Par conséquent, plus que simplement une autre infrastructure de modèle View-ViewModel MVVM-orientée de JavaScript, Blazor est, dans une certaine mesure, une tentative moderne de revisiter et affiner le concept de Silverlight, apportant la puissance du langage c# pour le développement Web côté client. Le cœur de Blazor est conçu pour fournir un environnement fortement typé basé sur navigateur, à créer des serveurs Web frontaux à l’aide de c# et .NET Core, à la place de JavaScript et Razor sur HTML. Toutefois, Blazor ne push HTML et CSS à l’angle. Au lieu de cela, il étend la syntaxe HTML avec une collection d’applications d’assistance de balise Razor prédéfinies tout en nécessitant aucun plug-in doit être installé.

J’ai attention que Blazor est toujours en grande partie dans le développement, et ce que vous lire ici peut changer radicalement en seulement quelques semaines. Le code présenté dans cet article est basé sur la version publiée en juillet 2018 de 0.5.0.

Dans cet article, j’aborder l’architecture système sous-jacente d’une application Blazor et présenter une application minimale « Hello World ».

La magie de Blazor

Si vous utilisiez précédemment un Silverlight, vous vous demandez peut-être comment Blazor — une plateforme non JavaScript, peut s’exécuter dans le navigateur sans un installable plug-in. La réponse est que, bien, il ne peut pas. Blazor requiert réellement une sorte de plug-in pour l’héberger dans un navigateur compatible. L’astuce est que la soi-disant conceptuel plug-in est déjà incorporé dans les navigateurs les plus récents (ceux publiés au cours des 12 derniers mois), et peut être facilement polyfilled via JavaScript dans les navigateurs plus anciens. Contrairement aux plug-ins discrètes comme Adobe Flash ou Silverlight, l’outil de prise en charge de Blazor est WASM, une norme ouverte en cours de développement dans un groupe de communauté W3C qui comprend des représentants de tous les principaux navigateurs.

Techniquement, WASM est un format binaire pour une pile de machine virtuelle (VM), une architecture similaire à .NET CLR et de la Machine virtuelle Java, mais contrairement à la machine virtuelle de Dalvik Android. Comme la cible de la compilation, de langages de programmation de haut niveau, WASM a le potentiel pour activer le déploiement d’applications .NET sur le Web. Pour ce faire, toutefois, un pont est nécessaire pour convertir le runtime .NET WASM. Blazor repose en grande partie sur le travail effectué par Xamarin afin d’apporter son framework Mono pour WASM. Le code .NET contenu dans une application Blazor s’exécute sur une version de Mono compilée spécifiquement à WASM, comme indiqué dans Figure 1.

Figure 1 Code .NET en cours d’exécution dans le navigateur

Comment est-ce différent à partir, par exemple, de Silverlight ? Les applications Silverlight exécutaient sable dans une interface spécifique au navigateur de communiquer avec l’environnement du navigateur conteneur grâce à des contrôles ActiveX dans Internet Explorer et NPAPI dans d’autres navigateurs Chrome et Firefox (consultez la documentation sur bit.ly/2klDgdY). Aujourd'hui, la plupart des navigateurs ignorez prise en charge NPAPI en faveur de WebAssembly. Blazor prend de nombreux concepts meilleures de Silverlight et les applique de manière qui s’adresse aux développeurs recherchant une alternative à JavaScript.

Qu’en est-il des navigateurs hérités ?

Outils de développement multiplateforme de code de compilation pour les deux WASM et asm.js, qui est un sous-ensemble de bas niveau de JavaScript, destinée à être une cible de compilation à partir de langages de haut niveau (voir asmjs.org). Blazor, en particulier, revient à l’aide d’un runtime .NET basé sur asm.js. Puis le code déployé exécute la détection de fonctionnalité dans le navigateur pour déterminer comment exécuter. Notez que l’infrastructure entière asm.js est en cours de recherche et développement.

Vous pouvez visiter caniuse.com pour vérifier le type de navigateur versions prennent actuellement en charge les WASM. Le site indique que toutes les versions de navigateur (desktop et mobiles) à partir de la mi-année 2017 et sur la prise en charge sa sortie. Notez qu’au moment de la rédaction, Blazor polyfill temporairement ne fonctionnait pas avec Internet Explorer.

Anatomie d’une Application Blazor

Une application de Blazor est une simple bibliothèque .NET Standard avec un point d’entrée Program.Main qui obtient téléchargé et exécuté dans le navigateur. Que le runtime .NET est compilé à WASM ; le code source que vous écrivez en C# s’exécute en mode natif comme s’il s’agissait d’une application .NET normale. Pour effacer les problèmes de sécurité, notez que tout le code Blazor continue de s’exécuter dans le même bac à sable sécurisé comme JavaScript. Figure 2 affiche la liste des fichiers téléchargés par l’exemple d’application Blazor apparaît dans le reste de cet article.

Figure 2 les fichiers téléchargés par l’exemple d’Application Blazor

La couleur d’arrière-plan différente, que vous voyez dans la figure identifie deux moments distinctes dans la durée de vie d’une application Blazor. Tout d’abord, les fichiers blazor.js et mono.js sont téléchargés pour coordonner le téléchargement du runtime Mono WebAssembly (le fichier mono.wasm). À l’heure actuelle, le runtime Mono inclut une version relativement riche de .NET et pèse 600 Ko. Toutefois, dans les versions antérieures, une option compacte était disponible à une fraction de la taille. Il s’agit d’une zone qui pourrait utiliser certains amélioration et l’optimisation.

Une fois que le runtime Mono a été téléchargé, il commence le téléchargement des assemblys .NET réelles. L’étape d’initialisation peut prendre un certain temps, environ trois secondes dans l’exemple de Figure 2. Pour cette raison, le modèle de Blazor Visual Studio standard fournit une zone dédiée pour l’interface utilisateur à afficher pendant la phase de chargement. Jetons un œil à un exemple d’application.

Création d’un exemple d’Application

Pour lire avec Blazor, vous devez .NET Core 2.1 et Visual Studio 15.7 ou une version ultérieure. En outre, vous devez installer les modèles Blazor à partir de la place de marché Visual Studio. Le modèle se trouve sous le dossier d’Application Web ASP.NET Core. Il existe actuellement trois modèles, plain Blazor côté client, application hébergée par ASP.NET Core et Blazor du côté serveur. Nous allons pour une application Blazor brute sans dépendances sur n’importe quel environnement de serveur principal. Ce scénario ressemble très étroitement à celle d’un Angular/React ou d’une même application Silverlight, une application client ordinaire téléchargé et exécuté au sein du navigateur.

Comme mentionné, le projet dans Visual Studio est une application de console .NET Standard 2.0 basée sur deux packages NuGet spécifiques : Blazor.Build et Blazor.Browser. Les deux sont inclus dans l’espace de noms Microsoft.AspNetCore.

Le projet est un projet .NET Core standard avec un programme d’amorçage de Program.cs, une classe Startup.cs et quelques dossiers rappeler une application ASP.NET Core, telles que wwwroot, partagé et Pages. La méthode Main est la suivante :

public class Program
{
  public static void Main(string[] args)
  {
    CreateHostBuilder(args).Build().Run();
  }
  public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
    BlazorWebAssemblyHost.CreateDefaultBuilder()
      .UseBlazorStartup<Startup>();
}

Une application Blazor est constituée de composants qu’elles se composent d’un fichier de Razor .cshtml. Par défaut, le nom du fichier .cshtml est le nom du composant. Dans l’exemple d’application, application est le nom du composant de démarrage dont le code source est dans app.cshtml, comme illustré ici :

<Router AppAssembly=typeof(Program).Assembly />

Au minimum, la classe de démarrage indique la classe de l’application à utiliser.

public class Startup
{
  public void Configure(IBlazorApplicationBuilder app)
  {
    app.AddComponent<App>("app");
  }
}

Le module d’application configure uniquement le composant de routeur Blazor. Dans les sites Web traditionnels (par exemple, ASP.NET), routage a lieu sur le serveur, mais elle est effectuée dans les applications à page unique de préférence via un composant côté client dédié. Dans Blazor, le routeur n’est pas effectué par JavaScript (car il s’agit, par exemple, Angular), mais, au lieu de cela, n’est une instance de la classe de routeur interne qui analyse toutes les classes dans l’assembly référencé, recherchez ceux qui implémentent l’interface IComponent.

Le routeur est responsable de toutes les activités de navigation, vers l’intérieur et extérieure, l’interception et la concrétisation. Clairement, Blazor attendu de composants fournissent des informations de routage pour le routeur pour les appeler de manière appropriée. Blazor prend en charge la même notation @page des Pages Razor dans ASP.NET Core. En outre, il prend en charge l’attribut d’itinéraire pour les classes de composant écrits en code c# brut.

La Page unique

En règle générale, une application à page unique démarre à partir d’une page index.html. Une application Blazor ne fait pas exception, et la page unique se trouve sous le dossier wwwroot. La page unique est censée contenir au moins le balisage suivant :

<app>
  <!—initialization markup -->
</app>
<script src="_framework/blazor.webassembly.js"></script>

Le contenu de l’élément de l’application s’affiche pendant le chargement initial de la plateforme Blazor, à savoir le premier segment de fichiers dans la liste des Figure 2. Vous pouvez avoir n’importe quel code HTML valide dans l’élément d’application, généralement un fichier .gif lors du chargement. Il incombe à l’élément de script pour télécharger dynamiquement les fichiers .dll nécessaires.

Le contenu réel affiché de la page d’accueil est déterminé par le routeur et le reste du contenu du fichier index.html trouvé suivant l’élément de script. Passons en revue le travail effectué par le routeur.

Le routeur vérifie l’URL demandée, la racine du site déployé et recherche un composant inscrit qui peut correspondre à l’URL racine. Dans l’exemple de projet, le dossier Pages contient un fichier index.cshtml qui commence avec le contenu suivant :

@page "/"
<h1>Hello, Blazor!</h1>
Welcome to your first BLAZOR app.

La directive @page indique le routeur sur le modèle à récupérer. Si un fichier _ViewImports.cshtml se trouve dans le dossier Pages (ou le dossier racine), son contenu est pris en compte. Dans l’exemple de projet, le fichier _ViewImports dans le dossier racine contient une liste de l’aide des instructions, tandis que le fichier _ViewImports dans le dossier Pages contient une référence au modèle de disposition :

@layout MainLayout

Par la suite, le contenu de la MainLayout.cshtml est traité et l’espace réservé @Body remplie avec la sortie de la vue Razor sélectionnée (index.cshtml). Dans l’exemple de projet, le fichier de disposition (figurant dans le dossier partagé, comme dans ASP.NET Core) contient un élément de barre de navigation foncé Bootstrap 4 typique. Voici ce code :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  ...
</nav>
<div class="container">
  @Body
</div>

Là encore, si vous utilisiez précédemment un ASP.NET MVC, ce modèle de programmation doit paraître assez familier. Dans la barre de navigation, vous avez généralement des liens. Vous pouvez exprimer les tag helpers Razor de liens via l’A canonique et bouton éléments, ou utilisez une des prédéfinis (ou personnalisé). En particulier, Blazor est fourni avec le composant d’assistance NavLink, qui fournit une syntaxe plus conviviale pour exprimer des liens qui peuvent être ou non des URL ordinaires. Dans une application à page unique, en fait, un lien peut être tout ce que le routeur peut comprendre. Voici un fragment de code Razor utilisé dans la barre de navigation de l’exemple d’application :

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <NavLink class="nav-link" href="digitalclock">
      DIGITAL CLOCK
    </NavLink>
  </ul>
</div>

L’attribut href pointe vers un URI qui peut correspondre uniquement à l’itinéraire à un composant tel que « digitalclock », un fichier CSHTML distinct qui implémente entièrement un composant d’horloge numérique. Le fichier digitalclock.cshtml se trouve sous le dossier Pages.

Création d’un exemple de composant

Un composant Blazor est un bloc autonome du code HTML et c#. CSS nécessaires va dans des fichiers distincts, raisonnablement nommé d’après le composant lui-même. Notez que Blazor ne fait rien de spécial avec CSS et n’impose pas toute convention. Traiter avec CSS est dépend entièrement de vous. Voici une horloge digitale implémentée comme un groupe d’entrée de démarrage :

<div class="clock">
  <div class="input-group">
    <span class="@currentCss">@currentTime</span>
    <div class="input-group-append">
      <button class="btn btn-primary"
              type="button"
              onclick="@startStop">@buttonAction</button>
    </div>
  </div>
</div>

Expressions Razor comme currentCss, currentTime et buttonAction font référence aux champs de composant définis dans la section @functions du fichier. Vous pouvez voir ces ici :

@functions {
  string currentTime = "N/A";
  string buttonAction = "N/A";
  string currentCss = "clock-notset";
  Timer timer;
  ...
}

L’expression startStop fait référence à une méthode appelée clic sur le bouton Arrêter ou démarrer pour démarrer/arrêter le minuteur. Figure 3 présente le code complet du composant DigitalClock.

Figure 3 C# Code du composant DigitalClock

@functions {
  string currentTime = "N/A";
  string buttonAction = "N/A";
  string currentCss = "clock-notset";
  Timer timer;
  protected override async Task OnInitAsync()
  {
    InitTimer();
    StartTimer();
  }
  void startStop()
  {
    if (timer.Enabled)
    {
      StopTimer();
    }
    else
    {
      StartTimer();
    }
  }
  private Task TimerTick()
  {
    currentTime = DateTime.Now.ToLongTimeString();
    currentCss = "clock-working";
    this.StateHasChanged();
    return Task.CompletedTask;
  }
  private void InitTimer()
  {
    timer = new Timer(1000);
    timer.Elapsed += async (sender, e) => await TimerTick();
  }
  private void StartTimer()
  {
    buttonAction = "STOP";
    timer.Start();
  }
  private void StopTimer()
  {
    buttonAction = "START";
    timer.Stop();
  }
}

Figure 4 montre l’interface de programme.

Figure 4 L'exemple d'application en action

La démo présente une horloge digitale sauvegardée par un minuteur .NET. Liaison de données est automatique pour les événements déclenchés par une action explicite de l’utilisateur (par exemple, quand un bouton), mais pas lorsque l’événement provient par programmation, telles que via un minuteur. Dans ce cas, vous devez appeler la méthode StateHasChanged pour forcer le convertisseur de navigateur pour actualiser l’affichage. Voici le code du gestionnaire tick du minuteur dans le composant de Blazor horloge numérique :

private Task TimerTick()
{
  currentTime = DateTime.Now.ToLongTimeString();
  currentCss = "clock-working";
  this.StateHasChanged();
  return Task.CompletedTask;
}

Le code source complet, consultez bit.ly/2LVeCxA.

Pour résumer

Blazor est une infrastructure expérimentale à venir pour la génération. NET monopage applications s’exécutant dans le navigateur via WebAssembly. WebAssembly est un moyen de sandbox pour déployer des fichiers binaires natifs dans un navigateur compatible — essentiellement tous les navigateurs expédiés depuis la mi-année 2017. Blazor utilise Razor et c# pour les vues de conception et inclut un routeur et une interface utilisateur composable comme la plupart des autres infrastructures JavaScript les plus courants.

Cet article présente la base d’une application côté client. Dans les colonnes à venir, j’explorerai intégration au serveur principal ASP.NET Core spécifique et les points d’extensibilité Blazor. Vous pouvez en savoir plus sur Blazor dans l’article de Jonathan Miller qui vous guide à travers les tâches relativement nécessaires pour une application côté client de téléchargement des données JSON à partir de points de terminaison HTTP.

---

Dino Espositoest l’auteur de la documentation de plus de 20 et 1 000 articles de sa carrière de 25 ans. Auteur de « The un congé sabbatique Break, » une émission théâtrales-style, Esposito est occupé à écrire des logiciels pour un monde plus écologique en tant que le stratège de numérique à BaxEnergy. Vous pouvez le suivre sur Twitter : @despos.

Merci aux experts techniques suivants d'avoir relu cet article : Daniel Roth (Microsoft), Jonathan Miller

---

Discuter de cet article sur le forum MSDN Magazine