IT Tage 2018 - WebAssembly & Blazor - 2018-12-13

IT Tage 2018 - WebAssembly & Blazor - 2018-12-13

The slides to my talk about WebAssembly and Blazor at the IT Tage 2018 in Frankfurt.

Ebeb5d8fd081058ba8df73d378bf83d7?s=128

Sebastian P.R. Gingter

December 13, 2018
Tweet

Transcript

  1. .NET auf dem Weg, den Browser zu erobern?

  2. − 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 ☺ − WebAssembly/mono-wasm/ Blazor Deep Dive − Future-proof tutorial (WebAssembly is stable, but mono-wasm/Blazor aren’t) − Flash, Silverlight, Java Applets or other Plugins .NET auf dem Weg, den Browser zu erobern?
  3. ▪ ▪ ▪ ▪ ▪ ▪ .NET auf dem Weg,

    den Browser zu erobern? ▪ ▪ 3
  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# .NET auf dem Weg, den Browser zu erobern?
  5. .NET auf dem Weg, den Browser zu erobern?

  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 .NET auf dem Weg, den Browser zu erobern?
  7. .NET auf dem Weg, den Browser zu erobern?

  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 .NET auf dem Weg, den Browser zu erobern?
  9. .NET auf dem Weg, den Browser zu erobern? Compiler Parser

    JIT Web APIs (DOM, IndexedDB, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime
  10. .NET auf dem Weg, den Browser zu erobern? The Web

    is too… Web-ish The web is centered around a single language
  11. Native Bytecode for the Web .NET auf dem Weg, den

    Browser zu erobern?
  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 .NET auf dem Weg, den Browser zu erobern?
  13. .NET auf dem Weg, den Browser zu erobern?

  14. − Implemented in all major browsers (2017+) − Evergreen browsers

    (Chrome 57, Edge 16, Firefox 52 (not yet in ESR), Safari 11) − Desktop and mobile − Feature parity with asm.js was the goal − 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 .NET auf dem Weg, den Browser zu erobern?
  15. − After v1 (the MVP), the consortium keeps working on

    new features − Threads (already in Chrome 70) − 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 .NET auf dem Weg, den Browser zu erobern?
  16. .NET auf dem Weg, den Browser zu erobern? Compiler Parser

    JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime WebAssembly (.wasm)
  17. − 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 − With a tiny bit of loading and Web API – bridging JavaScript .NET auf dem Weg, den Browser zu erobern?
  18. .NET auf dem Weg, den Browser zu erobern? Binary (.wasm)

    & text (.wat) format
  19. − 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#) .NET auf dem Weg, den Browser zu erobern? C / C++ Source code .wasm module HTML doc JS glue code Emscripten +
  20. WebAssembly Studio https://webassembly.studio/ .NET auf dem Weg, den Browser zu

    erobern? LIVE DEMO
  21. .NET Comes to the Browser .NET auf dem Weg, den

    Browser zu erobern?
  22. − 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) .NET auf dem Weg, den Browser zu erobern?
  23. .NET auf dem Weg, den Browser zu erobern? $ 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
  24. using System; public class Hello { public static void Main(string[]

    args) { Yell("Hack"); } public static void Yell(string text) { Console.WriteLine($"{text.ToUpperInvariant()}!!!"); } } .NET auf dem Weg, den Browser zu erobern?
  25. <script src="index.js"></script> <script> document.addEventListener('WebAssemblyContentLoaded', () => { const klass =

    MonoClass('', 'Hello'); const method = MonoMethod(klass, 'Yell', true); MonoInvoke(0, method, ['Hallo']); }); </script> .NET auf dem Weg, den Browser zu erobern?
  26. .NET auf dem Weg, den Browser zu erobern?

  27. Single-Page Apps Come to C# .NET auf dem Weg, den

    Browser zu erobern?
  28. − 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 .NET auf dem Weg, den Browser zu erobern? * as of December 12, 2018
  29. https://blazor.net/docs/get-started.html dotnet new -i Microsoft.AspNetCore.Blazor.Templates dotnet new blazor -o BlazorApp1

    cd BlazorApp1 dotnet run .NET auf dem Weg, den Browser zu erobern? LIVE DEMO
  30. .NET auf dem Weg, den Browser zu erobern?

  31. Blazor https://blazor-demo.github.io/ https://blazor-flight-finder.azurewebsites.net/ .NET auf dem Weg, den Browser zu

    erobern?
  32. .NET auf dem Weg, den Browser zu erobern? 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 December 12, 2018
  33. − 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?) .NET auf dem Weg, den Browser zu erobern?
  34. • Package the web application as a native application using

    Electron or Cordova • Add a manifest to the web application to enhance it as a downloadable and offline-capable PWA .NET auf dem Weg, den Browser zu erobern?
  35. The True Powers of WebAssembly .NET auf dem Weg, den

    Browser zu erobern?
  36. Tanks! WebAssembly Demo https://webassembly.org/demo/Tanks/ .NET auf dem Weg, den Browser

    zu erobern? LIVE DEMO
  37. Sun Temple – Unreal Demo http://s3.amazonaws.com/mozilla-games/tmp/2017-02-21- SunTemple/SunTemple.html .NET auf dem

    Weg, den Browser zu erobern? 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 capabilities − 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? .NET auf dem Weg, den Browser zu erobern?
  39. Windows 3.11 in the Browser https://archive.org/details/win3_stock .NET auf dem Weg,

    den Browser zu erobern? LIVE DEMO
  40. None