EKON 20: Cross-Plattform Workshop

The slides for the cross platform workshop from Steffen and me.

Transcript

1. Steffen Jahr Sebastian Gingter @steffenjahr @PhoenixHawk Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile und Browser EKON 20, November 2016, Düsseldorf
2. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser Was könnt ihr erwarten? • Einblick in • Node.js und Gulp als Entwicklungstools • SPAs mit Angular 2 und TypeScript • Electron • Cordova • Startpunkte zu kennen, um erste eigene Schritte mit etwas 'Googlevelopment' zu machen • Eine Pause um ca. 15:00 Uhr  Agenda
3. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser Was könnt ihr nicht erwarten? • Hands-on • Nach dem Workshop fertige App-Entwickler zu sein  Agenda
4. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser Moderne Cross-Plattform Anwendungen
5. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser
6. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser Single-Plattform vs. Multi-Plattform vs. Cross-Plattform Windows Windows Mobile iOS Android macOS Linux Fire OS Blackberry 10 Browser Konsole TV / Set-Top Box … Kühlschrank? IoT Raspberry Pi / Arduino
7. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser • Backend / Middleware • Bereitstellen der Zugriffspunkte für die Mobile Anwendung(en) • Validierung der Eingaben, Platz für die Business-Logik • JavaScript bzw. TypeScript als Programmiersprachen • Angular 2 als Client-Anwendungs-Framework • HTML / CSS Framework (z.B. Bootstrap und Themes wie Admin LTE) • Electron und Cordova als 'Verpackung' der App für die unterschiedlichen Zielplattformen Bausteine einer Cross-Plattform Anwendung
8. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser Aktuelle Anwendungs-Architektur Datenbank Existierende Delphi App
9. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser Gewünschte Anwendungs-Architektur Middleware Anwendungs-/ Businesslogik Datenbank ??? Browser WebApp Cordova App Electron App Existierende Delphi App Besser so
10. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser • Node.js: JavaScript-Laufzeitumgebung • Führt JavaScript aus  • Basiert auf Googles V8 JavaScript Engine (die aus Chrome) • Hat APIs um mit dem Betriebssystem zu interagieren • Dateisystem, Network Sockets, andere OS APIs etc. • Ist Event-driven • Basiert auf dem Paradigma, das Aufrufe nie blockieren und asynchron ausgeführt werden Node.js, npm und Gulp
11. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser • Node Modul • JavaScript 'Bibliothek' • Kann optional nativen, plattformspezifischen Code enthalten • z.B. zum Aufruf von Betriebssystem-APIs • npm: Node Package Manager • Verwaltet und installiert Node-Module (sog. Packages) • Gulp • Installierbares Node-Modul • Stream-Basierter Task-Runner • Schiebt Dateien von A mit optionalen Transformationen nach B • Kann auf Änderungen reagieren und Events auslösen Node.js, npm und Gulp
12. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser • Client-Seitige Single-Page-Applications (SPA) • Features • Konsequent Komponenten-Basiert • Werkzeuge & Ökosystem vorhanden • Fokus auf bewährten Patterns und Seperation of Concerns (SoC) • Komponenten • Views & View Models • Services und Dependency-Injection Komponentenbasierte Anwendungen mit Angular 2
13. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser • Eine Anwendung als 'Rahmen' • Komponentenbasierte Strukturierung der Anwendung • Komponenten sind leicht zu testen • Nur die Teile der Anwendung werden ausgetauscht, die sich auch ändern • Schnelle Navigation (kein Reload) • Sofortige Reaktion auf Eingabe des Nutzers (Change detection) Warum SPA?
14. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser Angular 2 – Bausteine der Anwendung
15. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser • Component – Komponente bzw. 'Control' • Template – HTML-Vorlage zu einem Control, mit Platzhaltern und… • Binding Expressions – Binden Events oder Properties des Controls in das Template ein • Routing – Konfigurierbar; Steuert über die URL, welche Komponente wo angezeigt wird • Service – Klasse, die Dienste bereitstellt, z.b: Zugriff auf eine API, Berechnungen etc. • Directive – kann das Verhalten und die Darstellung von Komponenten beeinflussen • Pipe – Kann die Darstellung von Binding Expressions beeinflussen • Module – Fasst Components, Services, Directives und Pipes zu Einheiten zusammen Wichtige Stichworte bei Angular 2
16. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser • Aus Web-Anwendungen echte Desktop-Anwendungen erzeugen • Ziele sind Windows Desktop, macOS und Linux • Kombination aus Chromium und Node.js • Unabhängig von installierten Browsern auf der Zielplattform • Benötigt keine nativen SDKs um das Projekt zu bauen • Zugriff auf native Plattform-Features • Electron API • Node Module • Auto-Update und Plattform-Deployment • z.B. in MSI auf Windows Desktop-Anwendungen mit Electron
17. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser Electron Architektur Electron Renderer Prozess (Chromium Webbrowser-Prozess)) Electron Haupt-Prozess (Node.js) Desktop OS macOS Windows Linux Web-Anwendung Eigene Node.js Module IPC Remote Node.js Electron API
18. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser • Apache Cordova • Tools und Framework um native Rahmenanwendungen um Web-Apps herum zu erstellen (sog. Hybride Anwendungen) • Aus "Web Apps" erstellt man "App Apps"  • Verwendet native WebView um die Anwendung lokal zu hosten • Bietet Framework und APIs an, um mittels Plugins mit den nativen Plattformen zu kommunizieren • Kommandozeilen-Tools um Projekt-Erzeugung und Build zu automatisieren • Wir benötigen immer das native SDK (iOS, Android, Windows) Mobile Anwendungen mit Cordova Nativer Wrapper Deployment JS HTML CSS
19. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser Cordova Architektur Cordova Anwendung Mobile OS iOS Android Win 10 UWP Web-Anwendung Cordova Plugins u.v.m. HTML JS CSS Assets config.xml HTML Rendering Engine (WebView) HTML APIs Cordova APIs OS APIs Cordova Native APIs OS APIs Custom Plugins Geolocation Notifications Contacts Media Camera
20. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser • Angular • https://angular.io/ • https://angular.io/docs/ts/latest/guide/ar chitecture.html • Boostrap • http://getbootstrap.com/ • Tutorials • https://www.youtube.com/user/Thorste n1983 • https://egghead.io/ • https://angular.io/docs/ts/latest/tutorial/ • Demo-Projekt • https://github.com/thinktecture/ekon- 2016-cross-plattform-workshop • Cordova • http://cordova.apache.org/ • Electron • http://electron.atom.io/ • Gulp • http://gulpjs.com/ Ressourcen
21. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser Kontakt: • steffen.jahr@thinktecture.com • @SteffenJahr • sebastian.gingter@thinktecture.com • @PhoenixHawk Vielen Dank! Fragen? Antworten!