Progressive Web Apps & WebAssembly: Moderne Anwendungsentwicklung neu gedacht

Das moderne Web hat die Art und Weise, wie heute Anwendungen entwickelt werden, gründlich auf den Kopf gestellt: Für Single-Page-Apps, die im Browser laufen, stehen mehr und mehr native Funktionen zur Verfügung. Das ist eine großartige Basis für moderne Anwendungen entsprechend der Idee von Progressive Web Apps (PWA). Daneben macht eine zweite Technologie auf sich aufmerksam: WebAssembly (WASM), ein Bytecode für das Web. Damit kann in C oder C++ (und künftig eventuell auch Java und C#) geschriebener Quellcode im Browser ausgeführt werden – ganz ohne Plug-in. Das eröffnet nicht nur Migrationspfade für bestehende Logik, sondern kann auch bei Greenfield-Projekten ein interessanter Ansatz sein. Lehnen Sie sich zurück und schauen Sie zu, welche neuen Möglichkeiten Progressive Web Apps und WebAssembly unserer geliebten Plattform verleihen können und spüren Sie das mögliche Potenzial Ihrer nächsten (Line-of-Business-)Anwendung!

Transcript

1. Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Christian Liebel @christianliebel Thinktecture AG
2. 2 § Was Sie ERWARTET § Das Web als die Plattform für alle Arten von Anwendungen § Nativer werden mit dem Web: Progressive Web Apps (PWA) § Nutzung nativer Sprachen wie C, C++ im Web: WebAssembly § Möglichkeiten & Grenzen von WebAssembly § Demos § Was Sie NICHT ERWARTET § WebAssembly Deep Dive § PWA Deep Dive § Java, Silverlight, Flash ! Progressive Web Apps & WebAssembly: Moderne Anwendungsentwicklung neu gedacht Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht
3. Hello, it’s me. Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud & Enterprise Blockchain 3
4. 4 § Modern Business Applications & the Web § Progressive Web Apps (PWA) pave the way to native § WebAssembly as a native bytecode for the Web § WebAssembly & SPAs Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht The Journey
5. 5 State of the art Modern Business Applications Moderne Anwendungsentwicklung neu gedacht Progressive Web Apps & WebAssembly
6. 6 § Single Page Applications (SPAs) are the new smart clients Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Modern Business Applications & the Web
7. 7 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht The (Modern) Web Is the Platform
8. 8 § 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 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Modern Business Applications
9. 9 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht
10. 10 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht The Power of the Modern Web Web Share API Gamepad API Payment Request API Ambient Light Sensor Web Bluetooth API Shape Detection API Web Notifications WebVR WebRTC WebGL Speech Synthesis Web Cryptography API IndexedDB Geolocation Canvas Media Capture and Streams
11. 11 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht The Power of the Modern Web • WebGL • Web Audio API • Gamepad API
12. 12 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Browser & JavaScript Architecture (simplified) Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime
13. 13 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht “Houston, we have some problems” The Web is too… Web-ish ! The web is centered around a single language "
14. 14 More native feeling & features Progressive Web Apps Moderne Anwendungsentwicklung neu gedacht Progressive Web Apps & WebAssembly
15. 15 § 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 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Progressive Web Apps (PWA) – the Web gets more native
16. 16 “Uber Pattern” Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Progressive Web Apps Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
17. 17 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Targeted at mobile & desktop
18. 18 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Targeted at mobile & desktop
19. 19 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Offline capability with Service Worker System Website HTML/JS Cache Storage Remote storage Server Internet fetch HTTP Service Worker
20. 20 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht https://caniuse.com/#search=Service%20Workers
21. 21 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht https://caniuse.com/#search=Web%20App%20Manifest
22. 22 Your native code in the browser WebAssembly Moderne Anwendungsentwicklung neu gedacht Progressive Web Apps & WebAssembly
23. 23 § 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 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht WebAssembly (WASM) https://twitter.com/getify/status/997098808344547328
24. 24 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht 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)
25. 25 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht https://caniuse.com/#search=WebAssembly
26. 26 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht WASM Simple Sample § Binary (.wasm) & text (.wat) format
27. 27 § 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 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht WASM Tooling C / C++ Source code .wasm module HTML doc JS glue code Emscripten +
28. 28 § 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 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Sneak Peak: .NET & WASM C# WebAssembly LLVM bitcode mcs IL Mono AOT compiler LLVM WASM backend
29. 29 § 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 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht WASM: Here & to Stay
30. 30 https://hacks.mozilla.org/2018/10/calls-between-javascript-and-webassembly-are-finally-fast-%F0%9F%8E%89/ Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht
31. 31 More native feeling & features Web Assembly & SPAs Moderne Anwendungsentwicklung neu gedacht Progressive Web Apps & WebAssembly
32. 32 § 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? Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht WASM-based Applications
33. 33 § Embrace the Web § Build great UIs with HTML and CSS § Build great SPAs with JavaScript/TypeScript § Leverage Progressive Web App principles § Enhance your SPA with WebAssembly Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Modern Applications: WASM-enhanced SPA as PWA
34. 34 § 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) Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Summary The future m ight be bright!?
35. Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Web Developer Conference 2018 Gregor Biswanger Florian Bader Sebastian Springer Steffen Jahr Rowdy Rabouw David Würfel A.Mahdy AbdelAziz Matthias Drescher Marco Otte-Witte Thomas Gassmann Yvette Teiken Peter Kröner
36. Progressive Web Apps & WebAssembly Christian Liebel @christianliebel christian.liebel@thinktecture.com Thank you! https://github.com/thinktecture/wdc-2018-wasm Moderne Anwendungsentwicklung neu gedacht
37. 37 § 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 Progressive Web Apps & WebAssembly Moderne Anwendungsentwicklung neu gedacht Resources