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

Electron, Cordova, PWA – was, wann, wie und warum?

Electron, Cordova, PWA – was, wann, wie und 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 Apache Cordova 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. Electron-Experte Thorsten Hans und PWA-Professional Christian Liebel erklären Ihnen, für welche Anwendungsfälle sich PWAs eignen und wann Sie ergänzend oder alternativ zu Electron oder Cordova greifen sollten.

Christian Liebel

February 27, 2020
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Hello, it’s me.
    Electron, Cordova, 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

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

    View full-size slide

  4. Electron, Cordova, PWA
    Was, wann, wie und warum
    BASTA! Spring 2013
    »Cross-platform and
    cross-device development
    will become the norm in
    the next few years.«
    Christian Weyer

    View full-size slide

  5. In 2020, the cross-platform story still works out
    – and it’s better than ever!
    Electron, Cordova, PWA
    Was, wann, wie und warum
    BASTA! Spring 2020
    One team One codebase Maximum reach

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Electron, Cordova, PWA
    Was, wann, wie und warum
    Install Experience

    View full-size slide

  10. Cross-Vendor Initiative Led By…
    Electron, Cordova, PWA
    Was, wann, wie und warum
    Project Fugu – A More Capable Web
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google

    View full-size slide

  11. Electron, Cordova, PWA
    Was, wann, wie und warum
    Project Fugu
    Contacts
    Picker
    Wake Lock
    API
    Picture in
    picture
    Native File
    System API
    Capability missing?
    http://bit.ly/new-fugu-request

    View full-size slide

  12. Electron, Cordova, PWA
    Was, wann, wie und warum
    Project Fugu
    https://goo.gle/fugu-api-tracker

    View full-size slide

  13. Example: Native File System API
    if ('chooseFileSystemEntries' in window) {
    const handle = await window.chooseFileSystemEntries();
    const file = await handle.getFile();
    // do something with the file
    } else {
    // use fallback API or disable feature in app
    }
    Electron, Cordova, PWA
    Was, wann, wie und warum
    Project Fugu
    Feature Detection
    Browser takes care of
    calling OS-level APIs

    View full-size slide

  14. Electron, Cordova, PWA
    Was, wann, wie und warum
    Project Fugu
    window.chooseFileSystemEntries();
    Intent.ACTION_GET_CONTENT IFileDialog

    NSOpenPanel

    View full-size slide

  15. https://liebel.io/paint
    Electron, Cordova, PWA
    Was, wann, wie und warum
    LIVE DEMO

    View full-size slide

  16. - One single codebase, maximum reach
    - No app store, installation, third-party software, … required
    - Super easy deployment (FTP is enough, no app store reviews,
    redeployment via MSI, …)
    - App Store support for Microsoft Store & Google Play Store (TWA)
    - Fully backwards compatible
    Electron, Cordova, PWA
    Was, wann, wie und warum
    Advantages

    View full-size slide

  17. - 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, Cordova, PWA
    Was, wann, wie und warum
    Disadvantages

    View full-size slide

  18. Intro
    Progressive
    Web Apps
    Electron Cordova Summary
    Electron, Cordova, PWA
    Was, wann, wie und warum

    View full-size slide

  19. Electron, Cordova, PWA
    Was, wann, wie und warum

    View full-size slide

  20. - 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, Cordova, PWA
    Was, wann, wie und warum
    Advantages

    View full-size slide

  21. - 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, Cordova, PWA
    Was, wann, wie und warum
    Disadvantages

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. - Supports app development for iOS, Android, macOS, UWP
    - Access to all native APIs
    - Official store deployments
    Electron, Cordova, PWA
    Was, wann, wie und warum
    Advantages

    View full-size slide

  25. - Plug-ins are often outdated
    - Cordova’s web and Electron platforms are inconvenient to use
    - Dependent on guidelines and goodwill of platform provider
    - App/update validation can take several hours or days
    Electron, Cordova, PWA
    Was, wann, wie und warum
    Disadvantages

    View full-size slide

  26. Electron, Cordova, PWA
    Was, wann, wie und warum
    https://medium.com/quark-works/why-our-app-got-removed-from-the-google-play-store-how-we-fixed-it-4c8d430eafa0
    https://www.nytimes.com/interactive/2019/09/09/technology/apple-app-store-competition.html
    https://www.theverge.com/2019/1/30/18203551/apple-facebook-blocked-internal-ios-apps

    View full-size slide

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

    View full-size slide

  28. Electron, Cordova, PWA
    Was, wann, wie und warum
    Target Platforms
    PROGRESSIVE WEB APPS
    CORDOVA
    ELECTRON
    + cars, smart fridges, …

    View full-size slide

  29. - Developers should aim for Progressive Web Apps
    - If required, web apps can be (additionally) wrapped in a Cordova or
    Electron container à your web app investment always pays off!
    - Consider Cordova 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/Cordova APIs or alternatives if unavailable
    - Report your use cases and missing web capabilities to browser
    vendors
    Electron, Cordova, PWA
    Was, wann, wie und warum
    Recap

    View full-size slide

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

    View full-size slide