Site icon Blog ARC Optimizer

Blazor vs Vue pour les développeurs Web


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

C # s'exécutant dans le navigateur, dites-vous?

Blazor WebAssembly a été publié et apporte une alternative à JavaScript pour créer des applications Web modernes et réactives qui s'exécutent dans le navigateur.

Mais comment se compare-t-il à d'autres options plus établies pour créer des applications Web "modernes" ?

Dans cet article, nous comparerons Blazor et Vue.js.

Note: Vous souhaitez savoir comment Blazor se compare à React ou Angular? Découvrez une comparaison de Blazor et React ici et une comparaison Blazor of Angular ici .

Plus précisément, nous examinerons ces domaines clés (pour Blazor et Vue):

  • Mise en route
  • Construction de l'interface utilisateur
  • Transmission de données entre les composants
  • Gestion 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.

Explorez Blazor: Guide de démarrage rapide gratuit de la productivité avec Blazor. Obtenez notre guide du débutant ebook

Vue — La vue d'ensemble de deux minutes

Vue est un framework JavaScript .

Vue se targue d'être "progressivement adoptable".

Dans son mode le plus simple , vous pouvez simplement inclure les scripts principaux de Vue dans votre application, puis commencer à construire vos composants.

Au-delà de cela, et pour les applications plus complexes, vous pouvez utiliser la propre CLI de Vue pour créer (et finalement publier) un projet Vue. [19659003] Comme avec la plupart des autres frameworks JavaScript, les applications Vue sont construites comme une série de petits composants que vous pouvez ensuite composer ensemble pour créer de plus grandes fonctionnalités (et finalement des applications entières).

Vous allez généralement écrire vos applications Vue en utilisant HTML, CSS et JavaScript (ou TypeScript).

Comment se compare Blazor?

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

Lorsque vous créez un nouveau Blazor app, il arrive avec quelques packages soigneusement sélectionnés (les éléments essentiels pour que tout fonctionne) et vous pouvez installer des packages supplémentaires à l'aide de NuGet.

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

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 à l'aide de WebAssembly.

Blazor s'occupe 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 Vue

Il existe deux façons principales de démarrer en utilisant Vue. [19659003] Tout d'abord, vous pouvez simplement référencer les scripts (via un CDN) et commencer à ajouter des composants à n'importe quelle page HTML d'une application existante.

Alternativement, vous pouvez installer la CLI Vue: 

 npm install -g @ vue / cli

Puis créez et lancez un nouveau projet: 

 vue create hello-world
cd bonjour-monde
npm run serve

Lorsque vous utilisez vue create vous aurez le choix entre plusieurs préréglages ou vous pouvez choisir parmi des options telles que l'activation de la prise en charge de TypeScript, des tests unitaires, etc.

Création d'un nouveau Blazor Application

Pour Blazor, vous pouvez utiliser Visual Studio ou lancer un nouveau projet via l'invite de commande. 

 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.

Construire votre interface utilisateur avec Vue

Vue est une question de modèles. Voici un exemple: 


    
     Bonjour {{name}}

Le modèle est contenu dans notre #app div.

Nous créons ensuite une nouvelle application Vue et lui disons d'utiliser la div #app comme élément cible. [19659003] v-model établit une liaison entre l'entrée de texte et la propriété de données nom .

Par conséquent, nom reflétera toujours ce que l'utilisateur entre dans la saisie de texte, et si la valeur de nom est modifiée par programmation, cela sera reflété dans la saisie de texte.

Nous avons utilisé la syntaxe {{name}} pour rendre la valeur actuelle de nom afin que nous puissions la voir changer instantanément lorsque nous saisissons de nouvelles valeurs dans l'entrée de texte.

[19659003] Cela vous permettra d'être opérationnel, mais dans la pratique, la plupart des applications seront constituées de plusieurs composants, composés ensemble pour créer de plus grandes fonctionnalités.

salutation dans un composant réutilisable, nous avons besoin d'une syntaxe légèrement différente. 

 Vue.component ('salutation', {
    données: function () {
        revenir {
            Nom: ''
        }
    },
    modèle: `
        

            
             Bonjour {{name}} 
        

     `
})

Il existe quelques différences subtiles entre un composant Vue et l'application avec laquelle nous avons commencé:

  • Nous avons déplacé le balisage dans un attribut template
  • data dans un Le composant est exprimé comme une fonction qui renvoie un objet

Avec ces changements, nous pouvons maintenant rendre ce composant où nous voulons dans notre application.

En résumé, une application Vue:

  • Peut être ajoutée à une page HTML existante
  • Comprend une application Vue et éventuellement un ou plusieurs composants
  • Est écrite en utilisant JavaScript et HTML
  • S'exécute en JavaScript dans le navigateur

Création de votre interface utilisateur avec Blazor

Blazor vous encourage également à décomposer votre interface utilisateur en plusieurs composants plus petits.

Contrairement à Vue, vous écrivez vos composants en utilisant Razor et C #. 

 

 Bonjour @Name 

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

Nous avons à peu près le même balisage, mais cette fois, nous avons utilisé la syntaxe de Blazor @bind pour lier notre entrée à une propriété appelée Name .

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

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

Vous pouvez maintenant rendre ce composant où vous le souhaitez dans votre demande … 

 

    Une brève introduction à Blazor ...

En résumé, une interface utilisateur Blazor:

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

Passing Data Around — Vue

Nous avons déjà vu une façon dont Vue peut gérer les données, en stockant nom directement dans notre composant de voeux. 

 var app = new Vue ({
    el: '#app',
    Les données: {
        Nom: ''
    }
})

L'autre option courante consiste à transmettre des données à un composant.

Supposons que nous voulions passer un titre à notre composant de message d'accueil:

Vue permet cela via quelque chose appelé props . 

 Vue.component ('salutation', {
    données: function () {
        revenir {
            Nom: ''
        }
    },
    accessoires: ['headline'],
    modèle: `
        

            
 {{headline}} 

            
             Bonjour {{name}} 
        

     `
})

Nous avons ajouté un tableau props au composant: 

 props: ['headline'],

Cela fait accepter à notre composant une valeur headline que nous rendons ensuite en utilisant la syntaxe d'interpolation standard

{{headline}}

.

Les accessoires sont la clé pour déverrouiller les composants réutilisables, ce qui rend il est possible d'utiliser le même composant dans de nombreux scénarios différents, en passant des valeurs différentes à chaque fois.

En utilisant les données et props fonctionne bien pour de nombreux scénarios, vous pourriez avoir besoin d'un état plus centralisé dans vos applications.

Une option est de rouler votre propre "magasin" de données, dans lequel vous avez un objet "magasin" central qui est ensuite partagé entre plusieurs composants.

Alternativement, une fois que vous avez emprunté cette route, vous pouvez simplement continuer à marcher jusqu'à ce que vous arriviez à Vuex!

Vuex offre une implémentation Vue du Modèle de flux pour la gestion de l'état (vous avez peut-être entendu parler de cet autre Flux i mplementation appelée Redux).

Il est essentiel, comme pour tout, de s'en tenir à la solution la plus simple possible qui répond aux besoins de votre application spécifique, mais il est bon de savoir que des options plus avancées sont disponibles si vous en avez besoin. [19659107] Transmission de données – Blazor

De manière générale, 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 des propriétés (comme avec Name dans notre exemple) ou saisissez des données via paramètres (comme pour Headline ). 

 
 @Headline 



 Bonjour @Name 

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

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

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

Pour des scénarios plus avancés, tout comme Vue, vous pouvez déployer votre propre magasin de données centralisé pour les applications Blazor ou consulter les options émergentes pour utiliser le modèle Flux avec Blazor via des projets tels que Fluxor .

Handling Formulaires dans Vue

Nous avons déjà vu le mécanisme de base utilisé par Vue pour gérer les formulaires: la directive v-model .

Vous pouvez utiliser v-model pour lier la plupart les entrées de formulaire dans les données, y compris les entrées de texte, les sélections, les cases à cocher, etc.

Voici le balisage d'un simple formulaire de contact.

v-model fait le gros du travail: synchroniser les données de vos composants avec les valeurs saisies par les utilisateurs.

Nous dirigeons ce formulaire vers une méthode submit dans le Le composant Vue utilisant @submit et le qualificatif facultatif préviennent pour empêcher le comportement d'envoi par défaut du navigateur.

Voici le JavaScript correspondant.

La méthode submit sera appelée lorsque l'utilisateur soumettra le formulaire, et là nous déconnectons les valeurs pour nom et commentaires .

Pour validation, vous devez soit écrire votre propre logique dans la méthode submit soit vous appuyer sur des bibliothèques Vue non officielles telles que vuelidate et VeeValidate .

Gestion des formulaires avec Blazor

Blazor a une fonctionnalité intégrée pour gérer vos données de formulaire et la validation en utilisant quelque chose appelé EditForm .

Voici le balisage pour un formulaire de contact équivalent. 

 @using System. ComponentModel.DataAnnotations

Nous avons remplacé les éléments HTML standard input par le composant InputText de Blazor.

Techniquement, il est tout à fait possible d'utiliser des éléments HTML standard et des formulaires avec Blazor, mais en utilisant le composant intégré -in controls rend certaines choses beaucoup plus faciles (la validation en étant une, comme nous le verrons dans un instant).

Là où Vue a utilisé v-model nous avons @ bind-value qui s'occupe de la même manière 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 basé sur un modèle de notre choix (où les valeurs du formulaire vivront), et nous lui avons indiqué la méthode à invoquer lorsque le formulaire est soumis (et est valide).

Notez comment 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 remplissent les règles de validation (un Nom a été entré), alors HandleValidSubmit sera invoqué.

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

Dans l'ensemble, les implémentations des formulaires Vue et Blazor partagent beaucoup de similitudes:

  • Ils emploient tous deux deux -way syntaxe de liaison pour les entrées
  • Ils offrent tous deux un moyen de gérer les soumissions de formulaires via une méthode

Là où Blazor se distingue, c'est dans son support de validation intégré, en utilisant la bibliothèque bien établie DataAnnotations et quelques nouveaux composants d'aide Blazor.

Routage i n Vue

Vue propose un routeur séparé que vous pouvez brancher à votre application.

Vous pouvez l'inclure dans votre page HTML:

Vous pouvez ensuite afficher une router-view dans votre balisage.

C'est ici que Vue affichera le contenu lorsque vous vous déplacerez entre les itinéraires.

Vous pouvez configurer les itinéraires dans le JavaScript de votre application.
'} const Contact = {template: '
Contactez-nous
'} routes const = [ { path: '/home', component: Home }, { path: '/contact', component: Contact } ] routeur const = nouveau VueRouter ({ itinéraires: itinéraires }) const app = nouvelle Vue ({ routeur }). $ mount ('# app');

Ici nous avons deux composants ( Home et Contact ).

Ensuite, nous avons déclaré deux routes pointant vers ces composants.

Ensuite, nous déclarons un routeur et leur attribuer nos routes.

Enfin, nous créons une nouvelle application Vue, en utilisant le routeur.

Avec tout cela en place, vous pouvez maintenant naviguer vers ces deux composants en utilisant le symbole # .

Vous devrez souvent transmettre des données supplémentaires sur l'itinéraire. Par exemple, si vous vous dirigez vers une page de détails pour un produit, vous vous attendez à fournir un identifiant de produit dans l'itinéraire …

Quitter la version mobile