9 meilleures pratiques pour créer des applications Web Blazor

Dans cet article, nous apprenons neuf bonnes pratiques pour créer des applications Web Blazor. Ces meilleures pratiques s’appuient sur une expérience concrète de collaboration avec Blazor depuis quelques années.

1. Comprendre le cycle de vie des composants

La première étape et, d’après mon expérience, la plus importante lors de l’apprentissage de Blazor consiste à bien comprendre le cycle de vie des composants.

Blazor utilise un système de rendu orienté composants similaire à d’autres frameworks d’applications Web modernes tels que Angular ou React.

En savoir plus sur Création d’un composant Blazor dans un autre article antérieur de la série Blazor Basics.

En plus d’apprendre à implémenter les composants Blazor, il est important de comprendre quand un Le composant Blazor est automatiquement restitué et comment contrôler ce comportement.

Par exemple, nous pouvons remplacer le ShouldRender méthode de cycle de vie pour gérer l’actualisation de l’interface utilisateur. Si la méthode renvoie vrai, le composant est restitué.

2. Trouvez la bonne taille de composant

L’un des plus grands défis du développement d’interfaces utilisateur orientées composants consiste à décider quand diviser votre code en plusieurs composants.

Ce qui fonctionne pour moi, c’est que je commence simplement. Je crée d’abord un composant de page routable et j’écris tout le code directement à l’intérieur de ce composant.

À un moment donné, le code s’agrandit et je me rends compte qu’une partie du code n’a rien à voir avec l’autre partie. Par exemple, la gestion des formulaires n’a rien à voir avec le rendu d’un tableau rempli d’informations. À ce stade, je décide de diviser les composants, d’extraire les composants enfants et de transformer le composant page en un orchestrateur de plusieurs composants enfants.

Il n’y a pas de bien ou de mal lors de la division de composants, et il faut de l’expérience pour avoir une idée de ce qui fonctionne le mieux. Cependant, l’une des lignes directrices qui me convient le mieux est que j’extrait ce qui va ensemble et que je valorise davantage la cohésion que la taille (le nombre de lignes de code).

3. Implémenter le mode de rendu agnostique pour les composants Blazor

Avec l’introduction des modes de rendu dans .NET 8, nous obtenons beaucoup plus de flexibilité pour les applications Blazor par rapport aux versions précédentes.

Par exemple, nous pouvons implémenter une application Web entièrement rendue par un serveur sans aucune interactivité. Ou nous pouvons mélanger et faire correspondre l’interactivité de Blazor Server et Blazor WebAssembly dans une seule application.

Pour permettre une architecture flexible, je recommande fortement de configurer les composants Blazor pour qu’ils soient indépendants du mode de rendu.

Qu’est-ce que cela signifie? Cela signifie que nous voulons éviter de définir le type d’interactivité à l’intérieur d’un composant de niveau inférieur. Au lieu de cela, nous souhaitons définir le mode de rendu lors de l’utilisation du composant dans un composant de niveau supérieur.

Cela permet à un composant d’être utilisé dans le cadre d’une application d’interactivité Blazor Server et Blazor WebAssembly.

4. Apprenez à gérer correctement les événements

Découvrez comment lier des méthodes C# à des événements déclenchés par des éléments HTML. Il s’agit du mécanisme fondamental pour implémenter des gestionnaires onClick pour les boutons ou pour soumettre des gestionnaires pour les formulaires HTML.

Lors de l’inscription à des événements .NET, tels que le LocationChanged événement de la NavigationManager classe, assurez-vous de toujours vous désabonner de l’événement lorsque le composant est supprimé. Dans le cas contraire, le composant ne sera pas détruit par le Éboueur.

@implements IDisposable
@inject NavigationManager NavigationManager

protected override void OnInitialized()
{
  NavigationManager.LocationChanged += LocationChanged;
}

void LocationChanged(object sender, LocationChangedEventArgs e)
{
  System.WriteLine("Location changed");
}

void IDisposable.Dispose()
{
  NavigationManager.LocationChanged -= LocationChanged;
}

Lorsqu’il s’agit de communication entre les composants, Rappels d’événements sont le moyen standard d’appeler un rappel sur le composant parent à partir d’un composant enfant.

5. Choisissez une gestion d’état appropriée

Choisissez des techniques de gestion d’état appropriées en fonction de la complexité de l’application.

Blazor propose différentes options de gestion de l’état. Les paramètres des composants sont les plus simples, suivis des valeurs en cascade et de l’extraction de l’état dans des implémentations de services dédiées.

Pour les grandes applications, une bibliothèque de gestion d’état comme Je coule ou un autre conteneur d’état global pourrait être une option. Cependant, soyez conscient des défis que la gestion globale des états apporte à votre application.

6. Organisation et structure du code polonais

Utilisez une structure de code propre, claire et organisée. Par exemple, regroupez les composants associés dans des dossiers et placez les services et les pages dans des dossiers logiques.

Suivez également les meilleures pratiques en matière de dénomination des composants, telles que les conventions de dénomination et les préoccupations distinctes en extrayant les composants pour améliorer la maintenabilité de l’ensemble de l’application.

Le nouveau modèle d’application Web Blazor unique dans .NET 8 contient un bon point de départ. Assurez-vous cependant de réorganiser votre code lorsque votre application se développe de manière significative dans un domaine ou un autre. Vous ne voulez pas rechercher constamment des éléments connexes de votre code.

7. Sécurisez votre candidature

Renseignez-vous sur les meilleures pratiques en matière de sécurité Web, telles que OSWASP Top 10et mettre en œuvre des mesures, notamment lorsqu’il s’agit de données sensibles.

Utilisez l’authentification et l’autorisation ASP.NET Core pour protéger l’accès à vos points de terminaison et à vos pages Blazor. Stockez uniquement les informations nécessaires à l’exécution de vos actions commerciales. Utilisez toujours HTTPS.

Ne stockez pas vous-même les mots de passe des utilisateurs. Utilisez plutôt un fournisseur de services d’authentification. S’il n’y a pas d’autre option et que vous devez stocker vous-même des comptes d’utilisateurs individuels, assurez-vous de hacher correctement les mots de passe à l’aide d’un algorithme de hachage puissant, tel que BCrypte.

8. Utiliser une gestion et une journalisation appropriées des erreurs

Implémentez une solution robuste de gestion des erreurs pour gérer les exceptions. Assurez-vous que vos journaux contiennent des informations pertinentes pour résoudre les problèmes dans votre code.

Dans le même temps, évitez de consigner des informations sensibles et remplacez-les par des espaces réservés.

Vous pouvez utiliser l’infrastructure de journalisation ASP.NET Core ou ajouter une solution plus flexible et plus performante, telle que Sérilog.

9. Gardez les choses aussi simples que possible

L’un des conseils les plus sous-estimés en matière de développement de logiciels en général, mais aussi en matière de développement Blazor, est de rester simple.

Il existe de nombreuses implémentations complexes que des solutions simples pourraient remplacer. Je m’efforce toujours de mettre en œuvre la solution la plus simple possible à un problème donné.

Par exemple, lorsque je dois transmettre une valeur à un composant, je commence par utiliser un paramètre de composant. Pourquoi implémenter un service complexe et l’injecter dans le composant enfant alors que vous pouvez résoudre le problème avec un simple paramètre de composant ?

Conclusion

L’application des neuf bonnes pratiques mentionnées dans cet article vous aidera à écrire des applications Web Blazor maintenables et extensibles.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.