22
Cosa è Blazor e come funziona
Mi sono reso conto che la volta scorsa sono partito subito a scrivere codice senza alcuna introduzione, quindi, ho pensato che prima di procedere con altri post su Blazor dobbiamo chiarire un po' cosa è Blazor e come funziona un'applicazione basata su di esso.
Dividerò questo post in più parti: la prima parte, questa, servirà a chiarire bene cosa è Blazor e come opera. Dalla seconda parte in avanti invece scenderemo un po' più nel tecnico e vedremo come sono strutturate le applicazioni sviluppate con Blazor confrontanto i due hosting model ad oggi disponibili.
Blazor (il cui nome deriva da Browser + Razor) è un framework sviluppato da Microsoft nell'ecosistema di .NET con l'obiettivo di creare applicazioni che vanno dalle web application di tipo SPA (Single Page Application) fino ad arrivare alle PWA (Progressive Web Application) senza (o quasi) la necessità di ricorrere all'amato-odiato JavaScript. In futuro si dovrebbe anche arrivare a poter creare applicazioni native.
Abbiamo quindi capito che Blazor, Server o WebAssembly, permette di creare applicazione web reattive analoghe a quelle create con framework tipo Angular, React, Vue.js, ecc. Cosa ha quindi di diverso dagli altri framework?
Come abbiamo detto, l'uso di JavaScript si riduce quasi a zero, infatti, per lo sviluppo della UI viene utilizzato C#. Questo permette anche di condividere codice tra il front-end ed il back-end facendoci risparmiare tempo sullo sviluppo.
L'applicazione .NET compilata viene eseguita dal Blazor Engine. Il risultato dell'esecuzione produce una struttura ad albero chiamata Render Tree. Il Render Tree viene poi inviato a JavaScript che provvede ad aggiornare il DOM. Ad ogni interazione successiva dell'utente con l'applicazione viene rigenearo il Render Tree ed i cambiamenti vengono inviati nuovamente a JavaScript per un nuovo aggiornamento della pagina.
Rilasciato con .NET Core 3.0 a settembre del 2019 è stato il primo hosting model ad essere disponibile per l'utilizzo in ambiente di produzione.
Con questa "versione" di Blazor l'intera applicazione è eseguita sul server e tutto quello che concerne la comunicazione tra il client ed il server (l'aggiornamento della UI, le chiamate JavaScript e la gestione degli eventi) avviene per mezzo dell'utilizzo di un'altra libreria sviluppata da Microsoft, SignalR. È quindi facile intuire che le applicazioni sviluppate utilizzando questo hosting model hanno la necessità di essere sempre connesse per funzionare.
Il principale vantaggio è che in un'applicazione che utilizza questo hosting model, essendo come detto sopra eseguita interamente sul server, può accedere alle risorse "di backend", ad esempio il database, come una qualsiasi applicazione ASP.NET MVC/Razor Pages (o per i più vecchi come me, ASP.NET WebForms 😊).
Di contro, gli svantaggi sono che l'applicazione non può funzionare offline e che il server dovrà farsi carico della gestione di tutte le richieste dei client perdendo in alcuni casi prestazioni e scalabilià (in caso caso di molte richieste simultanee).
Atteso da molti sviluppatori, a distanza di pochi mesi, precisamente nel maggio del 2020, è arrivato anche un altro hosting model: Blazor WebAssembly.
L'applicazione sviluppata utilizzando questo hosting model viene eseguita sul client grazie a WebAssembly, le sue dipendenze ed il .NET runtime sono scaricati alla prima richiesta.
Diversamente da Bazor Server, l'applicazione, una volta scaricata sul client, può funzionare anche senza un connessione attiva.
Anche qui ad ogni modo abbiamo qualche svantaggio, primo fra tutti la necessità di creare una serie di servizi (WebApi o gRPC ad esempio) per interagire con le risorse sul server. Un'altra cosa di cui dobbiamo tenere conto è che più la nostra applicazione sarà "grande" più tempo servirà per scaricarla sul client. Infine un altro (secondo me) piccolo svantaggio è che i browser più vecchi non sono supportati (Internet Explorer ad esempio).
Un'applicazione Blazor, che sia Server o WebAssembly, è strutturata in componenti.
Un componente in Blazor è una classe C# che permette di creare interfacce utente più flessibili e facilmente manuntenibili. È anche possibile creare librerie di componenti da riutilizzare in altri progetti.
Un componente in Blazor è chiamato Razor component ed ha estensione
.razor.Un Razor component può essere costituito da Razor components più piccoli/semplici, che a loro volta possono essere composti da altri Razor components. In questo modo possiamo ridurre la complessità della nostra applicazione e renderla più facilmente manuntenibile.
Concludendo, in questo framework Microsoft sembra crederci molto e ha quindi tracciato una roadmap ben definita che porterà Blazor a coprire lo sviluppo di app multi dispositivo e multi piattaforma. Al momento però solo due hosting model sono stati rilasciati e considerati pronti per la produzione: Blazor Server e Blazor WebAssembly.
Per adesso fermiamoci qui, abbiamo buttato li due chiacchiere per fare un po' di luce su questo framework. Nel prossimo post andremo a vedere come è "fatta" un'applicazione e come funzionano questi due hosting model.
Come sempre vi invito a lasciarmi commenti con opinioni, critiche e precisa
zioni sull'argomento.
zioni sull'argomento.
Vi lascio il link alla documentazione ufficiale da cui ho preso anche le immagini che ho riportato in questo post.