Electron, Cordova, PWA Was, wann, wie und warum Thorsten Hans @ThorstenHans Consultant Christian Liebel @christianliebel Consultant

Hello, it’s me. Electron, Cordova, PWA Was, wann, wie und warum Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Serverless

Focus: Cloud Native & Infrastructure as Code Consultant @ Thinktecture AG [email protected] [email protected] thinktecture.com thorsten-hans.com https://thns.io/slides @ThorstenHans Thorsten Hans Was, wann, wie und warum Electron, Cordova, PWA

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

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, 2014

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

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

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

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

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

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

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

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

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

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

- 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

- 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

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

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

- 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

- 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

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

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

- 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

- Plug-ins are often outdated - Cordova’s web and Electron platforms are inconvenient to use - Dependent on guidelines and goodwill of platform provider Electron, Cordova, PWA Was, wann, wie und warum Disadvantages

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

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

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

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

Thank you for your kind attention! Christian Liebel @christianliebel [email protected] Thorsten Hans @ThorstenHans [email protected]