Download to read offline
![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](https://image.slidesharecdn.com/spawithblazor-180529095034/75/Spa-with-Blazor-23-2048.jpg)
More Related Content
Spa with Blazor
- 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
- 18. Licenza Creative Commons Attribuzione- Non commerciale - Non opere derivate 3.0 Unported Demo: Blazor Hello World
- 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.
- 26. Licenza Creative Commons Attribuzione- Non commerciale - Non opere derivate 3.0 Unported Demo: Blazor workshop
- 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