Web-Apps mit Angular: Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper

Oftmals sollen Web-Apps gesondert für Mobil- oder Desktopbetriebssysteme bereitgestellt werden. Richtig angegangen, bedeutet dies nur einen geringen Zusatzaufwand.

Christian Liebel zeigt zum Abschluss der Serie rund um moderne Web-Apps, welche Optionen hierfür gezogen werden können: Tauri, Capacitor oder auch ganz ohne Wrapper!

Transcript

1. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Christian Liebel @christianliebel Consultant
2. Hello, it’s me. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
3. Web-Apps mit Angular Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Webinar-Reihe Yannick Baron: State im Griff mit NgRx Entity Adapter und Component Store 22.02.2023 Sascha Lehmann: Wie Sie mit Animationen Ihrer Web-App den letzten Schliff verleihen 08.03.2023 Christian Liebel: Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper 05.04.2023 Max Marschall: Was Sie über Formulare wissen müssen 24.05.2023
4. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
5. Angular Tauri Capacitor Ohne Wrapper Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
6. – Single-page application framework provided by Google – Based on Google’s experience when builing large-scale apps – Opinionated framework for building apps for web, mobile and desktop – Batteries included: Architectural patterns, tooling (build process, routing, form frameworks, …) – Good choice for large-scale applications Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Angular
7. “The New Angular” (v16+) Signals & Zone-less change detection Introduces a new reactive primitive for more effective change detection, reducing bloat and ensuring compatibility with other libraries. Standalone Apps Allows developers to get rid of NgModules entirely, which often led to confusion and architectural problems. Hydration Allows faster startup times by attaching to pre-rendered DOM. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Angular
8. SPA Architecture Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Angular Server- Logik Web API Push Service Web API DBs HTML, JS, CSS, Assets Webserver Webbrowser SPA Client- Logik View HTML/CSS View HTML/CSS View HTML/CSS HTTPS WebSockets HTTPS HTTPS
9. https://paint.js.org Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper LIVE DEMO
10. Angular Tauri Capacitor Ohne Wrapper Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
11. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
12. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Electron Architecture Desktop OS Electron Renderer Process (Chromium) Electron Main Process (Node.js) macOS Windows Linux Single-Page Application Electron API Custom Node.js Modules IPC Remote Node.js Electron- App
13. Advantages - Many desktop target platforms - Windows 7+, macOS 10.10+, Ubuntu, Debian, Fedora - macOS App Store, Microsoft Store, Snapcraft - Access to all native APIs - Well-defined runtime environment (Chromium and Node.js) - Integration scenarios with native applications Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Electron
14. Disadvantages - Wrapper is large in size (“hello world” starts with ~100 MB) - Outdated Node.js & Chromium versions may pose security risks to users – developers have to take care of regular updates of the wrapper - Each Electron instance leads to RAM overhead (e.g. Slack) Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Electron
15. – Uses the platform-specific web view for rendering the web content (WebView2 on Windows, WebKit on macOS, WebKitGTK on Linux) – Support for iOS and Android planned for v2 – Uses Rust for the backend (non-exclusive) – Security First: No server required for backend communication, API surface can be reduced, … – Backed by 1Password, Cloudflare, DigitalOcean, Netlify and others – Advanced tooling (self-updater, installer build process, …) – CLI: create-tauri-app Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Tauri
16. Advantages – Using built-in web views reduces bundle size significantly (starting at around 600 K) – Potentially better performance – Cross-platform: support for iOS und Android planned for version 2 Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Tauri
17. Disadvantages - Different web views: platform and API support will vary, additional testing effort - The new kid on the block Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Tauri
18. Deployment Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Tauri/Capacitor JS HTML CSS .ipa .exe .app ELF .apk Single-Page Application Capacitor Electron
19. Angular Tauri Capacitor Ohne Wrapper Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
20. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper https://appfigures.com/top-sdks/development/apps
21. – Provided by Ionic – Native projects are source assets (instead of build assets) – Backwards-compatible with Cordova (and many of its plug-ins) Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Capacitor
22. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Cordova Architecture Cordova Application Single-Page Application HTML JS CSS Assets Cordova Plugins Geolocation Notifications Media Camera Custom Plugins HTML Rendering Engine (WebView) Cordova Native APIs Cordova APIs HTML APIs Mobile OS Android iOS Windows 10 UWP and more… OS APIs OS APIs
23. Advantages - Supports app development for iOS, Android - Access to all native APIs - Official App Store deployments Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Capacitor
24. Disadvantages - Plug-ins are often outdated - App store membership required - Dependent on guidelines and goodwill of platform provider - App/update validation can take several hours or days Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Capacitor
25. Angular Tauri Capacitor Ohne Wrapper Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
26. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
27. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
28. Architecture Overview & Deployment Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Progressive Web Apps Browser Internet Single-Page Application Cache fetch JS HTML CSS Server Service Worker
29. Install Experience Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Progressive Web Apps
30. Web Native Web App Gap Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Progressive Web Apps Web App Gap
31. Project Fugu Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Progressive Web Apps »Let’s bring the web back – API by API« Thomas Steiner, Google
32. Project Fugu Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Progressive Web Apps Contacts Picker Screen Wake Lock API Picture in picture File System Access API Capability missing? http://bit.ly/new-fugu-request
33. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Project Fugu https://fugu-tracker.web.app/
34. Fugu Example: File System Access API if ('showOpenFilePicker' in window) { const handle = await window.showOpenFilePicker(); const file = await handle.getFile(); // do something with the file } else { // use fallback API or disable feature in app } Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Progressive Web Apps Feature Detection Browser takes care of calling OS-level APIs
35. Browser Cross-Platform Web APIs Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Progressive Web Apps window.showOpenFilePicker(); Intent.ACTION_GET_CONTENT IFileDialog … NSOpenPanel
36. Store Deployments (Simplified) Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Progressive Web Apps https://example.com .appx .apk Server Microsoft Store Galaxy Store Source Files
37. Advantages - One single codebase, maximum reach - No app store, installation, third-party software, … required - No app store approvals required - Super easy deployment (SFTP is enough, no redeployment via MSI, …) - Latest app version is always available - Fully backwards compatible - App store support (Microsoft Store, Samsung Galaxy Store) Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Progressive Web Apps
38. Disadvantages - Web App Gap - not all native APIs are available on the web platform - expected to get smaller thanks to Project Fugu - not all web APIs are available in every browser - No control over execution environment - Requires an up-to-date browser Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Progressive Web Apps
39. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper TWA
40. Bubblewrap Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper TWA https://github.com/GoogleChromeLabs/bubblewrap
41. Advantages - Same easy deployment model as for PWA - App store support for Google Play Store - Keep the existing user base - Helps target older devices Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper TWA
42. Disadvantages - No Apple App Store support - Web App Gap - No control over execution environment Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper TWA
43. Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Target Platforms PROGRESSIVE WEB APPS CAPACITOR . TAURI . + cars, smart fridges, …
44. Isolated Web Apps Web apps that are bundled and distributed through a store This additional trust anchor allows exposing even more powerful capabilities (e.g., Direct Sockets API or Borderless Windows Mode) Bundles may even contain native code Run on an isolated origin APIs will not be proprietary, but standardized instead Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Outlook
45. Direct Sockets API Allows websites and PWAs to open client TCP and UDP ports Applications can talk to servers and devices that don’t support web protocols: - SSH - FTP - … https://wicg.github.io/direct-sockets/ Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Outlook
46. - Developers should aim for Progressive Web Apps - If required, web apps can be (additionally) wrapped in a Capacitor or Tauri container à your web app investment always pays off! - Consider Capacitor and Tauri as “uber-polyfills” that will become less relevant in the future - Feature-detect modern web APIs and use them, fall back to Tauri/Capacitor APIs or alternatives if unavailable - Report your use cases and missing web capabilities to browser vendors Web-Apps mit Angular Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper Recap
47. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com