Fermer

février 18, 2019

Premier aperçu officiel de Razor Components


Le monde Blazor a été très animé ces derniers temps! Ce blog vous guide à travers la version récente de Razor Components et offre également un aperçu de la version 0.8.0 Blazor.

Le monde Blazor a récemment connu une période passionnante et animée. Nous avons eu le premier aperçu officiel de Razor Components (anciennement connu sous le nom de Blazor côté serveur). Puis, seulement une semaine plus tard, nous avons également reçu la version 0.8.0 de Blazor! Dans cet article, je vais vous présenter la première version de Razor Components, ainsi qu'un bref aperçu de la version 0.8.0 de Blazor.

Razor Components

êtes ici et ils sont officiels! Alors, bien sûr, vous voulez savoir comment vous en procurer?

Comme vous vous en doutez, il vous faudra installer quelques éléments de prévisualisation pour pouvoir jouer à Razor Components. La première chose dont vous aurez besoin est le dernier aperçu de Visual Studio 2019 (actuellement Aperçu 2.2). Pendant le téléchargement / l’installation, vous devez également disposer de la dernière version d’aperçu du Kit de développement .NET Core SDK . .

Une fois les deux installés, vous êtes prêt à commencer.

Création de votre premier projet

19659004] Une fois tout installé, vous pouvez créer votre premier projet Razor Components. Les choses sont un peu différentes avec Visual Studio 2019: au premier démarrage, un nouvel écran modal vous est présenté.

 VisualStudio2019-Startup-Modal "title =" VisualStudio2019-Startup-Modal "/></p data-recalc-dims=

, sélectionnez “Créer un nouveau projet”. Vous passerez ensuite à l’écran de modèle de projet.

 vs2019-project-selection "title =" vs2019-projet-selection "/></p data-recalc-dims=

Dans cet écran, sélectionnez le" ASP Application Web .NET Core ”” et cliquez sur “Suivant”. Sur l’écran suivant, vous pouvez attribuer un nom à votre projet et sélectionner l’emplacement de sauvegarde.

 vs2019-projectname "title =" vs2019-projectname "/></p data-recalc-dims=

Une fois que vous avez donné votre projetez un nom, cliquez sur "Créer" pour terminer et un nouveau modal vous sera présenté pour vous permettre de sélectionner le type de votre nouveau projet Web ASP.NET Core.

 razor-components-fnp "title = "razor-components-fnp" /></p data-recalc-dims=

Vous pouvez choisir ici Razor Components. Vous pouvez ensuite cliquer sur "OK" et votre solution sera générée pour vous. Une fois terminé, vous obtiendrez quelque chose comme ceci.

 rc-solution "title =" rc-solution "/></p data-recalc-dims=

Félicitations! Vous venez de créer votre première application Razor Components.

Modifications apportées au projet [19659004] Toute personne ayant testé une version antérieure de Razor Components (à l’époque où elle s’appelait Blazor côté serveur) pouvait remarquer une légère modification dans les projets générés. Le dossier racine fait désormais partie du projet serveur et ne fait plus partie du projet. projet d'application, parce que le projet d'application n'est plus un projet Web – il s'agit maintenant d'un projet de bibliothèque.

La raison en est que le plan à long terme consiste à n'avoir qu'un seul projet, mais il existe actuellement un problème d'outillage. —Les composants Razor ont une extension .cshtml identique à celle de Razor Pages et de Razor Views. Le problème est que les composants Razor doivent être compilés différemment des deux autres. S'ils sont tous dans le même projet, il n'existe aucun moyen de explique comment compiler un fichier .cshtml.

Ceci est sera abordée dans une prochaine version en introduisant la nouvelle extension de fichier pour Razor Components, .razor. Si je suis honnête, je ne suis pas totalement vendu pour l’extension. Je pense que cela pourrait être un peu déroutant pour les développeurs, mais il est difficile de nommer les choses et je n’ai aucune idée de ce que serait une bonne alternative. Quoi qu'il en soit, avec cette nouvelle extension, il sera possible de tout héberger dans un seul projet et le projet .app ne sera plus nécessaire.

Bibliothèques de composants

Malheureusement, aucun modèle de projet de bibliothèque de composants n'a été créé. dans cette version. Cependant, vous pouvez toujours les créer, il vous suffit d'utiliser les modèles Blazor et la CLI de dotnet.

 dotnet new -i Microsoft.AspNetCore.Blazor.Templates :: 0.8.0-preview-19104-04

Une fois les modèles installés, vous pouvez utiliser la commande suivante pour créer un projet

 dotnet new blazorlib 

Le gros problème à surveiller dans ce premier aperçu est que les bibliothèques de composants avec des actifs statiques ne sont pas ' t pris en charge dans les composants Razor. Ainsi, par exemple, si vous avez une bibliothèque de composants contenant du code JavaScript et que vous la référencez à partir d'un projet Razor Components, ces fichiers JavaScript ne seront pas ajoutés lors de l'exécution du projet. Il s'agit d'une limitation assez importante, mais l'équipe y apportera une solution dans un futur aperçu.

Intégration de MVC et de Razor Pages

Désormais, c'est vraiment très excitant si vous possédez déjà des applications MVC ou Razor Page existantes. en utilisant des composants Razor. Le plan à long terme consiste à pouvoir mélanger et faire correspondre les composants Razor avec MVC ou Razor Pages. Et pas seulement des pages entières, mais des parties de page. Je pense que ce plan est vraiment impressionnant et devrait offrir une migration extrêmement fluide vers Razor Components.

Dans ce premier aperçu, vous pouvez ajouter un composant Razor dans une vue MVC ou une page Razor. La prise? Ils ne sont pas encore interactifs…

Pour ce faire, utilisez un nouvel utilitaire HTML, RenderComponentAsync. Par exemple, si nous voulions rendre un composant appelé BlazorLabel dans une page MVC prenant un paramètre pour le texte, il devrait afficher LabelText. Nous pourrions le faire en utilisant le code suivant:

 @ (wait Html.RenderComponentAsync  < BlazorLabel >  (new {LabelText = "Cool Label"}))

Cependant, cette syntaxe n'est que temporaire. À plus long terme, l'équipe souhaite que les développeurs puissent simplement utiliser la syntaxe d'élément et d'attribut normale afin que ce qui précède devienne ceci:

    

Il y a certes beaucoup de chemin à parcourir, mais je pense que ce que cela promet est assez impressionnant. Il convient de noter que cette relation sera unidirectionnelle, ce qui signifie que les vues MVC et Razor Pages peuvent héberger Razor Components, mais pas l'inverse.

Cela conclut le premier aperçu de Razor Components. Je pense que c'est un premier aperçu solide et, même si nous n'avons pas eu beaucoup de nouvelles fonctionnalités, nous avons jeté beaucoup de travail pour permettre des choses pour l'avenir.

Avant de conclure, jetons un coup d'œil à ce qui est dans la version 0.8.0 de Blazor.

Blazor 0.8.0

Cette version ne consiste pas à ajouter de nouvelles fonctionnalités à Blazor, mais bien plus qu’une version de maintenance. L'objectif principal de la version 0.8.0 est de mettre à jour Blazor afin qu'il utilise les composants Razor dans .NET Core 3. Il corrige également certains bugs.

Préparation de la configuration

Si vous avez suivi les étapes pour bien démarrer. Avec Razor Components, vous êtes prêt à jouer avec Blazor. La seule chose supplémentaire à faire est d'installer les services linguistiques Blazor à partir de Visual Studio Marketplace . Tout cela ne vous fournit les modèles Blazor Standalone et Blazor Hosted. Une fois l'extension installée, vous avez la possibilité de sélectionner un type de projet Blazor.

 blazor-components-fnp "title =" blazor-components-fnp "/></p data-recalc-dims=

Performances et amélioration du lieur de liens

La version mise à jour du moteur d’exécution Mono WASM (WebAssembly) constitue un ajout intéressant à cette version. Cette version plus récente augmente la vitesse d’environ 25% pour les applications Blazor exécutées sur Chrome, ce qui n’est pas surprenant.

Une autre amélioration concerne l'éditeur de liens IL. Si vous n'en avez pas entendu parler auparavant, il est responsable de la réduction de la taille des applications Blazor en supprimant le code et les bibliothèques non touchées par les chemins de code. C'est un concept très similaire.

Jusqu'à présent, l'éditeur de liens IL était un peu trop agressif, et certaines bibliothèques populaires (notamment Json.NET) ne pouvaient pas être utilisées avec Blazor prêt à l'emploi. avec cette nouvelle version, ce n'est plus le cas, et de nombreuses autres bibliothèques sont maintenant disponibles Peut être utilisé dans les applications Blazor.

Bug de modèle hébergé Blazor

Il existe actuellement un bogue concernant le modèle hébergé Blazor qui peut être détecté en essayant de charger la page Extraire les données. Cela est dû au fait que le modèle n'a pas de référence à Json.NET (cela a été supprimé dans .NET Core 3). Vous pouvez le résoudre très facilement en installant Json.NET, puis en mettant à jour la méthode Startup.ConfigureServices des projets serveur, comme suit:

 public   void   ConfigureServices  ( IServiceCollection services ) 19659056] {
    services .  AddMvc  () .  AddNewtonsoftJson  () ; 
    services .  AddResponseCompression  () ; 
} 

Wrapping Up

Dans l’ensemble, je pense que c’est un couple décent de libérations, surtout lorsque vous en prenez compte le nombre de changements survenus. L'équipe Blazor est en train de créer des bases vraiment solides sur lesquelles elle pourra s'appuyer.

Les problèmes les plus importants à l'heure actuelle semblent être liés à l'outillage. La plupart des personnes à qui j'ai parlé se heurtent à plusieurs problèmes avec Visual Studio 2019, ce qui peut être frustrant. Mais rappelons-nous qu’il s’agit d’une technologie de pointe et que les choses s’améliorent chaque jour.

Si vous n’avez pas plongé dans l’univers de Razor Components et de Blazor, je vous exhorte à le tenter. C'est vraiment un cadre incroyable et vous pouvez déjà réaliser beaucoup de choses.


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




Source link