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

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

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

Manuel Rauber

May 10, 2017
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. Creating real cross-platform applications
    Angular, Cordova & Electron
    Manuel Rauber
    @manuelrauber
    Software Architect

    View full-size slide

  2. The guy who’s talkin’
    Software Architect @ Thinktecture AG
    ! [email protected]
    " @manuelrauber
    # https://manuel-rauber.com
    Microsoft MVP
    Manuel Rauber
    Angular, Cordova & Electron
    Creating real cross-platform applications

    View full-size slide

  3. Cross-Platform
    Angular
    Cordova
    Electron
    Creating real cross-platform applications
    Angular, Cordova & Electron
    Talking Points

    View full-size slide

  4. Gotta catch’em all!
    Creating real cross-platform applications
    Angular, Cordova & Electron
    Cross-Platform

    View full-size slide

  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

    View full-size slide

  6. Creating real cross-platform applications
    Angular, Cordova & Electron

    View full-size slide

  7. Creating real cross-platform applications
    Angular, Cordova & Electron
    The web as a platform

    View full-size slide

  8. Creating real cross-platform applications
    Angular, Cordova & Electron
    But it doesn’t look like a
    native application!
    Exactly.

    View full-size slide

  9. Creating real cross-platform applications
    Angular, Cordova & Electron
    https://spotifyblogcom.files.wordpress.com/2014/12/overview.png

    View full-size slide

  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

    View full-size slide

  11. Creating real cross-platform applications
    Angular, Cordova & Electron
    Powered by

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  18. Creating real cross-platform applications
    Angular, Cordova & Electron
    macOS
    iOS
    Windows Mobile
    Android
    Windows Desktop
    Windows 10/UWP
    Linux
    Browser

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  22. Thank you! Questions?
    Repository
    Manuel Rauber
    @manuelrauber
    Software Architect
    https://github.com/thinktecture/hamburg-angularjs-meetup-cross-platform

    View full-size slide