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

EKON 20: Cross-Plattform Workshop

EKON 20: Cross-Plattform Workshop

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

Sebastian Gingter

November 09, 2016
Tweet

More Decks by Sebastian Gingter

Other Decks in Technology

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

    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
  5. 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
  6. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser

    Aktuelle Anwendungs-Architektur Datenbank Existierende Delphi App
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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?
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. Ran ans Werk: Echte Cross-Plattform-Anwendungen für Desktop, Mobile & Browser

    Kontakt: • [email protected] • @SteffenJahr • [email protected] • @PhoenixHawk Vielen Dank! Fragen? Antworten!