Blazor è un framework per la creazione di Single Page Application (SPA) tramite l’utilizzo di C#. Creato da Steve Sanderson e successivamente inserito in .NET Core come esperimento. Visto l’enorme successo avuto sulla community è stato poi deciso di renderlo parte integrante dell’ecosistema .NET Offre tutti i vantaggi di un framework front-end scrivendo codice interamente in C#.

1. BLAZOR w/ .NET 5
Gerardo Greco 16/12/2020

2. Gerardo Greco
Web Developer @giuneco
• .NET Full & Core
• MVC
• Blazor Server & WASM

3. • Che cos’è Blazor
• Componenti
• Modelli di hosting
• WebAssembly
• Principali novità
www.giuneco.tech
Mini agenda

4. Blazor è un framework per la creazione di Single Page Application (SPA)
tramite l’utilizzo di C#.
Creato da Steve Sanderson e successivamente inserito in .NET Core come
esperimento.
Visto l’enorme successo avuto sulla community è stato poi deciso di renderlo
parte integrante dell’ecosistema .NET
Offre tutti i vantaggi di un framework front-end scrivendo codice
interamente in C#.
www.giuneco.tech
Che cos’è Blazor

5. • Ecosistema .NET
• Condivisione della logica dell’app tra client e server
• Lo sviluppatore non è costretto a scrivere codice Javascript
• È comunque possibile l’utilizzo di librerie Javascript
• Nessuna code transpilation (a differenza di Bridge.NET)
www.giuneco.tech
Perché utilizzare Blazor

6. I componenti sono blocchi autonomi dell’interfaccia utente, come una
pagina, una finestra di dialogo una form etc.
Caratteristiche
• Sono composti da codice HTML e Razor per la parte di «view» e C# per la parte di
«business logic»
• La loro estensione è .razor
• Sono riutilizzabili all’interno del codice e condivisibili tra progetti
• Possono essere utilizzato all’interno di altri componenti come un qualsiasi altro
tag HTML
www.giuneco.tech
Tutto è un componente

7. www.giuneco.tech
Blazor serverBlazor webassembly
https://...
DOM
Componenti
.NET (mono)
WebAssembly
https...
DOM
.NET Core
SignalR
Componenti
.NET
Modelli di hosting

8. • È uno standard web aperto e sviluppato da W3C che definisce un
formato binario compilabile da linguaggi di più alto livello che
permette di far girare del codice all'interno dello stesso runtime nel
quale gira javascript.
www.giuneco.tech
WebAssembly (wasm)
≠

9. Miglioramento delle performance con focus su:
www.giuneco.tech
Principali novità
https://github.com/dotnet/aspnetcore/tree/master/src/Components/benchmarkapps/Wasm.Performance/TestApp
Serializzazione JSON Rendering delle pagine

10. www.giuneco.tech
Principali novità
• CSS isolation
• Javascript isolation
• Virtualizzazione dei componenti
• Nuovi componenti: Inputfile, InputRadio, InputRadioGroup
• Lazy loading delle dll

11. CSS isolation
www.giuneco.tech
Principali novità
È possibile definire CSS all’interno di un singolo componente
Questo fa si che lo stile globale di una pagina web non sovrascriva quello dello
specifico componente.
È possibile far ereditare lo stile anche ai figli del componente principale tramite lo
pseudo-elemento ::deep

12. Javascript isolation
www.giuneco.tech
Principali novità
Grazie a JSInteropt è possibile utillizzare Javascript con Blazor e viceversa.
Fino a .NET Core 3.1 era necessario le nostre funzioni Javascript fossero esposte nel
namespace globale Window. Inoltre era necessario referenziare il/i file javascript.
In .NET 5 questo non è più necessario. È possibile caricare codice javascript per uno
specifico componente

13. Virtualizzazione dei componenti
www.giuneco.tech
Principali novità
La virtualizzazione è una tecnica per limitare il rendering dell'interfaccia utente alle
sole parti attualmente visibili. L’effetto che si avrà sarà quello dell’ infinity scroll.
Ad esempio, quando si dispone di un lungo elenco o di una tabella con molte righe,
grazie alla virtualizzazione è possibile generare solo la parte visibile all’utente.
Questo comporta una maggiore velocità nel presentare i dati.

14. Lazy loading assemblies
www.giuneco.tech
Principali novità
Al primo caricamento vengono scaricate tutte le dl, anche se poi utilizzate in pagine
differenti da quella attualmente visibile o persino utilizzati in una sola pagina.
Per ottimizzare il processo di startup è possibile ricorrere al lazy loading delle dll.

15. DEMO

16. www.giuneco.tech
Riferimenti e contatti
• https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/
• https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-2/
https://www.facebook.com/Giuneco
http://www.giuneco.tech/
https://www.instagram.com/giuneco

17. GRAZIE PER L’ATTENZIONE
www.giuneco.tech