WebAssembly und Blazor: Wie .NET jetzt auch den Browser erobert?

WebAssembly und Blazor: Wie .NET jetzt auch den Browser erobert?

.NET hat höchstens noch auf dem Server eine Zukunft? Diese Aussage stimmt im modernen Web mittlerweile nicht mehr ganz: Seit der Verfügbarkeit von WebAssembly, einem Bytecode fürs Web, können nun auch etwa in C# geschriebene Programme im Browser ausgeführt werden. Das ist mitunter eine interessante Migrationsstrategie, um .NET-Berechnungskerne ins Web zu portieren und mit Single-Page Applications (SPA), zum Beispiel auf Basis von Angular, zu paaren. Mit dem Projekt Blazor vom ASP.NET-Team experimentiert Microsoft zudem mit einem eigenen SPA-Framework mitsamt Tooling, das jedoch nicht auf HTML und JavaScript, sondern auf der Templating-Sprache Razor sowie C# und .NET Core basiert. Sebastian Gingter und Christian Liebel zeigen Ihnen beide Ansätze und geben eine Einschätzung, wo Blazor eine valide Option für die Erstellung von webbasierten UIs sein kann. Klar ist: Was im Web läuft, das kann auf nahezu allen Plattformen ausgeführt werden. Und auch der Verteilung Ihrer Anwendung als Progressive Web App mit vielen nativen Features steht nichts im Wege.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

September 25, 2018
Tweet

Transcript

  1. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    Christian Liebel @christianliebel Consultant Sebastian Gingter @phoenixhawk Consultant
  2. The image part with relationship ID rId2 was not found

    in the file. The image part with relationship ID rId2 was not found in the file. Special Day Modern Business Applications Thema Sprecher Datum, Uhrzeit Raum Pragmatische Microservices-Architekturen mit ASP.NET Core Web APIs, SignalR & Co. Christian Weyer DI, 25. September 2018, 10.30 bis 11.30 Gutenberg 2+3 Serverless-Architekturen: Event-basierte Microservices mit Azure Functions & Co. Christian Weyer DI, 25. September 2018, 11.45 bis 12.45 Gutenberg 2+3 Angular: Komponentenorientierte Web- Anwendungen Christian Liebel DI, 25. September 2018, 14.15 bis 15.15 Zagreb B Progressive Web Apps: Next Step for Web-based Cross- Platform Applications Shmuela Jacobs DI, 25. September 2018, 16.00 bis 17.00 Zagreb B WebAssembly und Blazor: Wie .NET jetzt auch den Browser erobert? Sebastian Gingter, Christian Liebel DI, 25. September 2018, 17.15 bis 18.15 Gutenberg 1
  3. 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 den Browser erobert? Expectations
  4. § Consultant & Architect at Thinktecture AG § Focus on

    § Mobile & web-based application architectures § PWA and modern Web technology § Microsoft MVP for Developer Technologies § Consultant & Architect at Thinktecture AG § Focus on § Flexible and scalable backend architectures § Developer productivity § Software quality measures § All things .NET / .NET Core WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert? Christian Liebel Sebastian Gingter § christian.liebel@thinktecture.com § @christianliebel § sebastian.gingter@thinktecture.com § @phoenixhawk 4
  5. 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 den Browser erobert? Talking Points
  6. Modern Business Applications & the Web WebAssembly und Blazor Wie

    .NET jetzt auch den Browser erobert?
  7. 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 den Browser erobert? The Modern Web
  8. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    The (Modern) Web Is the Platform
  9. - 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 den Browser erobert? Modern Business Applications
  10. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    Browser & JavaScript Architecture (simplified) Compiler Parser JIT Web APIs (DOM, IndexedDB, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime
  11. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    “Houston, we have some problems” The Web is too… Web-ish ! The web is centered around a single language "
  12. WebAssembly Native Bytecode for the Web WebAssembly und Blazor Wie

    .NET jetzt auch den Browser erobert?
  13. - 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 den Browser erobert? WebAssembly (wasm)
  14. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

  15. - 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 den Browser erobert? WebAssembly (wasm) – Minimum Viable Product
  16. - 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 den Browser erobert? WASM: Here & to Stay
  17. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    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/
  18. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    WASM & JS Architecture (simplified) Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime WebAssembly (.wasm)
  19. - 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 den Browser erobert? Building Applications with WASM
  20. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    WASM – A Simple Sample Binary (.wasm) & text (.wat) format
  21. - 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 den Browser erobert? WASM Tooling C / C++ Source code .wasm module HTML doc JS glue code Emscripten +
  22. WebAssembly Studio https://webassembly.studio/ WebAssembly und Blazor Wie .NET jetzt auch

    den Browser erobert? LIVE DEMO
  23. Mono & WebAssembly .NET Comes to the Browser WebAssembly und

    Blazor Wie .NET jetzt auch den Browser erobert?
  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 den Browser erobert? .NET & WASM
  25. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    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 den Browser erobert? 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 den Browser erobert? mono-wasm
  28. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    mono-wasm
  29. mono-wasm https://github.com/lrz/mono-wasm WebAssembly und Blazor Wie .NET jetzt auch den

    Browser erobert?
  30. Blazor Single-Page Apps Come to C# WebAssembly und Blazor Wie

    .NET jetzt auch den Browser erobert?
  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 den Browser erobert? Blazor – WASM in action * as of June 19, 2018
  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 den Browser erobert? Blazor – Get it Today LIVE DEMO
  33. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    Blazor – .NET Right in Your Browser
  34. WebAssembly und Blazor Wie .NET jetzt auch den Browser erobert?

    Blazor Architecture* Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser blazor.js Blazor page (.html) JS Runtime mono.wasm mono.js mscorlib.dll etc. myapp.dll * as of September 25, 2018
  35. - 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 den Browser erobert? What Blazor is NOT:
  36. Tanks! WebAssembly Demo https://webassembly.org/demo/Tanks/ WebAssembly und Blazor Wie .NET jetzt

    auch den Browser erobert? LIVE DEMO
  37. Sun Temple – Unreal Demo http://s3.amazonaws.com/mozilla-games/tmp/2017-02- 21-SunTemple/SunTemple.html WebAssembly und Blazor

    Wie .NET jetzt auch den Browser erobert? LIVE DEMO
  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 den Browser erobert? Summary
  39. Windows 3.11 in the Browser https://classicreload.com/win3x-windows-311.html WebAssembly und Blazor Wie

    .NET jetzt auch den Browser erobert? LIVE DEMO
  40. Thank you for your kind attention! Christian Liebel @christianliebel Consultant

    Sebastian Gingter @phoenixhawk Consultant