![\"\"](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2020\/10\/copertina.png\")
<\/p>\n\n\n\n<\/p>\n\n\n\n
Blazor \u00e8 un framework che permette di costruire Rich Web UI con l’ausilio di Microsoft .NET Framework.<\/p>\n\n\n\n
Blazor nasce dalla necessit\u00e0 di riuscire a creare applicazioni web complesse e ricche di interazioni utente senza dover necessariamente utilizzare Javascript, ma avvalendosi di un linguaggio moderno ed evoluto come C#.<\/p>\n\n\n\n
Come primo aspetto da dover analizzare prima di affrontare nel dettaglio il funzionamento di Blazor, sono i due modelli di hosting supportati.<\/p>\n\n\n\n
Blazor Server<\/strong> (Server-side<\/em>) Questa modalit\u00e0 \u00e8 stata rilasciata con .NET Core 3 e prevede che il componente Blazor giri su un server e che tutta la parte di comunicazione ed interazione con il client sia gestita con una real-time connection tramite WebSocket con SignalR.<\/p>\n\n\n\n Blazor WebAssembly<\/strong> (Client-side<\/em>) Questa modalit\u00e0 \u00e8 stata rilasciata con .NET Core 3.1 ed in questo caso il componente Blazor viene impacchettato in un WebAssembly (WA<\/em>) ed \u00e8 eseguito direttamente nel browser dell’utente. E’ importante sottolineare che la scelta di quale delle due modalit\u00e0 di hosting usare non \u00e8 vincolante, questo vuol dire che una Blazor App di tipo Serever-Side<\/em> pu\u00f2 essere portata ad una versione Client-Side<\/em> e viceversa senza dover sconvolgere il progetto. <\/p>\n\n\n\n Blazor \u00e8 un Component Oriented UI Framework, questo vuol dire che l’applicazione stessa, le pagine e gli elementi contenuti, sono tutti Component <\/em>relazionati in gerarchia fra loro. Vediamo come creare una nuova App Blazor Server con Visual Studio 2019: In allegato a questo articolo \u00e8 possibile scaricare un progetto di esempio creato da Steven Sanderson<\/a> e da lui trattato durante uno speech del 2019, in cui vengono illustrate alcune potenzialit\u00e0 di Blazor. Il primo aspetto e quello pi\u00f9 evidente \u00e8 l’utilizzo della sintassi di markup Razor<\/a> tramite cui \u00e8 possibile includere codice server-based in una pagina web. Come si pu\u00f2 notare un file .razor<\/em> \u00e8 un mix di codice C#<\/em> e HTML<\/em> connessi dagli appositi markup Razor. Gi\u00e0 in fase di creazione di un nuovo progetto in Visual Studio 2019 si ha la possibilit\u00e0 di scegliere se si desidera impostare il progetto per un hoting mode di tipo WebAssembly. Similmente a quanto fatto per precedente, utilizzeremo un altro esempio sempre realizzato da Steven Sanderson<\/a>, scaricabile qui<\/a>, che utilizzeremo come base per analizzare alcune delle importanti caratteristiche di questa tipologia di soluzione.<\/p>\n\n\n\n La differenza principale che si nota immediatamente \u00e8 la suddivisione della solution in due progetti:<\/p>\n\n\n\n Similmente a quanto fatto prima per la soluzione di tipo Blazor Server, proviamo a mettere il focus sul main Component del progetto BlazorMart.Client<\/em>, ovvero sul file App.razor<\/em><\/p>\n\n\n Non \u00e8 difficile notare immediatamente come possa essere semplice lavorare con un Framework Component Oriented. Infatti la Single Page App in questione \u00e8 suddivisa sostanzialmente in tre sezioni, ovvero header<\/strong><\/em>, main<\/strong><\/em> ed un footer<\/strong><\/em>. All’interno del file App.razor<\/em> \u00e8 stata implementata una chiamata che aggiunge un nuovo elemento ad un oggetto di tipo carrello (Cart<\/em><\/strong>). La soluzione proposta in questo esempio \u00e8 di utilizzare gRPC<\/strong>, ovvero un sistema di chiamata di procedura remota open source sviluppato da Google. Lo schema \u00e8 semplice, viene definito un file .proto<\/em> lato Server in cui vengono dichiarate tutte le chiamate e le strutture che il server espone. Da questo file .proto<\/em> viene generata automaticamente una classe Service che crea lo scheletro degli oggetti e delle chiamate definite, quello che bisogna fare lato server \u00e8 l’ Vediamo nel concreto dell’esempio in esame:<\/p>\n\n\n\n Con PWA si intende tipicamente una Single Page Application (SPA) che sfrutta le attuali API che i Browser moderni mettono a disposizione per far diventare un’applicazione da funzionante solamente via Web in un’applicazione Client a tutti gli effetti, quindi installata direttamente sul device in uso ed avviabile tramite un’icona presente sulla Home del dispositivo stesso.<\/p>\n\n\n\n Non solo, ma avvalendosi di uno strumento chiamato Service Worker, \u00e8 possibile far girare l’applicazione Client anche offline, sfruttando la cache del dispositivo. <\/p>\n\n\n\n Basta aggiungere al progetto Client un file manifest.json<\/strong> che contiene alcune informazioni di base necessarie all’installazione.<\/p>\n\n\n Dopo aver creato il manifest file, \u00e8 necessario includere tale file all’interno dell’ Quanto mostrato nel manifest precedente \u00e8 un esempio semplice con un subset di tutti i parametri disponibili, per avere maggiori dettagli di configurazione consultare il link<\/a> ufficiale con le specifiche W3C<\/p>\n\n\n\n Il Service Worker di fatto \u00e8 un semplice file Javascript inserito all’interno del progetto Client che si occupa di intercettare tutte le richieste di rete fatte dall’applicazione e, nel caso di connessione attiva le gestisce in modo standard, in caso contrario sfrutta la cache del dispositivo. In questo modo l’applicazione risulta almeno in parte funzionante, ovviamente per tutte le interazioni che richiedono il recupero di informazioni presenti solo sul Server, si possono introdurre dei meccanismi di retry per mettere in attesa l’utente, senza bloccarlo completamente. Similmente a quanto fatto per il file manifest.json<\/em>, affinch\u00e8 il Service Worker venga installato \u00e8 necessario importarlo nella index page nel modo seguente:<\/p>\n\n\n
Affinch\u00e9 questo tipo di approccio possa funzionare, \u00e8 necessario che siano soddisfatti due prerequisiti fondamentali:<\/p>\n\n\n\nBlazor Server<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2020\/10\/balzor-host-server.png\")
<\/figure><\/div>\n\n\n\n
La sintassi utilizzata per programmare questi Component \u00e8 Razor <\/em>ed ogni file .razor \u00e8 un Component.<\/p>\n\n\n\n![\"\"](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2020\/10\/VS2019-create-webapp.gif\")
<\/p>\n\n\n\n
In particolare, nella solution MyCompanyApp<\/a>, viene creato un semplice Component bonus.razor<\/em> il cui scopo \u00e8 quello di mostrare degli slider di ripartizione di un bonus economico tra diversi reparti di un’azienda.
Di seguito il codice: <\/p>\n\n\n\n@page "\/bonus"\n\n<h3>Bonus splitter<\/h3>\n\n<div class="budget">\n @foreach (var item in budgetItems)\n {\n <span>@item.Name:<\/span>\n <span>@item.Amount.ToString("c0")<\/span>\n <input type="range" max="@(item.Amount + Remaining)" step="1000"\n @bind="item.Amount" @bind:event="oninput"\n style="width: @( Math.Round(100 * (item.Amount + Remaining) \/ totalBudget,0))%" \/>\n }\n <span>Remaining:<\/span>\n <span>@Remaining.ToString("c0")<\/span>\n<\/div>\n\n<button disabled="@(Remaining > 0)">Save<\/button>\n\n@code {\n decimal totalBudget = 1000000;\n\n decimal Remaining => totalBudget - budgetItems.Sum(x => x.Amount);\n\n List<BudgetItem> budgetItems = new List<BudgetItem>\n {\n new BudgetItem { Name = "Developers" },\n new BudgetItem { Name = "Managers" },\n new BudgetItem { Name = "Sales" },\n };\n}\n<\/pre><\/div>\n\n\n
Razor \u00e8 uno strumento che gi\u00e0 troviamo nel mondo Microsoft da diversi anni, quindi in questo articolo andremo ad analizzare quegli aspetti innovativi introdotti con Blazor.
All’interno di questo Component, seppur molto semplice nella sua logica, ci sono vari elementi di novit\u00e0 che ci possono far capire le potenzialit\u00e0 fornite da questo Framework senza dover scrivere una sola riga in Javascript:<\/p>\n\n\n\n@page \"\/bonus\"<\/code> definisce che il componente in oggetto viene caricato seguendo la regola di route definita “\/bonus<\/em>“<\/li>@bind<\/code> a riga 11 viene definito che il valore dell’elemento di input definito sul client deve essere in binding con la variabile item.Amount<\/code>. Questo binding \u00e8 bidirezionale, quindi al variale del valore dell’input, la property item.Amount<\/code> verr\u00e0 anch’essa aggiornata. <\/li>@bind:event=\"oninput\"<\/code> a riga 11 viene definito un’ulteriore opzione; di default l’aggiornamento del value dell’input (e quindi dell’item.Amount<\/code>) avviene nel momento in cui rilascio il click del mouse e di fatto termino lo slide del range input control. Tramite il parametro @bind:event<\/code> \u00e8 possibile ridefinire l’evento di default che governa il binding. Per questo esempio specifico si vuole imporre che l’aggiornamento del valore avvenga non appena viene modificata la posizione del range element.<\/li>@Remaining.ToString(\"c0\")<\/code> \u00e8 possibile sfruttare .NET per impostare le formattazioni dei valori<\/li>style=\"width: @( Math.Round(100 * (item.Amount + Remaining) \/ totalBudget,0))%\"<\/code>anche questo aspetto \u00e8 interessante, ovvero pensare di controllare dinamicamente gli stili grafici degli elementi client direttamente tramite delle espressioni C#.<\/li><\/ul>\n\n\n\nBlazor Client<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2020\/10\/balzor-host-client.png\")
<\/figure><\/div>\n\n\n\n
Scegliendo questo target, si abilita anche l’opzione Progressive Web Application<\/em>, di cui analizzeremo in seguito le caratteristiche di questa ulteriore importante feature:![\"\"](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2020\/10\/VS2019-create-webapp-2.gif\")
<\/p>\n\n\n\n\n@inject Cart Cart\n\n<header>\n <SearchBox OnItemChosen="HandleItemChosen" \/>\n<\/header>\n\n<main>\n @foreach (var row in Cart.Rows)\n {\n <CartRowDisplay @key="row.Key" Data="row" \/>\n }\n<\/main>\n\n@if (Cart.HasAnyProducts)\n{\n <footer>\n <button class="remove-item" @onclick="EnterRemoveMode">\u2717 Remove item<\/button>\n <div>Total: <span class="price">@Cart.GrandTotal.ToString("c")<\/span><\/div>\n <button>\ud83d\udcb3 Checkout<\/button>\n <\/footer>\n}\n\n@if (isInRemoveMode)\n{\n <Overlay>\n <p>Scan an item to remove<\/p>\n <button @onclick="@(() => { isInRemoveMode = false; })">Cancel<\/button>\n <\/Overlay>\n}\n\n@code {\n bool isInRemoveMode;\n\n void EnterRemoveMode()\n {\n isInRemoveMode = true;\n }\n\n async Task HandleItemChosen(string ean)\n {\n if (isInRemoveMode)\n {\n Cart.RemoveItem(ean);\n isInRemoveMode = false;\n }\n else\n {\n await Cart.AddItemAsync(ean);\n }\n }\n}\n<\/pre><\/div>\n\n\n
Le sezioni al loro interno richiamano altri Component definiti in altri file .razor<\/em> utilizzando come tag HTML il nome del Component stesso. Questo approccio facilita la riutilizzabilit\u00e0 del codice e ne favorisce anche la sua modularizzazione.
Alcune delle peculiarit\u00e0 di Blazor sono gi\u00e0 state affrontate nella sezione precedente, ora il focus verr\u00e0 posto su altre feature chiave per la soluzione di tipo Web Assembly. <\/p>\n\n\n\ngRPC<\/h2>\n\n\n\n
La chiamata AddItemAsync <\/em>di fatto si occupa di recuperare i dettagli del prodotto dato un codice EAN in input. Questi dettagli per\u00f2 risiedono nel back-end del Server, quindi quello che normalmente si fa \u00e8 fare una chiamata API RESTful per ottenere le informazioni che servono. Questo approccio resta corretto logicamente, ma ha quale limite; nella maggior parte dei casi il content della risposta dal Server \u00e8 in formato JSON il quale, seppur semplice da usare, porta con s\u00e8 alcuni limiti intrinseci:<\/p>\n\n\n\novverride<\/code> dei metodi dichiarati con le rispettive implementazioni.<\/p>\n\n\n\nGrpc.AspNetCore<\/code> e Knowit.Grpc.Web<\/code><\/li>\nsyntax = \"proto3\";\n\noption csharp_namespace = \"BlazorMart.Server\";\n\npackage Inventory;\n\nservice Inventory {\n rpc Autocomplete (AutocompleteRequest) returns (AutocompleteReply);\n rpc ProductDetails (ProductDetailsRequest) returns (ProductDetailsResponse);\n}\n\nmessage AutocompleteRequest {\n string searchQuery = 1;\n}\n\nmessage AutocompleteReply {\n repeated AutocompleteItem items = 1;\n}\n\nmessage AutocompleteItem {\n string EAN = 1;\n string name = 2;\n}\n\nmessage Product {\n\tstring EAN = 1;\n\tstring name = 2;\n\tint32 price = 3;\n\tstring description = 4;\n\tstring imageUrl = 5;\n}\n\nmessage ProductDetailsRequest {\n\tstring EAN = 1;\n}\n\nmessage ProductDetailsResponse {\n\tProduct Product = 1;\n}\n<\/pre><\/div>\n\n\n\npublic class InventoryService : Inventory.InventoryBase\n {\n private static Product[] _products = JsonSerializer.Deserialize<Product[]>(\n File.ReadAllText("products.json"));\n\n public override Task<AutocompleteReply> Autocomplete(AutocompleteRequest request, ServerCallContext context)\n {\n var result = new AutocompleteReply();\n\n if (!string.IsNullOrEmpty(request.SearchQuery))\n {\n var matches = _products\n .Where(p => p.Name.StartsWith(request.SearchQuery, StringComparison.CurrentCultureIgnoreCase))\n .Select(p => new AutocompleteItem { EAN = p.EAN, Name = p.Name })\n .Take(10); \/\/ Limit to this many results\n result.Items.AddRange(matches);\n }\n\n return Task.FromResult(result);\n }\n\n public override async Task<ProductDetailsResponse> ProductDetails(ProductDetailsRequest request, ServerCallContext context)\n {\n await Task.Delay(500); \/\/ Look busy\n var product = _products.FirstOrDefault(p => p.EAN == request.EAN);\n return new ProductDetailsResponse { Product = product };\n }\n }\n<\/pre><\/div>\n\n\n
Ora spostiamo l’attenzione lato Client e cerchiamo di rispondere alla domanda: come si pu\u00f2 richiamare il Server tramite il servizio definito? Molto semplicemente andando ad aggiungere una reference all’interno del file .csproj del progetto Client<\/li><\/ol>\n\n\n\n<Project Sdk="Microsoft.NET.Sdk.Web">\n\n <PropertyGroup>\n <TargetFramework>netstandard2.1<\/TargetFramework>\n <OutputType>Exe<\/OutputType>\n <LangVersion>7.3<\/LangVersion>\n <RazorLangVersion>3.0<\/RazorLangVersion>\n \n <!-- Because the linker doesn't yet work with netstandard2.1 -->\n <BlazorLinkOnBuild>false<\/BlazorLinkOnBuild>\n <\/PropertyGroup>\n\n <ItemGroup>\n <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview9.19457.4" \/>\n <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview9.19457.4" PrivateAssets="all" \/>\n <PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.0.0-preview9.19457.4" \/>\n <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview9.19457.4" PrivateAssets="all" \/>\n\n <PackageReference Include="Google.Protobuf" Version="3.13.0" \/>\n <PackageReference Include="Grpc.Net.Client" Version="2.32.0" \/>\n <PackageReference Include="Grpc.Tools" Version="2.32.0" PrivateAssets="all">\n <IncludeAssets>build; analyzers; buildtransitive<\/IncludeAssets>\n <\/PackageReference>\n <\/ItemGroup>\n\n <ItemGroup>\n <Protobuf Include="..\\BlazorMart.Server\\Protos\\inventory.proto" GrpcServices="Client" \/>\n <\/ItemGroup>\n\n<\/Project>\n<\/pre><\/div>\n\n\n
PWA<\/h2>\n\n\n\n
PWA – Come creare un’applicazione installabile sul Client?<\/h4>\n\n\n\n
\n{\n \"short_name\": \"BlazorMart\",\n \"name\": \"BlazorMart\",\n \"icons\": [\n {\n \"src\": \"icon-512.png\",\n \"type\": \"image\/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \"\/\",\n \"background_color\": \"#006B41\",\n \"display\": \"standalone\",\n \"scope\": \"\/\",\n \"theme_color\": \"#006B41\"\n}\n<\/pre><\/div>\n\n\n<head><\/code> della index page come segue: <\/p>\n\n\n\n<link rel="manifest" href="manifest.json" \/>\n<\/pre><\/div>\n\n\n
PWA – Service Worker<\/h4>\n\n\n\n
Vediamo un esempio di file service.worker.js<\/strong>:<\/p>\n\n\n\nconst cacheName = 'offline-cache';\nlet handleAsOfflineUntil = 0;\n\nself.addEventListener('install', async event => {\n console.log('Installing service worker...');\n await Promise.all((await caches.keys()).map(key => caches.delete(key)));\n await (await caches.open(cacheName)).addAll(['loading.gif']);\n self.skipWaiting();\n});\n\nself.addEventListener('fetch', event => {\n \/\/ Don't interfere with API calls\n if (event.request.method !== 'GET' || event.request.url.indexOf('\/_framework\/debug') >= 0) {\n return;\n }\n\n event.respondWith(getFromNetworkOrCache(event.request));\n});\n \nasync function getFromNetworkOrCache(request) {\n if (new Date().valueOf() > handleAsOfflineUntil) {\n try {\n const networkResponse = await fetchWithTimeout(request, 1000);\n (await caches.open(cacheName)).put(request, networkResponse.clone());\n console.info('Fetched from network: ' + request.url);\n return networkResponse;\n } catch (ex) {\n handleAsOfflineUntil = new Date().valueOf() + 3000; \/\/ Next 3 seconds\n }\n }\n\n \/\/ Fall back on cache\n console.info('Fetching from cache: ' + request.url);\n return caches.match(request);\n}\n\nfunction fetchWithTimeout(request, timeoutMs) {\n return new Promise((resolve, reject) => {\n setTimeout(() => reject('Timed out'), timeoutMs);\n fetch(request).then(resolve, reject);\n });\n}\n<\/pre><\/div>\n\n\n\n<script>\n navigator.serviceWorker.register('service-worker.js');\n<\/script>\n<\/pre><\/div>\n\n\n
![\"\"](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2020\/10\/iconfinder_outlined_like_4280463.png\")
<\/td>![\"\"](\"https:\/\/cloudsurfers.it\/wp-content\/uploads\/2020\/10\/iconfinder_outlined_dislike_4280531.png\")
<\/td>