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

Ohoh: 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 Browser-Anwendungen unter Umständen noch "besser" machen können. Die Web- und Browser-Plattformen haben die Art und Weise verändert, wie wir Anwendungen, bspw. 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 wird Christian Weyer ü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 bzw. 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 mögliche Potenzial Ihrer nächsten (Geschäfts-)Anwendung.

Transcript

1. WebAssembly & PWA: Single Page Applications (SPAs) ohne JavaScript? Christian Weyer @christianweyer CTO
2. 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 § christian.weyer@thinktecture.com § ! @christianweyer Christian Weyer Single Page Applications (SPAs) ohne JavaScript? WebAssembly & PWA
3. 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. 4 State of the art Modern Business Applications Single Page Applications (SPAs) ohne JavaScript? WebAssembly & PWA
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 & PWA Single Page Applications (SPAs) ohne JavaScript? Modern Business Applications
6. 6 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript?
7. 7 § Single Page Applications (SPAs) are the new smart clients WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? Modern Business Applications & the Web
8. 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
9. 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. 10 More native feeling & features Progressive Web Apps Single Page Applications (SPAs) ohne JavaScript? WebAssembly & PWA
11. 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. 12 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript?
13. 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. 14 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? https://caniuse.com/#search=Service%20Workers
15. 15 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? https://caniuse.com/#search=Web%20App%20Manifest
16. 16 Your native code in the browser WebAssembly Single Page Applications (SPAs) ohne JavaScript? WebAssembly & PWA
17. 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. 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. 19 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? https://caniuse.com/#search=WebAssembly
20. 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. 21 WebAssembly & PWA Single Page Applications (SPAs) ohne JavaScript? WASM Simple Sample § Binary (.wasm) & text (.wat) format
22. 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. 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. 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. 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. 26 An experiment based on WASM Blazor Single Page Applications (SPAs) ohne JavaScript? WebAssembly & PWA
27. 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. 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. 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. 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. 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! ?
32. WebAssembly & PWA: Single Page Applications (SPAs) ohne JavaScript? Christian Weyer @christianweyer christian.weyer@thinktecture.com Thank you! https://github.com/thinktecture/angulardays-2018-herbst-wasm
33. 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