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

Electron, Capacitor, PWA – was, wann, wie & warum?

Electron, Capacitor, PWA – was, wann, wie & warum?

Write once, run anywhere – dieser alte Java-Traum ist dank Webtechnologien längst Realität geworden. Neuerdings haben Cross-Plattform-Entwickler aber die Wahl zwischen altbewährten Ansätzen wie Ionics Capacitor und GitHub Electron, bei denen Web-Apps in native Container verpackt werden, und den neuen Progressive Web Apps (PWA), bei denen eine Webanwendung aus dem Browser heraus installiert wird. Optisch geben sich beide Methoden nicht viel, doch sie unterscheiden sich hinsichtlich der Verteilung und im Funktionsumfang.

Christian Liebel

September 23, 2021
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Electron, Capacitor, PWA
    Was, wann, wie und warum
    Christian Liebel
    @christianliebel
    Consultant

    View full-size slide

  2. The image part with relationship ID rId12 was not found in the file.
    The image part with relationship ID rId12 was not found in the file.
    Special Day Cross-Plattform Applications
    Thema Sprecher Datum, Uhrzeit
    Figma, Storybook und Angular: Toolchain für
    plattformunabhängige UI-Entwicklung
    Andreas Wissel DO, 23. September 2021,
    09.15 bis 10.15
    Realtime Cross-Plattform-Applikationen mit
    Angular, ASP.NET Core und SignalR
    Fabian Gosebrink DO, 23. September 2021,
    10.45 bis 11.45
    Angular & Ionic –
    Cross-Plattform aus einer Hand
    Max Schulte DO, 23. September 2021,
    12.15 bis 13.15
    Electron.NET –
    Neue Features, Tipps und Tricks
    Gregor Biswanger DO, 23. September 2021,
    15.30 bis 16.30
    Electron, Capacitor, PWA –
    was, wann, wie & warum?
    Christian Liebel DO, 23. September 2021,
    17.00 bis 18.00

    View full-size slide

  3. Hello, it’s me.
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Christian Liebel
    Twitter:
    @christianliebel
    Email:
    christian.liebel
    @thinktecture.com
    Angular & PWA
    Slides:
    thinktecture.com
    /christian-liebel

    View full-size slide

  4. Intro
    Progressive
    Web Apps
    Electron Capacitor Summary
    Electron, Capacitor, PWA
    Was, wann, wie und warum

    View full-size slide

  5. Electron, Capacitor, PWA
    Was, wann, wie und warum
    »Cross-platform and cross-device development will
    become the norm in the next few years.«
    Christian Weyer

    View full-size slide

  6. In 2021, the cross-platform story still works out
    – and it’s better than ever!
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Today
    One team One codebase Maximum reach

    View full-size slide

  7. Electron, Capacitor, PWA
    Was, wann, wie und warum

    View full-size slide

  8. Intro
    Progressive
    Web Apps
    Electron Capacitor Summary
    Electron, Capacitor, PWA
    Was, wann, wie und warum

    View full-size slide

  9. Electron, Capacitor, PWA
    Was, wann, wie und warum
    Responsive Linkable Discoverable Installable App-like
    Connectivity
    Independent
    Fresh Safe Re-engageable Progressive

    View full-size slide

  10. Architecture Overview & Deployment
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Progressive Web Apps
    Browser
    Internet
    Single-Page
    Application
    Cache
    fetch
    JS
    HTML
    CSS
    Server
    Service
    Worker

    View full-size slide

  11. Install Experience
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Progressive Web Apps

    View full-size slide

  12. Web Native
    Web App Gap
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Progressive Web Apps
    Web App Gap

    View full-size slide

  13. Project Fugu
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Progressive Web Apps
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google

    View full-size slide

  14. Project Fugu
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    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 full-size slide

  15. Electron, Capacitor, PWA
    Was, wann, wie und warum
    Project Fugu
    https://fugu-tracker.web.app/

    View full-size slide

  16. 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
    }
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Progressive Web Apps
    Feature Detection
    Browser takes care of
    calling OS-level APIs

    View full-size slide

  17. Browser
    Cross-Platform Web APIs
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Progressive Web Apps
    window.showOpenFilePicker();
    Intent.ACTION_GET_CONTENT IFileDialog

    NSOpenPanel

    View full-size slide

  18. https://paint.js.org
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    LIVE DEMO

    View full-size slide

  19. Store Deployments (Simplified)
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Progressive Web Apps
    https://example.com
    .appx
    .apk
    Server
    Microsoft
    Store
    Play
    Store
    Source
    Files

    View full-size slide

  20. 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
    - App Store support for Microsoft Store, Google Play Store (Trusted
    Web Activity, TWA), Samsung Galaxy Store (currently US only)
    - Fully backwards compatible
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Progressive Web Apps

    View full-size slide

  21. Disadvantages
    - No Apple App Store support (uploading PWAs is discouraged)
    - 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
    If that’s an issue, web apps are still an option!
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Progressive Web Apps

    View full-size slide

  22. Deployment
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Electron/Capacitor
    JS
    HTML
    CSS
    .ipa
    .exe .app ELF
    .apk
    Single-Page
    Application
    Capacitor
    Electron

    View full-size slide

  23. Intro
    Progressive
    Web Apps
    Electron Capactior Summary
    Electron, Capacitor, PWA
    Was, wann, wie und warum

    View full-size slide

  24. Electron, Capacitor, PWA
    Was, wann, wie und warum

    View full-size slide

  25. Electron, Capacitor, PWA
    Was, wann, wie und warum
    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 full-size slide

  26. 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
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Electron

    View full-size slide

  27. 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)
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Electron

    View full-size slide

  28. Alternatives
    Tauri
    https://github.com/tauri-apps/tauri
    Windows: WebView2
    macOS: WebKit
    Linux: WebKitGTK
    Smaller binaries, but different browser environments
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Electron

    View full-size slide

  29. Intro
    Progressive
    Web Apps
    Electron Capacitor Summary
    Electron, Capacitor, PWA
    Was, wann, wie und warum

    View full-size slide

  30. – Provided by Ionic
    – Native projects are source
    assets (instead of build
    assets)
    – Backwards-compatible with
    Cordova (and many of its
    plug-ins)
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Capacitor

    View full-size slide

  31. Electron, Capacitor, PWA
    Was, wann, wie und warum
    https://appfigures.com/top-sdks/development/all

    View full-size slide

  32. Electron, Capacitor, PWA
    Was, wann, wie und warum
    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 full-size slide

  33. Advantages
    - Supports app development for iOS, Android
    - Access to all native APIs
    - Official App Store deployments
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Capacitor

    View full-size slide

  34. 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
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Capacitor

    View full-size slide

  35. Electron, Capacitor, PWA
    Was, wann, wie und warum
    https://www.heise.de/news/Epic-Games-CEO-wirft-Apple-Monopolpraktiken-vor-6035278.html (04.05.2021)

    View full-size slide

  36. Intro
    Progressive
    Web Apps
    Electron Capacitor Summary
    Electron, Capacitor, PWA
    Was, wann, wie und warum

    View full-size slide

  37. Electron, Capacitor, PWA
    Was, wann, wie und warum
    Target Platforms
    PROGRESSIVE WEB APPS
    CAPACITOR
    ELECTRON
    + cars, smart fridges, …

    View full-size slide

  38. - Developers should aim for Progressive Web Apps
    - If required, web apps can be (additionally) wrapped in a Capacitor or
    Electron container à your web app investment always pays off!
    - Consider Capacitor and Electron as “uber-polyfills” that might
    become increasingly irrelevant in the future
    - Feature-detect modern web APIs and use them, fall back to
    Electron/Capacitor APIs or alternatives if unavailable
    - Report your use cases and missing web capabilities to browser
    vendors
    Electron, Capacitor, PWA
    Was, wann, wie und warum
    Recap

    View full-size slide

  39. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    [email protected]
    PWA/Electron/Cordova
    Cheat Sheet

    View full-size slide