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-Platform-Entwickler aber die Wahl zwischen altbewährten Ansätzen wie 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.

Transcript

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

   View Slide

2. 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 Slide

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

   View Slide

4. 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 Slide

5. 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 Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. 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 Slide

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

    View Slide

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

    View Slide

12. 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 Slide

13. 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 Slide

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

    View Slide

15. 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 Slide

16. 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 Slide

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

    View Slide

18. 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 Slide

19. 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 Slide

20. 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 Slide

21. 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 Slide

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

    View Slide

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

    View Slide

24. 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 Slide

25. 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 Slide

26. 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 Slide

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

    View Slide

28. – 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 Slide

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

    View Slide

30. 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 Slide

31. 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 Slide

32. 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 Slide

33. 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 Slide

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

    View Slide

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

    View Slide

36. - 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 Slide

37. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    PWA/Electron/Cordova
    Cheat Sheet
    

    View Slide