Mobile und Desktop - Echte Anwendungen mit Cordova, Electron und Angular 2

Slides from my talk at BASTA! 2017 Spring covering Cordova and Electron application using angular 2

Transcript

1. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular Thorsten Hans thorsten.hans@thinktecture.com @thorstenhans
2. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular Thinktecture AG • Consultant • Microsoft MVP for Office 365 and Visual Studio • Fokus • Cross Plattform Anwendungen mit Angular, Cordova und Electron • HTTP APIs mit Node.js thorsten.hans@thinktecture.com @thorstenhans https://www.xplatform.rocks Thorsten Hans
3. • Die Aufgabenstellung • Plattformvielfalt adressieren • Der Lösungsansatz • Cross Plattform Entwicklung • Der Lösungsweg • Die Web Plattform • Aus dem Web auf mobile Plattformen • Aus dem Web auf den Desktop • Die Vorteile Agenda
4. Plattformvielfalt desktop notebook tablet wearable smartphone game console web x-reality
5. Der Kunde bestimmt.
6. • Er bestimmt ... • die Zielplattformen • und somit zwangsläufig • ihren Technology-Stack • die Teamstruktur • ihren persönlichen Weiterbildungspfad • eventuell sogar hohe Investitionen Ihres Unternehmens Plattformvielfalt
7. … wenn Sie nativ entwickeln
8. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular Cross Plattform Entwicklung Der Lösungsansatz
9. Native Web Technologien Der Lösungsansatz
10. Der Browser als Anwendungsplattform Der Lösungsansatz
11. • Der Browser als Anwendungsplattform • Immer mächtigere HTML5 APIs • Auf jeder Plattform verfügbar • Frustlose Anwendungsplattform • Keine “Installation der Anwendung“ • Anwendungsupdates über den Server • Bekannte User Experience Der Lösungsansatz
12. • Single Code-Base • Anwendung wird nur einmal implementiert • Isolierte Laufzeitumgebung • Zugang zu allen Plattformen • Web • Desktop Windows, macOS, Linux • Mobile iOS, Android, Windows 10 Mobile, Windows Phone, BlackBerry, ... Cross Plattform Entwicklung
13. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular Die Web Plattform Single Page Applications
14. • Single Page Applications • Der Client führt die Anwendung aus • Nutzen der Client Resourcen • Mächtige Frameworks • Angular • RxJS als JavaScript Implementierung von ReactiveX Die Web Plattform
15. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular DEMO Die Beispielanwendung – Ein Überblick
16. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular Aus dem Web auf mobile Plattformen Mit Apache Cordova
17. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular • Open Source Variante von Adobe PhoneGap • Nativer Wrapper für Web Anwendungen • Zugriff auf native Funktionen • cordova plugins • Bereitstellbar auf vielen Plattformen • cordova platforms Apache Cordova
18. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular Apache Cordova Architektur 18 Mobile OS iOS Android Windows 10 UWP many more Cordova Application Cordova Plugins Geolocation Notifications Contacts Media Camera Custom Plugins HTML Rendering Engine (WebView) Single Page App HTML JS CSS Assets HTML APIs Cordova APIs OS APIs OS APIs Cordova Native APIs
19. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular DEMO Auf zu den mobilen Plattformen mit Apache Cordova
20. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular DEMO Plugman – Eigene Plugins erstellen
21. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular Aus dem Web auf den Desktop Mit GitHub Electron
22. • Entwickelt von GitHub • Initial fester Bestandteil von Atom • Extrahiert und veröffentlicht unter Atom-Shell • Rebrand zu Electron in 2015 • Nativer Wrapper für Desktop Plattformen • Zugriff auf native Plattform APIs GitHub Electron
23. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular GitHub Electron Architektur Desktop OS Electron Renderer Process (technically Chromium) Electron Main Process (technically Node.JS) MacOS Windows Linux Your Single Page Application Electron API Your custom Node.JS modules IPC Remote Node.JS
24. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular DEMO Windows, macOS und Linux mit GitHub Electron
25. • Entwicklung und Wartung einer Code-Basis • Flexibilität • Sie können alle Plattformen adressieren • Klarer Technology-Stack • Absehbare Lernkurven • Ownership • Sie bestimmen wieder Teams, Trainings • Kostenreduktion • Sie müssen nicht jede Sprache beherrschen Die Vorteile
26. • Die Aufgabenstellung • Plattformvielfalt adressieren • Der Lösungsansatz • Cross Plattform Entwicklung • Der Lösungsweg • Die Web Plattform mit SPAs • Mobile mit Apache Cordova • Desktop mit GitHub Electron Zusammenfassung
27. Echte Anwendungen mit Cordova, Electron und Angular • Task App • https://github.com/thorstenhans/task-app • Task API • https://github.com/thorstenhans/task-api Sample Application
28. Echte Anwendungen mit Cordova, Electron und Angular • Angular • http://angular.io • TypeScript • http://www.typescriptlang.org • Apache Cordova • http://cordova.apache.org • GitHub Electron • http://electron.atom.io • Node.js • http://www.nodejs.org • Angular CLI • https://github.com/angular/angular-cli • Node.js Package Repository (npmjs) • http://www.npmjs.com • Electron Packager • https://github.com/electron-userland/electron-packager • Blog Thorsten Hans • https://www.xplatform.rocks • Thinktecture • http://thinktecture.com Links
29. Mobile und Desktop Echte Anwendungen mit Cordova, Electron und Angular thorsten.hans@thinktecture.com @thorstenhans Vielen Dank!