Frontendblüten: WebAssembly & Progressive Web Apps – Next Generation Apps? 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 Next Generation Apps? WebAssembly & Progressive Web Apps

3 § Modern Business Applications & the Web § Progressive Web Apps (PWA) pave the way to native § WebAssembly as a native bytecode for the Web WebAssembly & Progressive Web Apps Next Generation Apps? The Journey

4 State of the art Modern Business Applications Next Generation Apps? WebAssembly & Progressive Web Apps

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 & Progressive Web Apps Next Generation Apps? Modern Business Applications

6 WebAssembly & Progressive Web Apps Next Generation Apps?

7 § Single Page Applications (SPAs) are the new smart clients § Server-side rendering exists, is important & makes sense from time-to-time WebAssembly & Progressive Web Apps Next Generation Apps? Modern Business Applications & the Web

8 WebAssembly & Progressive Web Apps Next Generation Apps? Browser & JavaScript Architecture Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime

WebAssembly & Progressive Web Apps Next Generation Apps? People want more, always… The Web is too… Web-ish ! The web is centered around a single language "

10 More native feeling & features Progressive Web Apps Next Generation Apps? WebAssembly & Progressive Web Apps

11 § Some want web applications should that… § Feel & behave like a native app § Are installable, without (classic) app stores § Are 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 & Progressive Web Apps Next Generation Apps? Progressive Web Apps (PWA) – the Web gets more native

12 WebAssembly & Progressive Web Apps Next Generation Apps?

WebAssembly & Progressive Web Apps Next Generation Apps? 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 & Progressive Web Apps Next Generation Apps? https://caniuse.com/#search=Service%20Workers

15 WebAssembly & Progressive Web Apps Next Generation Apps? https://caniuse.com/#search=Web%20App%20Manifest

16 Your native code in the browser WebAssembly Next Generation Apps? WebAssembly & Progressive Web Apps

17 § 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!) § Goals § Fast, efficient, portable § Readable and debuggable § Use existing sandboxing tools § Don’t break the web WebAssembly & Progressive Web Apps Next Generation Apps? WebAssembly (WASM) https://twitter.com/getify/status/997098808344547328

18 WebAssembly & Progressive Web Apps Next Generation Apps? 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 & Progressive Web Apps Next Generation Apps? 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 HTML / CSS (plus maybe JavaScript) § Entire code base in WebAssembly WebAssembly & Progressive Web Apps Next Generation Apps? WASM-based Applications

21 WebAssembly & Progressive Web Apps Next Generation Apps? WASM – A Simple Sample § Binary (.wasm) & text (.wat) format

22 § 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 (C++) § TeaVM (Java) § Rust § mono-wasm (C#) WebAssembly & Progressive Web Apps Next Generation Apps? WASM Tooling C / C++ Source code .wasm module HTML doc JS glue code Emscripten +

23 § After v1 (the MVP), the consortium keeps working on new features § Threads § Garbage Collection § Direct DOM access § … many more things… See https://github.com/WebAssembly/design/blob/master/FutureFeatures.md WebAssembly & Progressive Web Apps Next Generation Apps? WASM: Here, to Stay & Evolve

24 An experiment based on WASM ASP.NET Core Blazor Next Generation Apps? WebAssembly & Progressive Web Apps

25 § 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 & Progressive Web Apps Next Generation Apps? .NET & WASM – Work in Progress C# WebAssembly LLVM bitcode mcs IL Mono AOT compiler LLVM WASM backend

26 § Blazor is an experimental Single Page Application (SPA) framework based on .NET § Not ready for production at all § 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 * ! § Uses Razor / .cshtml templates for rendering HTML / CSS § Uses C# for writing application logic WebAssembly & Progressive Web Apps Next Generation Apps? Blazor – WASM in (experimental) Action * as of Sep 10, 2018

27 WebAssembly & Progressive Web Apps Next Generation Apps? 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 Sep 10, 2018

28 WebAssembly & Progressive Web Apps Next Generation Apps? WASM Beyond the Browser https://github.com/ewasm https://medium.com/zkcapital/webassembly-the-future-of-blockchain-computing-1a0ae28f7e40

29 § The Web is still the Web § You need to know HTML, CSS and JavaScript. Period. § Progressive Web Apps § Emerging technologies & standards 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 WebAssembly & Progressive Web Apps Next Generation Apps? Summary

Frontendblüten: WebAssembly & Progressive Web Apps – Next Generation Apps? Christian Weyer @christianweyer CTO Thank you! https://github.com/thinktecture/software-architecture-summit-2018-pwa-wasm

31 § 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 WebAssembly & Progressive Web Apps Next Generation Apps? Resources