On the road to Progressive Web Apps: building real-cross platform Angular apps with Cordova & Electron

Progressive Web Apps are the next big thing: this application model finally allows web applications to leverage powerful features that were previously reserved to native applications only. However, not all native features are exposed as a browser API and it will still take some time until PWAs finally land on the majority of devices out there. In the meantime, Cordova and Electron are here to help: they turn your web applications into native application packages that can be distributed to mobile platforms such as Android or iOS and desktop platforms like Windows, macOS and Linux. While the vast majority of your source code can be shared across all platforms, there might be a fraction that is platform-specific. Thanks to Angular, handling these platform differences is an easy task. Thinktecture’s Christian Liebel shows you how to build real-cross platform Angular apps with Cordova and Electron—on the road to Progressive Web Apps.

Transcript

1. On the road to Progressive Web Apps Building real cross-platform Angular apps with Cordova & Electron Christian Liebel @chris_liebel Thinktecture AG
2. Hello, it’s me. Christian Liebel Follow me: @chris_liebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud Building real cross-platform Angular apps On the road to Progressive Web Apps
3. A single codebase Maximum code reuse Maximum number of target platforms Maximum reach Real Cross-Platform Development Building real cross-platform Angular apps On the road to Progressive Web Apps
4. Modern Business Applications Key Technologies Building real cross-platform Angular apps On the road to Progressive Web Apps
5. On the road to… Building real cross-platform Angular apps On the road to Progressive Web Apps
6. marketing devices features Building real cross-platform Angular apps On the road to Progressive Web Apps
7. What to do in the meantime? Building real cross-platform Angular apps On the road to Progressive Web Apps
8. Progressive Web Apps Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re- engageable Progressive “Uber Pattern” https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ Building real cross-platform Angular apps On the road to Progressive Web Apps
9. Native App Packaging “Uber Polyfills” Building real cross-platform Angular apps On the road to Progressive Web Apps
10. Native App Packaging JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Web Application Cordova Electron Building real cross-platform Angular apps On the road to Progressive Web Apps
11. Goal Demo Application One application Single code base Works as PWA, Electron & Cordova app PWA/Electron: getUserMedia Cordova: cordova-plugins-camera Building real cross-platform Angular apps On the road to Progressive Web Apps
12. On the road to PWA Demo Application Building real cross-platform Angular apps On the road to Progressive Web Apps
13. Handling Platform Differences? if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { takeNativePicture() } else if (window.cordova) { takeCordovaPicture() } else { alert('Not compatible'); } Demo Application Building real cross-platform Angular apps On the road to Progressive Web Apps
14. Handling Platform Differences! On the road to Progressive Web Apps Building real cross-platform Angular apps Demo Application Base Camera Service Mobile Camera Service Desktop Camera Service
15. Conclusion Building real cross-platform Angular apps On the road to Progressive Web Apps Base Camera Service Mobile Camera Service Desktop Camera Service
16. Thanks for your attention! ng-europe rocks ! Christian Liebel @chris_liebel Thinktecture AG Repository: https://bit.ly/ngeuroxp