Bases sur le blazor: construire des bibliothèques de composants réutilisables

Voir comment (re) utiliser des composants de rasoir dans les applications Web Blazor à partir de bibliothèques de classe de rasoir.

Blazor est un cadre de développement Web moderne et orienté vers les composants pour la plate-forme .NET. Il offre aux développeurs C # et .NET accéder au développement Web moderne avec la possibilité d’écrire (la plupart) le code d’interaction en C # au lieu de JavaScript.

L’un des avantages les plus importants de l’utilisation d’un cadre Web axé sur les composants est la simplicité du partage des composants entre les applications Web. Les bibliothèques de composants réutilisables aident à promouvoir la cohérence et à réduire le temps de développement dans plusieurs projets ou équipes.

Dans cet article, je vais vous montrer comment partager des composants à l’aide d’un Bibliothèque de classe de rasoir Projetez et partagez les meilleures pratiques pour le versement, la documentation et le maintien.

Création d’une bibliothèque de composants Blazor

Il existe différentes raisons d’introduire un Bibliothèque de classe de rasoir Dans vos projets d’application Web Blazor.

Par exemple, vous souhaitez partager des styles sur différentes applications pour que toutes vos applications internes se ressemblent et se sentent la même chose.

Ou vous souhaitez partager des composants, comme avoir la même page de connexion pour toutes vos applications.

Dans tous ces cas d’utilisation, vous créez un Bibliothèque de classe de rasoir et partagez les composants et les styles en les plaçant dans le projet de bibliothèque de classe. Vous ajoutez ensuite une référence de projet du projet d’application Blazor à la bibliothèque de classe Razor partagée.

Vous pourrez référencer les composants du rasoir à partir du projet d’application lorsque vous ajoutez une référence de projet à la bibliothèque partagée.

Cependant, lors du partage CSS ou Javascripnous devons les câbler avec l’application.

Les composants qui utilisent l’isolement CSS sont automatiquement gérés par le framework Web Blazor; Cependant, pour autonome *.css fichiers, vous devez ajouter un élément de lien dans la section tête de l’application Blazor (généralement le App.razor fichier) faisant référence au .css déposer:

<link href="https://www.telerik.com/blogs/@Assets["_content/ComponentLibrary/additionalStyles.css"]" rel="stylesheet">

Utilisez le nom et le nom de fichier du projet *.css déposer.

Pour Blazor WebAssembly standable Projets, la référence CSS a une structure différente:

<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet">

Réutiliser routable (page) Composants, vous devez fournir une référence à l’assemblage du projet partagé dans le AdditionalAssemblies paramètre du Router Définition à l’intérieur du Routes.razor déposer.

AdditionalAssemblies="new[] { typeof(ComponentLibrary.Component1).Assembly }"

Images et Javascrip Fichiers stockés dans le public wwwroot Le dossier de l’application partagée peut être référencé à l’aide du même modèle de dénomination que celui utilisé pour les fichiers CSS.

<img alt="Profile Picture" src="_content/ComponentLibrary/profile.png" />

Ce code fait référence à un profile.png fichier à partir du wwwroot dossier du ComponentLibrary commun Bibliothèque de classe de rasoir projet.

Vous pouvez partager des implémentations de services, des actifs, du code utilitaire, etc., en plus des composants de Blazor dans la bibliothèque de classe Razor partagée. Techniquement, vous n’avez pas besoin de plusieurs projets, même si cela est possible si vous avez une raison de diviser les différentes ressources.

Comment publier une bibliothèque de composants Blazor comme un package NuGet

Bien que l’utilisation Références de projet direct Fonctionne pour des projets plus petits, vous pourriez bientôt atteindre certaines de ses limites. Par exemple, lorsque vous modifiez les composants, il affecte directement toutes les applications.

Supposons que vous ayez plusieurs applications en fonction des composants partagés. Dans ce cas, envisagez d’utiliser versioning pour votre bibliothèque partagée et permettre aux consommateurs de mettre à niveau leurs applications vers la dernière version progressivement.

Dans ce cas, la publication d’un Package Nuget à Nuget.org ou un flux privé est meilleur que de référencer directement la bibliothèque des composants partagés à partir de vos applications Web Blazor.

Vous souhaitez ajouter les métadonnées du package au .csproj Fichier de la bibliothèque de classe Razor partagée.

Ensuite, vous utilisez le dotnet pack Commande dans votre configuration CI / CD pour générer le package NuGet. Vous pouvez ensuite publier le package généré pour votre flux NuGet.

Meilleures pratiques pour le versioning, la documentation et le maintien d’une bibliothèque de composants

Implémentation de composants partagés Mode de rendu agnostique est la meilleure approche.

Cela signifie que vous ne spécifiez pas le mode de rendu dans la mise en œuvre du composant dans le projet de bibliothèque de classe Razor partagée.

Au lieu de cela, vous définissez ou héritez du mode de rendu lorsque vous utilisez le composant dans le projet d’application.

Il existe deux façons de spécifier le mode de rendu pour une instance de composant:

<HeadOutlet @rendermode="InteractiveServer" />

@rendermode InteractiveServer

De cette façon, vous utilisez (re) le même composant dans Serveur de blazor et Blazor webassembly projets.

Si vous avez Multiples consommateurs Pour votre bibliothèque de composants partagés, vous voudrez peut-être utiliser Version sémantique (Major, mineur, patch) pour aider à la migration et à la compatibilité arrière.

Lorsque plusieurs équipes ou différents développeurs travailleront avec la bibliothèque de composants partagés, écrivez une bonne documentation. Vous pouvez utiliser des commentaires ou des outils XML tels que Docfx.

Expliquez ce que fait le composant et quoi limites il pourrait avoir. Par exemple, indiquez que le composant de registre valide la force du mot de passe à l’aide d’un service spécifique.

Vous pouvez également implémenter un exemple d’application qui utilise les composants de la bibliothèque partagée pour démontrer son utilisation et remarquer lorsque vous introduisez accidentellement un changement de rupture lorsque vous modifiez les composants.

Utilisez une configuration CI / CD appropriée pour publier de nouvelles versions de la bibliothèque des composants partagés.

Conclusion

Extraction de composants de blazor, de code CSS ou JavaScript dans un Bibliothèque de classe de rasoir Vous permet de partager les artefacts avec plusieurs applications Web Blazor.

Pour des scénarios simples, Références de projet direct sont suffisants. Cependant, lorsque plusieurs applications ou plus dépendent de votre bibliothèque de composants partagés, vous bénéficierez de la publication d’un Package Nuget vous permettant de version votre bibliothèque de composants.

Tu peux publier Votre package publiquement (en utilisant Nuget.org) ou à un flux privé, comme Artefacts azure.

Les plus grands avantages du partage des composants entre les applications sont:

• Temps de développement sauvé
• Meilleure cohérence
• Maintenabilité plus simple

Familiarisez-vous avec Bibliothèques de classe de rasoir Pour introduire une architecture maintenable et efficace à vos projets de blazor.

Si vous voulez en savoir plus sur le développement du blazor, vous pouvez regarder mon Cours crash gratuit du blazor sur youtube. Et restez à l’écoute du blog Telerik pour en savoir plus Bases du blazor.