Introduction to Blazor and WebAssembly in Christmas sauce. In this session we will see how to create a small demonstration application to send Christmas greetings.
In questa sessione andremo in dettaglio sul come poter migliorare le nostre applicazioni ASP.NET dal punto delle vista delle performance: Come capire dove interventire? Cosa possiamo migliorare? A cosa dobbiamo prestare attenzione? E nel caso di un'applicazione esistente, dove possiamo intervenire per migliorarla ulteriormente?
In questa sessione faremo una panoramica a 360 gradi su Blazor, la nuovissima tecnologia Microsoft nata da una (geniale :-) idea di Steve Sanderson per lo sviluppo di applicazioni Web client basate su WebAssembly.
Nell'introduzione parlemermo brevemente di WebAssembly, spiegando di cosa si tratta e del perché questa tecnologia abbia tutte le premesse per portare uno dei più grandi "disruptive changes" nel modo di sviluppare applicazioni Web client. Passeremo poi a Blazor esaminandone prima gli aspetti architetturali e procedendo con un behind the scenes per svelare in che modo avviene la "magia" dell'interazione con il browser. Verranno poi presentate le feature che questa tecnologia offre (template project su VS, components, layouts, binding, dependency injection, hosting) sia attraverso slides che, di pari passo, con delle demo di un'applicazione funzionante realizzata in Blazor. Vedremo poi quali sono le problematiche legate a performance, deployment e distribuzione parlando delle possibili future ottimizzazioni. Infine chiuderemo con un confronto tra Blazor e i maggiori framework ora in uso per lo sviluppo di applicazioni Web client (Angular, Vue, Knockout, ecc.) e con alcune considerazioni sull'impatto che Blazor e tecnologie simili potrebbe avere a cascata per lo sviluppo Web futuro, in una sorta di "butterfly effect" nel mondo Web client.
Cos'è la UI Composition e che problemi può risolvere
Perchè MVVM e WPF sono importanti per la UI Composition
Il concetto di 'region' e 'UI Injection'
Analisi del toolkit PRISM di Microsoft e cosa comporta realizzarsene uno in proprio.
Introduction to Blazor and WebAssembly in Christmas sauce. In this session we will see how to create a small demonstration application to send Christmas greetings.
In questa sessione andremo in dettaglio sul come poter migliorare le nostre applicazioni ASP.NET dal punto delle vista delle performance: Come capire dove interventire? Cosa possiamo migliorare? A cosa dobbiamo prestare attenzione? E nel caso di un'applicazione esistente, dove possiamo intervenire per migliorarla ulteriormente?
In questa sessione faremo una panoramica a 360 gradi su Blazor, la nuovissima tecnologia Microsoft nata da una (geniale :-) idea di Steve Sanderson per lo sviluppo di applicazioni Web client basate su WebAssembly.
Nell'introduzione parlemermo brevemente di WebAssembly, spiegando di cosa si tratta e del perché questa tecnologia abbia tutte le premesse per portare uno dei più grandi "disruptive changes" nel modo di sviluppare applicazioni Web client. Passeremo poi a Blazor esaminandone prima gli aspetti architetturali e procedendo con un behind the scenes per svelare in che modo avviene la "magia" dell'interazione con il browser. Verranno poi presentate le feature che questa tecnologia offre (template project su VS, components, layouts, binding, dependency injection, hosting) sia attraverso slides che, di pari passo, con delle demo di un'applicazione funzionante realizzata in Blazor. Vedremo poi quali sono le problematiche legate a performance, deployment e distribuzione parlando delle possibili future ottimizzazioni. Infine chiuderemo con un confronto tra Blazor e i maggiori framework ora in uso per lo sviluppo di applicazioni Web client (Angular, Vue, Knockout, ecc.) e con alcune considerazioni sull'impatto che Blazor e tecnologie simili potrebbe avere a cascata per lo sviluppo Web futuro, in una sorta di "butterfly effect" nel mondo Web client.
Cos'è la UI Composition e che problemi può risolvere
Perchè MVVM e WPF sono importanti per la UI Composition
Il concetto di 'region' e 'UI Injection'
Analisi del toolkit PRISM di Microsoft e cosa comporta realizzarsene uno in proprio.
Multi-Device Hybrid Apps con Visual Studio e Apache CordovaAndrea Dottor
Sfrutta le tue abilità come sviluppatore web per creare app mobile per Windows Phone, iOS ed Android utilizzando una unica code-base (composta da codice HTML, CSS e JavaScript) e lavora direttamente in Visual Studio. Questo è ora possibile grazie all'estensione "Multi-Device Hybrid Apps for Visual Studio" ed all'uso di Apache Cordova. Un unico IDE ed un singolo progetto per sviluppare per le più diffuse piattaforme mobile.
In questa sessione scopriremo i vantaggi di questa combinazione e daremo risposta ad alcune domande: Quali vantaggi abbiamo dall'utilizzare Visual Studio? Perchè e quando sviluppare un'app ibrida? ...
Visual Studio Online è già molto completo, ma offre interessanti possibilità di integrazione.
Vedremo come estendere Visual Studio Online (ma anche TFS) mediante le sue REST API ed i Service Hooks.
ARCHITETTURA DI UN'APPLICAZIONE SCALABILEDotNetCampus
Questa sessione tratterà delle implementazioni di architetture robuste e scalabili, in scenari di sviluppo applicativi rientranti nella tipologia dei Software as a Service. In particolare vedremo come accopiare le feature e le necessità del SaaS con servizi propri presenti su Azure; con focus su web, servizi mobili, data, e notification.
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVMCodemotion
"Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM" by Matteo Pagani.
Xamarin è una delle tecnologie più interessanti quando si parla di sviluppo cross-platform, in quanto permette di riutilizzare le proprie conoscenze di C# per realizzare applicazioni con le stesse feature e performance di un'applicazione nativa. Usare Xamarin, però, non significa solamente poter realizzare app Android e iOS in C#, ma anche e soprattutto non dover scrivere e mantenere codebase completamente diverse. In questa sessione vedremo come poter massimizzare il riutilizzo di codice tra le diverse versioni della nostra applicazioni, aiutandoci con il pattern MVVM.
Sviluppo di soluzioni embedded moderne con .NET Micro Framework by Lorenzo Ma...Codemotion
In questo Talk verrà presentata una tra le più moderne e produttive piattaforme di sviluppo embedded attualmente esistenti: il .NET Micro Framework di Microsoft (.NETMF).
Xamarin: Shared Library and Portable Class Library - Aristide Di Francesco - ...Codemotion
A key component of the creation of cross-platform applications to be able to share code among several specific projects and platform dependent. Each different platform can only use the class libraries that have been developed for that specific platform. In Xamarin there are two main approaches to the sharing code: Using Shared Asset Projects (Shared Library) and the Portable Class Library (PCL) Projects. In this session we will see how and when to use the shared library, or the PCL library and we will try to answer the question: Shared or PCL?
Workshop AngularJs, Cordova, Ionic - Politecnico di MilanoGabriele Gaggi
Cordova è la chiave di volta che consente agli sviluppatori web un ingresso rapido ed indolore negli store delle diverse piattaforme mobili. Vediamo come utilizzare questa chiave di volta sfruttando la potenza e semplicità del framework MVC di Google AngularJs ed utilizzando come collante il framework Ionic per ottenere rapidamente applicazioni performanti con un look and feel analogo alle app native.
Non stiamo parlando di un ritorno a WebForm ma di un'evoluzione (o meglio) di un'alternativa al pattern MVC. Le Razor Pages possono essere un buon motore per smuovere le migrazioni di vecchie applicazioni, utilizzando un paradigma di pagina (vicino a quello che chi utilizza WebForm già conosce) ma con una visione e pulizia degna delle migliori applicazioni MVC .
Ecco che le Razor Pages si stanno ritagliano il loro spazio, ed in questa sessione cercheremo di affrontare i pro e contro del loro utilizzo, capendone al meglio i casi duso ideali.
Blazor è un framework per la creazione di Single Page Application (SPA) tramite l’utilizzo di C#.
Creato da Steve Sanderson e successivamente inserito in .NET Core come esperimento.
Visto l’enorme successo avuto sulla community è stato poi deciso di renderlo parte integrante dell’ecosistema .NET
Offre tutti i vantaggi di un framework front-end scrivendo codice interamente in C#.
FAST è una raccolta di tecnologie, basate su Web Components e su Web Standards moderni, che ci aiuta ad affrontare in modo efficiente alcune delle sfide più comuni nella progettazione e nello sviluppo di siti ed applicazioni Web.”
FAST ci aiuta a creare interfacce si adattano facilmente a qualunque Design System e che possono essere utilizzate con qualsiasi framework!
Xamarin Forms: one technology to rule them all - Matteo Pagani - Codemotion R...Codemotion
Codemotion Rome 2015 - Xamarin Forms è la nuova tecnologia introdotta da Xamarin per supportare lo sviluppo multi piattaforma di applicazioni per iOS, Android e Windows Phone utilizzando un unico linguaggio di design (lo XAML) e di sviluppo (C#). Nel corso di questa sessione vedremo le basi di questa piattaforma, gli scenari in cui è adatta e quelli in cui lo è di meno e una serie di preziosi consigli, nati dall'esperienza maturata nello sviluppo di un'importante progetto.
Slides dalle lezioni del corso di Strumenti e applicazioni del Web per il corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca - Prof.R.Polillo (a.a.2014-15) - Lezione del 18 marzo 2015
Multi-Device Hybrid Apps con Visual Studio e Apache CordovaAndrea Dottor
Sfrutta le tue abilità come sviluppatore web per creare app mobile per Windows Phone, iOS ed Android utilizzando una unica code-base (composta da codice HTML, CSS e JavaScript) e lavora direttamente in Visual Studio. Questo è ora possibile grazie all'estensione "Multi-Device Hybrid Apps for Visual Studio" ed all'uso di Apache Cordova. Un unico IDE ed un singolo progetto per sviluppare per le più diffuse piattaforme mobile.
In questa sessione scopriremo i vantaggi di questa combinazione e daremo risposta ad alcune domande: Quali vantaggi abbiamo dall'utilizzare Visual Studio? Perchè e quando sviluppare un'app ibrida? ...
Visual Studio Online è già molto completo, ma offre interessanti possibilità di integrazione.
Vedremo come estendere Visual Studio Online (ma anche TFS) mediante le sue REST API ed i Service Hooks.
ARCHITETTURA DI UN'APPLICAZIONE SCALABILEDotNetCampus
Questa sessione tratterà delle implementazioni di architetture robuste e scalabili, in scenari di sviluppo applicativi rientranti nella tipologia dei Software as a Service. In particolare vedremo come accopiare le feature e le necessità del SaaS con servizi propri presenti su Azure; con focus su web, servizi mobili, data, e notification.
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVMCodemotion
"Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM" by Matteo Pagani.
Xamarin è una delle tecnologie più interessanti quando si parla di sviluppo cross-platform, in quanto permette di riutilizzare le proprie conoscenze di C# per realizzare applicazioni con le stesse feature e performance di un'applicazione nativa. Usare Xamarin, però, non significa solamente poter realizzare app Android e iOS in C#, ma anche e soprattutto non dover scrivere e mantenere codebase completamente diverse. In questa sessione vedremo come poter massimizzare il riutilizzo di codice tra le diverse versioni della nostra applicazioni, aiutandoci con il pattern MVVM.
Sviluppo di soluzioni embedded moderne con .NET Micro Framework by Lorenzo Ma...Codemotion
In questo Talk verrà presentata una tra le più moderne e produttive piattaforme di sviluppo embedded attualmente esistenti: il .NET Micro Framework di Microsoft (.NETMF).
Xamarin: Shared Library and Portable Class Library - Aristide Di Francesco - ...Codemotion
A key component of the creation of cross-platform applications to be able to share code among several specific projects and platform dependent. Each different platform can only use the class libraries that have been developed for that specific platform. In Xamarin there are two main approaches to the sharing code: Using Shared Asset Projects (Shared Library) and the Portable Class Library (PCL) Projects. In this session we will see how and when to use the shared library, or the PCL library and we will try to answer the question: Shared or PCL?
Workshop AngularJs, Cordova, Ionic - Politecnico di MilanoGabriele Gaggi
Cordova è la chiave di volta che consente agli sviluppatori web un ingresso rapido ed indolore negli store delle diverse piattaforme mobili. Vediamo come utilizzare questa chiave di volta sfruttando la potenza e semplicità del framework MVC di Google AngularJs ed utilizzando come collante il framework Ionic per ottenere rapidamente applicazioni performanti con un look and feel analogo alle app native.
Non stiamo parlando di un ritorno a WebForm ma di un'evoluzione (o meglio) di un'alternativa al pattern MVC. Le Razor Pages possono essere un buon motore per smuovere le migrazioni di vecchie applicazioni, utilizzando un paradigma di pagina (vicino a quello che chi utilizza WebForm già conosce) ma con una visione e pulizia degna delle migliori applicazioni MVC .
Ecco che le Razor Pages si stanno ritagliano il loro spazio, ed in questa sessione cercheremo di affrontare i pro e contro del loro utilizzo, capendone al meglio i casi duso ideali.
Blazor è un framework per la creazione di Single Page Application (SPA) tramite l’utilizzo di C#.
Creato da Steve Sanderson e successivamente inserito in .NET Core come esperimento.
Visto l’enorme successo avuto sulla community è stato poi deciso di renderlo parte integrante dell’ecosistema .NET
Offre tutti i vantaggi di un framework front-end scrivendo codice interamente in C#.
FAST è una raccolta di tecnologie, basate su Web Components e su Web Standards moderni, che ci aiuta ad affrontare in modo efficiente alcune delle sfide più comuni nella progettazione e nello sviluppo di siti ed applicazioni Web.”
FAST ci aiuta a creare interfacce si adattano facilmente a qualunque Design System e che possono essere utilizzate con qualsiasi framework!
Xamarin Forms: one technology to rule them all - Matteo Pagani - Codemotion R...Codemotion
Codemotion Rome 2015 - Xamarin Forms è la nuova tecnologia introdotta da Xamarin per supportare lo sviluppo multi piattaforma di applicazioni per iOS, Android e Windows Phone utilizzando un unico linguaggio di design (lo XAML) e di sviluppo (C#). Nel corso di questa sessione vedremo le basi di questa piattaforma, gli scenari in cui è adatta e quelli in cui lo è di meno e una serie di preziosi consigli, nati dall'esperienza maturata nello sviluppo di un'importante progetto.
Slides dalle lezioni del corso di Strumenti e applicazioni del Web per il corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca - Prof.R.Polillo (a.a.2014-15) - Lezione del 18 marzo 2015
In questa serata cercheremo di capire perchè Blazor ha riscosso così tanto successo, e lo faremo analizzando casi presi da applicazioni reali dove questa tecnologia è stata introdotta, così da capirne meglio le potenzialità (ma anche le eventuali criticità).
Come di consuetudine, faremo poi un confronto, così da condividere i vari punti di vista.
Presentazione alla Google Dev Fest Mediterranean 2016 di Catania con presentazione sulle metodologie di utilizzo di microservices e sui sistemi per monitorare le infrastrutture
Developing Adobe AIR desktop applicationsmarcocasario
This is the presentation I held at the FromAToWeb 2007 Event. It's about developing desktop applications using Adobe AIR. Adobe AIR is a cross-operating system runtime that allows web application developers to use their existing web development skills (HTML, Javascript, Adobe Flash, Adobe Flex, Ajax) to build and deploy rich Internet applications to the desktop.
In this meeting we will face a very known but often overlooked aspect, namely the use of HTTPS. Many developers still think that the use of HTTPS is reserved for important sites and that for simpler things, such as a site consisting of a few static pages, it's not worth it. We will first try to dispel this myth, showing how much damage can be done using the HTTP pages of a simple static site, and then we will show how it is possible to use the free SSL certificates of Let's Encrypt to create HTTPS services without spending a fortune.
1. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Sviluppare applicazioni SPA
con C# e WebAssembly
Nicolò Carandini
n.carandini@outlook.com
@TPCWare
2. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Agenda
WebAssembly alla riscossa
ASP.NET Blazor
• A cosa serve e come si usa
• Demo
• Crash course
• Demo
JavaScript come unico linguaggio Web
• Performance e criticità
3. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
JavaScript
• Insieme a HTML e CSS, è
una delle tre tecnologie
principali del World Wide
Web.
• JavaScript abilita le pagine
Web interattive e quindi è
una parte essenziale delle
applicazioni web.
• La stragrande maggioranza
dei siti Web lo utilizza e tutti
i principali browser Web
hanno un motore JavaScript
dedicato per eseguirlo.
HTML
Style
Sheets
HTML
Parser
CSS
Parser
DOM
Tree
DOM
Style
Rules
Render
Layout
Render
Tree
Paint
JavaScript JS VM
4. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
JavaScript
performance
1995
Javascript viene eseguito
nei web browser come
linguaggio interpretato.
2008
Google introduce Google
Chrome col suo JavaScript
engine V8, che utilizza il
Just in Time Compiler (JIT).
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
5. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Good, but not enough!
L’incremento delle prestazioni di JavaScript
è uno degli elementi cardine per la creazione
di applicazioni Web complesse.
Ma questo non è ancora sufficiente perché:
• Rimane forte l’esigenza di poter utilizzare
altri linguaggi ed altri framework.
• I tempi di parsing del codice JavaScript e di
ottimizzazione del codice sono penalizzanti
in alcuni scenari di grafica 3D, V/A Reality e
più generalmente di calcoli intensivi.
• Specialmente nei device mobili non sempre
sono disponibili le risorse necessarie
all’esecuzione ottimale di JavaScript.
6. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Un’alternativa a
JavaScript
Prima di HTML5 ci sono stati molti
tentativi di creare degli strumenti
che si imponessero come standard di
fatto per creare applicazioni Web,
tutti falliti perché ogni azienda aveva
la sua specifica proposta,
incompatibile con le altre.
Microsoft già dal 1999 parlava di
Rich Client App, ma fu Macromedia
nel 2002 a coniare il termine
RIA – Rich Internet Application.
7. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
La guerra ai plugin
Uno dei difetti più noti dei vari metodi
per la realizzazione delle RIA consisteva
nella necessità di utilizzare i famigerati
plugin, che determinavano problemi di:
• Compatibilità coi diversi web browser
• Consumo risorse
• Introduzione bug
• Falle di sicurezza (soprattutto con Adobe Flash)
L’uso di plugin per l’esecuzione di framework esterni
termina nel 2014 con l’avvento di HTML5.
www.google.com/googlebooks/chrome
8. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
WebAssembly
alla riscossa
E’ uno standard W3C sviluppato
con il contributo di Mozilla, Apple
e Microsoft.
Consente l’uso di linguaggi diversi
da Javascript per generare codice
compatto, portabile ed
estremamente veloce.
E’ molto recente, visto che la prima
versione è di marzo 2017, ma è già
supportato da tutti i maggiori
browser.
9. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Formato WASM
WASM è il formato
binario di WebAssembly,
che contiene codice di
basso livello (molto vicino
al linguaggio macchina)
che può essere parsato,
compilato ed eseguito in
modo estremamente
veloce in tutti i web
browser che lo
supportano.
S-Expression assembly bytecode
10. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
WASM toolchain
Vi sono diversi strumenti
per la scrittura e
compilazione di codice
WASM, anche online,
tutti basati sulla LLVM
toolchain e il suo
linguaggio intermedio IR.
ToolchainWebBrowser
LLVM
Optimizer
x86
WASM
LLVR IR LLVM
x86 Backend
LLVM
Wasm Backend
Clang
Frontend
Rust Rustc
Frontend
C / C++
HTML
WASM
JavaScript
JS VM
DOM
11. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Utilizzare WASM
I moduli WASM vengono
caricati tramite JavaScript.
Le funzioni marcate con
Export sono richiamabili
da Javascript.
All’interno dei moduli
WASM è possibile
importare ed utilizzare
funzioni Javascript.
JavaScriptWASM
1 2
3
12. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Demo WebAssembly
Da C a WAT / WASM da S-EXPR a WASM Uso di WASM e JavaScript
in una pagina HTML
13. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Single Page Application
Vi sono diversi framework per la
realizzazione di applicazioni SPA,
come Angular, React, Vue e molti
altri, tutti basati su JavaScript.
Se solo fosse possibile utilizzare
C# e .NET…
14. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
.NET
per le Web App
Il team di Xamarin ha
sviluppato una versione di
Mono compilata in
WASM.
In questo modo è
possibile eseguire codice
.NET nei Web browser
che supportano
WebAssembly.
Mono runtime | C Library
LLVM bitcode
C# assemblies
clang
-target=wasm32
mono
-aot=llvmonly
Index.wasm
Index.js browser
mono – wasm
(bitcode -> wasm)
mono.wasm
load, compile
+ rum main()
load
metadata
(runtime)
libc
syscalls
15. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
JIT Vs. AOT
Mono-wasm può essere
eseguito in due modalità:
• Interpretato (JIT)
• Compilato (AOT)
COMPILATOINTERPRETATO
Runtime(inBrowser)Devtime
C# / Razor source files
C# / Razor source files
YourApp.dll
YourApp.dll
netstandard .NET
assembly files
mono.wasm
WebAssembly binary
executed natively
YourApp.wasm
WebAssembly binary
executed natively
mono.wasm
WebAssembly binary
executed natively
Browser APIs
visible DOM,
HTTP requests, etc.
Browser APIs
visible DOM,
HTTP requests, etc.
16. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Browser + Razor = Blazor!
Utilizza tecnologie web standard
come HTML e CSS, ma con C# e la
sintassi Razor al posto di JavaScript
per creare una Web UI basata su
componenti riutilizzabili.
Creato da Steven Sanderson
autore di Knockout, uno dei primi
framework JavaScript per realizzare
applicazioni SPA, da febbraio 2018 è
stato inserito (come esperimento) in
ASP.NET.
17. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Blazor Workshop
Setup iniziale:
• .NET Core 2.1 SDK
• Visual Studio 2017 (dalla
versione 15.7 in poi)
• Blazor Language Services
extension dal Visual Studio
Marketplace
19. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Web UI basata su
componenti
Un componente rappresenta
un elemento della UI, come una
pagina, un dialog, un tabset, o un
data entry form.
In Blazor, un componente è una
classe .NET, che può essere scritta a
mano (un file .cs) o più comunemente
tramite una pagina di markup Razor
(un file .cshtml).
I componenti possono essere
nidificati, riutilizzati e condivisi tra
progetti.
20. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
BlazorComponent class
La UI del componente è definita
tramite HTML.
La logica di rendering dinamico viene
aggiunta con la sintassi C# di Razor.
Quando un’applicazione Blazor viene
compilata, il tutto viene convertito in
una classe C# di tipo BlazorComponent.
Il nome della classe generata
corrisponde al nome del file .cshtml.
21. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Component members
Le proprietà e i metodi della classe sono definiti all’interno di uno o più
blocchi @functions.
Le proprietà possono essere referenziate utilizzando espressioni C# che
iniziano con @.
22. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Component
composition
Un componente può
essere utilizzato
all’interno di altri
componenti come un
qualsiasi elemento HTML.
Ad esempio, per usare un
componente di nome
AppFooter, basterà
inserire <AppFooter />
nel codice HTML.
AppFooter.cshtml
Index.cshtml
23. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Component
parameters
I componenti possono avere
dei parametri definiti
utilizzando proprietà private
della classe decorate con
l’attributo [Parameter].
Tali parametri vengono
valorizzati con attributi di
markup in HTML.
E’ anche possibile definire
un parametro di tipo
RederFragment che viene
valorizzato con il contenuto
dell’elemento di markup.
AppFooter.cshtml
Index.cshtml
24. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Binding
Il data binding tra
componenti ed elementi
DOM viene definito
mediante l’attributo bind.
La UI viene aggiornata
solo quando viene fatto il
rendering del componente,
non quando la proprietà
cambia valore.
binding
25. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Event handling
Ogni attributo di elemento
HTML di nome on<event>
(onclick, onsubmit) il cui
valore è di tipo delegate, è
utilizzato da Blazor come
un event handler.
Per alcuni eventi sono
disponibili gli event
arguments (UIEventArgs,…)
E’ possibile utilizzare anche
le espressioni lambda.
27. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Caratteristiche di Blazor
• Un component model per costruire una Web UI basata su componenti
• Routing
• Layouts
• Forms and validazione
• Dependency injection
• JavaScript interop
• Live reloading nel browser durante lo sviluppo
• Server-side rendering
• .NET debugging sia nel browser che nell’IDE
• Pieno supporto a IntelliSense e ai tool di sviluppo
• Capacità di girare su vecchi browser via asm.js
• Publishing e minimizzazione del codice eseguibile
28. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Riferimenti
Documentazione ufficiale
blazor.net
Sito GitHub
github.com/aspnet/Blazor
Gitter channel
gitter.im/aspnet/Blazor
Blazor: a technical introduction
blog.stevensanderson.com/2018/02/06/blazor-intro
Experimenting with Blazor
blog.tpcware.com/2018/03/experimenting-with-blazor
29. Licenza Creative Commons
Attribuzione - Non commerciale - Non opere derivate 3.0 Unported
Grazie per la vostra
attenzione ☺
Nicolò Carandini
n.carandini@outlook.com
@TPCWare