WebAssembly est l’une des technologies les plus récentes pour le développement Web avec de nouvelles fonctionnalités prometteuses relatives aux performances et à l’extension des frontières des langages Web. Nous utiliserons Blazor pour permettre aux développeurs .NET de créer un SPA.

WebAssembly vous permet d’exécuter du code généré dans d’autres langues dans le navigateur. Traditionnellement, l'écriture d'une application Web avec .NET impliquait ASP.NET avec un serveur IIS. Avec l'introduction de WebAssembly, de nouveaux frameworks sont en cours de développement pour permettre aux nouveaux langages de devenir des langages Web en les compilant dans WebAssembly. Dans cet article, nous allons explorer l'un de ces cadres: Blazor . Blazor permet aux développeurs .NET d’écrire du code .NET pour créer une application SPA (application à une seule page). Étant donné que chaque nouveau langage apporte une nouvelle perspective, il sera intéressant de voir comment une nouvelle vague de développeurs .NET façonnera les conceptions et les modèles de SPA à l'avenir.

Microsoft démarre définitivement du bon pied avec Blazor en offrant un moyen simple pour commencer avec un code passe-partout. Nous allons explorer un peu ce qui rend Blazor unique. Ensuite, nous allons créer notre site et le préparer à être hébergé. Le code source de cet article est disponible sur GitHub: BlazorEx .

Passons à l'action.

Qu'est-ce que Blazor?

Comme je l'ai mentionné précédemment, Blazor est une structure SPA pouvant être compilée jusqu'à WebAssembly et exécutée dans un navigateur. À l’heure actuelle, Blazor est disponible en deux versions: côté serveur et côté client.

Blazor côté serveur est très similaire à ASP.NET traditionnel, mais utilise SignalR pour communiquer entre client et serveur et doit être hébergé depuis un serveur Serveur IIS. Cette version de Blazor présente tous les hauts et les bas d'ASP.NET: un serveur gère plusieurs connexions client et l'ensemble ne peut pas être hébergé via un CDN. Blazor côté serveur devrait migrer vers .NET Core 3.0 plus tard cette année.

Le blazor côté client, que je vais simplement appeler Blazor à partir de maintenant, permet à l'ensemble d'être hébergé à partir d'un fichier statique. emplacement, qui décharge le travail des serveurs. Cette saveur de Blazor est récemment passée du statut expérimental à un aperçu officiel. Blazor assure la compatibilité du navigateur pour C # en compilant le code dans des assemblys .NET, qui sont convertis en WebAssembly.

Alors que Blazor côté serveur et côté client partagent le même modèle de programmation, Blazor côté client ne sera pas livré avec .NET Core. 3.0 sur la version initiale, mais il a été promis d’expédier dans une version ultérieure de .NET Core 3.0.

Configuration d’un environnement pour Blazor

Nous allons télécharger un nouvel outil. En raison de la poussée de Microsoft vers .NET Core, cet article ne se limite pas à Windows; tous les types de systèmes d'exploitation peuvent participer. J'inclurai des notes pour chaque système d'exploitation où il diffère des autres.

1. Téléchargez Visual Studio 2019 (macOS et Windows uniquement)

2. Téléchargez le dernier .NET Core 3.0

   Suivez les instructions correspondant à votre système d'exploitation. dans le lien. Après cette étape, vous devriez pouvoir exécuter dotnet --list-sdks à partir de votre terminal ou de votre invite de commande pour consulter .NET Core 2.1 (si vous avez téléchargé Visual Studio) et 3.0.

3. Obtention des modèles pour Blazor en exécutant la commande suivante dans votre terminal ou votre invite de commande pour télécharger les modèles:
       

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates :: 0.9.0-preview3-19154-02 

Si vous rencontrez des problèmes, vous pouvez voir tous les modèles de dotnet où vous pouvez Téléchargez les derniers modèles de Blazor.

À ce stade, nous devrions avoir installé tout ce dont nous avons besoin pour créer notre application

Créer notre application

Premièrement, nous devons créer notre application. Dans votre invite de commande ou votre terminal, exécutez:

 nouveau blazor - nom BlazorEx --output BlazorEx 

Cette commande créera un nouveau projet Blazor nommé BlazorEx et le placera dans un nouveau dossier appelé BlazorEx . [[19659023] macOS Remarque: après avoir créé une application Blazor, vous devez initialiser une application ASP.NET Core 3.0 (application Web ASP.NET Core) à l'aide de la nouvelle webapp puis de la commande dotnet . . Il existe un bogue dans lequel une application Blazor ne s'exécutera pas en raison de dépendances manquantes, qui sont installées si vous exécutez tout autre projet en premier.

Dans le dossier BlazorEx exécutez:

 runnet run 

Pour lancer l'application. Si vous naviguez jusqu'à http: // localhost: 5000, la page suivante s'affiche:

Nous avons construit notre base pour commencer à explorer Blazor à ce stade. Dans la section suivante, nous allons commencer à ajouter du nouveau contenu.

Modification de notre application

Cette base de notre application Blazor est un bon début, mais nous allons poursuivre sur notre lancée en ajoutant une page de profil. Les pages .cshtml contiennent des composants Razor. Par conséquent, si vous recherchez des guides supplémentaires sur cette ressource .

Premièrement, nous devons créer un Profile.cshtml. dans le dossier, BlazorEx / Pages :

 @page "/ profile"
@inject HttpClient Http

 Profil 
 Extraction de données à partir d'une autre API. 

@if (currentProfile == null)
{
  
 Chargement en cours ... 
}
autre
{
  

     Prénom: 
     @ currentProfile.Name 
  
 

     Nom: 
     @ currentProfile.Surname 
  
 

     Région: 
     @ currentProfile.Region 
  
}

@les fonctions {
  // données extraites de la requête HTTP GET
  ProfileData currentProfile;

  protégé remplacer async Task OnInitAsync ()
  {
    currentProfile = wait Http.GetJsonAsync  ("https://uinames.com/api/?&amount=1&ext");
  }

  // données de réponse analysées
  classe ProfileData
  {
    chaîne publique Nom {get; ensemble; }
    chaîne publique Nom de famille {get; ensemble; }
    chaîne publique Gender {get; ensemble; }
    chaîne publique Region {get; ensemble; }
  }
}

Après avoir ajouté la page de profil, vous devez redémarrer l'application pour que la page de profil soit accessible. Par la suite, vous pourrez y accéder via http: // localhost: 5000 / profile . Nous allons ensuite modifier notre barre de navigation pour ajouter ce lien.

Ouvrez le fichier, de BlazorEx / Shared / NavMenu.cshtml . Nous allons ajouter une autre entrée pour pointer sur notre page de profil dans la barre de navigation.

  
      Profil
  
 

Redémarrez le service. Un nouveau lien apparaîtra à gauche de la page:

Hébergement

L'un des principaux Les avantages de Blazor sont de pouvoir héberger notre application sous forme de fichier statique, mais nous utilisions jusqu'ici dotnet run pour la servir localement à l'aide de .NET. Emballons notre projet et préparons-le à être hébergé sous forme de fichier statique.

Premièrement, nous devons le publier en mode édition.

 dotnet publish -c Release 

Ensuite, vous souhaitez copier les artefacts de construction dans un emplacement plus facile à gérer.

 cp -av ./bin/Release/netstandard2.0/publish/BlazorEx/dist/. ./build

Pendant où vous voulez héberger cet hôte, vous devrez changer la balise dans le index.html . Si vous souhaitez l'héberger à partir d'un domaine personnalisé, vous pouvez supprimer le tag. Si vous souhaitez l'héberger à partir d'un chemin spécifique (par exemple, https://reedyrm.github.io/BlazorEx/ ), vous devrez spécifier ce chemin dans l'attribut href de la balise de base.

Enfin, testons cela localement pour vérifier que tout est correctement construit. Nous pouvons installer un hébergeur de fichiers statique appelé servir .

 yarn global add serve 

Ensuite, vous pouvez exécuter la commande suivante et naviguer jusqu'à l'URL pour voir le site hébergé.

 serve -s build 

Vous devriez pouvoir le voir localement

Vous êtes maintenant prêt à continuer de créer votre nouveau site ou à commencer à migrer sur certaines fonctionnalités de votre application ASP.NET existante. Certains de vos composants ressemblent peut-être à un simple copier-coller pour les faire fonctionner dans Blazor.

Conclusion

Nous avons abordé Blazor en tant que concept, nous sommes passés à la configuration de notre environnement, apporté des modifications et finalement obtenu il est prêt à être hébergé. Alors que ce framework est encore en développement, Blazor élève .NET au même niveau de langages que Node, ce qui permet aux développeurs d’avoir les mêmes langages frontend et backend.

Dans l’ensemble, WebAssembly a commencé à ouvrir les portes de la Web dev en permettant nouvelles langues (.NET et Rust) deviendront des langues Web. WebAssembly a même trouvé sa place dans d'autres environnements non Web tels que les périphériques IoT et l'exécution de serveurs. Ce sera excitant de voir comment vous l'utilisez dans votre écosystème.

Vous souhaitez créer une belle interface utilisateur avec Blazor?

N'oubliez pas de consulter le nouveau Interface utilisateur Telerik pour Blazor notre interface utilisateur native suite de composants pour le framework Blazor. Soyez opérationnel rapidement avec des grilles, des graphiques, des calendriers et bien plus encore. Vous pouvez commencer un essai gratuit aujourd'hui.

En savoir plus sur l'interface utilisateur Telerik pour Blazor

Commencer un essai gratuit aujourd'hui