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

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

June 25, 2018
Tweet

Transcript

  1. 1.

    WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt

    Christian Liebel @christianliebel Consultant
  2. 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. 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. 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. 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
  6. 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
  7. 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
  8. 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 "
  9. 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)
  10. 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
  11. 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
  12. 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/
  13. 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 )
  14. 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
  15. 19.

    WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt

    WASM – A Simple Sample Binary (.wasm) & text (.wat) format
  16. 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 +
  17. 23.

    Mono & WebAssembly .NET Comes to the Browser WebAssembly und

    Blazor Wie .NET jetzt auch im Browser rockt
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 33.

    WebAssembly und Blazor Wie .NET jetzt auch im Browser rockt

    Blazor – .NET Right in Your Browser
  25. 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
  26. 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:
  27. 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
  28. 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