Blazor WebAssembly est officiellement publié sur Microsoft Build

Blazor WebAssembly a officiellement atteint sa première version de production. Dans cet article, je vais parler de quelques-unes des excellentes fonctionnalités fournies dans cette version; ainsi que regarder en avant pour mettre en évidence certaines des fonctionnalités sur lesquelles je pense pour .NET 5 en novembre.

Nous l'avons fait! Blazor WebAssembly a été officiellement publié au Build 2020 et marque une étape importante dans l'histoire de Blazor. Il est facile d'oublier qu'il y a un peu plus de deux ans, Blazor n'existait même pas, et l'idée de pouvoir écrire une interface utilisateur Web riche et interactive avec C # n'était qu'un rêve – en fait, je pense qu'il est juste de dire beaucoup d'entre nous n'en ont même pas rêvé, ce n'était tout simplement pas quelque chose qui allait être une possibilité. Mais regardez où nous en sommes maintenant.

Dans cet article, je vais résumer les nouvelles fonctionnalités qui ont fait leur apparition dans la version Blazor WebAssembly (Wasm) GA, ainsi que mettre en évidence certaines fonctionnalités à venir que nous devons attendre avec impatience dans .NET 5.

Nouveau

Nous avons eu cinq aperçus et un candidat à la sortie avant que Blazor Wasm ne devienne GA à Build. Et tout comme la majorité des versions de Blazor, elles étaient remplies de nouvelles fonctionnalités intéressantes. Je ne vais pas tous les énumérer ici, mais je veux souligner ceux qui m'ont vraiment excité et qui pourraient vous intéresser si vous les avez manqués.

Taille de téléchargement réduite

Il y a eu de grandes réductions dans la taille du téléchargement initial des applications Blazor. Le premier d'entre eux provenait d'un cadre plus agressif pour l'éditeur de liens IL. Si vous n'êtes pas familier avec l'éditeur de liens, son travail consiste à supprimer tout code inutilisé de votre application afin de le rendre aussi petit que possible. Si vous avez travaillé avec des frameworks JavaScript SPA, comme Angular, c'est un concept similaire à la secousse d'arbre.

Historiquement, l'éditeur de liens n'avait coupé que le code des bibliothèques du framework principal. Mais il a maintenant été reconfiguré pour couper également le code des assemblys du framework Blazor. Cela a permis d'économiser environ 100 Ko.

Cependant, la plus grande victoire est venue de l'activation de la compression Brotli lors de la publication d'une application. Brotli est un format de compression très efficace et sa mise en œuvre a conduit l'application de modèle Blazor par défaut de 2 Mo à 1,8 Mo. Si le CSS Bootstrap est supprimé, la taille peut descendre jusqu'à 1,6 Mo.

Authentification basée sur les jetons

L'authentification est toujours un sujet d'actualité dans le développement Web, et Blazor ne fait pas exception. J'ai écrit une série à ce sujet pour mon blog et ces articles sont toujours parmi mes plus populaires chaque mois. Pour Blazor Wasm, une solution prête à l'emploi était une pièce manquante du puzzle, mais dans Preview 2 nous avons obtenu cette pièce manquante.

L'implémentation permet aux applications Blazor d'utiliser l'authentification basée sur le protocole OAuth 2.0 via OpenID Connect — une option courante et largement utilisée pour les applications SPA. Les applications Blazor peuvent désormais être configurées pour vérifier les utilisateurs par rapport à de nombreux fournisseurs d'identité couramment utilisés tels que:

• Azure Active Directory
• ASP.NET Core Identity and Identity Server
• Google
• Auth0
• Tout autre OIDC existant provider

L'authentification est désormais disponible dans les modèles de projet Blazor, et si vous utilisez Visual Studio, elle peut être configurée en quelques clics. Si vous utilisez la CLI .NET, il vous suffit d'ajouter quelques commutateurs à votre commande dotnet new . Vous pouvez, bien sûr, l'ajouter à une application Blazor existante et vous pouvez trouver toutes les informations dont vous avez besoin sur le site Blazor Docs .

Modèle d'application Web progressive

Si vous ne l'avez pas entendu des PWA avant, ce sont des applications Web qui utilisent des API et des capacités de navigateur modernes pour se comporter comme des API natives. Cela inclut des éléments tels que:

• La possibilité d'être installé et exécuté à partir de leur propre fenêtre d'application, pas seulement celle du navigateur standard
• Capacités hors ligne: les PWA peuvent se charger et fonctionner en l'absence de connexion réseau
• Mise à jour automatique
• Capacité de recevoir des notifications push d'un serveur d'arrière-plan

Habituellement, l'activation de la fonctionnalité PWA implique la création de quelque chose appelé un travailleur de service, qui est écrit en JavaScript. Il existe également un fichier de prise en charge appelé manifest.json qui contient des métadonnées sur l'application utilisée lors de son installation, des éléments tels que son nom et les icônes à utiliser. Avec Blazor, la création de ces fichiers est désormais faite pour vous. Tout ce que vous avez à faire est simplement de cocher une case lors de la création de votre application.

Prise en charge du débogage

Aperçu 3 nous a apporté une fonctionnalité très attendue, le débogage des applications Blazor Wasm via Visual Studio ou Visual Studio Code. Auparavant, nous avions accès à une forme très rudimentaire de débogage à l'aide des outils de développement du navigateur. Nous pouvions définir des points d'arrêt par rapport au code C # dans les outils du navigateur et atteindre ces points d'arrêt, mais c'était un processus très fastidieux de fonctionner et la plupart du temps, il tombait juste en panne. Personnellement, je suis devenu très habitué à utiliser des instructions Console.Writeline simples pour m'aider à déboguer mon code car c'était une manière beaucoup plus fiable de faire les choses.

Nous avons maintenant une expérience beaucoup plus familière: nous peut frapper F5 et exécuter nos applications en mode débogage à partir de Visual Studio, définir des points d'arrêt et inspecter des valeurs. C'est certainement un grand pas en avant, mais je pense qu'il est juste de dire que nous n'en sommes pas encore là. Je trouve toujours que cette nouvelle expérience de débogage est un peu fragile. J'ai souvent exécuté mes applications et on m'a présenté une fenêtre de navigateur vide qui ne va jamais nulle part. Habituellement, une deuxième ou une troisième tentative lui donnera vie, mais il y a encore place à amélioration ici.

Reconstruction automatique dans Visual Studio

Bien que beaucoup de gens recherchent désespérément une fonctionnalité connue sous le nom de rechargement à chaud, nous nous sommes rapprochés de cela avec la reconstruction automatique dans Visual Studio. Avec la reconstruction automatique, vous pouvez apporter des modifications à votre application et les enregistrer, puis actualisez simplement le navigateur et l'application sera automatiquement reconstruite. L'inconvénient, bien sûr, est que vous perdrez tout état de votre application.

J'apprécie que le rechargement à chaud soit l'objectif, mais pour ma part, j'étais heureux de voir cette fonctionnalité entrer, car cela m'a au moins évité d'avoir à reconstruisez manuellement mes applications avant d'actualiser le navigateur. Il convient toutefois de noter que cela n'est disponible que pour les applications Blazor Wasm hébergées et non pour les applications autonomes.

Prise en charge de la localisation et du fuseau horaire

Les dernières nouvelles fonctionnalités sont la prise en charge de la localisation et du fuseau horaire. La localisation a été ajoutée dans l'aperçu 4 et permet aux développeurs d'utiliser le système de localisation standard ASP.NET Core pour localiser leurs composants.

La prise en charge du fuseau horaire a été ajoutée dans le dernier aperçu, 5. Il permet à Blazor de déduire le fuseau horaire de l'utilisateur afin qu'il puisse être utilisé dans la date et l'heure

Perspectives pour .NET 5

Le lancement de Blazor WebAssembly a considérablement amélioré la création et l'utilisation des applications. Mais il y a aussi tellement de choses à venir.

Nous ne faisons qu'effleurer la surface de ce que Blazor peut faire. J'ai donc pensé qu'il serait bon de terminer avec quelques points saillants que j'ai repérés sur la feuille de route pour .NET 5, qui doit être publiée en novembre.

• Restreindre la hiérarchie des composants parent et enfant —Je suis très intéressé par cela pour mes projets open-source. Essentiellement, cette fonctionnalité nous permettra de restreindre quels composants enfants peuvent être placés à l'intérieur d'un composant parent particulier.
• Paramètres requis —Avec cela, nous serons en mesure de spécifier si certains paramètres sur nos composants
• Influencer la tête HTML à partir d'un composant Blazor —Ceci est si important pour les applications qui nécessitent un bon référencement. Il existe des moyens de le faire maintenant, mais il n'y a pas de modèles établis.
• Compilation AoT – Une fonctionnalité très demandée, mais aussi souvent mal comprise. L'AoT sera idéal pour améliorer les performances des applications Blazor, mais cela a un coût, et c'est la taille. À ma connaissance, la pensée actuelle ici est que les développeurs pourront choisir de compiler des parties sensibles à la performance de leur application directement dans Wasm tandis que le reste sera compilé dans des DLL. Cela devrait donner le meilleur compromis entre performances et taille.
• Real Multithreading – Celui-ci dépend beaucoup de l'adoption du navigateur, car au moment de la rédaction, le seul fournisseur de navigateur prenant en charge le filetage dans Wasm est Chrome . Mais la possibilité d'utiliser des threads a déjà été ajoutée à Mono, le runtime utilisé par Blazor Wasm.
• Hot Reload for Blazor —Une autre fonctionnalité très recherchée. La façon dont cela fonctionnera est toujours en cours d'élaboration, mais ce sera une fonctionnalité très appréciée si elle arrive en novembre.
• Chargement paresseux des zones d'application – Similaire au chargement paresseux en JavaScript applications, cela ne permettrait de charger initialement que les parties actuellement nécessaires de votre application. Ensuite, d'autres pièces seraient chargées à la demande de l'utilisateur. L'idée est de réduire le téléchargement initial nécessaire pour exécuter l'application.
• Isolation CSS dans les composants Blazor – Une caractéristique commune trouvée dans d'autres cadres SPA tels que Angular et React. C'est une autre fonctionnalité populaire demandée par la communauté. Si vous n'avez jamais utilisé l'isolation CSS auparavant, cela vous permet d'écrire du CSS pour un composant sans avoir à vous soucier de la collision de ces styles avec d'autres dans votre application. Ceci est obtenu en appliquant automatiquement des noms de classe CSS uniques au moment de la construction.

Pour la liste complète des fonctionnalités prévues pour .NET 5, vous pouvez consulter le problème de la feuille de route sur GitHub .

où nous allons terminer les choses pour ce post. J'espère que vous êtes aussi excité que moi de voir Blazor WebAssembly arriver à la disponibilité générale avec autant de fonctionnalités intéressantes. J'espère également que vous êtes tout aussi enthousiaste pour l'avenir de Blazor!