Creating real cross-platform applications with Angular, Cordova & Electron

Based on Angular, we’re able to write beautiful and performant web applications. TypeScript, Components, Services, Dependency Injection - everything fits well together. But how can we use that knowledge to create real cross-platform applications, which run on any form factor, on any device and on any operating system? Which architecture do we need? Where can we plug in platform-based code, but still use more than 95 % shared code? Questions, which we’ll answer in this workshop. We’re going to create a real cross-platform application with Angular, bring it to mobile with Cordova and back to real desktop applications with Electron. Let’s get our hands dirty!

GitHub: https://github.com/thinktecture/hamburg-angularjs-meetup-cross-platform

Transcript

1. Creating real cross-platform applications Angular, Cordova & Electron Manuel Rauber @manuelrauber Software Architect
2. The guy who’s talkin’ Software Architect @ Thinktecture AG ! manuel.rauber@thinktecture.com " @manuelrauber # https://manuel-rauber.com Microsoft MVP Manuel Rauber Angular, Cordova & Electron Creating real cross-platform applications
3. Cross-Platform Angular Cordova Electron Creating real cross-platform applications Angular, Cordova & Electron Talking Points
4. Gotta catch’em all! Creating real cross-platform applications Angular, Cordova & Electron Cross-Platform
5. Creating real cross-platform applications Angular, Cordova & Electron Single- vs. Multi- vs. Cross-Platform macOS Linux Windows iOS Windows Phone Android BlackBerry 10 FireOS Browser TV … Refrigerator
6. Creating real cross-platform applications Angular, Cordova & Electron
7. Creating real cross-platform applications Angular, Cordova & Electron The web as a platform
8. Creating real cross-platform applications Angular, Cordova & Electron But it doesn’t look like a native application! Exactly.
9. Creating real cross-platform applications Angular, Cordova & Electron https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
10. Creating real cross-platform applications Angular, Cordova & Electron http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg
11. Creating real cross-platform applications Angular, Cordova & Electron Powered by
12. • Lightweight service-based architecture • Functional services with dedicated interfaces • Use other services, like database or file system • (JSON-based) Web APIs • Application push services via WebSocket • SignalR • Socket.io Creating real cross-platform applications Angular, Cordova & Electron Architecture HTTP HTTPS WebSocket Service A Service B Service C Web APIs (ASP.NET, Node.js, …) HTML5-Application (Single-Page Application) Web Cordova Electron
13. Overview • Client- & Server-side framework • MV* architecture • Components, Views, View Models • Modules, Services, dependency injection • Data binding, routing, HTTP, animations • First class IDE support • JetBrains WebStorm • Visual Studio Code • Build tooling with Angular CLI • Ahead-of-Time compilation • Tree Shaking Creating real cross-platform applications Angular, Cordova & Electron Angular
14. • Native application shell with integrated web browser • Android: Android specific browser / CrossWalk • iOS: UiWebView / WkWebView • Windows Mobile: Internet Explorer / Edge • HTML5 app is hosted within an integrated web browser • Provides access to the underlying native platforms via plugins • Native SDKs to build the apps are needed Creating real cross-platform applications Angular, Cordova & Electron Cordova
15. Creating real cross-platform applications Angular, Cordova & Electron 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
16. • Allows creating real desktop applications (.exe, .app) • Combines a full-blown Chromium browser with Node.js • Does not rely on the target machine’s installed browsers • No need to install native SDKs for building • Access native platform APIs • Electron API • Node.js modules • Advanced features like auto updates & crash reporter Creating real cross-platform applications Angular, Cordova & Electron Electron
17. Creating real cross-platform applications Angular, Cordova & Electron Electron - Architecture Desktop OS Electron Renderer Process (technically Chromium) Electron Main Process (technically Node.js) macOS Windows Linux Single-Page Application Electron API Custom Node.js modules IPC Remote Node.js
18. Creating real cross-platform applications Angular, Cordova & Electron macOS iOS Windows Mobile Android Windows Desktop Windows 10/UWP Linux Browser
19. A glance across the border • Basic idea: Remove the App Stores! • Bring native experience directly to the browser • Platform push services • Offline • Installable • Initiate led by Google since 2015 • PWA is not a technology but a collection of features • Backwards compatible Creating real cross-platform applications Angular, Cordova & Electron Progressive Web Apps
20. • Modern applications need a modern architecture • Web Technology Stack to achieve “real cross-platform” • Cordova & Electron for native platform integrations • Build tooling supports daily development and production workflow • Progressive Web Apps show an interesting future Creating real cross-platform applications Angular, Cordova & Electron Summary
21. • Angular: https://angular.io • Apache Cordova: https://cordova.apache.org/ • Electron: http://electron.atom.io/ • Gulp: http://gulpjs.com/ • Webpack: https://webpack.github.io/ • Rollup: http://rollupjs.org/ • Angular CLI: https://cli.angular.io/ • PWA: https://developers.google.com/web/progressive-web-apps/ Creating real cross-platform applications Angular, Cordova & Electron Resources
22. Thank you! Questions? Repository Manuel Rauber @manuelrauber Software Architect https://github.com/thinktecture/hamburg-angularjs-meetup-cross-platform