Blazor ha vinto? Storie di casi reali
0 likes74 views
Il documento discute Blazor, un framework che consente di costruire interfacce web interattive utilizzando C# invece di JavaScript, facilitando così la condivisione della logica di app tra server e client. Vengono presentati miglioramenti significativi in .NET 5, incluse prestazioni superiori di Blazor WebAssembly e capacità di debugging migliorate. Sono illustrate varie esperienze reali di aziende che hanno migrato o costruito applicazioni con Blazor, evidenziando la sua capacità di semplificare lo sviluppo e la manutenzione del codice.
![AOT Compilation
Drag & Drop
Hot Reload (via dotnet watch)
…
https://github.com/dotnet/aspnetcore/issues/27883
https://github.com/dotnet/aspnetcore/projects/15#card-49713369
[WIP] ASP.NET Core 6 Roadmap](https://image.slidesharecdn.com/dottorblazorrealcases-210301143018/85/Blazor-ha-vinto-Storie-di-casi-reali-9-320.jpg)
Blazor ha vinto? Storie di casi reali
- 1. xedotnet.org Andrea Dottor @dottor Blazor ha vinto? Storie di casi reali
- 4. Blazor is a framework for building interactive client-side web UI with .NET: • Create rich interactive UIs using C# instead of JavaScript. • Share server-side and client-side app logic written in .NET. • Render the UI as HTML and CSS for wide browser support, including mobile browsers. • Integrate with modern hosting platforms, such as Docker. Using .NET for client-side web development offers the following advantages: • Write code in C# instead of JavaScript. • Leverage the existing .NET ecosystem of .NET libraries. • Share app logic across server and client. • Benefit from .NET's performance, reliability, and security. • Stay productive with Visual Studio on Windows, Linux, and macOS. • Build on a common set of languages, frameworks, and tools that are stable, feature- rich, and easy to use. Cos'è Blazor https://docs.microsoft.com/en-us/aspnet/core/blazor/
- 7. Performance improvements • "For .NET 5, we made significant improvements to Blazor WebAssembly runtime performance with a specific focus on complex UI rendering and JSON serialization. In our performance tests, Blazor WebAssembly in .NET 5 is two to three times faster for most scenarios." https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/#blazor- webassembly-performance-improvements Debugging improvements • "Debugging Blazor WebAssembly apps is improved in ASP.NET Core 5.0. Additionally, debugging is now supported on Visual Studio for Mac" https://docs.microsoft.com/en-us/aspnet/core/blazor/debug Trimming/linking improvements • "Blazor WebAssembly performs Intermediate Language (IL) trimming/linking during a build to trim unnecessary IL from the app's output assemblies. With the release of ASP.NET Core 5.0, Blazor WebAssembly performs improved trimming with additional configuration options" https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/configure-trimmer Dove siamo arrivati (con .NET 5)
- 8. Lazy load assemblies • https://docs.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies Blazor JavaScript isolation • https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#blazor- javascript-isolation-and-object-references Prerendering for Blazor WebAssembly • https://docs.microsoft.com/en-us/aspnet/core/blazor/components/prerendering-and-integration Protected Browser Storage for Blazor Server • https://docs.microsoft.com/it-it/aspnet/core/blazor/state-management#aspnet-core-protected-browser-storage New components • InputFile, InputRadio, InputRadioGroup Dove siamo arrivati (con .NET 5)
- 9. AOT Compilation Drag & Drop Hot Reload (via dotnet watch) … https://github.com/dotnet/aspnetcore/issues/27883 https://github.com/dotnet/aspnetcore/projects/15#card-49713369 [WIP] ASP.NET Core 6 Roadmap
- 10. Curva di apprendimento (relativamente bassa) • per essere produttivi da subito --> ASP.NET Core • con un minimo di formazione --> per chi usa ASP.NET MVC • con la "sola" formazione su HTML e Razor --> per chi conosce C# Curva di apprendimento https://jaxenter.com/blazor-2020-167525.html "One thing that shocked me about Blazor is how genuinely simple it feels to use. Blazor combines the ease of Razor with other .NET concepts. It has borrowed the best patterns from popular JavaScript frameworks like Angular and React while leveraging Razor templates and provided parity with other .NET conventions. This combination of features allows for the reuse of skills in a way that was unavailable before. The same could be said for Node developers who use one language and familiar concepts in full stack JavaScript apps."
- 11. Blazor in 3 casi reali (+1)
- 12. Azienda: Hunext Migrazione dell'applicativo Ufficio Web verso ASP.NET Core • Applicazione sviluppata con: • Visual Basic .NET • C# • Web Form • ASP.NET MVC (per le API REST) Nuovi applicativi ASP.NET Core Scenario _1
- 13. Azienda: Hunext Porting di applicativi desktop nel web • Applicazioni Visual Basic 6 • Applicazioni Access Necessità di offrire un'usabilità che si avvicini a quella che gli utenti conoscono nel mondo desktop Scenario _2
- 14. Azienda: Quantumdatis Sviluppo di un'applicazione web per la gestione e generazione di report di Reporting Service • Windows Authentication • Login • Accesso al db • Accesso ai servizi • Uso delle API di Reporting Services * Il team ha conoscenze di sviluppo desktop e ma non ha mai usato ASP.NET Scenario _3
- 15. Marco Bortolin
- 16. HUNEXT: Da WebForm a .NET Core Scenario _1
- 17. Applicazione WebForm da migrare/portare verso .NET Core
- 18. Applicazione WebForm da migrare/portare verso .NET Core
- 19. 1. Adozione localizzata di Blazor nella riscrittura delle sole funzionalità che richiedono maggiore interattività/dinamismo • Utilizzo dei Razor Component 2. Blazor server-side permette il riuso di codice esistente 3. Blazor ha alcune similitudini con WebForm • Mantenimento dello stato dei controlli • Modello Event-Driven Applicazione WebForm da migrare/portare verso .NET Core
- 20. Permettono l'adozione di Blazor in aree localizzate dell'applicazione • File con estensione .razor • Fanno da entry-point ad applicazioni Blazor • Accettano parametri in ingresso Il prodotto non si vincola ad una particolare tecnologia client Razor Component @(await Html.RenderComponentAsync<Pager>( new { pageNumber = Model.PageNumber, totalRecords = 150, pageSize = 20, linkUrl = Url.PageLink("Index") }))
- 21. Utilizzo dei Razor Component
- 22. Se l'accesso ai dati (lettura e salvataggio) viene fatto tramite API rest, un'eventuale migrazione verso Blazor WebAssembly è più facile Un occhio al futuro
- 23. 1. Adozione localizzata di Blazor nella riscrittura delle sole funzionalità che richiedono maggiore interattività/dinamismo • Utilizzo dei Razor Component 2. Blazor server-side permette il riuso di codice esistente 3. Blazor ha alcune similitudini con WebForm • Mantenimento dello stato dei controlli • Modello Event-Driven Applicazione WebForm da migrare/portare verso .NET Core
- 24. E' possibile chiamare gli stessi Service utilizzanti in WebForm E' possibile utilizzare gli stessi Command e Query (CQRS) Riuso di codice esistente
- 25. 1. Adozione localizzata di Blazor nella riscrittura delle sole funzionalità che richiedono maggiore interattività/dinamismo • Utilizzo dei Razor Component 2. Blazor server-side permette il riuso di codice esistente 3. Blazor ha alcune similitudini con WebForm • Mantenimento dello stato dei controlli • Modello Event-Driven Applicazione WebForm da migrare/portare verso .NET Core
- 26. Blazor for ASP.NET Web Forms Developers • https://docs.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms- developers/ Blazor for Web Form and C# Developers • https://www.youtube.com/watch?v=gmopA3LEEeE .NET Conf 2020 - From Web Forms to Blazor - Introducing the Blazor Web Forms Components • https://channel9.msdn.com/Events/dotnetConf/2020/From-Web-Forms-to- Blazor-Introducing-the-Blazor-Web-Forms-Components Articoli e video
- 27. "A collection of Blazor components that emulate the web forms components of the same name" https://github.com/FritzAndFriends/BlazorWebFormsComponents BlazorWebFormsComponents
- 28. HUNEXT: Porting di applicativi desktop (vb6, access) Scenario _2
- 29. Premesse • Gli applicativi utilizzando un database SQL Server • Parte dell'accesso ai dati esistenti sfrutta .NET e CQRS Utilizzo di Blazor Server (ad oggi) • Riuso di codice esistente • Riuso di conoscenze interne all'azienda • C# • CQRS • Permette di avere una UI che si avvicini (ad usabilità) a quella desktop Porting di applicativi desktop verso Blazor
- 30. Per velocizzare il porting degli applicativi Access, è stato creato un template replicabile, così da poter applicare un generatore di codice. • Il generatore, legge la struttura delle maschere di Access e genera codice C# e Blazor Porting di applicativi desktop - da dove siamo partiti
- 31. • .NET Conf 2020 - Migrating a Windows Forms App to Blazor: The Amazing and True Story of GIFBot • James Montemagno / Georgia Nelson • https://www.youtube.com/watch?v=NRDdu67VJH0 Migrating a Windows Forms App to Blazor
- 32. Electron e PWA
- 33. Quantumdatis: Sviluppo Data Driven Manager Scenario _3
- 34. Passaggio al web di un team desktop
- 35. Passaggio al web di un team desktop
- 36. Utilizzo di Blazor Server Riuso di conoscenze che il team già utilizza • C# • Codice di accesso ai dati • Chiamare a servizi REST Formazione per le caratteristiche di ASP.NET utili all'obiettivo • Dependency Injection • Blazor • Razor Affiancamento durante la realizzazione della prima versione Passaggio al web di un team desktop
- 38. Non tutte le applicazioni necessitano della miglior tecnologia per ogni sua parte • La "miglior tecnologia" va valutata caso per caso Utilizzando C# sia per back-end (ASP.NET Core) che front-end (Blazor) • Meno tecnologie da dover conoscere e mantenere • Riduzione delle competenze necessarie • Semplificazione nel deployment Ridurre lo stack tecnologico
- 39. Conclusioni
- 41. Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps • https://docs.microsoft.com/en-us/learn/modules/publish-app-service-static-web- app-api-dotnet/ Azure Static Web Apps with .NET and Blazor • https://devblogs.microsoft.com/aspnet/azure-static-web-apps-with-blazor/ Static Web Apps
- 43. Le maggiori aziende (DevExpress, Telerik, Syncfusion, …) hanno la loro libreria per Blazor • https://www.devexpress.com/blazor/ • https://www.telerik.com/blazor-ui • https://www.syncfusion.com/blazor-components Sono nate molte librerie open-source • Radzen (https://blazor.radzen.com/ ) • Blazorise (https://blazorise.com/ ) • MatBlazor (https://www.matblazor.com/ ) • Material.Blazor (https://material-blazor.com/ ) • Exentials.MdcBlazor (https://github.com/exentials/MdcBlazor ) • … !! Attenzione alla maturità della libreria che scegliete di utilizzare !! Attenzione ad usare framework JavaScript che modificano il DOM Librerie di UI
- 46. www.dottor.net [email protected] @dottor Andrea Dottor Microsoft MVP Developer Technologies Contatti Images from https://pixabay.com
- 47. Podcast ".NET in Pillole" • DEV.is.it - .NET in pillole • Spotify: https://open.spotify.com/show/7jyoG6BBmzvScNOqSpVvQQ • Spreaker: https://www.spreaker.com/show/net-in-pillole • Apple podcast: https://podcasts.apple.com/it/podcast/net-in-pillole/id1478648398 • Google podcast: https://podcasts.google.com/?feed=aHR0cHM6Ly93d3cuc3ByZWFrZXIuY29tL3Nob3cvMzY4NTM0NC9lcGlzb2Rlcy9mZWVk • YouTube: https://www.youtube.com/user/andreadottor/