Download to read offline
Uploaded byMichele Aponte
Frontend Development with Blazor
Il documento tratta dello sviluppo con Blazor, una tecnologia di .NET per creare applicazioni Web interattive. Vengono esplorati diversi aspetti, come i componenti Razor, la gestione delle navigazioni, l'integrazione con backend e le differenze tra Blazor Server e Blazor WebAssembly. Inoltre, sono discusse le novità e i vantaggi di Blazor, come il supporto per l'integrazione con JavaScript, la performance e le funzionalità per lo sviluppo di applicazioni ibride.
Frontend Development with Blazor
- 1. Blazor Developer Italianiblazordevita 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 Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + https://... JS Che cos’è Blazor?
- 3. Blazor Developer Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Blazor Server vs Blazor WebAssembly
- 7. Blazor Developer Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + https... DOM .NET Core SignalR Razor Components .NET Integrazione del Backend
- 13. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + https://... DOM Razor Components .NET WebAssembly HTTP Client Integrazione del Backend
- 14. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Single Page Application in Blazor
- 15. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Gestione Form
- 16. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Gestione Form
- 17. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Gestione Form
- 18. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Browser Browser API (WebSocket, DOM, File API, Web Storage, ecc…) JavaScript Runtime JavaScript Interop
- 19. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Da .NET a JavaScript
- 20. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Da JavaScript a .NET
- 21. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Da JavaScript a .NET
- 22. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + JavaScript Isolation
- 23. Blazor Developer Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Blazor Hybrid Server WebAssembly Hybrid
- 29. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Blazor Hybrid con WebView2
- 30. Blazor Developer Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + WINFORMS/WPF WebView2 Razor Components .NET DOM Blazor Hybrid con WebView2
- 31. Cross-platform, native UI Singleproject 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 withBlazor & .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 Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita 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 Italianiblazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Alla prossima!