Sessione tenuta al FEVR il 20/01/2022 sullo sviluppo frontend in Blazor.

1. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Frontend
Development with
Blazor
apomic80 apomic80 apomic80 apomic80
apomic80
Michele Aponte
CTO @ Ellycode / CEO @ Blexin
Founder @ Blazor Developer Italiani
MVP Developer Technologies

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

3. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
https://...
DOM
Razor Components
.NET
WebAssembly
https...
DOM
.NET Core
SignalR
Blazor WebAssembly Blazor Server
Razor Components
.NET
Hosting Models

4. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Browser
JavaScript Runtime
dotnet.wasm
compilazione download
Browser API
(WebSocket,
DOM, File API,
Web Storage, ecc…)
transpilazione download
Blazor WebAssembly

5. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
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 Community
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::X.X.X
L’ultima versione dei template Blazor
https://visualstudio.microsoft.com/it/vs/mac/
Visual Studio for Mac
Come cominciare?

6. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Blazor Server vs Blazor WebAssembly

7. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
- Tutta
l’applicazione
viene costruita
dinamicamente
a partire da
un’unica pagina
- La navigazione
viene gestita da
un apposito
componente
Struttura di una SPA

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

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

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

11. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
@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
Routing

12. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
https...
DOM
.NET Core
SignalR
Razor Components
.NET
Integrazione del Backend

13. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
https://...
DOM
Razor Components
.NET
WebAssembly
HTTP Client
Integrazione del Backend

14. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Single Page Application in Blazor

15. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Gestione Form

16. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Gestione Form

17. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Gestione Form

18. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Browser
Browser API
(WebSocket,
DOM, File API,
Web Storage, ecc…)
JavaScript Runtime
JavaScript Interop

19. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Da .NET a JavaScript

20. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Da JavaScript a .NET

21. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Da JavaScript a .NET

22. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
JavaScript
Isolation

23. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Esperienza di
sviluppo
• Strumenti a disposizione
• CLI, IDE, Editor, Plug-in
• Sistema operativo
• Hot reload e Debugger
• Convention over Configuration
Pro & Contro di Blazor

24. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
• Dependency Injection
• CSS Isolation
• Gestione Forms
• Integrazione con Back-end
• REST e gRPC
• Integrazione librerie
• JS Isolation
• Lazy Load
Funzionalità
Pro & Contro di Blazor

25. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
• Dimensioni del compilato
• Lazy Load può mitigare il problema
• DOM e Change Detection
• Forms e bindings
• Virtualizzazione dei contenuti
• Compilazione AoT
• CI/CD build time
Performance
Pro & Contro di Blazor

26. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
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
Roadmap

27. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
• .NET Hot reload
• State persistence during prerendering
• Error boundaries
• WebAssembly AOT
• Runtime relinking
• Native dependencies
• Smaller download size
• Dynamic component rendering
• Render components from JS
• Custom event args
• JavaScript initializers
• JavaScript modules per component
• Infer generic types from parent
• Generic type constraints
• Handle large binary data
• Remove SignalR message size limitations
• Required parameters
• Handle query string parameters
• Influence the HTML head
• SVG support
Novità introdotte in .NET 6

28. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Blazor Hybrid
Server WebAssembly Hybrid

29. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Blazor Hybrid con WebView2

30. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
WINFORMS/WPF
WebView2
Razor Components
.NET
DOM
Blazor Hybrid con WebView2

31. Cross-platform, native UI
Single project system, single codebase
Deploy to multiple devices, mobile & desktop
General availability early next year
.NET Multi-platform App UI
.NET 6
.NET MAUI
github.com/dotnet/maui
WinUI Mac
Catalyst
Android
iOS
iOS
macOS

32. Hybrid apps with Blazor & .NET MAUI
.NET MAUI
Blazor Reuse UI components across native and web
Built on top of .NET Multi-platform App UI
Native app container & embedded controls
General availability early next year
Can use native app
container & controls
iOS
macOS

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

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

35. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Domande? Dubbi? Perplessità?
apomic80 apomic80 apomic80 apomic80
apomic80
Michele Aponte
CTO @ Ellycode / CEO @ Blexin
Founder @ Blazor Developer Italiani
MVP Developer Technologies

36. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Alla prossima!