Fermer

août 18, 2020

Blazor vs Vue pour les développeurs Web21 minutes de lecture



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.

 Exemple de vue montrant comment la saisie d'un nom modifie le message d'accueil [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 ...

 Exemple de Blazor montrant comment la saisie d'un nom modifie le message d'accueil

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.

 Exemple de vue montrant un accessoire en cours de rendu

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.

 Exemple de formulaire Blazor avec 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.

  

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 # .

  • /index.html#/home
  • /index.html#/contact

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 …

  • /index.html#/product/1 [19659015] Vous pouvez configurer vos routes pour accepter un paramètre:

     routes: [
        { path: '/product/:id', component: User }
    ]
    

    Vous pouvez ensuite récupérer cet identifiant en utilisant $ route.params .

     

    Affichage des détails du produit pour {{$ route.params.id}}

    Avec un peu plus de plomberie, vous pouvez également capturer ces paramètres d'itinéraire via les accessoires de votre composant et éviter d'avoir à utiliser $ route.params partout dans vos composants.

    Routage dans Blazor

    Blazor inclut routage «hors de la boîte». Si vous souhaitez rendre un composant "routable" vous pouvez simplement ajouter une directive @page

     @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 et les capturer dans un paramètre, comme ceci: [19659056] @page "/ GreetMe / {Nom}"

    Bienvenue @Name!

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

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

    Récupération des données d'un API utilisant Vue

    Il y a de fortes chances que votre application Web ait besoin de récupérer des données à partir d'une API à un moment donné.

    Vue reste indifférent sur la façon dont vous abordez cela, vous laissant libre d'utiliser l'API native fetch ou l'une des nombreuses bibliothèques tierces, telles que "Axios".

    La clé est de savoir quand passer l'appel, et pour cela Vue offre un crochet de cycle de vie mount .

      

    Maintenant, lorsque ce composant sera monté:

    • une demande sera faite à api / Tickets
    • les données retournées seront attribuées aux tickets

    Une fois que nous avoir les données, nous pouvons les parcourir en utilisant la directive v-for de Vue et le balisage de rendu pour chaque élément.

     
    {{ticket.title}}

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

    Avec Blazor, vous pouvez utiliser HttpClient pour tous vos besoins de récupération de données!

    Sous le capot, cela se reporte à la récupération native API, mais vous pouvez généralement ignorer cela 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 asynchrone de remplacement protégé OnInitializedAsync () { _tickets = attendre Http.GetFromJsonAsync ("api / Tickets"); } }

    OnInitializedAsync équivaut globalement au hook de cycle de vie monté () de Vue et s'exécutera lors du premier chargement de notre composant.

    Remarquez comment nous pouvons utiliser GetFromJsonAsync en passant un Type pour désérialiser automatiquement les résultats de l'appel HTTP dans une instance de TicketSummary ? C'est là que Blazor a un avantage significatif par rapport aux frameworks JavaScript …

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

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

     Diagramme montrant comment cela fonctionne en utilisant un modèle partagé entre le client et l'API avec Blazor

    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.

    Votre API peut maintenant être fortement typée, 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 exactement le même modèle Person qui a été utilisé pour les sérialiser en premier lieu .

    Maintenant, si vous apportez des modifications importantes à votre modèle Person , vous verrez immédiatement des erreurs de compilation si vous avez introduit des changements de rupture qui affectent l'utilisation du modèle par le client ou le serveur.

    Avantages et inconvénients

    Maintenant que nous les avons vus en action, lequel devriez-vous choisir?

    Naturellement, il est difficile de faire des comparaisons directes et celle que vous préférez dépendra en grande partie de vos propres antécédents, compétences et préférences.

    Cela dit, nous avons vu un certain nombre de similitudes, mais aussi quelques clés différences entre les deux.

    Vue

    Vue est louée pour sa touche légère par rapport à d'autres frameworks.

    Vous pouvez facilement ajouter Vue à une application existante, ouvrant la porte à l'amélioration incrémentielle de votre application sans réécrire le tout .

    La CLI Vue entre alors en jeu si vous décidez de structurer toute votre application autour de Vue, en supprimant les complexités de la configuration d'un environnement de construction JavaScript.

    Vue Pros

    • Eh bien -cadre établi avec un ba Modèle de composant testé par ttle
    • La CLI Vue simplifie le processus de construction JS
    • Bibliothèque tactile plus légère par rapport à d'autres frameworks tels que Angular (la bibliothèque Vue principale gère l'essentiel avec des fonctionnalités tangentielles comme le routage disponibles dans des bibliothèques séparées)
    • Peut être ajouté de manière incrémentielle pour améliorer les applications existantes
    • Vous êtes libre de brancher toutes les autres bibliothèques JS dont vous pourriez avoir besoin pour votre application
    • Un vaste écosystème de bibliothèques JS existantes sur lequel s'appuyer
    • Une documentation complète disponible

    Vue Cons

    • Vue est en grande partie sans opinion sur la façon dont votre application doit être structurée (seulement un inconvénient si vous préférez une approche normative plus opiniâtre)
    • JavaScript! (si tu n'aimes pas ça)
      • Vue simplifie très bien les aspects liés à la liaison de données lors de la création de votre application Web, mais en fin de compte, vous écrivez toujours du JavaScript!
    • Alors que la CLI Vue résume certains détails, si vous décidez de créer toute votre application autour de Vue, vous vous frotterez à l'écosystème JS qui apporte sa propre complexité (outils de construction, gestionnaires de paquets , compilation pour différents navigateurs)

    Essayez Kendo UI for Vue – Bibliothèque complète de composants d'interface utilisateur pour les applications Web. Essai gratuit

    Blazor

    Blazor a la distinction évidente qu'il utilise C # au lieu de JavaScript.

    Cela offre plusieurs avantages si vous venez d'un arrière-plan C #.

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

    La possibilité de partager des modèles entre le client et l'API backend est un gros problème et il est beaucoup plus difficile de casser votre application par inadvertance. [19659003] Blazor Pros

    • Ecrivez des applications Web modernes en utilisant C #
    • Prise en charge de la validation intégrée pour vos formulaires
    • Possibilité d'apporter du code tiers via les packages NuGet
    • Vous pouvez utiliser les outils que vous connaissez déjà (Visual Studio, débogage VS, Intellisense, etc.)
    • Les modèles partagés réduisent considérablement les risques de rupture accidentelle du client
    • Vous pouvez utiliser le même modèle de composant dans le navigateur (en utilisant WebAssembly) ou sur le serveur (utilisant Blazor Server)
    • Support à utiliser le même modèle de composant Blazor sur Windows et pour le développement mobile est à venir

    Blazor Cons

    • Le nouveau cadre, prendra du temps pour se coucher et gagner en adoption
      • L'outillage est également jeune et évoluera avec le temps
      • Moins de ressources disponibles sur internet (tutoriels, etc.) par rapport à Vue au moment de la rédaction
    • Aucun moyen évident d'ajouter progressivement Blazor WASM à vos applications existantes de manière transparente
    • Téléchargement initial important du framework .NET sur le navigateur lors du premier chargement
    • Dépend de la prise en charge de WebAssembly dans le navigateur (bien que ceci est maintenant largement pris en charge)

    Une chose à signaler ici est l'heure de téléchargement initial.

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

    Une fois qu'ils ont ces fichiers, ils n'ont pas besoin de 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 cela signifie naturellement que Blazor est mieux adapté à certaines applications Web qu'à 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.

    Essayez Telerik UI pour Blazor: des composants natifs pour créer des applications Web avec C #. Essai gratuit

    À vous de jouer

    La place de Blazor dans vos plans dépendra en grande partie de votre expérience existante et de ce que vous pensez de JavaScript.

    Si vous êtes à l'aise avec JavaScript et l'écosystème, Vue est un cadre solide

    D'un autre côté, si vous connaissez et appréciez déjà l'utilisation de C # et que vous avez généralement trouvé que JavaScript (le langage et l'écosystème) est difficile à apprendre et à vivre, Blazor WASM est potentiellement un changement de jeu.

    Alors, pensez-vous utiliser Blazor? S'agit-il d'un candidat ou de votre prochain projet, ou allez-vous vous en tenir à Vue pour le moment?

    Le choix vous appartient!





Source link

0 Partages