Settembre 2018
Volume 33 numero 9
Il presente articolo è stato tradotto automaticamente.
Cutting Edge - Never Mind JavaScript, Blazor Ecco
Dal Dino Esposito
.jpg "Dino Esposito")
Su un decennio fa "Mainstream" Web arresto in corrispondenza di un crossroad. In genere interpretato, tecnologie lato client, ad esempio HTML, CSS e JavaScript stessero scompare, progressivamente sovraccaricati compilate le tecnologie e linguaggi come XAML e c#. Allo stesso tempo, l'ambiente browser sembrata pronta a incorporare nativo, dedicata del motore di elaborazione, ad esempio Silverlight, che è stato installato come plug-in separato. Quindi il primo bozze di HTML 5 sono state visualizzate all'orizzonte e, poco dopo, Silverlight è stato sunsetted.
La serie di eventi scossa data al backup il panorama applicativo come decision maker dell'IT cercata una piattaforma ideale per lo sviluppo Web multipiattaforma. HTML5 ha ricevuto un aumento di priorità e JavaScript ha iniziato la risposta. Oggi, Angular, React e Vue sono molto popolari Framework basati su JavaScript che più team di sviluppo scelta per la compilazione i front-end.
Blazor viene visualizzata come possibile alternativa all'Angular/React/Vue e, grazie a WebAssembly (WASM), viene aperto il Web per poter sfruttare i vantaggi degli ecosistemi di sviluppo esistenti, tra cui .NET. Pertanto, più di un altro framework JavaScript Model-View-ViewModel MVVM-orientata ai servizi, Blazor è, in una certa misura, un tentativo di moderni per rinnovare e migliorare il concetto di Silverlight, portando le potenzialità del linguaggio c# per lo sviluppo Web lato client. Il nucleo di Blazor è progettato per offrire un ambiente fortemente tipizzato e basata su browser su cui basare front-end Web usando c# e .NET Core, anziché Razor su HTML e JavaScript. Tuttavia, Blazor non effettua il push HTML e CSS nell'angolo. Piuttosto, estende la sintassi HTML con una raccolta di helper di tag Razor predefinito durante la che non richiedono alcun plug-in da installare.
Consigliabile che Blazor è ancora in gran parte in fase di sviluppo e qualunque sia la lettura qui può cambiare radicalmente in solo poche settimane. Il codice presentato in questo articolo si basa sulla versione 0.5.0 rilasciata a luglio 2018.
In questo articolo, verrà illustrato l'architettura di sistema sottostante di un'applicazione Blazor e presentare un'applicazione minima "Hello World".
La magia di Blazor
Se si proviene da uno sfondo a Silverlight, ci si potrebbe chiedere come Blazor: una piattaforma di JavaScript non, ovvero possono eseguire nel browser senza un installabile plug-in. La risposta è che, Ebbene, questo non è possibile. Blazor richiede effettivamente una sorta di plug-in all'interno di un browser conforme. Il trucco è che il cosiddetto concettuale del plug-in già incorporati in un browser più moderni (quelli rilasciati negli ultimi 12 mesi), e possono essere facilmente polyfilled tramite JavaScript nei browser meno recenti. A differenza dei plug-in discreti, ad esempio Adobe Flash o Silverlight, lo strumento di attivazione del supporto Blazor è WASM, uno standard aperto in fase di sviluppo in un gruppo di Community di W3C che include rappresentanti di tutti i principali browser.
Tecnicamente, WASM è un formato binario per basato su stack macchine virtuali (VM), a livello di architettura è simile a CLR di .NET e Java Virtual Machine, ma a differenza delle VM Dalvik Android. Come destinazione della compilazione di linguaggi di programmazione di alto livello, WASM ha la possibilità di abilitare la distribuzione delle applicazioni .NET tramite il Web. A tale scopo, tuttavia, un bridge è necessario per convertire WASM il runtime di .NET. Blazor basata ampiamente sul lavoro svolto da Xamarin per portare il framework Mono WASM. Il codice .NET contenuto in un'applicazione Blazor viene eseguito su una versione di Mono compilato in modo specifico per WASM, come illustrato nella figura 1.
.png "Codice .NET in esecuzione nel Browser")
Figura 1 codice di .NET in esecuzione nel Browser
Come è diverso, ad esempio, Silverlight? Le applicazioni Silverlight è stato eseguito in modalità sandbox in una shell di specifiche del browser che comunicano con l'ambiente browser contenitore tramite ActiveX in Internet Explorer e NPAPI negli altri browser come Chrome e Firefox (vedere documentazione all'indirizzo bit.ly/2klDgdY). Oggi, la maggior parte dei browser sta ignorando supporto per NPAPI a favore WebAssembly. Blazor accetta molti dei concetti migliori di Silverlight e li applica in modo da suscitare l'interesse per gli sviluppatori alla ricerca di un'alternativa a JavaScript.
Per quanto riguarda i browser legacy?
Strumenti di sviluppo tra il codice di compilazione per entrambi WASM e asm.js, ovvero un sottoinsieme di basso livello di codice JavaScript, deve essere una destinazione di compilazione dai linguaggi di alto livello (vedere asmjs.org). Blazor, in particolare, torna a usare un runtime di .NET basate su asm.js. Quindi il codice distribuito esegue il rilevamento di funzionalità nel browser per determinare la modalità di esecuzione. Si noti che il framework asm.js intero è attualmente in ricerca e sviluppo.
È possibile visitare caniuse.com per controllare quali browser versioni supportano attualmente WASM. Il sito viene rilevato che tutte le versioni del browser (desktop e mobile) rilasciato dalla metà del 2017 e nel supporto. Si noti che al momento della stesura di questo articolo, Blazor polyfill temporaneamente non funziona con Internet Explorer.
Anatomia di un'applicazione Blazor
Un'applicazione Blazor è una normale libreria .NET Standard con un punto di ingresso Program.Main Ottiene scaricato ed eseguito nel browser. Solo il runtime di .NET viene compilato per WASM; il codice sorgente che scritto nel linguaggio c# viene eseguito in modo nativo come se fosse una normale applicazione .NET. Per cancellare i problemi di sicurezza, si noti che tutto il codice Blazor continui a essere eseguita nell'ambiente sandbox sicura stesso come JavaScript. Figura 2 Mostra l'elenco dei file scaricati dall'applicazione Blazor campione presentato nel resto di questo articolo.
.png "File scaricati dall'applicazione Blazor di esempio")
Figura 2 i file scaricati dall'applicazione Blazor di esempio
Il colore di sfondo differente che è illustrata nella figura identifica due momenti distinti nel ciclo di vita di un'applicazione Blazor. In primo luogo, vengono scaricati i file blazor.js e mono.js per coordinare il download del runtime di Mono WebAssembly (il file mono.wasm). Al momento, il runtime di Mono include una versione relativamente ricco di funzionalità di .NET e pesa 600KB. Tuttavia, nelle versioni precedenti un'opzione di compact è risultata disponibile in una frazione della dimensione. Si tratta di un'area in cui è stato possibile usare alcune analisi utilizzo software e l'ottimizzazione.
Dopo aver scaricato il runtime di Mono, inizia il download degli assembly .NET effettivi. Il passaggio di inizializzazione potrebbe richiedere qualche minuto, ovvero circa tre secondi nell'esempio nella figura 2. Per questo motivo, il modello di Visual Studio Blazor standard fornisce un'area dedicata per l'interfaccia utente da visualizzare durante la fase di caricamento. Diamo un'occhiata a un'applicazione di esempio.
Creazione di un'applicazione di esempio
Per riprodurre con Blazor, è necessario .NET Core 2.1 e Visual Studio 15.7 o successiva. Inoltre, è necessario installare i modelli Blazor da Visual Studio marketplace. Il modello si trova nella cartella applicazione Web ASP.NET Core. Esistono attualmente tre modelli — normale Blazor lato client, applicazione ospitata da ASP.NET Core e Blazor lato server. Torniamo per una normale applicazione Blazor senza dipendenze in qualsiasi ambiente di back-end. Questo scenario molto simile a quello di un Angular/React o persino un'applicazione Silverlight, ovvero un'applicazione client normale scaricato ed eseguito all'interno del browser.
Come accennato, il progetto in Visual Studio è un'applicazione console .NET Standard 2.0 basata su due pacchetti NuGet specifici: Blazor.Build e Blazor.Browser. Entrambi contengono una radice dello spazio dei nomi Microsoft. aspnetcore.
Il progetto è un progetto .NET Core standard con un programma di bootstrap di Program.cs, una classe Startup.cs e alcune cartelle che è importante ricordare di un'applicazione ASP.NET Core, ad esempio wwwroot, condiviso e le pagine. Come indicato di seguito viene illustrato il metodo Main:
public class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}
public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
BlazorWebAssemblyHost.CreateDefaultBuilder()
.UseBlazorStartup<Startup>();
}
Viene eseguita un'applicazione Blazor dei componenti che ogni costituiti da un file Razor. cshtml. Per impostazione predefinita, il nome del file con estensione cshtml è il nome del componente. Nell'applicazione di esempio, App è il nome del componente avvio il cui codice sorgente è in app.cshtml, come illustrato di seguito:
<Router AppAssembly=typeof(Program).Assembly />
Come minimo, la classe startup indica la classe di App da usare.
public class Startup
{
public void Configure(IBlazorApplicationBuilder app)
{
app.AddComponent<App>("app");
}
}
Il componente router Blazor imposta solo il modulo dell'App. In siti Web tradizionali (ad esempio, ASP.NET), il routing viene eseguito nel server, ma nelle applicazioni a pagina singola preferibilmente avviene tramite un componente sul lato client dedicato. In Blazor, il router non viene effettuato per JavaScript (come succede, ad esempio, Angular), ma, invece, è un'istanza della classe Router interna che consente di analizzare tutte le classi nell'assembly di riferimento, cercando quelli che implementano l'interfaccia IComponent.
Il router è responsabile dell'intercettazione di tutte le attività di spostamento, sia interna ed esterna e consentirne. Chiaramente, componenti Blazor dovrebbero fornire informazioni di routing per il router essere richiamati in modo appropriato. Blazor supporta la stessa notazione @page di Razor Pages in ASP.NET Core. Inoltre, supporta l'attributo della Route per le classi di componenti scritte in c# semplice.
La pagina singola
In genere, un'applicazione a pagina singola inizia da una pagina index. HTML. Un'applicazione Blazor non costituisce un'eccezione e la singola pagina si trova nella cartella wwwroot. La singola pagina deve contenere almeno il markup seguente:
<app>
<!—initialization markup -->
</app>
<script src="_framework/blazor.webassembly.js"></script>
Viene visualizzato il contenuto dell'elemento app durante il caricamento iniziale della piattaforma Blazor, vale a dire il primo blocco di file nell'elenco degli figura 2. È possibile avere qualsiasi codice HTML valido nell'elemento app, in genere un file GIF durante il caricamento. L'elemento script è responsabile in modo dinamico il download dei file con estensione dll necessari.
Il contenuto effettivo visualizzato della home page di è determinato dal router e il resto del contenuto del file index. HTML rilevato in seguito l'elemento script. È opportuno esaminare il lavoro svolto dal router.
Il router Controlla URL richiesto, ovvero la radice del sito distribuito e cerca un componente registrato che può corrispondere all'URL radice. Nel progetto di esempio, la cartella contiene un file index. cshtml che inizia con il contenuto seguente:
@page "/"
<h1>Hello, Blazor!</h1>
Welcome to your first BLAZOR app.
La direttiva @page indica il router sul modello di da prelevare. Se viene trovato un file di viewimports. cshtml nella cartella pagine (e/o la cartella radice), il relativo contenuto viene eseguito nell'account. Nel progetto di esempio, il file viewimports nella cartella radice contiene un elenco di mediante istruzioni, mentre il file viewimports nella cartella pagine contiene un riferimento al modello di layout:
@layout MainLayout
Successivamente, il contenuto del MainLayout.cshtml viene elaborato e il segnaposto @Body popolata con l'output di visualizzazione Razor (cshtml) selezionata. Nel progetto di esempio, il file di layout (disponibile nella cartella condivisa, come in ASP.NET Core) contiene un tipico elemento scuro nella barra di spostamento Bootstrap 4. Di seguito è riportato il codice:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
...
</nav>
<div class="container">
@Body
</div>
Anche in questo caso, se si proviene da un background di ASP.NET MVC, questo modello di programmazione dovrebbe risultare familiare. Nella barra di spostamento sono generalmente i collegamenti. È possibile esprimere gli helper tag Razor di collegamenti tramite l'oggetto canonico e pulsante elementi, o usare uno degli operatori (o personalizzato). In particolare, Blazor viene fornito con il componente helper NavLink, che offre una sintassi più semplice per esprimere i collegamenti che possono o potrebbero non essere normale URL. In un'applicazione a pagina singola, in realtà, un collegamento può essere qualsiasi elemento che comprensibile al router. Ecco un frammento di codice Razor utilizzato nella barra di spostamento dell'applicazione di esempio:
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<NavLink class="nav-link" href="digitalclock">
DIGITAL CLOCK
</NavLink>
</ul>
</div>
L'attributo href punta a un URI che può corrispondere solo a route da un componente, ad esempio "digitalclock", un file con estensione CSHTML separato completamente implementato un componente di orologio digitale. Il file digitalclock.cshtml si trova nella cartella pagine.
Creazione di un componente di esempio
Un componente Blazor è una parte indipendente di HTML e c#. Qualsiasi CSS necessarie va in file separati, ragionevolmente denominata dopo il componente stesso. Si noti che Blazor non esegue alcuna operazione speciale con CSS e non impone alcun convenzione. Gestione di CSS è completamente responsabilità dell'utente. Ecco un orologio digitale implementato come un gruppo di input Bootstrap:
<div class="clock">
<div class="input-group">
<span class="@currentCss">@currentTime</span>
<div class="input-group-append">
<button class="btn btn-primary"
type="button"
onclick="@startStop">@buttonAction</button>
</div>
</div>
</div>
Le espressioni di Razor come currentCss, currentTime e buttonAction fare riferimento ai campi di componenti definiti all'interno della sezione @functions del file. È possibile vederli qui:
@functions {
string currentTime = "N/A";
string buttonAction = "N/A";
string currentCss = "clock-notset";
Timer timer;
...
}
L'espressione startStop fa riferimento a un metodo da richiamare quando si arresta o Avvia fa clic sul pulsante per avviare o arrestare il timer. Figura 3 presenta il codice completo del componente DigitalClock.
Figura 3 C# codice del componente DigitalClock
@functions {
string currentTime = "N/A";
string buttonAction = "N/A";
string currentCss = "clock-notset";
Timer timer;
protected override async Task OnInitAsync()
{
InitTimer();
StartTimer();
}
void startStop()
{
if (timer.Enabled)
{
StopTimer();
}
else
{
StartTimer();
}
}
private Task TimerTick()
{
currentTime = DateTime.Now.ToLongTimeString();
currentCss = "clock-working";
this.StateHasChanged();
return Task.CompletedTask;
}
private void InitTimer()
{
timer = new Timer(1000);
timer.Elapsed += async (sender, e) => await TimerTick();
}
private void StartTimer()
{
buttonAction = "STOP";
timer.Start();
}
private void StopTimer()
{
buttonAction = "START";
timer.Stop();
}
}
Figura 4 viene illustrata l'interfaccia di programma.
.png "L'applicazione di esempio in azione")
Figura 4 l'applicazione di esempio in azione
La demo presenta un orologio digitale il backup da un timer .NET. Associazione dati è automatica per gli eventi attivati tramite un'azione esplicita dell'utente (ad esempio, quando viene selezionato un pulsante), ma non quando l'evento viene generato a livello di programmazione, ad esempio come tramite un timer. Nel secondo caso, è necessario chiamare il metodo StateHasChanged per forzare il renderer di browser per aggiornare la visualizzazione. Ecco il codice del gestore dei segni di graduazione del timer all'interno del componente Blazor orologio digitale:
private Task TimerTick()
{
currentTime = DateTime.Now.ToLongTimeString();
currentCss = "clock-working";
this.StateHasChanged();
return Task.CompletedTask;
}
Il codice sorgente completo è reperibile in bit.ly/2LVeCxA.
Conclusioni
Blazor è un framework sperimentale imminente per la compilazione. Basata su rete applicazioni a singola pagina in esecuzione nel browser tramite WebAssembly. WebAssembly viene creata mediante sandbox consente di distribuire i file binari nativi in un browser conforme, essenzialmente tutti i browser forniti dalla metà del 2017. Blazor utilizza Razor e c# per Progettazione viste e include un router e un'interfaccia utente componibile Analogamente alla maggior parte di altri framework JavaScript più diffusi.
Questo articolo presenta le basi di un'applicazione lato client. Negli articoli futuri, esplorerò l'integrazione con il back-end ASP.NET Core specifico e i punti di estendibilità Blazor. Altre informazioni su Blazor nelle articolo Jonathan Miller che descrive le attività piuttosto necessarie per un'applicazione lato client di scaricare i dati JSON da endpoint HTTP.
Dino Espositoha scritto più di 20 libri e 1.000 articoli della sua carriera di 25 anni. Autore di "The congedo Sabbatico Break," Mostra un stile: manifestazioni teatrali, Esposito è occupato di scrittura di software per un mondo ecocompatibile come il strategist digitale in BaxEnergy. Seguirlo su Twitter: @despos.
Si ringraziano i seguenti esperti tecnici per la revisione dell'articolo: Daniel Roth (Microsoft), Jonathan Miller