Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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!

Christian Liebel
PRO

April 05, 2023
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und
    ohne Wrapper
    Christian Liebel
    @christianliebel
    Consultant

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  5. Angular Tauri Capacitor
    Ohne
    Wrapper
    Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  9. https://paint.js.org
    Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
    LIVE DEMO

    View Slide

  10. Angular Tauri Capacitor
    Ohne
    Wrapper
    Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  19. Angular Tauri Capacitor
    Ohne
    Wrapper
    Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper

    View Slide

  20. Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
    https://appfigures.com/top-sdks/development/apps

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  25. Angular Tauri Capacitor
    Ohne
    Wrapper
    Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  29. Install Experience
    Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
    Progressive Web Apps

    View Slide

  30. Web Native
    Web App Gap
    Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
    Progressive Web Apps
    Web App Gap

    View Slide

  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

    View Slide

  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

    View Slide

  33. Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
    Project Fugu
    https://fugu-tracker.web.app/

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  39. Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
    TWA

    View Slide

  40. Bubblewrap
    Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
    TWA
    https://github.com/GoogleChromeLabs/bubblewrap

    View Slide

  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

    View Slide

  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

    View Slide

  43. Web-Apps mit Angular
    Mobile & Desktop mit Tauri, Capacitor und ohne Wrapper
    Target Platforms
    PROGRESSIVE WEB APPS
    CAPACITOR .
    TAURI .
    + cars, smart fridges, …

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  47. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    [email protected]

    View Slide