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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

February 27, 2020
Tweet

Transcript

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

    @christianliebel Consultant
  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
  3. Intro Progressive Web Apps Electron Cordova Summary Electron, Cordova, PWA

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

  7. Intro Progressive Web Apps Electron Cordova Summary Electron, Cordova, PWA

    Was, wann, wie und warum
  8. Electron, Cordova, PWA Was, wann, wie und warum Responsive Linkable

    Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
  9. Electron, Cordova, PWA Was, wann, wie und warum Install Experience

  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
  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
  12. Electron, Cordova, PWA Was, wann, wie und warum Project Fugu

    https://goo.gle/fugu-api-tracker
  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
  14. Electron, Cordova, PWA Was, wann, wie und warum Project Fugu

    window.chooseFileSystemEntries(); Intent.ACTION_GET_CONTENT IFileDialog … NSOpenPanel
  15. https://liebel.io/paint Electron, Cordova, PWA Was, wann, wie und warum LIVE

    DEMO
  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
  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
  18. Intro Progressive Web Apps Electron Cordova Summary Electron, Cordova, PWA

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

  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
  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
  22. Intro Progressive Web Apps Electron Cordova Summary Electron, Cordova, PWA

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

  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
  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
  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
  27. Intro Progressive Web Apps Electron Cordova Summary Electron, Cordova, PWA

    Was, wann, wie und warum
  28. Electron, Cordova, PWA Was, wann, wie und warum Target Platforms

    PROGRESSIVE WEB APPS CORDOVA ELECTRON + cars, smart fridges, …
  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
  30. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com