Fermer

avril 13, 2021

Présentation de Hot Reload dans .NET 6


Avec .NET 6 Preview 3, vous pouvez utiliser le rechargement à chaud avec vos applications ASP.NET Core. Le rechargement à chaud augmente votre productivité et vous permet de voir vos changements en temps réel. Cet article vous montre comment cela fonctionne et toutes les limitations auxquelles vous devez vous attendre.

Avec .NET 6 – et sa sortie officielle en novembre 2021 – un grand objectif est d'améliorer les performances de la boucle interne des développeurs . L'idée de la performance de la boucle interne se résume à ceci: lorsque je modifie le code, à quelle vitesse puis-je le voir reflété dans mon application?

Avec .NET Core, vous pouvez faire mieux que le traditionnel save-build-run workflow avec montre dotnet . L'outil peut surveiller la modification de vos fichiers source, puis déclencher la compilation. Lorsque vous exécutez dotnet watch sur vos applications Web ASP.NET Core — pour MVC, Blazor ou Razor Pages — vous devez toujours attendre la recompilation et le rechargement de votre application. Si vous faites cela à plusieurs reprises tout au long de la journée, rester assis et attendre peut devenir frustrant. Attendre 10 secondes une fois ne semble pas être une grosse affaire. Si vous faites cela 100 fois par jour, vous tuez près de 17 minutes à attendre que votre application se recharge!

Les développeurs d'autres écosystèmes, en particulier dans l'espace frontal, connaissent le concept de rechargement à chaud: vous économisez un fichier, et le changement apparaît presque instantanément. Une fois que vous travaillez avec le rechargement à chaud, il est difficile de revenir en arrière. Alors que l'équipe .NET essaie d'attirer des étrangers et de nouveaux développeurs ( un autre objectif pour la version .NET 6 ), ne pas avoir cette fonctionnalité peut être un non-starter pour les étrangers, même en considérant toutes les autres capacités merveilleuses un un framework mature comme .NET a à offrir. (Sans oublier que les initiés attendaient cela avec impatience depuis un certain temps aussi.)

L'attente est enfin terminée! À partir de .NET 6 Preview 3, vous pouvez utiliser le rechargement à chaud avec vos applications ASP.NET Core, y compris Blazor (Blazor Server et Blazor WebAssembly), Razor Pages et MVC. Vous pouvez également voir le rechargement à chaud des ressources statiques telles que CSS et le code C # compilé.

Dans cet article, je vais vous montrer comment cela fonctionne avec une application Blazor Server. Le rechargement à chaud ne fonctionne actuellement qu'avec dotnet watch à partir de votre terminal. Dans les prochains aperçus, vous verrez l'intégration et la prise en charge de Visual Studio pour les applications clientes et mobiles.

Comment utiliser le rechargement à chaud aujourd'hui

Pour essayer le rechargement à chaud aujourd'hui, vous devez d'abord installer la dernière .NET 6 preview SDK (au moment de cet article, il s'agit du SDK 6.0.100-preview.3 ). Vous devrez le faire, que vous ayez installé ou non les derniers bits de Visual Studio 2019. Il faudra quelques mois avant que les mises à jour de l'aperçu de .NET 6 soient synchronisées avec les mises à jour de Visual Studio.

Une fois que vous avez installé le dernier SDK d'aperçu de .NET 6, mettez à jour votre profil dans vos Properties / launchSettings. json dans l'un des fichiers suivants.

  • Blazor Server, MVC et Razor Pages: "hotReloadProfile": "aspnetcore"
  • Blazor WebAssembly: "hotReloadProfile": "blazorwasm" [19659013] Depuis que j'utilise Blazor Server, mon profil ressemble à ce qui suit.

     "profiles" :   {
         "HotReloadDotNet6" :   {
           "commandName" :   "Project" 
           "dotnetRunMessages" :   "true" 
           "launchBrowser" :   true  ]
           "applicationUrl" :   "https: // localhost: 5001; http: // localhost: 5000" 
           "environmentVariables" :   { 
             "ASPNETCORE_ENVIRONMENT" :   "Development" 
          } 
           "hotReloadProfile" :   "aspnetcore" 
        } 
      } 
    

    Basic Usage

    Pour commencer, changeons le titre de notre composant Index et voyez à quelle vitesse le rechargement se produit - il semble instantané.

     Changez le texte de l'en-tête pour voir le rechargement à chaud en action - à partir de

    C'est génial que ce soit rapide, mais cet exemple n'est pas très excitant. Je viens de changer le texte statique. Qu'en est-il de changer le code qui nécessitait auparavant la recompilation de notre application? Dans le composant Counter je vais augmenter le nombre de cinq chaque fois qu'un utilisateur clique sur le bouton. Vous verrez que le changement se produit tout aussi rapidement.

     Mettez à jour le code C # pour voir les commentaires instantanés. Cette fois, dans la fenêtre de l'éditeur, le code d'un bouton est mis à jour pour ajouter 5 plutôt que rien. Lorsque la fenêtre localhost est actualisée, le bouton fonctionne avec le nouveau code.

    Que se passe-t-il lorsque nous travaillons avec l'état utilisateur? Par exemple, si je suis au milieu d'une interaction utilisateur et que je change d'application, cette interaction sera-t-elle réinitialisée? Dans mon exemple précédent, j'ai cliqué sur le bouton du composant Counter jusqu'à ce que le nombre atteigne une valeur de 20. Si je change le currentCount de 0 à 10 les choses se réinitialiseront-elles?

    La réponse est non: l'état est préservé indépendamment! Regardez comme je continue d'augmenter le compteur. Lorsque j'actualise la page, mon compteur commence à 10, comme je m'y attendais.

     Le rechargement à chaud préserve l'état d'un composant. Dans le même exemple que la dernière fois, la fenêtre du navigateur avec l'hôte local clique sur un bouton ajoutant 5; l'utilisateur obtient le nombre à 20. Le code de gauche change le currentCount à 10. Le bouton de droite est cliqué plusieurs fois et le nombre augmente à 25. Une fois la page du navigateur actualisée, le nombre se charge à 10.

    Au fur et à mesure que nous mettons tout cela ensemble, regardez comment je peux ajouter plusieurs composants avec leur propre état et modifier le CSS, le tout avec le retour instantané fourni par le rechargement à chaud.

     Le rechargement à chaud me permet d'itérer rapidement . Tous les changements dont nous venons de parler sont ajoutés dans un seul écran. L'en-tête est mis à jour en

    Travailler avec des erreurs

    Vous vous demandez peut-être ce qui se passe lorsque dotnet watch rencontre des exceptions d'exécution ou des erreurs de construction. Va-t-il quitter et décorer mon écran avec une trace de pile? Pour essayer ceci, permettez-moi de graver un nom de variable en changeant l'itérateur en currentCounts .

     Hot reload gère les erreurs avec élégance. La variable currentCount est mal tapée avec un s, et le navigateur affiche une erreur rouge CS0103 Le nom currentCounts n'existe pas dans le contexte actuel.

    Lorsque cela se produit, vous verrez une bannière rouge en haut du page. Il comprend le message d'erreur spécifique et son emplacement. Lorsque je corrige l'erreur, une reconstruction se produit. Ce n’est pas instantané, mais cela fonctionne bien. La plupart du temps, vous n’avez pas besoin d’arrêter et de redémarrer l’application.

     Lorsque je résolve mon erreur, une reconstruction se produit. La suppression des s mal saisis sur currentCounts fait apparaître un indicateur d'occupation sur le navigateur pendant environ une seconde, puis la page est rechargée.

    Quelles sont les limites?

    Lorsque vous utilisez pour la première fois montre dotnet avec rechargement à chaud, votre terminal affichera le message suivant:

     Rechargement à chaud activé. Pour une liste des modifications prises en charge, voir https://aka.ms/dotnet/hot-reload. Appuyez sur  "Ctrl + R"  pour redémarrer.
    

    Ce lien vaut la peine d'être consulté pour voir quels changements sont pris en charge. À quelques exceptions près, la plupart de ces changements sont pris en charge.

    • Types
    • Itérateurs
    • Expressions asynchrones / en attente
    • Expressions LINQ
    • Lambdas
    • Objets dynamiques

    En ce qui concerne les modifications non prises en charge, voici quelques-uns des principaux:

    • Renommer des éléments
    • Supprimer des espaces de noms, des types et des membres
    • Ajouter ou modifier des génériques
    • Modifier des interfaces
    • Modifier des signatures de méthode

    Lorsque vous effectuez une modification qui le rechargement à chaud ne prend pas en charge, il reviendra au comportement typique dotnet watch . Votre application se recompilera et se rechargera dans votre navigateur. Par exemple, cela se produit lorsque je renomme ma méthode de IncrementCount à IncrementCounts .

     Lorsque le rechargement à chaud n'est pas pris en charge, il retombe. un s est ajouté à IncrementCount (), et la vue du navigateur indique 'Tentative de reconnexion au serveur: 1 sur 8

    Conclusion

    Dans cet article, j'ai introduit la fonctionnalité de rechargement à chaud qui est nouvelle dans .NET 6 Preview 3 J'ai expliqué comment l'utiliser aujourd'hui et comment il gère divers scénarios de développement. J'ai également discuté des modifications non prises en charge.

    Bien que Blazor reçoive beaucoup de fanfare dans ASP.NET Core, il est important de noter que cela profite à l'ensemble de l'écosystème .NET. Par exemple, vous pouvez l'utiliser maintenant avec Razor Pages et MVC, et vous bénéficierez bientôt d'une assistance avec les applications clientes et mobiles également. Essayez-le aujourd'hui et dites-moi ce que vous en pensez!




Source link