WebAssembly & Progressive Web Apps - Next Generation Apps

Gesetzt den Fall, Sie halten Cross-Plattform SPAs (Single Page Applications) für eine gute Idee, könnte diese Night Session in der Tat interessant für Sie werden. 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 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 Applikationen gemäß der Idee von Progressive Web Apps (PWA). Zudem haben wir mit dem zunehmenden Reifegrad von WebAssembly (WASM) als Standard allmählich leistungsstarke Tools in unserer Hand, um die nächste Generation von webbasierten Anwendungen zumindest mal anzudenken. In dieser Night Session wird Christian Weyer sowohl über PWAs als auch ü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++, Java oder C#/.NET-Code im Browser ohne Plug-in nutzen können – sei es aus Performance- oder Wiederverwendungsgründen. Dies kann sowohl bei Greenfield- als auch bei Brownfield-Projekten ein interessanter Ansatz sein. Lehnen Sie sich zurück und schauen Sie zu, welche Möglichkeiten PWAs und WebAssembly dem Web verleihen könnten.

Transcript

1. Frontendblüten: WebAssembly & Progressive Web Apps – Next Generation Apps? 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 Next Generation Apps? WebAssembly & Progressive Web Apps
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 & Progressive Web Apps Next Generation Apps? The Journey
4. 4 State of the art Modern Business Applications Next Generation Apps? WebAssembly & Progressive Web Apps
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 & Progressive Web Apps Next Generation Apps? Modern Business Applications
6. 6 WebAssembly & Progressive Web Apps Next Generation Apps?
7. 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. 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
9. 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. 10 More native feeling & features Progressive Web Apps Next Generation Apps? WebAssembly & Progressive Web Apps
11. 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. 12 WebAssembly & Progressive Web Apps Next Generation Apps?
13. 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. 14 WebAssembly & Progressive Web Apps Next Generation Apps? https://caniuse.com/#search=Service%20Workers
15. 15 WebAssembly & Progressive Web Apps Next Generation Apps? https://caniuse.com/#search=Web%20App%20Manifest
16. 16 Your native code in the browser WebAssembly Next Generation Apps? WebAssembly & Progressive Web Apps
17. 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. 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. 19 WebAssembly & Progressive Web Apps Next Generation Apps? 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 HTML / CSS (plus maybe JavaScript) § Entire code base in WebAssembly WebAssembly & Progressive Web Apps Next Generation Apps? WASM-based Applications
21. 21 WebAssembly & Progressive Web Apps Next Generation Apps? WASM – A Simple Sample § Binary (.wasm) & text (.wat) format
22. 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. 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. 24 An experiment based on WASM ASP.NET Core Blazor Next Generation Apps? WebAssembly & Progressive Web Apps
25. 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. 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. 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. 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. 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
30. 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. 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