DevDay Chats - Blazor: Creare SPA con NET e WebAssembly

Transcript

1. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.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/blazordeveloperitaliani blazordevita blazordev.it + / + https://... JS Che cos’è Blazor
3. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.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/blazordeveloperitaliani blazordevita blazordev.it + / + WebAssembly nel browser Browser Browser API (WebSocket, DOM, File API, Web Storage, ecc…) JavaScript Runtime
5. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Che cos’è Blazor https://... DOM Razor Components .NET WebAssembly Blazor WebAssembly dotnet.wasm compilazione esecuzione
6. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.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.0 Maggio 2020
7. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.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/blazordeveloperitaliani blazordevita blazordev.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/blazordeveloperitaliani blazordevita blazordev.it + + / Blazor Server vs Blazor WebAssembly
10. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.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/blazordeveloperitaliani blazordevita blazordev.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/blazordeveloperitaliani blazordevita blazordev.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/blazordeveloperitaliani blazordevita blazordev.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/blazordeveloperitaliani blazordevita blazordev.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/blazordeveloperitaliani blazordevita blazordev.it + / + Gestione delle Form in Blazor
16. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Gestione delle Form in Blazor
17. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Gestione delle Form in Blazor
18. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Integrazione con il back-end https... DOM .NET Core SignalR Razor Components .NET
19. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Integrazione con il back-end https://... DOM Razor Components .NET WebAssembly HTTP Client
20. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Integrazione con JavaScript Browser Browser API (WebSocket, DOM, File API, Web Storage, ecc…) JavaScript Runtime
21. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.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
22. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Mobile Blazor Bindings Basato su XAMARIN.FORMS, permette di usare il modello di sviluppo BLAZOR per App Mobile Native Android e IOS
23. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Domande? Dubbi? Perplessità?
24. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.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
25. 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/
26. 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
27. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Alla prossima!