Introduction
Création de SPA
Ces dernières années, j'ai participé à plusieurs projets d'application Web implémentés en tant qu'application d'une seule page (SPA) avec une interface API REST vers le backend. Dans tous ces cas, le SPA a été construit avec React et le modèle de conception Flux / Redux. Étant donné que mon expérience est fortement centrée sur .NET et Azure, l'API est généralement construite avec .NET Core. En raison des différences technologiques entre le SPA et l'API, React étant basé sur JavaScript / TypeScript dans le navigateur et .NET Core étant basé sur C # dans le cloud, un changement de contexte est toujours nécessaire lorsque vous travaillez dans les deux. (J'ai tendance à être plus backend mais aussi à m'intégrer à l'interface utilisateur à l'occasion.)
Entrez Blazor!
Blazor m'a enthousiasmé quand il est apparu avec la promesse d'unifier la base de code de l'interface utilisateur à l'API. Maintenant que .NET 5 amène Blazor à maturité pour des projets du monde réel, je suis prêt à me lancer. Alors, Blazor est-il prêt? Êtes-vous prêt?
En me basant sur notre expérience dans la création de ces applications Web avec React, je veux décrire dans quelle mesure Blazor s'intègre dans ces domaines clés:
- SPA Design Pattern
- UI Models and using the API
- Validation and Forms
- Composants
- Sécurité
- Journalisation et analyse
- Localisation
Modèle de conception de SPA
React et Redux
Redux et React sont devenus des incontournables lors de la construction d'un SPA. Le conteneur d'état prévisible fourni par Redux et la capacité de gérer cet état via des actions et des réducteurs sont primordiaux. Redux a été spécialement conçu pour bien fonctionner avec React liant l'interface utilisateur en tant que fonctions de votre état, en la mettant à jour en réponse aux actions.
Fluxor for Blazor
Avec Blazor, le même modèle de conception est préféré. Flux (de Facebook) est le modèle de conception sur lequel Redux est basé. Ce modèle est fourni par Fluxor pour l'application Blazor. Les concepts d'un magasin géré avec des réducteurs, des répartiteurs et des actions existent tous en C # sans avoir besoin de beaucoup de code.
De plus, Fluxor inclut une extension de navigateur Redux DevTools (Chrome & Edge) qui facilite débogage en donnant accès à l'état actuel ainsi qu'à l'état antérieur dans une navigation chronologique. C'est un excellent outil pour voir ce qui se passe lorsque des actions se produisent dans l'interface utilisateur.
Voici un exemple de code d'une page Blazor simple utilisant l'état avec des actions de l'interface utilisateur et un répartiteur.
Index.razor.cs (code-behind)
Références:
UI Models and using the API
Avec Fluxor, Blazor peut atteindre la parité avec React / Redux. Mais l’état de l’application devra être composé d’objets pour les différentes pages. De plus, les actions interagiront avec l'API via des routes. Les deux peuvent être accomplis en codant manuellement des classes C # pour les modèles et en mappant les points de terminaison de l'API. En pratique, il existe un meilleur moyen, la génération de code.
NSwag
Pour React SPA, il est courant d’utiliser les outils NSwag pour générer des DTO et des actions à partir de l’API basés sur la spécification OpenAPI. Cela se fait avec les actions PostBuild pour le projet API .Net Core. Avec une solution React, ceux-ci généreront TypeScript. La génération de code s'applique également à Blazor, mais elle créera des classes C #.
Exemple d'actions PostBuild
La première commande crée la spécification OpenAPI swagger.json à partir de les contrôleurs de l'API. Le second crée un client C # avec une classe DTO et une classe «proxy» utilisant HttpClient pour exécuter des appels vers toutes les routes API avec les types de requête et de réponse appropriés. Ceci est idéal pour React et Blazor puisque le code d'interface utilisateur réel peut désormais référencer les DTO dans le magasin d'état et avec les actions nécessaires.
One Model
] Accélérez votre intranet SharePoint avec Rise
Découvrez comment tirer le meilleur parti de votre investissement dans Office 365 avec Rise, l'offre Intranet-as-a-Service de Perficient en réduisant la durée de votre projet intranet avec des solutions prêtes à l'emploi, en diminuant le risque de votre projet et l'augmentation de la valeur de votre intranet.
Un inconvénient des DTO générés ci-dessus est la duplication des modèles existants dans l'API (domaine de la solution). Contrairement à React utilisant TypeScript, Blazor utilise du code C # .Net natif. Cela apporte la promesse d'unifier la base de code à la réalité! Désormais, la génération de code NSwag peut être modifiée pour ne pas créer de classes DTO (il suffit de créer le proxy HttpClient) et plutôt référencer une bibliothèque de classes de modèles de domaine contenant les mêmes classes de modèles que celles utilisées par l'API.
Références:
Validation and Forms
Règles de validation
Maintenant que le projet d'interface utilisateur Blazor utilise les mêmes modèles de domaine que l'API, l'interface utilisateur peut également exploiter une logique commerciale et de validation commune. Cela peut être fait simplement avec DataAnnotations avec les modèles de domaine. Avec React, une validation côté client similaire nécessiterait un code séparé et redondant.
Exemple de modèle avec DataAnnotations
Forms
Blazor développe également le modèle et l'utilisation de la validation avec Forms . En utilisant les composants de formulaire au lieu de simples composants de l'interface utilisateur, la validation sera automatiquement effectuée et les résultats seront affichés dans un composant de synthèse. L'exemple ci-dessous montre la même page d'index simple en utilisant un formulaire.
Index.razor without form
Index.razor en utilisant le formulaire
Références:
Composants
React et Blazor sont tous deux des frameworks d'interface utilisateur orientés composants, ce qui signifie que vous pouvez composer une page de composants. Les composants peuvent être simples, complexes, prêts à l'emploi, 3 rd ou personnalisés. Ceci est idéal pour la réutilisation et la cohérence entre une seule application ou au-delà d'une organisation.
Bibliothèques de composants
Blazor est plus jeune que React et certaines autres solutions d'interface utilisateur SPA, mais il mûrit rapidement avec de nombreuses 3 rd les parties ont fourni des bibliothèques de composants. Celles-ci vont des plus petites collections open source aux grandes offres commerciales. Indépendamment des exigences de l'application, il est probable qu'il existe des composants Blazor à utiliser qui éliminent le besoin de créer les vôtres.
Exemples de bibliothèques:
- Blazored
- Blazorise
- DevExpress Blazor Components
- MatBlazor
- MudBlazor
- Composants Radzen Blazor
- Interface utilisateur Telerik pour Blazor
Composants personnalisés et bibliothèques:
Les composants Blazor peuvent être créés à partir de zéro et peuvent encapsuler d'autres composants. Ceux-ci utilisent la même syntaxe de rasoir et le même code C # auxquels nous sommes habitués. Celles-ci peuvent également être des packages dans une bibliothèque pour être partagés et / ou publiés via nuget si nécessaire.
Sécurité
Jusqu'à présent, je me suis concentré sur les problèmes d'interface utilisateur puisque Blazor est tout au sujet de l'interface utilisateur. Cependant, en tant qu'architecte de solutions, je m'en voudrais de ne pas aborder certaines des préoccupations transversales importantes. Le plus important serait la sécurité. La sécurité pour un SPA est également devenue quelque peu standard (comme l'utilisation de React / Redux / API). Cette approche typique consiste à utiliser OpenID Connect (OIDC) qui est basé sur le protocole OAuth 2.0.
Autorisation
Une autorisation peut être demandée pour l'application Blazor entière ou au niveau de la page. Les deux cas appliquent l '@attribute [Authorize] comme indiqué ci-dessous.
Autorisation au niveau de l'application via _Imports.razor
Authentification
Blazor inclut la bibliothèque d'authentification qui fournit une authentification basée sur des jetons basée sur des jetons Web JSON (JWT). La bibliothèque d'authentification fournit une authentification transparente avec les backends ASP.NET Core et intègre ASP.NET Core Identity avec l'autorisation d'API.
La sécurité est un sujet plus vaste que ce que cet article ne permet, mais Blazor est bien placé pour prendre en charge les besoins d'un backend SPA authentification et autorisation de l'interface utilisateur. Pour plus de détails, reportez-vous à la référence ci-dessous.
Références:
Journalisation et analyse
Comme pour le reste de l'application, l'interface utilisateur de Blazor peut bénéficier de l'inclusion du traçage des informations et des exceptions après le déploiement. En outre, l'interface utilisateur dépendra probablement d'une analyse de l'utilisation. Heureusement, ces problèmes ont des solutions.
Journalisation
Dans ma récente expérience avec React SPA, Application Insights a été utilisé dans le front-end pour fournir des moyens de retracer les informations et les exceptions initiées dans le code TypeScript. La même chose peut être faite avec l'application Blazor via le package nuget répertorié ci-dessous. Il est intéressant de noter qu'à l'heure actuelle, cela est fourni par un tiers rd et non par Microsoft. Cela peut changer à l'avenir. Cependant, tel qu'il existe, le package fournit les capacités nécessaires pour suivre les traces, les exceptions et les métriques. Il fournit également un suivi des mesures basé sur le temps.
Analytics
De même, Google Analytics s'est avéré être un ajout précieux aux applications React SPA. De même, la même chose peut être faite avec une application Blazor et le package nuget répertorié ci-dessous. Lorsqu'il est utilisé, GA suivra les événements par défaut et peut être explicitement appelé via le code si nécessaire.
Références:
Localisation
La localisation n'est pas toujours une exigence pour chaque application, mais quand elle est avec .Net Core là est généralement une utilisation de IStringLocalizer pour effectuer des traductions. Blazor prend entièrement en charge ce côté client ainsi que pendant les appels d'API. Cela permet aux itinéraires d'API de localiser la réponse de contenu selon les besoins de la culture / langue de l'utilisateur, de la même manière qu'un React SPA le ferait. Cela permet également la traduction du code côté client si nécessaire.
Références:
Résumé
Blazor est là! Blazor est prêt! Je suis tout excité! Blazor est plus récent dans le paysage SPA, mais coche de nombreuses cases à choisir dans le cadre de la solution. Il y a des zones (principalement en raison du temps plus court sur scène) où il est en retard sur React. Cependant, il existe des domaines clés qui, bien qu'ils soient relativement nouveaux, dépassent React – modèles, validation, unité de base de code pour n'en nommer que quelques-uns. Donc, à mon humble avis, si votre plate-forme et / ou votre expérience est .Net Core, Blazor est un OUI pour la prochaine application Web.
