WebAssembly & PWA: Single Page Applications (SPAs) ohne JavaScript? Christian Weyer @christianweyer CTO

2 § Founder & CTO at Thinktecture AG § Personal focus on § Mobile & web-based application architectures § Interoperability, cross-device § Pragmatic end-to-end solutions § Cloud-native & serverless architectures § Independent Microsoft Regional Director § Microsoft MVP for ASP.NET (Architecture) ASPInsider, AzureInsider § Google GDE for Web Technologies § [email protected] § ! @christianweyer Christian Weyer Single Page Applications (SPAs) ohne JavaScript? WebAssembly & PWA

3 § Modern Business Applications & the Web § Progressive Web Apps (PWA) pave the way to native § WebAssembly as a native bytecode for the Web § WebAssembly & SPAs WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? The Journey

4 State of the art Modern Business Applications Single Page Applications (SPAs) ohne JavaScript? WebAssembly & PWA

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 & PWA Single Page Applications (SPAs) ohne JavaScript? Modern Business Applications

6 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript?

7 § Single Page Applications (SPAs) are the new smart clients WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? Modern Business Applications & the Web

8 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? Browser & JavaScript Architecture (simplified) Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime

WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? “Houston, we have some problems” The Web is too… Web-ish ! The web is centered around a single language " 9

10 More native feeling & features Progressive Web Apps Single Page Applications (SPAs) ohne JavaScript? WebAssembly & PWA

11 § Web applications should… § Feel & behave more like a native app § Be installable, without (classic) app stores § Be able to work completely offline, without any server connections § Receive push notifications, without running § Offer in-app payment options § PWAs are targeted at both, mobile and desktop § Progressive Web Apps are not a technology § Collection of characteristics an application must/should support ➔ “Uber Pattern” § Various technologies are available to progressively enhance an application § Some outstanding standards like Web App Manifest, Service Workers WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? Progressive Web Apps (PWA) – the Web gets more native

12 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript?

WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? Offline Capability with Service Worker Mobile or Desktop system Remote storage Server HTTPS Browser sandbox Web App HTML/JS Cache storage fetch Service Worker 13

14 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? https://caniuse.com/#search=Service%20Workers

15 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? https://caniuse.com/#search=Web%20App%20Manifest

16 Your native code in the browser WebAssembly Single Page Applications (SPAs) ohne JavaScript? WebAssembly & PWA

17 § Low-level bytecode for the Web – beyond asm.js § Bring any language into the browser § Currently targeted at C/C++ § 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 & PWA Single Page Applications (SPAs) ohne JavaScript? WebAssembly (WASM) https://twitter.com/getify/status/997098808344547328

18 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? 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 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? https://caniuse.com/#search=WebAssembly

20 § 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 and cross-compile from foreign frameworks and platforms to Web § What about e.g. the UI layer? WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? WASM-based Applications

21 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? WASM Simple Sample § Binary (.wasm) & text (.wat) format

22 § 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 § Go § mono-wasm, from C# § Baremetal: WebAssembly Studio § Playing around with WASM in the browser WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? WASM Tooling C / C++ Source code .wasm module HTML doc JS glue code Emscripten +

23 § Mono is Microsoft’s technology 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 – experimental state § Aka ‘mono-wasm’ § JIT – for fast development cycles, including live reload § AOT – for optimized runtime deployment & execution WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? .NET & WASM C# WebAssembly LLVM bitcode mcs IL Mono AOT compiler LLVM WASM backend

24 § After v1 (the MVP), the consortium keeps working on new features § Threads § Garbage Collection § Direct DOM access § Many more things… § Still a long way to go to get beyond the MVP § https://github.com/WebAssembly/design/blob/master/FutureFeatures.md § Yes, we will see another platform having to mature! Exploits, anyone? § https://www.slideshare.net/cisoplatform7/webassembly-a-new-world-of- native-exploits-on-the-browser WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? WASM: Here & to Stay

25 https://hacks.mozilla.org/2018/10/calls-between-javascript-and-webassembly-are-finally-fast-%F0%9F%8E%89/ WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript?

26 An experiment based on WASM Blazor Single Page Applications (SPAs) ohne JavaScript? WebAssembly & PWA

27 § Blazor is an experimental Single Page Application (SPA) framework based on .NET – by the ASP.NET team § 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 client application logic § Basic architecture feels a bit awkward § WASM v1 was meant to be used in a different way WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? Blazor – an experiment on an experiment* * as of Oct 1, 2018

28 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? 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 Oct 1, 2018

29 § 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 § It is NOT stable (story-wise) § It is NOT production-ready § Therefore, it is NOT suitable for real-world applications § Currently no plans for supporting WebComponents WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? What is Blazor NOT?

30 § Embrace the Web § Build great UIs with HTML and CSS § Build great SPAs with JavaScript/ TypeScript § Leverage Progressive Web principles § Enhance your SPA with WebAssembly WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? Modern Applications: WASM-enhanced SPA as PWA

31 § 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 § Service Worker is the rockstar § 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 SPA frameworks will be enhanced by WASM § Still needs JavaScript heavily today § Use it wisely: it is not The Holy Grail (and anything building on it likewise) WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? Summary The future m ight be bright! ?

WebAssembly & PWA: Single Page Applications (SPAs) ohne JavaScript? Christian Weyer @christianweyer [email protected] Thank you! https://github.com/thinktecture/angulardays-2018-herbst-wasm

33 § Progressive Web Apps § https://developers.google.com/web/progressive-web-apps/ § Is ServiceWorker ready? § https://jakearchibald.github.io/isserviceworkerready/ § PWAs with Angular § https://angular.io/guide/service-worker-intro § 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 & PWA Single Page Applications (SPAs) ohne JavaScript? Resources