WebAssembly: Dem JavaScript sein Tod!?

Blasphemie: JavaScript auf einer JavaScript-Konferenz in Frage zu stellen!
Lassen Sie uns über das Web als Plattform reden und darüber, wie wir JavaScript-basierte Browseranwendungen unter Umständen noch "besser" machen können. Die Web- und Browserplattformen haben die Art und Weise verändert, wie wir Anwendungen, beispielsweise Line-of-Business Applications, erstellen können, und diese Plattformen haben sich in den letzten 5 Jahren erheblich weiterentwickelt. Für SPAs, die im Browser laufen, stehen mehr und mehr native Funktionen zur Verfügung - eine großartige Basis für moderne Anwendungen gemäß der Idee von Progressive Web Apps (PWA).
Mit dem zunehmenden Reifegrad von WebAssembly (WASM) als Standard haben wir so allmählich leistungsstarke Tools in unserer Hand, um die nächste Generation von webbasierten Anwendungen zumindest mal anzudenken. In dieser Session werden Christian Weyer und Sebastian Gingter über die Basis und Möglichkeiten von WebAssembly als Bytecode für alle gängigen modernen Browser sprechen. Erfahren Sie, wie Sie WASM zum Ausführen von C/C++, oder gar Java beziehungsweise C#/.NET-Code im Browser ohne Plug-in nutzen können – und so die optimale Performance aus ihrer "App" holen können. Dies kann sowohl bei Greenfield- als auch bei Brownfield-Projekten ein interessanter Ansatz sein. Lehnen Sie sich zurück und schauen Sie zu, welche neuen Möglichkeiten WebAssembly unserer geliebten Plattform verleihen kann. Spüren Sie das Potenzial Ihrer nächsten (Geschäfts-)Anwendung.

Transcript

1. WebAssembly: Dem JavaScript sein Tod!? Christian Weyer @christianweyer CTO Sebastian Gingter @phoenixhawk Consultant
2. § 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 § christian.weyer@thinktecture.com § ! @christianweyer § sebastian.gingter@thinktecture.com § ! @phoenixhawk 2
3. 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. 4 State of the art Modern Business Applications Dem JavaScript sein Tod!? WebAssembly:
5. 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. 6 § Single Page Applications (SPAs) are the new smart clients WebAssembly: Dem JavaScript sein Tod!? Modern Business Applications & the Web
7. 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
8. 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. 9 Your native code in the browser WebAssembly Dem JavaScript sein Tod!? WebAssembly:
10. 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. 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. 12 WebAssembly: Dem JavaScript sein Tod!? https://caniuse.com/#search=WebAssembly
13. 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. 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. 15 WebAssembly: Dem JavaScript sein Tod!? WASM – A Simple Sample § Binary (.wasm) & text (.wat) format Yes, we always need JS!
16. 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. 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. 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. 19 An experiment based on WASM ASP.NET Core Blazor Dem JavaScript sein Tod!? WebAssembly:
20. 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. 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. 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. 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. 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. 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
26. WebAssembly: Dem JavaScript sein Tod!? Christian Weyer @christianweyer christian.weyer@thinktecture.com Sebastian Gingter @phoenixhawk sebastian.gingter@thinktecture.com https://github.com/thinktecture/enterjs-2018-wasm