WebAssembly und Blazor: Wie .NET jetzt auch im Browser rockt

WebAssembly ist ein verhältnismäßig junges Feature der Webplattform: Dieser Bytecode erlaubt die Ausführung von in C, C++ oder anderen Programmiersprachen verfasstem Programmcode mit nahezu nativer Geschwindigkeit im Browser. Auf die neue Technologie, die sowohl von Google Chrome, Microsoft Edge, Mozilla Firefox und Apple Safari unterstützt wird, stürzte sich direkt auch das Mono-Team. Entstanden ist mono-wasm, eine Ausgabe der Mono-Laufzeitumgebung als WebAssembly, auf der C#-Code ausgeführt werden kann. Auf dieses Fundament setzt Blazor, eine experimentelles Single-Page-Application-Framework von Microsoft, das nicht auf JavaScript setzt, sondern C# und die von ASP.NET bekannte Templatingsprache Razor. Das ist aber noch nicht alles: Auch ihr bestehender C#-Code könnte dank mono-wasm – ganz ohne Transpilierung oder Plugins – eine Renaissance im Webbrowser erleben und eine ungewohnte Reichweite erlangen. Christian Liebel von Thinktecture stellt das Themenfeld vor und gibt eine Einschätzung, wie relevant das Thema für Sie als .NET-Entwickler in Zukunft wird.

Transcript

1. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Christian Liebel @christianliebel Consultant
2. What to expect - Glimpse into the future of application development - Seeing the web in action as the platform - “Native” programming languages running in your browser - Sneak Peek: Single-Page Applications with .NET - Demos What NOT to expect - WebAssembly/mono-wasm/ Blazor Deep Dive - Future-proof tutorial (WebAssembly is stable, but mono-wasm/Blazor aren’t) - Flash, Silverlight, Java Applets WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Expectations
3. Hello, it’s me. Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud Wie .NET jetzt auch im Browser rockt WebAssembly und Blazor
4. 1. Modern Business Applications & the Web 2. WebAssembly: Native Bytecode for the Web 3. Mono & WebAssembly: .NET Comes to the Browser 4. Blazor: Single-Page Apps Come to C# WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Talking Points
5. Modern Business Applications & the Web WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt
6. Frontend Technologies • HTML5 • CSS • JavaScript Modern Web APIs • WebAssembly • Web Audio API • Gamepad API • Media Capture and Streams • Web Bluetooth API Single-Page Web Applications • Angular • React • Vue Backend Technologies • .NET Core • Node.js WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt The Modern Web
7. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt The (Modern) Web Is the Platform
8. - Native operating systems & platforms get less important for users - Windows, Linux, macOS, Android, iOS: a mixture of everything, anywhere - Desktop is still important, not everything is mobile - Software developers need to care about & target ubiquitous systems - Depending on the actual audience, on the actual use cases - The Web has proven to be a universal platform - Modern browsers are power horses – more or less like an operating system WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Modern Business Applications
9. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Browser & JavaScript Architecture (simplified) Compiler Parser JIT Web APIs (DOM, IndexedDB, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime
10. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt “Houston, we have some problems” The Web is too… Web-ish ! The web is centered around a single language "
11. WebAssembly Native Bytecode for the Web WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt
12. - Low-Level Bytecode for the Web - High execution speed - Fast, efficient, portable - Readable and debuggable - Uses existing sandboxing tools - Part of the open, backwards- compatible web WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt WebAssembly (wasm)
13. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt
14. - Implemented in all major browsers (2017+) - Evergreen browsers (Chrome 57, Edge 16, Firefox 52 (not in ESR), Safari 11) - Desktop and mobile - Native technology (i.e. no plug-ins!) - Idea: Bring all programming languages to the browser - Targeted at languages such as C, C++ or Rust (= languages without garbage collection) - Achieves superior performance for some use cases - Addition to JavaScript (not a replacement!) - JavaScript glue code is still required to load a WebAssembly - Currently, JavaScript counterpart is required for accessing the DOM WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt WebAssembly (wasm) – Minimum Viable Product
15. - After v1 (the MVP), the consortium keeps working on new features - Threads - Garbage Collection - Reference Types - Direct DOM access - Many more things… - https://github.com/WebAssembly/design/blob/master/FutureFeatures.md - BTW: WASM also works on the server - e.g. WASM loader for Node.js - https://github.com/wasm-tool/node-loader WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt WASM: Here & to Stay
16. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Continued investments into WASM https://blogs.windows.com/msedgedev/2018/06/19/improved-javascript- webassembly-performance-edgehtml-17/ https://hacks.mozilla.org/2018/01/making-webassembly-even-faster-firefoxs-new-streaming-and-tiering-compiler/
17. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt WASM & JS Architecture (simplified) Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser JavaScript (.js) HTM L (.htm l) Inline JS JS Runtime W ebA ssem bly (.w asm )
18. - Re-use existing code by targeting WebAssembly, embedded in larger JavaScript/HTML application - Anything from simple helper libraries, to compute-oriented task offload - Main application frame & logic in WebAssembly, UI in JavaScript/ HTML/CSS - Entire code base in WebAssembly WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Building Applications with WASM
19. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt WASM – A Simple Sample Binary (.wasm) & text (.wat) format
20. - Baremetal: WebAssembly Studio - Playing around with WASM in the browser - C/C++ tools & compilers - Binaryen: compiler and toolchain infrastructure library for WebAssembly, written in C++ - LLVM: The modern C/C++ compiler toolchain - Emscripten: LLVM-to-JavaScript-or-WASM compiler - Tools cross-compiling from major languages - Cheerp (from C++) - TeaVM (from Java) - Rust - mono-wasm (from C#) WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt WASM Tooling C / C ++ Source code .w asm m odule HTM L doc JS glue code Em scripten +
21. WebAssembly Studio https://webassembly.studio/ WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt LIVE DEMO
22. Tanks! WebAssembly Demo https://webassembly.org/demo/Tanks/ WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt LIVE DEMO
23. Mono & WebAssembly .NET Comes to the Browser WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt
24. - Mono is Microsoft’s strategy for cross-platform client applications - Xamarin is based on Mono, Unity as well - Support for .NET Standard - Mono team is working on tooling to compile Mono/.NET code to WASM - Two approaches - JIT – for fast development cycles, including live reload (part of mono-master) - AOT – for optimized runtime deployment & execution (aka mono-wasm) WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt .NET & WASM
25. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt mono-wasm $ mcs -nostdlib -noconfig -r:../../dist/lib/mscorlib.dll hello.cs - out:hello.exe $ mono-wasm -i hello.exe -o output $ cp index.html output $ ls output hello.exe index.html index.js index.wasm mscorlib.dll C# WASM LLVM bitcode mcs IL LLVM WASM backend Mono AOT compiler
26. using System; public class Hello { public static void Main(string[] args) { Yell("Hack"); } public static void Yell(string text) { Console.WriteLine($"{text.ToUpperInvariant()}!!!"); } } WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt mono-wasm
27. <script src="index.js"></script> <script> document.addEventListener('WebAssemblyContentLoaded', () => { const klass = MonoClass('', 'Hello'); const method = MonoMethod(klass, 'Yell', true); MonoInvoke(0, method, ['Hallo']); }); </script> WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt mono-wasm
28. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt mono-wasm
29. mono-wasm https://github.com/lrz/mono-wasm WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt LIVE DEMO
30. Blazor Single-Page Apps Come to C# WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt
31. - Blazor is an experimental Single Page Application (SPA) framework based on .NET - Blazor projects run 100% in the browser - On top of a WASM build of the Mono .NET runtime * - Compiled .NET assemblies are loaded into the browser and JIT compiled * - Uses Razor/.cshtml templates for rendering HTML/CSS - Uses C# for writing application logic WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Blazor – WASM in action * as of June 19, 20 18
32. https://blazor.net/docs/get-started.html dotnet new -i Microsoft.AspNetCore.Blazor.Templates dotnet new blazor -o BlazorApp1 cd BlazorApp1 dotnet run WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Blazor – Get it Today LIVE DEMO
33. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Blazor – .NET Right in Your Browser
34. Blazor https://blazor-demo.github.io/ WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt
35. WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Blazor Architecture* Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser blazor.js Blazor page (.htm l) JS Runtime m ono.w asm m ono.js m scorlib.dll etc. m yapp.dll * as of June 19, 20 18
36. - It is NOT about running any .NET Code just in the browser - We still have a sandbox - Various .NET Standard APIs will just not work in the browser - It is NOT a way to port Razor/MVC/server-side web applications to an SPA - It is NOT a way to bring XAML/WPF/Xamarin into the browser - You may want to look at the Ooui.WASM open source project for this - It is NOT production-ready - Therefore, it is NOT suitable for real-world applications (yet?) WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt What Blazor is NOT:
37. Package your web application as a native application! Using Electron & Cordova Dienstag, 26. Juni 2018 – 9 Uhr – Raum Kiew Using native web technologies (Progressive Web Apps) Dienstag, 26. Juni 2018 – 10:30 Uhr – Raum Riga WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Next Steps
38. - The Web is still the Web - You need to know HTML, CSS and JavaScript. Period. - Progressive Web Apps - Emerging technologies enable more app-like feeling and behaviors of Web apps – including offline - WebAssembly - Brings any programming language and sandbox-aware framework to the browser - May pave the way to write business applications without large JavaScript parts – some day… maybe - Blazor - Experimental SPA Framework by the ASP.NET Core team, very early stages – do not use in production - Shows possibilities of WebAssembly with .NET/possible future UI framework? WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt Summary
39. Windows 3.11 in the Browser https://classicreload.com/win3x-windows-311.html WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt LIVE DEMO
40. Thank you for your kind attention! Christian Liebel @christianliebel Consultant