Web UI interattive con Blazor Server

di Moreno Gentili, in ASP.NET Core,

Essere uno sviluppatore web full-stack è sempre più difficile, soprattutto per via del gran del numero di tecnologie e di pratiche legate allo sviluppo front-end. Il linguaggio JavaScript stesso è andato incontro a numerosi (e interessanti) ammodernamenti che però non sempre trovano immediata adozione su ogni browser.

Questa situazione, in apparenza destabilizzante, e il fatto che il JavaScript sia tutt'ora mancante di funzionalità apprezzate in altri linguaggi come il type guarding, hanno causato la nascita di ulteriori ecosistemi come quello di TypeScript.

Chi non si sente a proprio agio con questa pletora di opzioni o, semplicemente, preferisce ridurre il numero di competenze necessarie a realizzare un'applicazione web, gradirà particolarmente Blazor, la nuova creazione di Microsoft introdotta con .NET Core 3.0.

Cos'è Blazor?

Blazor è un framework per realizzare web UI interattive. Ci permette di usare il linguaggio C# e tutti gli strumenti che già usiamo con ASP.NET Core per sviluppare la parte client di un'applicazione web. Grazie ad esso, perciò, possiamo ridurre al massimo l'uso del JavaScript.

In termini molto semplici, grazie a Blazor possiamo scrivere codice C# per reagire all'interazione dell'utente, come ad esempio il click su un bottone, e scatenare l'aggiornamento della web UI.

Figura 1

Blazor, quindi, propone un modello di sviluppo dell'interfaccia HTML supportato da codice C#. Per questo motivo può sembrare reminiscente di ASP.NET WebForms ma, all'atto pratico, ha più somiglianze con framework client-side come VueJS.

Blazor offre una via semplice allo sviluppo web anche a chi non ha particolare esperienza nello sviluppo front-end o che magari si è cimentato solo con lo sviluppo di applicazioni desktop con WinForms e WPF.

Due hosting model

Gli elementi funzionali di un'applicazione Blazor sono i Razor Component, ovvero dei componenti in grado di produrre l'HTML che compone l'interfaccia web. Essi contengono anche il codice C# che usiamo per reagire alle interazioni dell'utente e con cui possiamo recuperare dati, compiere elaborazioni e, soprattutto, modificare l'interfaccia per mostrare all'utente le informazioni desiderate.

Blazor offre due hosting model differenti, cioè due architetture che cambiano profondamente l'ambito di elaborazione dei Razor Component: Blazor Server e Blazor WebAssembly.

Blazor Server

Con Blazor Server, i Razor Component sono elaborati lato server. Quando l'utente interagisce con l'interfaccia, il client invia un messaggio al server per notificare l'avvenuta interazione (ad esempio: il click su un bottone). A questo punto, il server reagisce all'interazione del client elaborando il Razor Component e determinando quali cambiamenti devono essere apportati all'interfaccia corrente. Tali cambiamenti vengono dunque notificati al client, il quale aggiorna il DOM di conseguenza (cioè l'albero degli elementi HTML).

Figura 2

Il vantaggio di usare Blazor Server è che tutta la nostra logica resta al sicuro nel server, mentre lo svantaggio è che l'utente dovrà essere sempre connesso, se vuole poter interagire, il che rende Blazor Server inadatto all'uso PWA, che abbiamo trattato all'indirizzo: https://www.html5italia.com/articoli/PWA/Progressive-Web-Apps.aspx). Infatti, la comunicazione tra client e server avviene per mezzo di una connessione persistente gestita da ASP.NET Core SignalR.

Inoltre, dobbiamo aspettarci un maggior utilizzo delle risorse del server, dato che il server si troverà a elaborare i Razor Component a ogni interazione di ogni client connesso.

5 pagine in totale: 1 2 3 4 5
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

I più letti di oggi

In evidenza

Misc