Wasm and Blazor CDays keynote
- 1. Licenza Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported .NET Web App con WebAssembly Nicolò Carandini [email protected] @TPCWare
- 2. 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.
- 3. 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
- 4. 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.
- 5. 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
- 6. 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
- 7. Licenza Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported Demo WebAssembly Da C a WAT / WASM link da S-EXPR a WASM link Uso di WASM e JavaScript in una pagina HTML
- 8. 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
- 9. 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.
- 10. 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.
- 11. 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.
- 12. Licenza Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported Demo: Blazor workshop
- 13. 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
- 14. Licenza Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported Blazor FTW! ☺ Nicolò Carandini [email protected] @TPCWare