Une comparaison de Blazor et Angular en ce qui concerne le développement Web moderne – un examen des avantages et des inconvénients. Blazor s'empile-t-il?

Blazor WebAssembly a atterri et offre la possibilité d'écrire des applications Web modernes à l'aide de C #, mais comment se compare-t-il aux autres options plus établies pour créer des applications Web "modernes", telles que Angular ?

Aujourd'hui, nous allons jeter un bon coup d'œil à Blazor et voir comment il se compare à Angular.

Note: Vous souhaitez plutôt savoir comment Blazor se compare à React? Découvrez une comparaison de Blazor et React ici .

Plus précisément, nous allons explorer le fonctionnement des aspects suivants (pour Blazor et Angular):

• Getting started
• Building the UI [19659007] Passage de données entre les composants
• Manipulation des formulaires
• Routage
• Récupération de données à partir d'une API
• Avantages et inconvénients de chacun

Avant de creuser, il convient de noter que cet article se concentre sur Blazor WASM, qui s'exécute dans le navigateur à l'aide de WebAssembly. Cela dit, de nombreux points sont également valables si vous envisagez d'utiliser Blazor Server à la place.

Angular – Présentation en deux minutes

Angular est un framework JavaScript qui vous permet d'exécuter des applications Web clientes dans le navigateur, mais aussi créer des applications natives (mobiles) et de bureau.

D'une manière générale, votre application Angular comprendra de nombreux composants, écrits à l'aide de JavaScript (ou TypeScript) et décorés avec quelque chose que Angular désigne comme " »pour gérer des choses comme la liaison de votre balisage (HTML) à des données.

Le code que vous écrivez avec Angular ne peut pas s'exécuter directement dans le navigateur, vous avez donc besoin d'un compilateur pour transformer votre code en quelque chose que le navigateur peut exécuter.

Depuis Angular 9, l'option par défaut est d'utiliser le «compilateur d'avance» pour transformer votre code en JavaScript efficace dans le cadre d'un processus de construction / publication. Le navigateur peut ensuite télécharger et exécuter ce code JavaScript compilé.

Vous pouvez également utiliser le «compilateur juste à temps» pour compiler votre application dans le navigateur au moment de l'exécution.

Lorsqu'un utilisateur accède à votre application Angular, le moteur JavaScript du navigateur démarre pour exécuter le code de votre application.

Comment se compare Blazor?

Blazor est également un framework qui vous permet de créer des applications Web clientes qui s'exécutent dans le navigateur, mais en utilisant C # au lieu de TypeScript.

Lorsque vous créez une nouvelle application Blazor, elle arrive avec quelques packages soigneusement sélectionnés (les éléments essentiels nécessaires pour que tout fonctionne) et vous pouvez installer des packages supplémentaires à l'aide de NuGet.

À partir de là, vous créez votre app comme une série de composants, utilisant le langage de balisage Razor, avec la logique de votre interface utilisateur écrite en C #.

Le navigateur ne peut pas exécuter le code C # directement, donc tout comme l'approche Angular AOT, vous vous appuyerez sur le compilateur C # pour compilez votre code C # et Razor dans une série de fichiers .dll.

Pour publier votre application, vous pouvez utiliser la commande intégrée publish de dot net, qui regroupe votre application dans un certain nombre de fichiers (HTML, CSS, JavaScript et DLL ), qui peut ensuite être publié sur n'importe quel serveur Web pouvant servir des fichiers statiques.

Lorsqu'un utilisateur accède à votre application Blazor WASM, un fichier JavaScript Blazor prend le relais, qui télécharge le runtime .NET, votre application et ses dépendances avant d'exécuter votre application à l'aide de WebAssembly.

Blazor se charge ensuite de mettre à jour le DOM, de rendre les éléments et de transmettre les événements (tels que les clics de bouton) vers le code de votre application.

Création d'une nouvelle application angulaire

Angular possède sa propre CLI pour création de projets et génération de code d'application.

Vous pouvez l'installer en utilisant Yarn ou npm.

 npm install -g @ angular / cli

Lancer une nouvelle application consiste à exécuter cette commande.

 ng new my-app

La CLI vous propose quelques options à ce stade, vous demandant spécifiquement si vous souhaitez inclure le routage angulaire et le format de feuille de style souhaité (CSS, SCSS, etc.).

Ensuite, vous pouvez exécuter votre application à l'aide de cette commande.

 ng serve

Création d'une nouvelle application Blazor

Pour Blazor, vous pouvez utiliser Visual Studio ou .NET Core CLI (qui est inclus avec le SDK .NET Core).

 dotnet new blazorwasm
cd blazorwasm
dotnet run

Vous avez quelques autres options, comme la possibilité d'inclure une infrastructure pour authentifier les utilisateurs et d'héberger votre application Blazor dans une application Web ASP.NET, mais la commande ci-dessus est l'option la plus simple pour commencer.

Création de votre interface utilisateur avec Angular

Angular adopte une approche par composants pour créer votre interface utilisateur.

Par exemple, créons un simple composant Hello World qui permet à l'utilisateur d'entrer son nom pour un message d'accueil plus personnalisé.

Vous pouvez utiliser la CLI angulaire pour générer un nouveau composant.

 ng generate HelloWorld

Cela vous donne quatre fichiers:

• hello-world.component.css
• hello-world.component.html
• hello-world.component.spec.ts
• hello-world.component. ts

Par défaut, Angular s'appuie assez fortement sur TypeScript, qui est ensuite compilé en JavaScript normal pour s'exécuter dans le navigateur.

Nous pouvons créer une interface utilisateur simple Hello World …

hello-world. component.html

 Comment vous appelez-vous?
  

 Bonjour {{name}} 

Il s'agit d'un mélange de syntaxe HTML standard et angulaire pour gérer les événements DOM et afficher les données.

(keyup) = "onKey ($ event)" ordonne à Angular d'appeler un onKey chaque fois que l'utilisateur tape quelque chose dans la saisie de texte.

{{name}} utilise la syntaxe d'interpolation Angular {{}} pour afficher la valeur actuelle d'un champ name qui est déclaré dans le fichier hello-world.component.ts correspondant.

hello-world.component.ts

 import {Component, OnInit} de '@angular /coeur';

@Composant({
  sélecteur: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
la classe d'exportation HelloWorldComponent implémente OnInit {
  nom = '';

  ngOnInit (): void {
  }

  onKey (event: any) {
    this.name = event.target.value;
  }
}

Vous pouvez voir qu'il y a un peu de code standard ici.

Nous avons la déclaration @Component qui indique à Angular comment nous référencerons ce composant à partir d'autres composants (le sélecteur), où son interface utilisateur balisage (HTML) et styles (CSS) en direct.

Suit alors une classe TypeScript appelée HelloWorldComponent qui abrite notre logique de composant principal.

Cette classe implémente OnInit à partir de Angular bibliothèque principale qui, à son tour, nous oblige à implémenter une méthode ngOnInit dans notre classe.

Enfin, nous avons le champ name que nous utilisons pour stocker le nom entré, et la fonction onKey qui sera appelée lorsque nos utilisateurs saisissent quelque chose dans l'entrée de texte.

Pour afficher ce composant, nous devons le rendre quelque part dans notre application, ce que nous pouvons faire en utilisant le sélecteur que nous avons défini précédemment.

 Une brève introduction à Angular 

 

Avec tout cela en place (et en nous en tenant aux styles par défaut "prêts à l'emploi" d'Angular), nous obtenons un message d'accueil personnalisé fonctionnel, quoique légèrement fade!

En résumé, une interface utilisateur angulaire:

• Comprend un ou plusieurs composants
• Est généralement écrit en utilisant TypeScript ou JavaScript et des directives angulaires spéciales
• Fonctionne sur le moteur JavaScript du navigateur

Construire votre Interface utilisateur avec Blazor

Blazor adopte une approche très similaire à Angular dans la mesure où vous créez votre interface utilisateur à l'aide de composants, mais vous pouvez utiliser Razor et C # (au lieu des directives angulaires et JavaScript) pour écrire votre balisage et la logique de l'interface utilisateur.

Greeting.razor

 Comment vous appelez-vous? 

 Hello @Name 

@code {
    chaîne publique Name {get; ensemble; }
}

Cela fonctionne exactement de la même manière que l'exemple Angular lorsque vous l'exécutez dans le navigateur.

Nous avons un balisage à peu près similaire, mais cette fois nous avons utilisé la syntaxe de Blazor @bind pour lier notre entrée à une propriété appelée Nom .

Lorsque l'utilisateur entre son nom, la propriété Name sera mise à jour avec la valeur saisie.

Par défaut, Blazor se met à jour la valeur de Name sur le flou (lorsque nous avons cliqué sur la saisie de texte), nous avons donc ajouté @ bind-value: event = "oninput" pour qu'il mette à jour la propriété comme dès que nous commençons à taper.

Comme avec Angular, vous êtes maintenant libre de rendre ce composant où (et aussi souvent) que vous le souhaitez.

    Une brève introduction à Blazor ...

En résumé, une interface utilisateur Blazor:

• Comprend un ou plusieurs composants
• Est écrit en utilisant Razor et C # (ce qui prend votre balisage et vos données, et les combine ensemble)
• S'exécute sur WebAssembly dans le navigateur

Passing Data Around — Angular

Nous avons déjà vu une façon de gérer l'état dans les composants angulaires, en le stockant dans un champ (comme avec nom dans notre exemple Hello world).

Mais une autre approche courante consiste à passer des valeurs dans un composant .

Par exemple, vous pouvez choisir de transmettre un titre personnalisé lorsque vous déclarez une instance de notre composant Hello World …

Cela nous permet d'utiliser ce même composant à différents endroits, mais avec des titres différents pour chacun.

Angular rend cela possible en utilisant quelque chose appelé Input .

Nous pouvons modifier notre composant pour acceptez un titre en ajoutant un @Input à la classe HelloWorldComponent existante.

 classe d'exportation HelloWorldComponent implémente OnInit {

    @Input () titre: chaîne;

    // code existant
}

Nous pouvons maintenant passer une valeur ou un titre dans notre composant, mais il n'est encore rendu nulle part. Pour résoudre cela, nous pouvons utiliser la syntaxe d'interpolation d'Angular {{}} pour afficher la valeur de headline partout où nous voulons …

hello-world.component. html

 {{headline}} 

 Comment vous appelez-vous?
  

 Bonjour {{name}} 

Maintenant, lorsque nous l'exécutons dans le navigateur, nous verrons le titre personnalisé.

Passing Data Around – Blazor

En gros, Blazor a les deux mêmes options principales pour gérer l'état.

Vous pouvez stocker des données dans le composant lui-même en utilisant les propriétés (comme avec Name dans notre exemple) ou récupérer des données via des paramètres.

 @Headline 
 Comment vous appelez-vous? 

 Bonjour @Name 

@code {
    [Parameter]
    public string Headline {get; ensemble; }

    chaîne publique Name {get; ensemble; }
}

Ici, nous avons déclaré un paramètre Headline dans la section @code de notre composant.

Comme pour l'exemple angulaire, lorsque vous affichez Greeting ] vous pouvez passer un titre et il sera rendu en conséquence.

Manipulation des formulaires en angulaire

Manipulation keyup et des événements similaires fonctionnent très bien jusqu'à un certain point, mais il y a quelques limitations.

Par exemple, dans notre composant HelloWorld, si vous modifiez la valeur de nom par programmation dans la classe HelloWorldComponent cela ne sera pas reflété dans la saisie de texte.

Pour ces deux -way obligatoire nous avons besoin d'une approche différente.

Entrez l'humble formulaire HTML!

Angular a deux options principales pour gérer les formulaires:

• Reactive Forms
• Template Driven Forms

Arguably, Les formes réactives sont plus proches des formes de Blazor, c'est donc ce sur quoi nous allons nous concentrer ici. [19659003] Voici le balisage pour un formulaire réactif "contactez-nous" à titre d'exemple.

  

    
       Nom:
      
    
    
       Pensées?:
      
    
    

       Le nom est obligatoire.
    
    
  

Il y a un peu à décompresser ici.

Nous avons déclaré un FormGroup qui pointe vers un champ form correspondant dans le TypeScript de notre composant.

Les groupes de formulaires dans Angular gèrent les valeurs et l'état de validité des champs d'un formulaire.

Chaque contrôle de formulaire individuel (dans ce cas, chaque champ de saisie de texte) pointe vers son propre FormControl qui gère sa propre valeur et son statut de validité.

Nous avons utilisé (ngSubmit ) pour pointer ce formulaire vers une fonction onSubmit () qui sera appelée lorsque le formulaire est soumis.

Le code TypeScript pour ce formulaire ressemble à ceci:

 import {Component} from '@ angular / core';
importer {FormBuilder, FormGroup, Validators} depuis "@ angular / forms";

@Composant({
  sélecteur: 'app-contactez-nous',
  templateUrl: './contact-us.component.html',
  styleUrls: ['./contact-us.component.css']
})
classe d'exportation ContactReactiveComponent {
  formulaire: FormGroup;

  constructeur () {
    this.form = nouveau FormGroup ({
      nom: new FormControl ('', [Validators.required]),
      commentaires: nouveau FormControl ('')
    })
  }

  onSubmit () {
    console.log (`$ {this.form.value.name}: $ {this.form.value.comments}`);
  }

  get name () {return this.form.get ('name')};
}

Outre le passe-partout standard du composant angulaire, nous avons notre groupe de formulaires ( formulaire ).

Dans le constructeur, nous avons créé et affecté un nouveau groupe de formulaires à notre formulaire et a déclaré nos contrôles de formulaire individuels pour nom et commentaires .

 constructor () {
    this.form = nouveau FormGroup ({
        nom: new FormControl ('', [Validators.required]),
        commentaires: nouveau FormControl ('')
    })
}

Nous avons marqué nom comme champ obligatoire en utilisant Validators.required .

onSubmit enregistrera les valeurs du formulaire dans la console lorsque le formulaire est soumis.

Nous avions également besoin d'un moyen d'accéder à nom à partir de notre balisage de composant (pour afficher ou masquer conditionnellement les erreurs de validation) et cela est géré par cette ligne:

 get name () {return this.form .get ('nom')};

Manipulation des formulaires avec Blazor

En revanche, Blazor a un mécanisme intégré beaucoup plus simple pour gérer les données de formulaire et la validation, en utilisant quelque chose appelé EditForm .

Voici le balisage pour un formulaire équivalent à notre exemple angulaire.

 @using System.ComponentModel.DataAnnotations


    
    
         Nom:
        
    
    
         Pensées?:
        
    
    
    

Nous utilisons le composant InputText de Blazor pour nos champs de saisie.

Techniquement, il est tout à fait possible d'utiliser des éléments et des formulaires HTML standard avec Blazor, mais l'utilisation des contrôles intégrés rend certaines choses beaucoup plus facile (la validation en étant une, comme nous le verrons dans un instant).

@ bind-Value s'occupe à la fois de lire la valeur d'un champ et de la mettre à jour lorsqu'un utilisateur saisit une nouvelle valeur .

Le formulaire lui-même est attaché à un Model de notre choix (où les valeurs du formulaire vivront) et nous lui avons dit d'invoquer une méthode appelée HandleValidSubmit lorsque le formulaire est soumis (et est valide).

Notez que nous avons inclus un DataAnnotationsValidator et ValidationSummary ; ces composants câblent le formulaire pour respecter automatiquement les règles de validation que nous avons configurées sur notre modèle.

Voici le reste du code:

 @code {
    protected ContactUsModel FormModel {get; ensemble; } = nouveau ContactUsModel ();

    Handle de tâche asynchroneValidSubmit ()
    {
        // publier sur votre API
        Console.WriteLine ($ "{FormModel.Name}: {FormModel.Comments}");
    }

    classe protégée ContactUsModel
    {
        [Required]
        chaîne publique Name {get; ensemble; }
        public string Commentaires {get; ensemble; }
    }
}

La classe ContactUsModel pourrait vivre n'importe où dans notre projet.

Nous avons une propriété FormModel et la méthode HandleValidSubmit .

Quand quelqu'un remplit le formulaire, s'ils ont satisfait aux règles de validation (un Nom a été entré), alors HandleValidSubmit sera invoqué.

Sinon, le ValidationSummary sera utilisé pour montrer quels champs ont des erreurs de validation.

Routage en angulaire

Dans la plupart des applications, vous voudrez être capable de gérer les routes.

Ainsi, par exemple, si quelqu'un accède à "/ about", il peut voir votre "page" about (qui affichera en fait un ou plusieurs composants).

Angular gère les routes via @ angular / router et par par défaut, il recherche les routes définies dans un tableau dans app-routing.module.ts .

 import {N gModule} de '@ angular / core';
import {Routes, RouterModule} depuis '@ angular / router';
importer {HelloWorldComponent} depuis "./hello-world/hello-world.component";

routes const: Routes = [
  { path: 'greetMe', component: HelloWorldComponent}
];

@NgModule ({
  importations: [RouterModule.forRoot(routes)],
  exportations: [RouterModule]
})
classe d'exportation AppRoutingModule {}

Dans cet exemple, toute requête adressée à / greetMe tentera désormais de rendre notre HelloWorldComponent .

Mais cela n'apparaîtra nulle part tant que nous ne donnerons pas un peu à Angular

Plus précisément, nous devons inclure une sortie de routeur dans le modèle principal de notre application, quelque chose comme ceci dans app.component.html :

Avec cela en place, la navigation vers / greetMe entraînera l'affichage de HelloWorldComponent à la place de notre élément router-outlet .

Routing dans Blazor

Blazor expédie le routage "hors de la boîte" et s'appuie sur le moteur de routage existant d'ASP.NET.

Vous pouvez facilement rendre n'importe quel composant Blazor "routable" en ajoutant une déclaration @page en haut de votre composant …

 @page "/ GreetMe"


    Bienvenue!

Désormais, toute demande adressée à http: // / GreetMe rendra ce composant.

Vous pouvez également transmettre des données via l'itinéraire, comme ceci:

 @page "/ GreetMe / {Name} "


    Bienvenue @Name!


@code {
    [Parameter]
    chaîne publique Name {get; ensemble; }
}

Avec ceci, toute demande à http: // / GreetMe / Jon rendra un message d'accueil plus personnalisé (enfin, si votre nom est Jon selon cet exemple!).

Récupération Données d'une API utilisant Angular

Angular préconise l'utilisation de services pour récupérer ou enregistrer des données dans vos composants.

Le concept est que le composant lui-même ne doit pas connaître les détails spécifiques de la manière dont les données sont extraites ou enregistrées.

Vous pouvez générer un service à l'aide de la CLI angulaire:

 ng generate service ticket

Voici un exemple de service pour récupérer une liste de tickets d'assistance:

ticket.service.ts

 import {Injectable} from '@ angular / core';
import {HttpClient} depuis "@ angular / common / http";
import {Observable} de "rxjs";

@Injectable ({
  providedIn: 'racine'
})
classe d'exportation TicketService {

  constructeur (http privé: HttpClient) {
  }

  getTickets (): Observable  {
    return this.http.get  ('api / Tickets');
  }
}

billet de classe {
  id: numéro;
  nom: chaîne;
  résumé: chaîne;
}

Cela s'appuie sur l'injection de dépendances Angular pour introduire une instance de HttpClient .

Nous pouvons alors faire l'appel HTTP, mappant la réponse à un tableau Observable de tickets.

Nous pouvons maintenant utiliser getTickets dans notre composant.

ticket-list.component.ts

 classe d'exportation TicketListComponent implémente OnInit {

  billets: Ticket [];

  constructeur (ticketService privé: TicketService) {}

  ngOnInit (): void {
    this.ticketService.getTickets ()
      .subscribe (tickets => this.tickets = tickets);
  }

}

Nous injectons une instance de TicketService souscrivons à son observable getTickets et affectons le tableau résultant au champ tickets .

Enfin, nous pouvons boucle sur ce tableau dans le modèle de notre composant, en utilisant * ngFor .

 

  {{ticket.name}}

Récupération de données à partir d'une API à l'aide de Blazor

Blazor s'appuie sur .NET HttpClient pour récupérer des données.

Sous le capot, cela renvoie à l'API native fetch mais vous pouvez généralement l'ignorer et utiliser l'abstraction.

Voici un exemple:

 @using System.Net.Http
@inject HttpClient Http

@foreach (var ticket dans _tickets) {
    

        @ ticket.Title
    
}

@code {
    billets privés [] _tickets;

    Tâche async de remplacement protégé OnInitializedAsync () {
        _tickets = attend Http.GetFromJsonAsync  ("api / Tickets");
    }
}

Comme avec Angular, vous pouvez facilement le déplacer vers un service séparé et l'injecter dans votre composant (pour éviter d'appeler directement HttpClient ).

 @inject TicketService Tickets

Blazor a une astuce utile dans sa manche (par rapport à Angular ou à tout autre framework frontal existant) en ce qui concerne l'interaction entre votre interface utilisateur et API.

Parce que vous écrivez votre application Web en C #, vous peut utiliser les mêmes modèles de données dans votre code frontend et backend (API).

Disons, par exemple, que vous devez récupérer une liste de personnes.

Le modèle Person vit dans une bibliothèque de classes partagée.

Vos projets API Web et Blazor Client font référence à cette bibliothèque partagée.

Maintenant, votre API peut être fortement saisies, renvoyant (et acceptant) des données à l'aide du modèle Person .

Les données sont toujours sérialisées et envoyées "par fil" en tant que données JSON, mais votre application Blazor peut désérialiser les données JSON en utilisant même modèle Person qui a été utilisé pour le sérialiser dans le premier

Maintenant, si vous apportez des modifications majeures à votre modèle Person vous verrez immédiatement des erreurs de compilation si vous avez introduit des modifications majeures affectant l'utilisation du modèle par le client ou le serveur. [19659209] Avantages et inconvénients

Donc, tout cela nous amène à la question évidente, laquelle choisir?

Bien entendu, cela dépendra de vos propres antécédents, compétences et préférences.

Nous avons vu qu'il existe un certain nombre de similitudes entre les deux, mais aussi quelques différences clés.

Angular

Angular vous donne tous les outils dont vous avez besoin pour créer des applications Web complexes, composées de nombreux des composants plus petits.

Mais cela nécessite également que vous appreniez ses propres abstractions hautement avisées afin de construire votre application «à la manière angulaire».

Par exemple, vous devrez comprendre comment Reactive et Les formulaires basés sur des modèles fonctionnent (et les différences entre eux) pour choisir la meilleure option pour votre scénario particulier.

La prise en charge native de TypeScript est vraiment utile pour détecter les erreurs qui pourraient autrement se produire à l'exécution (vous connaissez le tri, ces erreurs qui surgissent quand un "simple changement de nom de propriété" se transforme en un après-midi de taupe!)

Mais TypeScript apporte également sa propre courbe d'apprentissage, qui, associée à l'apprentissage des nuances du vaste cadre d'Angular , vous donne un raide colline à gravir, surtout si vous cherchez simplement à créer une petite application Web "simple" pour commencer.

Angular Pros

• Cadre bien établi
• Tout ce dont vous avez besoin est inclus
• La ​​prise en charge de TypeScript est intégrée et offre une sécurité de type fiable
• Vous pouvez créer des applications Angular pour le Web, le bureau natif et le mobile natif

Angular Cons

• TypeScript apporte sa propre courbe d'apprentissage
• Que vous utilisiez TypeScript ou non, vous êtes essentiellement obligé d'écrire vos composants en utilisant JavaScript (soit un avantage ou un inconvénient selon vos sentiments envers JavaScript!)
• Angular lui-même comporte une courbe d'apprentissage abrupte
• Angular's Les docs, bien que complets, sont remplis de termes et de concepts spécifiques à Angular qui peuvent être difficiles à digérer et à comprendre à la première lecture
• Le code du composant et le balisage que vous écrivez sont généralement plus détaillés que l’équivalent de Blazor

Blazor [19659214] Blazor offre quelques avantages, surtout si vous venez d'un arrière-plan C #.

Vous pouvez apporter vos compétences, votre expérience et vos connaissances C # existantes à l'équipe d'applications Web modernes!

Vous peut s'en tenir à l'écosystème que vous connaissez déjà (NuGet, l'outillage dotnet Visual Studio ou VS Code).

Vous pouvez partager des modèles entre le client et l'API backend. C'est un gros problème et il est beaucoup plus difficile de casser votre application par inadvertance.

Le routage, la gestion des formulaires et la validation sont intégrés, mais utilisent généralement des abstractions plus simples que les équivalents d'Angular.

Vous pouvez toujours appeler JavaScript si vous

Blazor Pros

• Ecrire des applications Web modernes à l'aide de C #
• Client intégré de gestion de formulaire, de validation, de routage et de récupération de données
• Possibilité d'importer du code tiers via les packages NuGet
• Vous pouvez utiliser les outils que vous connaissez déjà (Visual Studio, VS Code, Rider, etc.)
• Peut être déployé sous forme de fichiers statiques
• Les modèles partagés réduisent considérablement les risques de rupture accidentelle du client [19659007] Vous pouvez utiliser le même modèle de composant dans le navigateur (en utilisant WebAssembly) ou sur le serveur (en utilisant Blazor Server)
• Le support pour utiliser le même modèle de composant Blazor sous Windows et pour le développement mobile arrive

Blazor Contre

• Nouveau cadre travail, prendra du temps pour se coucher et gagner en adoption
• Téléchargement initial important du framework .NET sur le navigateur lors du premier chargement
• L'outillage est également jeune et évoluera avec le temps
• Moins de ressources disponibles sur Internet (tutoriels, etc. .) comparé à Angular
• Dépend de la prise en charge de WebAssembly dans le navigateur (bien que ce soit désormais largement pris en charge)
• Le téléchargement initial pour le runtime .NET est relativement important

Une chose à signaler ici est le premier heure du téléchargement.

Lorsqu'une personne accède à votre application Blazor WASM pour la première fois, son navigateur télécharge une version du framework .NET ainsi que les fichiers de votre application.

Une fois qu'ils ont ces fichiers, ils n'en ont plus besoin pour les télécharger à nouveau, mais cela signifie que vous verrez probablement un indicateur "chargement …" la première fois.

L'équipe de Microsoft a fait beaucoup de travail pour réduire cette taille de téléchargement initiale, mais naturellement cela signifie que Blazor est mieux adapté à certaines applications Web que d'autres.

Vous ne voudriez probablement pas l'utiliser pour des choses comme les pages de destination de produits où il n'y a pas ou peu de logique métier et où il est impératif que la page se charge le plus rapidement possible.

Mais, pour toutes les applications de secteur d'activité, ceci Il est peu probable que le téléchargement initial pose un problème majeur.

À vous de jouer!

Alors, pensez-vous utiliser Blazor? Est-ce un candidat ou votre prochain projet, ou allez-vous rester avec Angular pour le moment?

Le choix vous appartient!