Introduction to Blazor and WebAssembly in Christmas sauce. In this session we will see how to create a small demonstration application to send Christmas greetings.

1. Biglietti
d’Auguri
Natalizi
con Blazor
Nicolò Carandini [MVP]
@tpcware
n.carandini@outlook.com

2. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Agenda
WebAssembly alla riscossa
ASP.NET Blazor
• A cosa serve e come si usa
• Demo
• Crash course
• Demo
JavaScript come unico linguaggio Web
• Performance e criticità

3. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
JavaScript
• Insieme a HTML e CSS, è
una delle tre tecnologie
principali del World Wide
Web.
• JavaScript abilita le pagine
Web interattive e quindi è
una parte essenziale delle
applicazioni web.
• La stragrande maggioranza
dei siti Web lo utilizza e tutti
i principali browser Web
hanno un motore JavaScript
dedicato per eseguirlo.
HTML
Style
Sheets
HTML
Parser
CSS
Parser
DOM
Tree
DOM
Style
Rules
Render
Layout
Render
Tree
Paint
JavaScript JS VM

4. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
JavaScript
performance
1995
Javascript viene eseguito
nei web browser come
linguaggio interpretato.
2008
Google introduce Google
Chrome col suo JavaScript
engine V8, che utilizza il
Just in Time Compiler (JIT).
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported

5. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Good, but not enough!
L’incremento delle prestazioni di JavaScript
è uno degli elementi cardine per la creazione
di applicazioni Web complesse.
Ma questo non è ancora sufficiente perché:
• Rimane forte l’esigenza di poter utilizzare
altri linguaggi ed altri framework.
• I tempi di parsing del codice JavaScript e di
ottimizzazione del codice sono penalizzanti
in alcuni scenari di grafica 3D, V/A Reality e
più generalmente di calcoli intensivi.
• Specialmente nei device mobili non sempre
sono disponibili le risorse necessarie
all’esecuzione ottimale di JavaScript.

6. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Un’alternativa a
JavaScript
Prima di HTML5 ci sono stati molti
tentativi di creare degli strumenti
che si imponessero come standard di
fatto per creare applicazioni Web,
tutti falliti perché ogni azienda aveva
la sua specifica proposta,
incompatibile con le altre.
Microsoft già dal 1999 parlava di
Rich Client App, ma fu Macromedia
nel 2002 a coniare il termine
RIA – Rich Internet Application.

7. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
La guerra ai plugin
Uno dei difetti più noti dei vari metodi
per la realizzazione delle RIA consisteva
nella necessità di utilizzare i famigerati
plugin, che determinavano problemi di:
• Compatibilità coi diversi web browser
• Consumo risorse
• Introduzione bug
• Falle di sicurezza (soprattutto con Adobe Flash)
L’uso di plugin per l’esecuzione di framework esterni
termina nel 2014 con l’avvento di HTML5.
www.google.com/googlebooks/chrome

8. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
WebAssembly
alla riscossa
E’ uno standard W3C sviluppato
con il contributo di Mozilla, Apple
e Microsoft.
Consente l’uso di linguaggi diversi
da Javascript per generare codice
compatto, portabile ed
estremamente veloce.
E’ molto recente, visto che la prima
versione è di marzo 2017, ma è già
supportato da tutti i maggiori
browser.

9. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Formato WASM
WASM è il formato
binario di WebAssembly,
che contiene codice di
basso livello (molto vicino
al linguaggio macchina)
che può essere parsato,
compilato ed eseguito in
modo estremamente
veloce in tutti i web
browser che lo
supportano.
S-Expression assembly bytecode

10. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
WASM toolchain
Vi sono diversi strumenti
per la scrittura e
compilazione di codice
WASM, anche online,
tutti basati sulla LLVM
toolchain e il suo
linguaggio intermedio IR.
ToolchainWebBrowser
LLVM
Optimizer
x86
WASM
LLVR IR LLVM
x86 Backend
LLVM
Wasm Backend
Clang
Frontend
Rust Rustc
Frontend
C / C++
HTML
WASM
JavaScript
JS VM
DOM

11. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Utilizzare WASM
I moduli WASM vengono
caricati tramite JavaScript.
Le funzioni marcate con
Export sono richiamabili
da Javascript.
All’interno dei moduli
WASM è possibile
importare ed utilizzare
funzioni Javascript.
JavaScriptWASM
1 2
3

12. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Rust
Rust è sintatticamente
simile a C ++ ma con una
migliore sicurezza nella
gestione della memoria e
della concorrenza, per
evitare i classici problemi
del C++ by design,
mantenendone le
prestazioni.
Per chi vuole sperimentare:
1. Installare Rust da
https://www.rust-lang.org/tools/install
2. Aggiungere il target WASM col comando:
>rustup target add wasm32-unknown-unknown
3. Installare le estensioni RUST e WASM
in VS Code.

13. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Demo WebAssembly
Da C a WAT / WASM da S-EXPR a WASM Uso di WASM e JavaScript
in una pagina HTML

14. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Single Page Application
Vi sono diversi framework per la
realizzazione di applicazioni SPA,
come Angular, React, Vue e molti
altri, tutti basati su JavaScript.
Se solo fosse possibile utilizzare
C# e .NET…

15. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
.NET
per le Web App
Il team di Xamarin ha
sviluppato una versione di
Mono compilata in
WASM.
In questo modo è
possibile eseguire codice
.NET nei Web browser
che supportano
WebAssembly.
Mono runtime | C Library
LLVM bitcode
C# assemblies
clang
-target=wasm32
mono
-aot=llvmonly
Index.wasm
Index.js browser
mono – wasm
(bitcode -> wasm)
mono.wasm
load, compile
+ rum main()
load
metadata
(runtime)
libc
syscalls

16. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
JIT Vs. AOT
Mono-wasm può essere
eseguito in due modalità:
• Interpretato (JIT)
• Compilato (AOT)
COMPILATOINTERPRETATO
Runtime(inBrowser)Devtime
C# / Razor source files
C# / Razor source files
YourApp.dll
YourApp.dll
netstandard .NET
assembly files
mono.wasm
WebAssembly binary
executed natively
YourApp.wasm
WebAssembly binary
executed natively
mono.wasm
WebAssembly binary
executed natively
Browser APIs
visible DOM,
HTTP requests, etc.
Browser APIs
visible DOM,
HTTP requests, etc.

17. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Browser + Razor = Blazor!
Utilizza tecnologie web standard
come HTML e CSS, ma con C# e la
sintassi Razor al posto di JavaScript
per creare una Web UI basata su
componenti riutilizzabili.
Creato da Steven Sanderson
autore di Knockout, uno dei primi
framework JavaScript per realizzare
applicazioni SPA, da febbraio 2018 è
stato inserito (come esperimento) in
ASP.NET.

18. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Blazor Workshop
Setup iniziale:
• .NET Core  2.1
• Visual Studio 2017 (dalla
versione 15.7 in poi)
• Blazor Language Services
extension dal Visual Studio
Marketplace

19. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Demo: Blazor Hello World

20. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Web UI basata su
componenti
Un componente rappresenta
un elemento della UI, come una
pagina, un dialog, un tabset, o un
data entry form.
In Blazor, un componente è una
classe .NET, che può essere scritta a
mano (un file .cs) o più comunemente
tramite una pagina di markup Razor
(un file .cshtml).
I componenti possono essere
nidificati, riutilizzati e condivisi tra
progetti.

21. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
BlazorComponent class
La UI del componente è definita
tramite HTML.
La logica di rendering dinamico viene
aggiunta con la sintassi C# di Razor.
Quando un’applicazione Blazor viene
compilata, il tutto viene convertito in
una classe C# di tipo BlazorComponent.
Il nome della classe generata
corrisponde al nome del file .cshtml.

22. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Component members
Le proprietà e i metodi della classe sono definiti all’interno di uno o più
blocchi @functions.
Le proprietà possono essere referenziate utilizzando nomi C# che
iniziano con @.

23. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Component
composition
Un componente può
essere utilizzato
all’interno di altri
componenti come un
qualsiasi elemento HTML.
Ad esempio, per usare un
componente di nome
AppFooter, basterà
inserire <AppFooter />
nel codice HTML.
AppFooter.cshtml
Index.cshtml

24. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Component
parameters
I componenti possono avere
dei parametri definiti
utilizzando proprietà private
della classe decorate con
l’attributo [Parameter].
Tali parametri vengono
valorizzati con attributi di
markup in HTML.
E’ anche possibile definire
un parametro di tipo
RederFragment che viene
valorizzato con il contenuto
dell’elemento di markup.
AppFooter.cshtml
Index.cshtml

25. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Binding
Il data binding tra
componenti ed elementi
DOM viene definito
mediante l’attributo bind.
La UI viene aggiornata
solo quando viene fatto il
rendering del componente,
non quando la proprietà
cambia valore.
binding

26. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Event handling
Ogni attributo di elemento
HTML di nome on<event>
(onclick, onsubmit) il cui
valore è di tipo delegate, è
utilizzato da Blazor come
un event handler.
Per alcuni eventi sono
disponibili gli event
arguments (UIEventArgs,…)
E’ possibile utilizzare anche
le espressioni lambda.

27. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Demo: Blazor Xmas Cards

28. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Caratteristiche di Blazor
• Un component model per costruire una Web UI basata su componenti
• Routing
• Layouts
• Forms and validazione
• Dependency injection
• JavaScript interop
• Live reloading nel browser durante lo sviluppo
• Server-side rendering
• .NET debugging sia nel browser che nell’IDE
• Pieno supporto a IntelliSense e ai tool di sviluppo
• Capacità di girare su vecchi browser via asm.js
• Publishing e minimizzazione del codice eseguibile

29. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Riferimenti
Documentazione ufficiale
blazor.net
Sito GitHub
github.com/aspnet/Blazor
Gitter channel
gitter.im/aspnet/Blazor
Blazor: a technical introduction
blog.stevensanderson.com/2018/02/06/blazor-intro
Experimenting with Blazor
blog.tpcware.com/2018/03/experimenting-with-blazor

30. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Grazie per la vostra
attenzione 
Nicolò Carandini
n.carandini@outlook.com
@TPCWare