Une comparaison de Blazor et React en matière de développement Web moderne – un examen des avantages et des inconvénients.

Blazor WebAssembly (ou Blazor Wasm, comme tous les enfants cool l'appellent!) Est arrivé, mais comment se cumule-t-il par rapport aux autres options plus établies pour créer des applications Web "modernes"?

Commençons par une comparaison avec React JS.

Plus précisément, nous explorerons le fonctionnement des aspects suivants (pour les deux frameworks):

• Mise en route
• Construction de l'interface utilisateur
• Transmission de données entre les composants [19659006] Gestion des formulaires
• Routage
• Récupération des données 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, la plupart des points sont également valables si vous envisagez d'utiliser Blazor Server à la place.

React — La vue d'ensemble en deux minutes

React est une bibliothèque d'interface utilisateur qui vous aide à construire réactif , des interfaces utilisateur interactives pour vos applications Web.

Contrairement aux frameworks tels qu'Angular, React se concentre uniquement sur les aspects de création de composants de votre application et ne s'attaque pas à d'autres problèmes (comme le routage), préférant plutôt le laisser de côté à vous de choisir le meilleur outil pour votre cas d'utilisation spécifique.

Lorsque vous créez une nouvelle application React, elle apportera automatiquement divers packages dont elle a besoin pour fonctionner (en utilisant npm ou son alternative, Yarn) et vous pourrez ensuite apporter des packages supplémentaires pour gérer des choses comme le routage, la gestion des formulaires, les requêtes réseau.

Vous écrivez votre application en utilisant HTML (enfin, JSX mais nous y reviendrons), CSS et JavaScript.

Pour publier votre application , vous pouvez exécuter une commande pour la regrouper (en utilisant un comme webpack), prenez les fichiers groupés statiques (HTML, JavaScript, etc.) et déployez-les sur un serveur Web.

Lorsque quelqu'un visite le site déployé, le moteur JavaScript du navigateur entre en action et exécute le code de votre application, rendant les éléments via le DOM du navigateur et gérant divers événements du navigateur (utilisateurs cliquant sur les boutons, saisissant du texte dans une entrée, etc.). [19659003] Si vous devez extraire des données d'une base de données ou similaire, vous pouvez effectuer des requêtes HTTP depuis votre application vers un serveur, qui renverra les données de votre application à afficher.

Comment Blazor se compare-t-il?

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 une nouvelle application Blazor, elle arrive avec quelques packages soigneusement sélectionnés (le

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

publier votre application, vous c une commande intégrée publish de .NET, qui regroupe votre application dans un certain nombre de fichiers (HTML, CSS, JavaScript et DLL) qui peuvent ensuite être publiés 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,

Création d'une nouvelle application React

La méthode de loin la plus simple pour faire tourner une nouvelle application React consiste à utiliser "Create React App". [19659003] Vous avez besoin de ces commandes:

 npx create-react-app my-app
cd my-app
npm start

CRA vous fournit également des commandes facilement accessibles pour regrouper votre application prête à être déployée.

Création d'une nouvelle application Blazor

Pour Blazor, vous pouvez utiliser Visual Studio ou lancer un nouveau projet via l'invite de commande. [19659031] dotnet new blazorwasm
cd blazorwasm
dotnet run

Vous avez quelques autres options, comme la possibilité d'inclure une infrastructure pour authentifier les utilisateurs et si vous souhaitez 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 React

Avec React, vous créez vos applications comme une série de composants, en utilisant une approche déclarative.

Voici un exemple:

 import React, {useState} de 'react';

exporter la fonction par défaut Greeting () {
    const [name, setName] = useState ();

    const nameChanged = (e) => {
        setName (e.target.value)
    }

    retour (<>
         Comment vous appelez-vous? 
        
         Bonjour {name} 
    )
}

Si vous n'êtes pas familier avec React, il y a un peu à déballer ici.

Les composants React sont écrits en utilisant JavaScript.

Ici, nous exportons une fonction JavaScript appelée Greeting .

Cette Greeting représente un composant React, et en l'exportant, nous pouvons facilement le référencer ailleurs dans notre application (donc

Notre fonction Greeting renvoie quelque chose qui ressemble étrangement au HTML mais qui est en fait JSX.

JSX est vraiment JavaScript.

Par exemple, lorsque nous déclarons span JSX dans un composant, React le transformera en JavaScript qui sera invoqué pour afficher le balisage HTML approprié dans le navigateur.

En pratique, vous pouvez généralement, écrivez simplement votre JSX comme s'il s'agissait de HTML et tout "fonctionne"!

Si vous regardez l'élément input vous remarquerez que nous avons déclaré un gestionnaire d'événements pour le événement onChange . Lorsque vous saisissez quelque chose dans cette entrée, elle invoque notre fonction nameChanged .

Cela met à jour l'état de notre composant à l'aide de quelque chose appelé hooks. Plus précisément, nous utilisons le crochet UseState pour mettre à jour la valeur de nom en fonction de ce que l'utilisateur a tapé.

Enfin, dans notre élément span que nous rendons la valeur de nom résultant en un message d'accueil personnalisé convivial pour notre utilisateur.

Lorsque nous modifions la valeur dans l'entrée, le message d'accueil se met instantanément à jour en reflètent la nouvelle valeur.

De manière générale, tout ce que vous construisez dans React tourne autour de composants, que vous pouvez ensuite rendre où vous voulez, comme ceci:

     Une brève introduction à React ...

En résumé, une interface utilisateur React:

• Comprend un ou plusieurs composants
• Ecrit à l'aide de JSX (qui prend votre balisage et vos données , et les combine ensemble)
• S'exécute en tant que JavaScript dans le navigateur

Création de votre interface utilisateur avec Blazor

Blazor adopte une approche très similaire à React dans la mesure où vous créez votre interface utilisateur à l'aide de composants.

La différence est que que vous utilisez Razor et C # (au lieu de JSX et JavaScript) pour écrire votre logique de balisage et d'interface utilisateur.

 Comment vous appelez-vous? 

 Bonjour @Name 

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

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

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

Lorsque l'utilisateur saisit son nom, la propriété Nom est mise à jour avec la valeur saisie.

Par défaut, Blazor mettrait à jour la valeur de Nom sur le flou (lorsque nous avons cliqué sur la saisie de texte), nous avons donc ajouté @ bind-value: event = "oninput" pour le mettre à jour le

Comme avec React, 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 à l'aide de Razor et C # (qui prend votre balisage et vos données, et les combine ensemble)
• Fonctionne sur WebAssembly dans le navigateur

Passing Data Around — React

Il existe deux principales approches "prêtes à l'emploi" pour gérer l'état dans vos composants React. [19659003] Ils peuvent interagir avec leur propre état (comme nous l'avons vu lorsque nous avons stocké Nom dans notre exemple), ou ils peuvent accepter des données via des accessoires:

 exportation de la fonction par défaut Greeting (props) {
    const [name, setName] = useState ();

    const nameChanged = (e) => {
        setName (e.target.value)
    }

    retour (<>
        
 {props.headline} 
         Comment vous appelez-vous? 
        
         Bonjour {name} 
    )
}

Ici, nous avons ajouté un argument props à notre fonction Greeting puis rendu sa valeur dans notre composant via {props.headline} . [19659003] Maintenant, lorsque nous rendons ce composant, nous pouvons passer une valeur pour le titre.

Lorsque vous utilisez React pour des applications réelles, ces options de stockage de l'état peuvent devenir un peu lourdes, avec de plus en plus d'état à transmettre et / ou à stocker . C'est là que des alternatives comme Redux entrent en jeu, vous offrant un magasin de données centralisé pour l'ensemble de votre application.

Mais il convient de noter que Redux n'est pas directement lié à React et n'est pas quelque chose que vous utiliseriez nécessairement dès le premier jour lorsque vous commencez à créer des applications React.

Passing Data Around — Blazor

D'une manière générale, Blazor a le deux mêmes options principales pour la gestion de l'état.

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

 @Headline 
 Quel est votre nom? 

 Bonjour @Name 

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

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

Comme pour l'exemple React, lorsque vous affichez Message d'accueil vous pouvez passer un titre et il sera rendu en conséquence.

Gestion des formulaires dans React

React n'est livré avec rien à vous aider spécifiquement avec les formulaires.

Cela signifie que vous devez soit "rouler le vôtre", soit utiliser un package npm tiers pour le travail.

Voici le balisage d'un formulaire de contact simple.

 return (
    

        
             Nom:
            
        
        
             Réflexions?:
            
        
        
    
)

Notez comment nous définissons la valeur de nos entrées d'état dans notre composant ( nom et commentaires ) et que nous transmettons les événements onChange à nos propres fonctions ( handleNameChange et handleCommentsChange ).

Voici à quoi ressemble le JavaScript de cette fonction:

 const [name, setName] = useState ();
const [comments, setComments] = useState ();

fonction handleNameChange (événement) {
    setName (event.target.value);
}

fonction handleCommentsChange (événement) {
    setComments (event.target.value);
}

fonction handleSubmit (événement) {
    // soumettre des données à votre serveur
    alert (`$ {name}: $ {comments}`)
    event.preventDefault ();
}

Nous interceptons donc efficacement le comportement normal du formulaire pour lire et mettre à jour l'état de nos propres composants.

Pour la validation, vous pouvez soit lancer le vôtre, écrire une logique pour vérifier les valeurs définies dans le formulaire et alerter l'utilisateur. s'ils ne sont pas valides ou s'appuient sur des bibliothèques tierces (généralement importées via npm).

Gestion des formulaires avec Blazor

En revanche, Blazor a une fonctionnalité intégrée pour gérer vos données de formulaire et la validation à l'aide de quelque chose appelé EditForm .

Voici le balisage d'un formulaire équivalent à notre exemple React.

 @using System.ComponentModel.DataAnnotations


    
    
         Nom:
        
    
    
         Réflexions?:
        
    
    
    

À bien des égards, cela est similaire à React, sauf que nous utilisons le composant InputText de Blazor pour nos champs de saisie.

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

@ bind-Value s'occupe à la fois de lire la valeur d'un champ et le 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 à appeler lorsque le formulaire est soumis (et est valable).

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

Voici le reste du code:

 @code {
    protégé ContactUsModel FormModel {get; ensemble; } = new ContactUsModel ();

    async Task HandleValidSubmit ()
    {
        // publier sur votre API
        Console.WriteLine ($ "{FormModel.Name}: {FormModel.Comments}");
    }

    classe protégée ContactUsModel
    {
        [Required]
        chaîne publique Name {get; ensemble; }
        chaîne publique 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 .

Lorsque quelqu'un remplit le formulaire, s'il a satisfait aux règles de validation (un nom a été entré), alors HandleValidSubmit sera invoqué.

Sinon, le ValidationSummary sera

Routage dans React

Comme pour les formulaires, React (délibérément) n'est livré avec aucun routage intégré

Les options notables incluent «Reach Router» et «React Router».

Routing in Blazor

Blazor inclut le routage et s'appuie sur le moteur de routage existant d'ASP.NET. Si vous voulez rendre un composant "routable", vous pouvez ajouter une directive:

 @page "/ GreetMe"


    Bienvenue!

Maintenant, toute demande à 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; }
}

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

Récupération de données à partir d'un API utilisant React

React laisse la récupération des données à votre discrétion.

Vous pouvez utiliser la fetch API native:

 let response = wait fetch (url);
if (response.ok) {
    laissez json = attendre response.json;
}

Ou vous pouvez utiliser l'une des nombreuses bibliothèques tierces, telles que "Axios" qui offre plus de fonctionnalités et de flexibilité.

En général, vous récupérez des données en utilisant quelque chose comme le crochet useEffect de React puis mettez à jour l'état de votre composant avec les résultats.

 useEffect (() => {
    async loadData () {
        laisser réponse = attendre la récupération ('api / Tickets');
        setTickets (attendez response.json);
    }
    loadData ();
}, []);

Les crochets UseEffect sont destinés à permettre à votre composant de gérer les "effets secondaires", dans ce cas, la récupération des données.

À partir d'ici, vous utiliserez généralement la fonction de carte JavaScript pour parcourir vos données et afficher quelque chose pour chaque élément.

 {tickets.map (ticket => 

    {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 en matière de récupération de données!

Sous le capot, cela revient à la récupération native API, mais vous pouvez généralement simplement ignorer cela et utiliser l'abstraction.

Voici un exemple:

 @using System.Net.Http
@inject HttpClient Http

@foreach (ticket var dans _tickets) {
    

        @ ticket.Title
    
}

@code {
    Billets privés [] _billets;

    tâche prioritaire asynchrone protégée OnInitializedAsync () {
        _tickets = attendre Http.GetFromJsonAsync  ("api / Tickets");
    }
}

Blazor a une astuce utile dans sa manche (par rapport à React, ou tout autre framework frontal existant) en ce qui concerne l'interaction entre votre interface utilisateur et votre 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 réside dans une bibliothèque de classes partagée.

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

Maintenant, votre API peut être fortement typé, renvoyant (et acceptant) des données en utilisant le modèle Personne .

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

Maintenant, si vous apportez des modifications de rupture à votre modèle Personne vous verrez immédiatement des erreurs de compilation si vous avez introduit des modifications de rupture qui affectent l'utilisation du client ou du serveur du modèle. [19659163] Avantages et inconvénients

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

Eh bien, naturellement, cela dépendra de vos propres antécédents, compétences et préférences.

Nous avons vu comment il y a un certain nombre de similitudes entre les deux, mais aussi quelques différences clés.

React

React est généralement sans opinion quand il s'agit de choses qui ne sont pas ses objectif principal, comme le routage, la gestion des formulaires, etc.

Cela peut compter comme un pro ou un con selon votre point de vue.

De plus, si vous écrivez des composants React, vous n'avez pas d'autre choix que d'utiliser JavaScript , et adoptez tout ce qui vient pour la balade (l'écosystème, npm, bundling, etc.).

Create React App propose une abstraction pratique pour certains des détails les plus épineux (comme le webpack), afin que vous puissiez vous concentrer sur la construction de votre

React Pros

• Modèle de composant bien établi et testé en combat
• "Create React App" simplifie le processus de construction JS
• Bibliothèque "Light Touch" – pas de "suppléments" "comme les routeurs inclus (liberté de choisir votre propre chemin!)
• JSX — conserve les parties de l'interface utilisateur qui changent ensemble éther en un seul endroit
• Liberté de brancher d'autres bibliothèques JS
• Un vaste écosystème de bibliothèques JS existant sur lequel s'appuyer
• Peut être déployé en tant que fichiers statiques vers des hébergements comme Netlify, GitHub Pages, etc.

React Contre

• JSX (si vous ne l'aimez pas!)
• Pas de routeur intégré, de gestion des formulaires, etc. (peut ralentir les choses car vous devez combler les lacunes avec les packages ou votre propres solutions)
• JavaScript (encore une fois, si vous ne l'aimez pas)
  • Vous devez l'utiliser
  • Vous devez l'apprendre (difficile et long si vous passez la plupart de votre temps à utiliser un autre langage comme C #)
• L '«écosystème» JS peut devenir compliqué (outils de construction, gestionnaires de packages, compilation pour différents navigateurs, etc.)

Blazor

Blazor offre quelques avantages, surtout si vous êtes venant d'un arrière-plan C #.

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

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

Modèles partagés 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.

Vous pouvez toujours appeler JavaScript si vous en avez besoin.

Blazor Pros

• Écrire des applications Web modernes à l'aide de C #
• Client intégré de gestion, de validation, de routage et d'extraction de données
• Possibilité d'apporter du code tiers via des packages NuGet
• Vous pouvez utilisez les outils que vous connaissez déjà (Visual Studio, VS Code, Rider, etc.)
• Peut être déployé en tant que fichiers statiques
• Les modèles partagés réduisent considérablement les risques de rupture accidentelle du client
• Vous pouvez utiliser le même composant modèle 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 sur Windows et pour le développement mobile arrive

Contre Blazor

• Le nouveau cadre prendra du temps pour se mettre au lit et sera adopté
• téléchargement initial du framework .NET au navigateur lors du premier chargement
• L'outil est également jeune et évoluera avec le temps
• Moins de ressources disponibles sur Internet (tutoriels, etc.) par rapport à React
• Dépend du support de WebAssembly dans le navigateur (bien que cela soit maintenant largement pris en charge)
• Le téléchargement initial pour le runtime .NET est relativement important

Une chose à appeler ici est le temps de téléchargement initial.

Quand quelqu'un accède à votre application Blazor Wasm pour le la première fois, leur 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'ont pas besoin de les télécharger à nouveau, mais cela signifie que vous êtes susceptible de voir un Indicateur "chargement …" pour 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 que d'autres.

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

Mais, pour toutes les applications métier, cette initiale le téléchargement est peu susceptible de poser un problème majeur.

À vous de jouer!

Alors, pensez-vous utiliser Blazor? Est-ce un concurrent ou votre prochain projet, ou allez-vous vous en tenir à React pour l'instant?

À vous de choisir!