Se sei uno sviluppatore .NET e JavaScript è il tuo incubo, Blazor è la soluzione per te: ti permette di usare C# nel browser grazie alla specifica WebAssembly, utilizzando tutta la potenza del framework .NET Core. Alte performance, forte tipizzazione, formato binario e un SDK davvero completo sono solo alcune delle caratteristiche di questo approccio. In questa sessione vedremo come sia semplice realizzare un Single Page Application enterprise con Blazor e WebAssembly, e come implementare gli scenari tipici di questa tipologia di applicazioni.

1. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Blazor: Creare Single Page
Application con .NET e
WebAssembly
Michele Aponte
CEO/CTO @ Blexin
michele.aponte@blexin.com
@apomic80

2. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+
https://...
JS
Che cos’è Blazor

3. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Che cos’è Blazor
https://...
DOM
Razor Components
.NET
WebAssembly
https...
DOM
.NET Core
SignalR
Blazor WebAssembly Blazor Server
Razor Components
.NET

4. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+WebAssembly nel browser
Browser
Browser API
(WebSocket,
DOM, File API,
Web Storage, ecc…)
JavaScript Runtime

5. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Che cos’è Blazor
https://...
DOM
Razor Components
.NET
WebAssembly
Blazor WebAssembly
dotnet.wasm
compilazione esecuzione

6. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Che cos’è Blazor
https://...
DOM
Razor Components
.NET
WebAssembly
https...
DOM
.NET Core
SignalR
Blazor WebAssembly Blazor Server
Razor Components
.NET
.NET Core 3.0Maggio 2020

7. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Blazor WASM vs Blazor Server
Blazor WebAssembly Blazor Server
Pro:
- Dimensione download, load time rapido
- Può utilizzare tutto il runtime .NET
- Il codice è tutto sul server
- Semplifica l’architettura
Contro:
- Latenza
- Nessun supporto offline
- Consuma più risorse server
- Scalabilità SignalR (risolvibile)
Pro:
- Vera SPA, interattività
completa
- Utilizza le risorse del client
- Supporto offline, siti statici,
scenari PWA
Contro:
- Dimensione del download
- Richiede WebAssembly
- Ancora in preview

8. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Cosa serve per cominciare
https://dotnet.microsoft.com/download/dotnet-core
L’ultima versione di .NET Core
https://code.visualstudio.com/
Visual Studio Code
https://visualstudio.microsoft.com/it/vs/community/
Visual Studio 2019 Community
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-
preview1.20073.1
L’ultima versione dei template Blazor
https://visualstudio.microsoft.com/it/vs/mac/
Visual Studio for Mac

9. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Blazor Sever vs Blazor WebAssembly

10. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Creare un Single Page Application
- Tutta
l’applicazione
viene costruita
dinamicamente
a partire da
un’unica pagina
- La navigazione
viene gestita da
un apposito
componente

11. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Blazor Components
I singoli elementi
della pagina sono
dei componenti:
- formano un
albero di
componenti
- della giusta
dimensione
(SoC)
- riutilizzabili e
NON accoppiati

12. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Blazor Components
- Tecnicamente
sono dei file
.razor che
contengono
Markup e codice
- Il nome del file
coincide con il
TAG del
componente
NavMenu.razor
<NavMenu />

13. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Blazor Pages
- Una pagina è un
componente che
definisce una
destinazione per
una rotta
- Contiene la
direttiva @page
@page "/eventi"

14. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Gestione della navigazione: Routing
@Body
<Router></Router>
- Tutte le richieste
di navigazione
vengono gestite
dal componente
Router
- Ogni volta che
viene richiesta
una pagina il
router la
renderizza nel
@Body

15. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Creare una SPA con Blazor

16. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Gestione delle Form in Blazor

17. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Gestione delle Form in Blazor

18. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Gestione delle Form in Blazor

19. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Gestione delle Form in Blazor

20. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Integrazione con il back-end
https...
DOM
.NET Core
SignalR
Razor Components
.NET

21. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Integrazione con il back-end
https://...
DOM
Razor Components
.NET
WebAssembly
HTTP Client

22. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Integrazione con il back-end in Blazor

23. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Integrazione con JavaScript
Browser
Browser API
(WebSocket,
DOM, File API,
Web Storage, ecc…)
JavaScript Runtime

24. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Integrazione con JavaScript

25. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Blazor Roadmap
Blazor Server
Web app
Tutte le interazioni vengono gestite sul server
HTML Prerenderizzato
Blazor WebAssembly
Web app con esecuzione sul client
Caricata dal web server
Può funzionare offline con i Service Worker
Blazor PWA – OS installed Si presenta come una app nativa (con una finestra propria
Funziona sia offline che online
Blazor Hybrid
Utilizza Electron / WebView con un rendering nativo .NET
Si presenta come una app nativa (con una finestra propria)
Funziona sia offline che online
Web
Desktop
+ Mobile
Blazor Native
Stesso modello di programmazione, ma con un
rendering della UI non HTML

26. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+/+Mobile Blazor Bindings
Basato su XAMARIN.FORMS, permette di usare il modello di
sviluppo BLAZOR per App Mobile Native Android e IOS

27. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Mobile Blazor Bindings

28. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Domande? Dubbi? Perplessità?

29. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Un po’ di link utili
• Blazor: https://blazor.net
• Docs: https://blazor.net/docs
• .NET Core 3.0: https://dot.net/get-core3
• Visual Studio: https://visualstudio.com/
• Workshop: https://aka.ms/blazorworkshop
• Community: https://aka.ms/awesomeblazor

30. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Seguite la community!
https://twitter.com/blazordevita
https://fb.me/blazordeveloperitalianihttps://github.com/blazordevita
https://blazordev.it/

31. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Partecipate alle discussioni
https://fb.me/groups/998755440506950/
https://www.linkedin.com/groups/8896269/
https://github.com/blazordevita

32. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Alla prossima!