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

Transcript

1. Echte Cross-Plattform-Anwendungen Angular, Cordova, Electron Manuel Rauber @manuelrauber Consultant
2. Consultant @ Thinktecture AG ! manuel.rauber@thinktecture.com " @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
3. Cross-Platform Angular Cordova Electron Deployment Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Talking Points
4. Gotta catch’em all! Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Cross-Platform
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
6. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017
7. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 The web as a platform
8. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 But it doesn’t look like a native application! Exactly.
9. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
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
11. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Powered by
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
13. Single-Page Applications Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Angular
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
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
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()
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
18. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Demo
19. Native mobile applications Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Cordova
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
21. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Demo
22. Native desktop applications Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Electron
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
24. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Demo
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
26. “To be on cloud nine” Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Deployment
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
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
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
30. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Demo
31. A glance across the border Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 Progressive Web Apps
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
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
34. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron x-celerate 2017 https://entwickler .de/press/shortcuts/cross-plattform-579811835.html
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
36. Thank you! Questions? Repository Contact @manuelrauber manuel.rauber@thinktecture.com https://github.com/thinktecture/x-celerate-2017-angular-ci-cd