Utilizzando alcuni degli standard web più moderni, Microsoft ha realizzato Blazor: una soluzione che permette ai programmatori .NET di riutilizzare le proprie conoscenze per la realizzazione della user interface delle proprie applicazioni. Già disponibile per l’uso in produzione con una versione server-side, verrà rilasciata a Maggio una versione client-side basata su WebAssembly, che permetterà lo sviluppo di una Single Page Application in C# eseguita interamente nel browser. Ma la roadmap non si ferma qui, perchè sono già disponibili le prime versioni sperimentali per l’utilizzo di questa tecnologia anche su Desktop e Mobile!

1. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Blazor: I limiti sono fatti
per essere superati!
Michele Aponte
CEO/CTO @ Blexin
Founder @ Blazor Developer Italiani
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
+/+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-preview4.20210.8
L’ultima versione dei template Blazor
https://visualstudio.microsoft.com/it/vs/mac/
Visual Studio for Mac

8. 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

9. 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

10. 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 />

11. 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"

12. 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

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

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

15. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitalianiblazordevitablazordev.it
+ +/
Blazor Server vs Blazor WebAssembly

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
+/+Integrazione con JavaScript
Browser
Browser API
(WebSocket,
DOM, File API,
Web Storage, ecc…)
JavaScript Runtime

20. 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

21. 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.1: https://dot.net/get-core3
• Visual Studio: https://visualstudio.com/
• Workshop: https://aka.ms/blazorworkshop
• Community: https://aka.ms/awesomeblazor

22. 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/

23. 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

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

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