WebAssembly: Dem JavaScript sein Tod!? Christian Weyer @christianweyer CTO Sebastian Gingter @phoenixhawk Consultant

§ Co-founder, co-owner and CTO at Thinktecture AG § Focus on § Mobile & web-based application architectures § Pragmatic end-to-end solutions § Cloud-native & serverless architectures § Microsoft MVP for ASP.NET, ASPInsider, AzureInsider § Google GDE for Web Technologies § Consultant & architect at Thintecture AG § Focus on § Flexible and scalable backend architectures § Developer productivity § Software quality measures § All things .NET / .NET Core WebAssembly: Dem JavaScript sein Tod!? Christian Weyer Sebastian Gingter § [email protected] § ! @christianweyer § [email protected] § ! @phoenixhawk 2

3 § Modern Business Applications & the Web § WebAssembly as a native bytecode for the Web § Blazor: experimental project for C#/.NET-based SPAs WebAssembly: Dem JavaScript sein Tod!? The Journey

4 State of the art Modern Business Applications Dem JavaScript sein Tod!? WebAssembly:

5 § 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: Dem JavaScript sein Tod!? Modern Business Applications

6 § Single Page Applications (SPAs) are the new smart clients WebAssembly: Dem JavaScript sein Tod!? Modern Business Applications & the Web

7 WebAssembly: Dem JavaScript sein Tod!? Browser & JavaScript Architecture (simplified) Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime

WebAssembly: Dem JavaScript sein Tod!? “Houston, we have some problems” The Web is too… Web-ish ! The web is centered around a single language " 8

9 Your native code in the browser WebAssembly Dem JavaScript sein Tod!? WebAssembly:

10 § Low-level bytecode for the Web – beyond asm.js § Bring any language into the browser § Currently targeted at C/C++ (and Rust) § Achieve superior performance in certain cases § Because… JavaScript ! (but not a replacement for JavaScript!) § Stack machine-based § Not AST, or register- or SSA-based bytecode § See https://github.com/WebAssembly/design/blob/master/Rationale.md § Goals § Fast, efficient, portable ■ Use existing sandboxing tools § Readable and debuggable ■ Don’t break the web WebAssembly: Dem JavaScript sein Tod!? WebAssembly (WASM) https://twitter.com/getify/status/997098808344547328

11 WebAssembly: Dem JavaScript sein Tod!? 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 )

12 WebAssembly: Dem JavaScript sein Tod!? https://caniuse.com/#search=WebAssembly

13 WebAssembly: Dem JavaScript sein Tod!? 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/

14 § 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: Dem JavaScript sein Tod!? Building Applications with WASM

15 WebAssembly: Dem JavaScript sein Tod!? WASM – A Simple Sample § Binary (.wasm) & text (.wat) format Yes, we always need JS!

16 § 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: Dem JavaScript sein Tod!? WASM Tooling C / C ++ Source code .w asm m odule HTM L doc JS glue code Em scripten +

17 § 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 § Aka ‘mono-wasm’ § JIT – for fast development cycles, including live reload § AOT – for optimized runtime deployment & execution WebAssembly: Dem JavaScript sein Tod!? .NET & WASM C # W ebA ssem bly LLV M bitcode mcs IL Mono AOT compiler LLVM WASM backend

18 § 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: Dem JavaScript sein Tod!? WASM: Here & to Stay

19 An experiment based on WASM ASP.NET Core Blazor Dem JavaScript sein Tod!? WebAssembly:

20 § 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: Dem JavaScript sein Tod!? Blazor – WASM in action * as of June 19, 20 18

21 WebAssembly: Dem JavaScript sein Tod!? 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

22 § 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: Dem JavaScript sein Tod!? What is Blazor NOT?

23 § 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 WebAssembly: Dem JavaScript sein Tod!? Summary The future m ight be bright! ?

24 WebAssembly: Dem JavaScript sein Tod!? emudore, a *very simple* Commodore 64 emulator – in WASM https://github.com/marioballano/emudore/blob/master/README.md

25 § Unreal Demo § http://s3.amazonaws.com/mozilla-games/tmp/2017-02-21-SunTemple/SunTemple.html § WebAssembly Specification § http://webassembly.github.io/spec/core/index.html § LVVM § https://llvm.org/ § Emscripten § http://kripken.github.io/emscripten-site/ § Mono & WebAssembly § http://www.mono-project.com/news/2018/01/16/mono-static-webassembly-compilation/ § ASP.NET Blazor § https://blazor.net/index.html § Ooui.WASM § http://praeclarum.org/post/171899388348/oouiwasm-net-in-the-browser WebAssembly: Dem JavaScript sein Tod!? Resources

WebAssembly: Dem JavaScript sein Tod!? Christian Weyer @christianweyer [email protected] Sebastian Gingter @phoenixhawk [email protected] https://github.com/thinktecture/enterjs-2018-wasm