Blazor è la tecnologia per lo sviluppo delle applicazioni web del futuro che
Microsoft ha offerto al mondo degli sviluppatori.
Blazor Lightboard è una dashboard di amministrazione leggera e velocissima che ho creato per aiutare l’apprendimento di questa tecnologia.
Cos’è Blazor
Microsoft ha ideato Blazor come risposta all’esigenza dei programmatori che non volevano utilizzare Javascript / Typescript per lo sviluppo del front end e C# per il back end delle applicazioni web.
Blazor consente di utilizzare C# per tutto lo sviluppo e di riutilizzare gran parte del codice e delle librerie di back end.
Le caratteristiche di Blazor, tratte direttamente dalla documentazione Microsoft, sono:
- Creazione di interfacce utente interattive avanzate con C# invece di JavaScript.
- Condivisione della logica dell’app scritta in .NET sul lato client e sul lato server.
- Esecuzione del rendering dell’interfaccia utente come HTML e CSS per un ampio supporto dei browser, inclusi i browser per dispositivi mobili.
L’uso di .NET per lo sviluppo Web lato client offre i vantaggi seguenti:
- Scrivere codice in C# invece che in JavaScript.
- Permette di sfruttare l’ecosistema .NET esistente di librerie.
- Permette di condividere la logica dell’app tra server e client.
- Permette di ottenere le prestazioni, l’affidabilità e la sicurezza di .NET.
- Produttività con Visual Studio in Windows, Linux e macOS.
- Basato su un set comune di linguaggi, framework e strumenti che sono stabili, ricchi di funzionalità e facili da usare.
Tecnologia a componenti
In Blazor le app sono basate su componenti. Un componente di Blazor è un elemento dell’interfaccia utente, ad esempio una pagina, una finestra di dialogo o un form di immissione dati.
I componenti sono classi .NET compilate che:
- Definiscono la logica di rendering dell’interfaccia utente.
- Gestiscono gli eventi utente.
- Possono essere annidati e riutilizzati.
- Possono essere condivisi e distribuiti come librerie di classi Razor oppure pacchetti NuGet.
Come si sviluppa in Blazor
Vediamo un esempio di pagina di avvio Index.razor
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<Dialog Title="Blazor">
Do you want to <i>learn more</i> about Blazor?
</Dialog>
Come si può vedere all’interno del codice è presente un nuovo tag chiamato “Dialog“. Questo componente non è altro che una pagina Razor che contiene una sua logica applicativa innestabile:
<div>
<h1>@Title</h1>
@ChildContent
<button @onclick="OnYes">Yes!</button>
</div>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
private void OnYes()
{
Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
}
}
In pratica il codice qui sopra viene salvato in un file denominato Dialog.razor che si innesta nel file precedente e genera un’unico file HTML.
Tutta questa logica di funzionamento è gestita da Blazor in modo trasparente e garantendo l’utilizzo di C# per la logica e per gli eventi.
Il progetto Blazor Lightboard
Blazor Ligtboard è una dashboard di amministrazione super leggera ed estremamente rapida, che nasce per aiutare gli sviluppatori nell’avvio di un nuovo progetto basato su Blazor.
Oltre al design innovativo, Blazor Lightboard contiene uno State Manager e la gestione della persistenza via Local Storage.
Blazor Lightboard è un’ottima base per imparare ad usare Blazor partendo da un progetto pre costruito.
Scarica subito il progetto via Github: https://github.com/nbiada/BlazorLightboard
Nelle prossime settimane utilizzerò il progetto Blazor Lightboard per introdurre alcuni concetti fondamentali e diversi tips utili per velocizzare l’avvio dei progetti.
