Découvrez les avantages de Blazor sur Angular, React et d'autres frameworks JavaScript. Blazor permet de partager du code entre les processus côté client et serveur, la fonctionnalité de rendu côté serveur et plus encore.

Lors de la création d'une application d'une seule page, Angular ou React sont des cadres JavaScript populaires à utiliser. Et jusqu'à présent, la majorité des processus côté client sont écrits en utilisant JavaScript. Cependant, il existe un cadre évolutif qui vous permettra d'écrire des processus côté client à l'aide de C #.

Blazor est un cadre .NET pour créer une application d'une seule page qui vous permet de créer votre application à l'aide de C #, Razor et HTML. Le côté client de Blazor utilise WebAssembly, qui a été livré avec les principaux moteurs de navigateur, tels qu'Internet Explorer, Chrome, Safari et Firefox. WebAssembly est une alternative à JavaScript dans l'écriture de code côté client. Et il peut être converti en utilisant de nombreux langages de programmation différents. Dans l'instance de Blazor, il est converti à l'aide de C #.

Pourquoi utiliser Blazor sur un framework JavaScript?

L'intégration de Blazor et de WebAssembly vous donne une manière différente de créer une application d'une seule page avec les mêmes résultats. Alors pourquoi choisir Blazor plutôt qu'un framework JavaScript?

Choix entre une ou plusieurs applications

Actuellement, Blazor est livré avec deux modèles d'hébergement.

Le premier est Blazor Server. Blazor Server permet à l'application d'être exécutée côté serveur. Les modifications de mise en page, la gestion des événements et les appels JavaScript sont effectués via une connexion SignalR.

L'autre est Blazor WebAssembly. Blazor WebAssembly vous permet d'exécuter l'application côté client avec l'utilisation de WebAssembly. Si vous devez intégrer des fonctionnalités côté serveur, vous pouvez soit l'exécuter avec Blazor Server, soit utiliser une application API distincte.

Voici un exemple d'exécution de Blazor WebAssembly via une application API distincte. Lorsque la page est initialisée, elle affichera une liste de technologies. Ces technologies sont chargées via l'API. De plus, nous avons une zone de texte et un bouton. Lorsque nous saisissons du texte et appuyons sur le bouton, notre texte saisi est envoyé à l'API et renvoie une liste mise à jour des technologies.

 @page "/"
@inject HttpClient httpClient
@using Newtonsoft.Json
 Voici une liste des technologies .NET 
@if (Technologies! = null && Technologies.Any ())
{
    

        @foreach (technologie var dans les technologies)
        {
            
 @technology 
        }
    
}

 Ajouter une technologie 

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

    Liste publique  Technologies {get; ensemble; }

    tâche prioritaire asynchrone protégée OnInitializedAsync ()
    {
        Technologies = attendre httpClient.GetJsonAsync <List > ("https: // localhost: 44378 / api / technology / getall");
    }

    tâche asynchrone publique MessageInputClick ()
    {
        var postRequest = new Dictionary  ();
        postRequest.Add ("technologie", MessageInput);

        var requestMessage = new HttpRequestMessage ()
        {
            Method = new HttpMethod ("POST"),
            RequestUri = new Uri ("https: // localhost: 44378 / api / technology / add"),
            Content = new StringContent (JsonConvert.SerializeObject (postRequest))
        };
        requestMessage.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue ("application / json");

        réponse var = attendre httpClient.SendAsync (requestMessage);
        var responseText = attendre response.Content.ReadAsStringAsync ();

        Technologies = JsonConvert.DeserializeObject <List > (responseText);

        MessageInput = string.Empty;
    }
}

Contrairement à Blazor, avec un framework JavaScript, vous devez toujours avoir une application distincte si vous souhaitez avoir des fonctionnalités côté serveur.

Possible de coder dans une seule langue

Comme Blazor WebAssembly vous permet d'écrire client- côté code en C #, cela signifie que tous les développeurs travaillant sur votre application peuvent avoir seulement besoin de connaître une langue.

Cela peut présenter de nombreux avantages, en particulier si vous êtes responsable de la gestion d'un projet Blazor. Le fait de ne connaître qu'un seul langage de codage signifie connaître les compétences dont vous avez besoin pour que les membres de votre équipe soient compétents. Cela facilite également l'attribution de rôles aux membres de votre équipe, sachant qu'il n'y aura pas de barrière du langage de codage.

Nous vont mettre un peu de codage côté client en action. Nous affichons l'heure actuelle sur la page. Lorsque nous appuyons sur le bouton, l'heure est mise à jour avec l'heure actuelle. Tout est écrit en C #. Aucun signe de JavaScript n'importe où!

 @page "/ time"
 Heure 
 L'heure est @ CurrentTime.ToString ("HH: mm: ss") 



  


               




 Obtenir l'heure actuelle 
@code {
    public virtual DateTime CurrentTime {get; ensemble; }

    remplacement prioritaire void OnInitialized ()
    {
        CurrentTime = DateTime.Now;
        base.OnInitialized ();
    }

    public virtual void GetCurrentTime ()
    {
        CurrentTime = DateTime.Now;
    }
}

Pour l'intégrer à une bibliothèque JavaScript, vous devez créer et intégrer une demande d'API pour obtenir l'heure actuelle du serveur. Par la suite, vous devrez construire le processus de mise à jour de l'heure via le langage de framework JavaScript approprié. Bien sûr, vous pouvez utiliser JavaScript pour obtenir l'heure de la machine du client, mais si l'heure définie sur sa machine est incorrecte, elle ne s'affichera pas correctement sur la page.

Partage de code côté client et côté serveur

Blazor vous permet de partager du code à la fois côté client et côté serveur, ce qui signifie que les méthodes qui partagent les deux modèles d'hébergement ne doivent être écrites qu'une seule fois. Par la suite, si vous devez modifier du code partagé par les deux, il ne doit être modifié qu'une seule fois et sera reflété sur les deux modèles d'hébergement.

L'exemple suivant le montre. Nous avons créé une nouvelle interface singleton d'injection de dépendance appelée ITechnologyService héritée par TechnologyService . A l'intérieur de ce service est stockée une liste de technologies. Lorsque l'application Blazor est chargée, le service ITechnologyService est injecté dans la page et affiche une liste de toutes les technologies. Lorsque nous saisissons du texte et appuyons sur le bouton, le service ITechnologyService envoie notre texte saisi via une méthode Ajouter et la liste des technologies affichées est mise à jour.

 à l'aide de System.Collections .Générique;

espace de noms BlazorShare.Data
{
    classe partielle publique TechnologyService: ITechnologyService
    {
        Liste virtuelle protégée  Technologies {get; }

        Public TechnologyService ()
        {
            Technologies = nouvelle liste  ();
            Technologies.Add ("Blazor");
            Technologies.Add ("MVC");
        }

        public virtual void AddTechnology (technologie des cordes)
        {
            Technologies.Add (technologie);
        }

        Liste virtuelle publique  GetAll ()
        {
            technologies de retour;
        }
    }

    interface partielle publique ITechnologyService
    {
        annuler AddTechnology (technologie des cordes);

        Liste  GetAll ();
    }
}

 @page "/"
@using BlazorShare.Data
@inject ITechnologyService technologyService
 Voici une liste des technologies .NET 
@if (Technologies? .Any () ?? false)
{
    

        @foreach (technologie var dans les technologies)
        {
            
 @technology 
        }
    
}

 Ajouter une technologie 

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

    Liste publique  Technologies {get; ensemble; }

    remplacement prioritaire void OnInitialized ()
    {
        Technologies = technologyService.GetAll ();
    }

    public void MessageInputClick ()
    {
        technologyService.AddTechnology (MessageInput);
        MessageInput = string.Empty;
    }
}

Avec les frameworks JavaScript, si vous devez utiliser le service TechnologyService à la fois côté client et côté serveur, vous devez créer le service à la fois en JavaScript et dans le langage de codage côté serveur approprié. [19659029] Rendu côté serveur

Si votre application intègre Blazor WebAssembly et Blazor Server, le rendu côté serveur est inclus en standard.

Le rendu côté serveur est important si vous créez une application que vous souhaitez analyser par les moteurs de recherche . Le rendu côté serveur permet à un bot d'explorer votre application et de lire son contenu sans avoir à exécuter de JavaScript.

Une bonne façon de voir si le rendu côté serveur est installé est de charger votre page Web, puis d'afficher la source. Si le contenu de la page Web correspond au contenu du code source, cela signifie que le rendu côté serveur est activé.

Jetez un œil à cette page que notre application Blazor a rendue:

Si vous deviez afficher le code source de la page, le contenu de cette page apparaîtra dans le code source:

    
 Voici une liste des technologies .NET 
    

        
 Blazor 
        
 MVC 
    
    
     Add Technology 

Pour inclure le rendu côté serveur dans une infrastructure JavaScript, vous devrez peut-être installer un logiciel supplémentaire. Cela peut représenter un défi, car vous devrez peut-être que votre hébergeur installe le logiciel pour vous, ce qu'il pourrait ne pas vouloir faire.

Une amélioration pour JavaScript

Il convient de noter que les langages WebAssembly tels que Blazor WebAssembly sont plus susceptibles d'améliorer JavaScript plutôt que de le remplacer dans un proche avenir. Blazor s'appuie sur JavaScript pour alimenter certaines de ses fonctionnalités. Par exemple, JavaScript est utilisé pour alimenter la connexion SignalR entre le client et le serveur.

À l'heure actuelle, Blazor WebAssembly est actuellement toujours en préversion. Mais quand il sera entièrement publié, il est susceptible de donner une vive concurrence aux frameworks JavaScript populaires qui sont disponibles et de donner aux développeurs un dilemme intéressant quant au framework à choisir.

En savoir plus sur Blazor?

Creusez plus profondément dans Blazor et Apprenez les bases de la construction de composants Blazor avec notre guide gratuit: Composants Blazor: le guide définitif