xedotnet.org
Andrea Dottor
@dottor
Blazor ha vinto?
Storie di casi reali

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/

Blazor Server

Blazor WebAssembly

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)

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)

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

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

Blazor in 3 casi reali (+1)

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

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

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

Marco Bortolin

HUNEXT:
Da WebForm a .NET Core
Scenario _1

Applicazione WebForm da migrare/portare verso .NET Core

Applicazione WebForm da migrare/portare verso .NET Core

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

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")
}))

Utilizzo dei Razor Component

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

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

E' possibile chiamare gli stessi Service utilizzanti in WebForm
E' possibile utilizzare gli stessi Command e Query (CQRS)
Riuso di codice esistente

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

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

"A collection of Blazor components
that emulate the web forms
components of the same name"
https://github.com/FritzAndFriends/BlazorWebFormsComponents
BlazorWebFormsComponents

HUNEXT:
Porting di applicativi
desktop (vb6, access)
Scenario _2

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

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

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

Electron e PWA

Quantumdatis:
Sviluppo Data Driven Manager
Scenario _3

Passaggio al web di un team desktop

Passaggio al web di un team desktop

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

Ridurre lo stack
tecnologico
Scenario _4

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

Conclusioni

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

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

www.dottor.net
andrea@dottor.net
@dottor
Andrea Dottor
Microsoft MVP Developer Technologies
Contatti
Images from https://pixabay.com

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/