WebAssembly & Progressive Web Apps Rethinking modern application development 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 Rethinking modern application development WebAssembly & Progressive Web Apps (PWA) 

3 § Modern Business Applications & the Web § Progressive Web Apps (PWA) pave the way to native § WebAssembly as a native bytecode for the Web § ASP.NET Core Blazor: an experimental project for .NET-based SPAs WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development The Journey 

4 State of the art Modern Business Applications Rethinking modern application development WebAssembly & Progressive Web Apps (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 & Progressive Web Apps (PWA) Rethinking modern application development Modern Business Applications 

6 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development 

7 § Single Page Applications (SPAs) are the new smart clients WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development Modern Business Applications & the Web 

8 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development 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 (PWA) Rethinking modern application development “Houston, we have some problems” 9 The Web is too… Web-ish ! The web is centered around a single language " 

10 More native feeling Progressive Web Apps Rethinking modern application development WebAssembly & Progressive Web Apps (PWA) 

11 § Web applications should… § Feel & behave 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 & Progressive Web Apps (PWA) Rethinking modern application development Progressive Web Apps (PWA) – the Web gets more native 

12 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development 

WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development Offline Capability with Service Worker Mobile or Desktop system Remote storage Server HTTPS 13 Browser sandbox Web App HTML/JS Cache storage fetch Service Worker 

14 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development https://caniuse.com/#search=Service%20Workers 

15 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development https://caniuse.com/#search=Web%20App%20Manifest 

16 Your native code in the browser WebAssembly Rethinking modern application development WebAssembly & Progressive Web Apps (PWA) 

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!) § 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 & Progressive Web Apps (PWA) Rethinking modern application development WebAssembly (WASM) https://twitter.com/getify/status/997098808344547328 

18 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development 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 (PWA) Rethinking modern application development 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 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development WASM-based Applications 

21 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development 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 § mono-wasm from C# § Baremetal: WebAssembly Studio § Playing around with WASM in the browser WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development WASM Tooling C / C++ Source code .wasm module HTML doc JS glue code Emscripten + 

23 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development emudore, a Commodore 64 emulator – in WASM https://github.com/marioballano/emudore/blob/master/README.md 

24 § 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 (PWA) Rethinking modern application development .NET & WASM C# WebAssembly LLVM bitcode mcs IL Mono AOT compiler LLVM WASM backend 

25 § 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 (PWA) Rethinking modern application development WASM: Here & to Stay 

26 An experiment based on WASM ASP.NET Core Blazor Rethinking modern application development WebAssembly & Progressive Web Apps (PWA) 

27 § 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 & Progressive Web Apps (PWA) Rethinking modern application development Blazor – WASM in action * as of May 22, 2018 

28 WebAssembly & Progressive Web Apps (PWA) Rethinking modern application development 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 May 22, 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 § 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 & Progressive Web Apps (PWA) Rethinking modern application development What is Blazor NOT? 

30 § 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 & Progressive Web Apps (PWA) Rethinking modern application development Summary The future m ight be bright! ? 

WebAssembly & Progressive Web Apps Rethinking modern application development Christian Weyer @christianweyer [email protected] Thank you! https://github.com/thinktecture/techorama-2018-wasm-pwa 

32 § 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 & Progressive Web Apps (PWA) Rethinking modern application development Resources 

No content