Fermer

décembre 12, 2018

Composants Razor pour une interface sans JavaScript en 2019

razorcomp-870


Une architecture d'application serveur qui promet de fournir une alternative à JavaScript pourrait-elle être la prochaine étape majeure pour les développeurs .NET en 2019? Dans cet article, nous allons parler de Razor Components, un nouveau framework qui promet un développement Web gratuit avec JavaScript, soutenu par des technologies .NET telles que C #, .NET Standard et SignalR.

Une architecture d'application serveur qui promet de fournir une alternative à JavaScript être la prochaine grande chose pour les développeurs .NET en 2019? Dans cet article, nous allons parler de Razor Components, un nouveau framework qui promet un développement Web gratuit avec JavaScript, soutenu par des technologies .NET telles que C #, .NET Standard et SignalR. Cette nouvelle technologie est sur la feuille de route pour .NET Core 3.0 et elle montre beaucoup de potentiel.

Razor Components, est ce qui a débuté sous le nom de Blazor Server-Side au début de 2018. Blazor est une infrastructure d'application Web à page unique .NET généralement associée à .NET s'exécutant sur Web Assembly . Cependant, Blazor est capable de fonctionner sous plusieurs scénarios, y compris du côté serveur en tant qu'application .NET Standard, a.k.a. Razor Components . Les composants Blazor et Razor sont essentiellement les mêmes, sauf où ils s'exécutent. Blazor s'exécute sur le navigateur à l'aide de l'assemblage Web, tandis que Razor Components s'exécute sur le serveur. Razor Components considère le navigateur comme un «client léger», le navigateur Web ne gérant que l'interface utilisateur et le serveur recevant les événements et répondant à distance aux mises à jour de l'interface utilisateur. Pour l'utilisateur, l'application est indiscernable de toute autre application Web.

Note de l'auteur: À mon avis, le choix actuel du nom «Composants du rasoir» est source de confusion. Pour clarifier ce dont nous discutons:

  • Razor est une syntaxe de balisage de modèle pour .NET
  • . Blazor est un framework Web basé sur .NET qui peut s'exécuter sur le client à l'aide de WebAssembly ou en tant que:
        

    • Razor Components – Infrastructure Blazor s'exécutant sur le serveur

En surface, le concept de Razor Components soulève de nombreuses questions, il convient donc d'en approfondir l'architecture.

Serveur – Architecture cliente

19659011] Razor Components a une architecture unique qui permet à une application .NET de s'exécuter côté serveur alors que l'interface utilisateur n'a plus de processus dans un navigateur distant. La combinaison de .NET Core et SignalR nous permet d’écrire des applications Web sans JavaScript.

Chez “Core”

Razor Components est la combinaison de plusieurs technologies .NET Core. Avant tout, une application de Razor Components utilise .NET Standard 2.0 . Construire avec .NET Standard signifie que Razor Components dispose d’une grande surface pour l’API .NET, compatible avec d’autres bibliothèques .NET Standard. De plus, Razor Components est une application .NET Core qui peut donc être construite et déployée sous n’importe quel système d’exploitation. Un rapide coup d'œil à l'intérieur d'un composant Razor Components .csproj montre que nous sommes en territoire .NET bien connu. Le type d'application est même un EXE qui indique qu'il s'agit d'un exécutable. > Dans .NET Core, la sortie réelle est un fichier exécutable .dll, pas un fichier .exe littéral.


   netstandard2.0 
   Exe 
   7.3 
  

Que fait-on avec cet exécutable et comment traduit-il dans une application Web magique compatible avec les clients légers? Pour comprendre cela, nous devons examiner la relation serveur / client.

Now Serving Razor Components

Sur le serveur, l'application est hébergée par ASP.NET Core. Il s’agit là encore d’une application ASP.NET Core typique, base sur laquelle d’autres applications ASP.NET Core sont hébergées, notamment: MVC, WebAPI et Razor Pages. Dans une application Razor Components, l'hôte utilise des services et un middleware pour enregistrer l'application dans le pipeline HTTP. En examinant le fichier Startup.cs de l'application serveur, vous pouvez voir les configurations des services et des middlewares.

Au moment de la rédaction de cet article, Razor Components s'appelle toujours ServerSideBlazor dans les API correspondantes. .

 public void ConfigureServices (services IServiceCollection)
{
  // ...

  // ajoute les services Server-Side Blazor et ceux enregistrés
  // par le démarrage du projet d'application
  services.AddServerSideBlazor  ();

  // ...
}

// Cette méthode est appelée par le runtime. Utilisez cette méthode pour
// configure le pipeline de requêtes HTTP.
public void Configure (application IApplicationBuilder,
                      IHostingEnvironment env)
{
  // ...

  // Utiliser les enregistrements de composants et les fichiers statiques à partir du
  // projet d'application.
  app.UseServerSideBlazor  ();

  // ...
} 

Une fois que l'application serveur est prête, nous pouvons faire une demande de requête Web initiale, ce qui nous amène à configurer le navigateur en tant que «client léger».

SignalR le client léger

À la suite d'une demande. au serveur, nous recevons des fichiers statiques pour l'application. Comme avec la plupart des applications Web typiques, nous recevons du HTML. Avec Razor Components, le premier fichier reçu par le client est le fichier Index.html qui lance l'application côté client. L'application client est un fichier JavaScript unique inclus dans la structure, blazor.server.js . Cette application est un client SignalR spécial chargé de recevoir / traiter les modifications DOM du serveur, d'envoyer des événements au serveur et, plus important encore, d'établir une connexion WebSocket avec le serveur.

La communication entre le client et le serveur s'effectue via SignalR sous forme de données binaires. Les paquets de données ne contiennent que les modifications DOM nécessaires, et non l'intégralité du DOM rendu. Il y a NO Viewstate à la ASP.NET WebForms à traiter avec Razor Components.

La relation client-serveur étant comprise, nous pouvons maintenant nous concentrer sur la partie interface utilisateur du cadre. .

Ecriture des interfaces utilisateur Web Razor et C #

Étant donné que Razor Components exécute le côté serveur en tant qu'application .NET Standard, la logique est écrite à l'aide des technologies .NET. Ceci est possible grâce au framework Blazor qui utilise le RenderTree une abstraction DOM similaire aux DOM virtuels utilisés dans les frameworks JavaScript populaires tels que Angular et React. Examinons le côté interface utilisateur du framework pour comprendre comment les composants sont écrits.

Principes de base des composants

Razor est la syntaxe de balisage de modèle utilisée dans ASP.NET MVC 3.0. Razor a gagné en popularité grâce à sa simplicité en ce sens qu'il nécessite un symbole @ pour commencer un bloc de code sans balise de fermeture explicite. Contrairement au framework MVC, où Razor est utilisé pour écrire explicitement HTML, Razor Components émet un RenderTree. Dans Razor Components, chaque fichier .cshtml est utilisé comme composant, par exemple: Widget.cs devient . L'image suivante illustre la tradition de la simplicité, ainsi qu'une grande partie du concept de composant à partir d'annotations de base.

L'en-tête d'un composant définit des caractéristiques spéciales ou des caractéristiques d'un composants tels que: routage, mise en page et injection de dépendance. Dans l'image, nous pouvons voir que ce composant a un itinéraire spécifié par @page "/ counter" . Le composant agit comme une page lors de la visite de la route / composant . De plus, le composant peut être utilisé dans d'autres composants que l'élément .

Tout le balisage à l'intérieur du composant devient partie intégrante du RenderTree. Cela partage certaines similitudes avec la façon dont .jsx est utilisé dans React. Étant donné l'exemple

Counter

le cadre créera le code suivant en coulisse lors de la construction du générateur RenderTree .AddMarkupContent (0, "

Counter

n n"); ]. Avec RenderTree résumé, les développeurs peuvent se concentrer sur l'écriture de composants avec Razor et HTML.

La logique de composant est écrite en tant que C # dans un bloc @funcitons . Les champs, propriétés et événements sont liés à l'aide de la syntaxe Razor. Référencer un événement ou une valeur du bloc de code dans le balisage du composant est aussi simple que d'utiliser @ propertyName .

Paramètres de composant

Le concept de composant dépasse le balisage encapsulant. Pour créer des composants réutilisables, nous devons pouvoir communiquer avec les composants. Les composants prennent en charge les paramètres d'utilisation pour lier des données et des événements. L'utilisation de l'attribut [Parameter] dans un composant expose des propriétés pour la consommation. Dans le composant Counter suivant, l'attribut [Parameter] est ajouté pour permettre aux consommateurs de spécifier le montant auquel incrémenter le compte.

Nombre actuel: @currentCount

@les fonctions {   int currentCount = 0;   [Parameter] protected int CountBy {get; ensemble; } = 1;   void IncrementCount ()   {     currentCount + = CountBy;   } }

Dans un autre fichier, nous pouvons maintenant définir la valeur CountBy sur l'élément composant.

    

Le paramètre CountBy peut également être lié à d'autres composants de la page, ce qui permet à l'utilisateur de définir la valeur de manière dynamique. Par exemple, nous pouvons placer une entrée sur la page et lier sa valeur à la propriété CountBy . Le comportement du compteur peut maintenant changer au moment de l'exécution en modifiant la valeur de l'entrée.




 @functions {
  int countBy = 5;
} 

Le modèle de composant est facile à apprendre, mais fournit une base solide pour créer des interfaces utilisateur complexes. Des bibliothèques supplémentaires peuvent également être utilisées pour prendre en charge la logique d'application et l'expérience d'interface utilisateur.

Large gamme d'options: y compris JavaScript

Etant donné que Razor Components exploite .NET et le navigateur, l'architecture permet quelques points d'intégration intéressants. ] .NET Standard and Beyond

Etant donné que Razor Components est une application .NET Core, il fonctionne avec les bibliothèques .NET Standard. Cela signifie que les packages NuGet et les SDK existants peuvent être compatibles. Cela inclut la plupart des bibliothèques .NET Standard, à condition qu'elles n'interagissent pas avec ou ne dépendent pas de technologies étroitement couplées à une plate-forme. Par exemple, une bibliothèque telle que MarkDig utilisée pour analyser Markdown en HTML est compatible, car elle ne possède aucune dépendance au-delà de .NET Standard 2.0. Au moment de la rédaction de ce manuel, même le Kit de développement logiciel (SDK) Machine Learning basé sur .NET – ML.NET est compatible lorsqu'il est utilisé en tant que service dans une application Razor Components .

Interopérabilité avec JavaScript

En outre, Razor Components L'application peut utiliser les dépendances des écosystèmes JavaScript et via une couche d'interopérabilité, elle peut communiquer de manière bidirectionnelle avec les dépendances .NET et JavaScript. Ceci est utile dans les cas où les composants Razor ne prennent pas en charge un navigateur / une API DOM nécessaire ou une bibliothèque JavaScript existante est utile.

Bien que le modèle de composant dans Razor Components réponde à la plupart des besoins d'interface utilisateur, certaines API DOM sont toujours nécessaires. Par exemple, l'obtention des informations de localisation géographique des utilisateurs n'est pas prise en charge directement par Razor Components. Pour accéder à cette fonctionnalité en tant qu'API DOM, Razor Components peut faire appel à l'implémentation de JavaScript dans le navigateur par le biais de la couche d'interopérabilité JavaScript.

L'exemple suivant montre comment une abstraction C # peut être écrite pour s'interfacer avec l'emplacement géographique du navigateur. Les API, en particulier la méthode getCurrentPosition . De .NET, la méthode JSRuntime.Current.InvokeAsync est utilisée pour appeler un module JavaScript interopGeolocation.js .

 // GeoLocation.cs (.NET)
Classe publique Géolocalisation
{
  // ...

  public async Task GetCurrentPosition (
    Action  sur le succès,
    Action  onError,
    PositionOptions options = null)
  {
    OnGetPosition = onSuccess;
    OnGetPositionError = onError;
    wait JSRuntime.Current.InvokeAsync  (
      "interopGeolocation.getCurrentPosition",
      nouveau DotNetObjectRef (this),
      options);
  }

  // ...
} 

Par le biais de invokeMethodAsync le module JavaScript peut rappeler dans .NET le résultat obtenu.

 // interopGeolocation.js (navigateur)

window.interopGeolocation = {
  getCurrentPosition: function (geolocationRef, options) {
    const success = (result) => {
      geolocationRef.invokeMethodAsync (
        'RaiseOnGetPosition',
        interopGeolocation.toSerializeable (résultat));
    };
    erreur const = (er) =>
    geolocationRef.invokeMethodAsync (
      'RaiseOnGetPositionError',
      er.code);
    navigator.geolocation.getCurrentPosition (
      Succès,
      Erreur,
      options);
},

// ... 

L'abstraction est ensuite utilisée dans l'application en tant que code C # normal. Cette interop peut être écrite en tant que bibliothèque .NET pouvant être partagée entre plusieurs projets.

 // Index.cshtml (utilisation de l'application)

// Composant initialisé
protégé remplacer async Task OnInitAsync ()
{
  var g = nouvelle géolocalisation ();
  wait g.WatchPosition (Handler, HandleError);
}

void Handler (Position p)
{
  Lat = p.Coords.Latitude;
  Long = p.Coords.Longitude;
} 

Idéalement, une fois qu'un interop est créé pour une API, il ne devrait plus être nécessaire de le créer à nouveau.

Chronologie ASP.NET Core 3.0

Razor Components a été annoncé pour la première fois lors de la conférence DotNET Conf. Razor Components devrait être livré avec ASP.NET Core 3.0 à la mi-2019. La citation suivante de Daniel Roth explique l'objectif à court terme de Blazor et de Razor Components :

Notre principal objectif reste de fournir un support pour l'exécution de Blazor côté client dans le navigateur. L’exécution de Blazor côté client sur WebAssembly se poursuivra parallèlement à celle de Razor Components, même si elle restera encore expérimentale pendant que nous étudierons les problèmes d’exécution de .NET sur WebAssembly. Nous conserverons toutefois le même modèle de composant, que vous utilisiez le serveur ou le client. Vous pouvez faire basculer votre application Blazor pour qu'elle s'exécute sur le client ou le serveur en modifiant une seule ligne de code. Consultez la discussion .NET Conf de Blazor pour voir cela en action et pour en savoir plus sur nos projets de composants de Razor:

Mise en route

Si vous êtes du genre de développeur qui aime tester les choses plus tôt, vous pouvez essayer Blazor. Composants aujourd'hui. Au moment de la rédaction de cet article, Razor Components est encore sous la marque Blazor côté serveur, que l'on peut trouver à l'adresse suivante: Blazor.NET . Suivez les instructions de la section Obtention et veillez à choisir le type de projet «Blazor (Server-Side in ASP.NET Core)».

Avantages et inconvénients

Étant donné que seule une petite quantité de JavaScript est requise pour initialiser le client, aucun assemblage .NET n'est transféré au client. Même pendant le fonctionnement, le trafic réseau est faible, car la communication entre le navigateur «client léger» et le serveur est un petit paquet binaire. Cependant, étant donné que des sockets Web sont utilisés, le client et le serveur doivent toujours être connectés. Cela signifie que les applications Razor Components ne peuvent pas fonctionner en mode hors connexion. Si le mode hors connexion est indispensable pour votre application, l'application Blazor équivalente à WebAssembly peut constituer un meilleur choix. Cela dit, Blazor n'a pas encore reçu de date de sortie officielle ni de promesse de soutien de la part de Microsoft.

Scale with Azure

Un dernier sujet de préoccupation pour certains pourrait être la question suivante: «Comment Razor Components évoluera-t-il?». Razor Components est construit avec SignalR, il présente l’avantage d’Azure. Azure SignalR Service est une infrastructure de service entièrement gérée qui fonctionne de manière transparente avec ASP.NET Core SignalR. L'intégration de SignalR Service nécessite très peu de modification de code pour ajouter le provisionnement automatique de la capacité, la mise à l'échelle ou les connexions persistantes.

Conclusion

Razor Components, l'implémentation côté serveur du framework Blazor est une nouvelle approche du développement Web. En utilisant le navigateur Web en tant que client léger, Razor Components offre une nouvelle alternative aux frameworks JavaScript. Son modèle de composants est suffisamment simple pour maintenir une courbe d'apprentissage courte, tout en étant suffisamment robuste pour être extrêmement productif. Même si Razor Components est nouveau, sa capacité à utiliser les bibliothèques .NET existantes, ses outils et éventuellement l'écosystème de JavaScript en fait également un candidat idéal pour le développement Web frontal.


Les commentaires sont désactivés en mode aperçu.



Source link