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

Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron

Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron

Mit dem Einzug von Single-Page Application Frameworks steht modernen HTML5-Anwendungen nichts mehr im Wege: komponentenbasierte Entwicklung, Zwei-Wege-Datenbindung oder Dependency Injection - das alles und viel mehr bietet ein Framework wie Angular. Gepaart mit TypeScript bietet sich die Möglichkeit der statischen Codeanalyse, Refactorings und IntelliSense. In dieser Session zeigt Ihnen Manuel Rauber, wie man mit dem Open-Source Framework die modernen Browser- und Web-Features nutzen kann, um echte Cross-Plattform-Business-Anwendungen für Desktop und mobile Endgeräte entwickeln und wie diese an die Benutzer ausgeliefert werden können.

GitHub: https://github.com/thinktecture/x-celerate-2017-angular-ci-cd

Manuel Rauber

October 10, 2017
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. Echte Cross-Plattform-Anwendungen
    Angular, Cordova, Electron
    Manuel Rauber
    @manuelrauber
    Consultant

    View full-size slide

  2. Consultant @ Thinktecture AG
    ! [email protected]
    " @manuelrauber
    # https://manuel-rauber
    .com
    Microsoft MVP
    The guy who’s talkin’
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Manuel Rauber

    View full-size slide

  3. Cross-Platform
    Angular
    Cordova
    Electron
    Deployment
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Talking Points

    View full-size slide

  4. Gotta catch’em all!
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Cross-Platform

    View full-size slide

  5. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Single- vs. Multi- vs. Cross-Platform
    macOS
    Linux
    Windows iOS
    Windows Phone
    Android
    BlackBerry 10
    FireOS
    Browser
    TV

    Refrigerator

    View full-size slide

  6. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017

    View full-size slide

  7. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    The web as a platform

    View full-size slide

  8. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    But it doesn’t look like a native
    application!
    Exactly.

    View full-size slide

  9. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    https://spotifyblogcom.files.wordpress.com/2014/12/overview.png

    View full-size slide

  10. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg

    View full-size slide

  11. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    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
    • Secured by tokens
    • Consumable by every HTTPS speaking client
    • Application push services via WebSocket
    • SignalR
    • Socket.io
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    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. Single-Page Applications
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Angular

    View full-size slide

  14. Overview
    • Based on TypeScript
    • Mobile & desktop
    • Angular Universal: Client- and server-side-rendering possibilities
    • MV* architecture
    • Components, Views, View Models
    • Modules, Services, Dependency Injection
    • Data binding, Routing, HTTP
    , Animations, Unit-testable
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Angular

    View full-size slide

  15. Concepts
    • Goal: scaling, reusability
    • Component
    • Combines logic & view
    • Visible to the user
    • Isolated & reusable
    • Service
    • Reusable logic without a view
    • Contains the business logic: getting data from a server, model validation, …
    • Module: Collection of components and services
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Angular

    View full-size slide

  16. Data flow
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Angular
    Parent -> Child
    Application
    Hackathons
    Users
    Hackathon Hackathon
    [hackathons]=“someExp”
    [hackathon]=“someExp”
    Child-> Parent
    Application
    Hackathons
    Users
    Hackathon Hackathon
    (rate)=“onRate()”
    (rate)=“onRate()”
    via @Input() via @Output()

    View full-size slide

  17. Build automation
    • Powerful build automation tool: Angular CLI
    • Project & template generation
    • Unit & end-to-end tests
    • Development builds
    • Full debugging support
    • Live server
    • Production ready builds
    • Optimization of code generation
    • Minification & Uglyfication
    • Ahead-of-time compilication & build optimazion
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Angular

    View full-size slide

  18. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Demo

    View full-size slide

  19. Native mobile applications
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Cordova

    View full-size slide

  20. • 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
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Cordova

    View full-size slide

  21. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Demo

    View full-size slide

  22. Native desktop applications
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Electron

    View full-size slide

  23. • Allows creation of real desktop application (.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
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Electron

    View full-size slide

  24. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Demo

    View full-size slide

  25. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    BASTA! Spring 2017
    macOS
    iOS
    Windows Mobile
    Android
    Windows Desktop
    Windows 10/UWP
    Linux
    Browser

    View full-size slide

  26. “To be on cloud nine”
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Deployment

    View full-size slide

  27. Web
    • Dockerize it!
    • Deployable via Docker containers on
    • Microsoft Azure: Container Registry, Container Services, Container Instances
    • IBM Bluemix Container Services
    • Amazon EC2 Container Services
    • Google Cloud Platform
    • Runnable via
    • Simple Azure Linux-based Web Apps
    • Docker Swarm
    • Kubernetes
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Deployment

    View full-size slide

  28. Mobile
    • Automation of beta deployments (e.g. Testflight) or real app store deployments
    • Automate the process of screenshot generation or code signing
    • Notification after new releases (e-mail, Slack, …)
    • Integration into Continuous Integration for Continuous Deployment
    • Online: bitrise.io
    • Offline: fastlane
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Deployment

    View full-size slide

  29. Desktop
    • Code signing
    • Auto Update
    • Installer
    • Build version management
    • Artifact publishing
    • Automate via electron-packager or electron-builder and custom scripts
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Deployment

    View full-size slide

  30. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Demo

    View full-size slide

  31. A glance across the border
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Progressive Web Apps

    View full-size slide

  32. • 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
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Overview

    View full-size slide

  33. • 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
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Summary

    View full-size slide

  34. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    https://entwickler
    .de/press/shortcuts/cross-plattform-579811835.html

    View full-size slide

  35. • 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/
    Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron
    x-celerate 2017
    Resources

    View full-size slide

  36. Thank you! Questions?
    Repository
    Contact
    @manuelrauber
    [email protected]
    https://github.com/thinktecture/x-celerate-2017-angular-ci-cd

    View full-size slide