Hands-on-Workshop: Echte Cross-Plattform-Entwicklung für alle mit Angular

HTML5 und Frameworks wie Angular haben die Karten bei der Anwendungsentwicklung bereits vor ein paar Jahren komplett neu gemischt. Das Web enthält viel mehr als nur neue Struktur- und Formularelemente oder die Wiedergabe von Audio und Video ohne Plug-in – und läuft zudem auf allen denkbaren Plattformen. Dieser Workshop zeigt in nur einem Tag, wie es geht.

GitHub: https://github.com/thinktecture/basta-spring-2018-xplatform-ws

Transcript

1. Christian Liebel @chris_liebel Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Manuel Rauber @ManuelRauber Consultant Christian Weyer @christianweyer CTO Consultant
2. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop https://www.thinktecture.com Sprecher Christian Liebel Christian Weyer Manuel Rauber
3. 08:30–10:00 Workshop 10:00-10:30 Pause 10:30-12:00 Workshop 12:00-13:00 Mittagessen 13:00-14:30 Workshop 14:30-15:00 Kuchenbuffet 15:00-16:30 Workshop Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Zeitplan
4. 08:30–10:00 Workshop 10:00-10:30 Pause 10:30-12:00 Workshop 12:00-12:45 Mittagessen 12:45-14:15 Workshop 14:15-14:45 Kuchenbuffet 14:45-16:15 Workshop Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Zeitplan (Vorschlag)
5. Willkommen Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop
6. Nintendo DS Windows Windows Mobile iOS Android BlackBerry 10 FireOS macOS Linux Fernseher Kühlschrank Browser Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Single-, Multi- und Cross-Plattform Cross-Plattform == Cross-Plattform?
7. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop „Das sieht ja aber gar nicht wie eine native Anwendung aus!“
8. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
9. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg
10. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Single-Page Web Applications Cross-Plattform-Technologiestack
11. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Zielarchitektur • REST APIs, HTTP APIs, „irgendwas APIs“ • Use Case orientierte Modellierung: Funktionale Services mit einem dedizierten Interface • Kann weitere Datenquellen (Dateisystem, Datenbank, …) anbinden • Abgesichert via Tokens • Kann von jedem HTTPS-sprechenden Client konsumiert werden • Nutzung von WebSocket für Echtzeitkommunikation HTTP HTTPS WebSocket Web API HTML5-Application (Single-Page Application) Web Cordova Electron Node.js .NET Core
12. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Wir schreiben heute eine App… • auf Basis von Angular, TypeScript und HTML • die sich an die Bildschirmabmessungen anpasst (Responsive Design) • auf unterschiedlichen Geräten und Plattformen funktioniert • die native Plattformfeatures nutzt Demo LIVE DEMO
13. $ git clone https://github.com/thinktecture/basta-spring-2018- xplatform-ws.git $ cd basta-spring-2018-xplatform-ws $ npm install # Hat es geklappt? $ ng version $ npm start # Browser: http://localhost:4200/ Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Repository-Setup
14. $ cd basta-spring-2018-xplatform-ws $ git pull $ npm install $ npm start $ git reset --hard Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Hilfreiche Git-Befehle
15. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop TypeScript
16. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop • Open-Source-Entwicklung von Microsoft • Superset von JavaScript • Statische Typisierung • Bietet diverse Features von ECMAScript 2017+ • Transpilierung nach JavaScript • TypeScript Compiler CLI • Vielseitiger IDE Support: Visual Studio (Code), WebStorm/IntelliJ IDEA, Atom, … TypeScript
17. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop • Open-Source-Projekt von Google • Entwicklungsplattform für Desktop- und Web-Apps • Framework für Web und Mobile optimiert • Angular CLI: Zentraler Ausgangspunkt für Angular-Projekte Angular
18. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Komponentenorientierung • Erlaubt Entwicklung nach dem MV*-Entwurfsmuster • Ziel: Reusability, Skalierung • Konstrukte • Komponente: Abgeschlossener und wiederverwendbarer Softwarebaustein • eigene UI • eigenes Routing, … • Service: Wiederverwendbare Klassen ohne UI • Bspw. für clientseitige Businesslogik Angular
19. Features • Besonders einfaches und schnelles Setup • Keine Konfiguration notwendig • Unterstützung für E2E- und Unit-Tests • Der zentrale Ausgangspunkt unter anderem • zum Lernen von Angular • für schnelle Ergebnisse Angular CLI Hands-on-Workshop Echte Cross-Plattform-Entwicklung für alle mit Angular
20. Verwendung Bootstrapping • ng new project Buildprozess • ng build Entwicklungsserver • ng serve Angular CLI Hands-on-Workshop Echte Cross-Plattform-Entwicklung für alle mit Angular
21. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop • Nativer Anwendungsrahmen mit integriertem Web Browser • Android: Android spezifischer Browser / CrossWalk • iOS: UIWebView / WKWebView • Windows Mobile: Internet Explorer / Edge • HTML5 Anwendung wird innerhalb des integrierten Web Browsers gehostet • Der Anwendungsrahmen erlaubt Zugriff auf darunterliegende native Platform APIs via Plugins • Native SDKs werden zum Bauen der Apps benötigt Cordova
22. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Cordova Architektur Cordova Application Single-Page Application HTML JS CSS Assets Cordova Plugins Geolocation Notifications Media Camera Custom Plugins HTML Rendering Engine (WebView) Cordova Native APIs Cordova APIs HTML APIs Mobile OS Android iOS Windows 10 UWP and more… OS APIs OS APIs
23. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop • Erlaubt das Erstellen von echten Desktop Anwendungen (.exe, .app) • Kombiert einen “full-blown” Chomium Browser mit Node.js • Anwendung ist nicht abhängig von installierten Browsern des Zielgeräts • Benötigt keine nativen SDKs zum Bauen der Anwendung • Ermöglicht Zugriff auf native Plattform APIs • Electron API • Node.js Module • Bringt Features wie ein Auto-Updater oder einen Crash-Reporter mit Electron
24. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Electron Architektur Desktop OS Electron Renderer Process (technically Chromium) Electron Main Process (technically Node.js) macOS Windows Linux Single-Page Application Electron API Custom Node.js modules IPC Remote Node.js
25. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Zusammenfassung Windows 10 Mobile iPhone, iPad Android Windows Store Windows Desktop Linux macOS App Node.js npm Gulp TypeScript ECMAScript 2017 HTML5 CSS3 Restify Token-Authentication SequelizeJS SQLite Electron NW.js Apache Cordova TACO Tools Angular Chrome Safari Firefox Edge WebStorm VS Code Atom vi Emacs Sublime Text Eine Codebasis ASP.NET Web API ASP.NET Core 2.0
26. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop • Chromium Embedded Framework (CefSharp) • Push • Applikation • Plattform • Touch-Interaktionen • Native Integrationen • Offline-Fähigkeit • Progressive Web Apps Ausblick
27. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop • Basiert auf CEF (Chromium Embedded Framework) • Wrapper um Chromium für WPF und WinForms als Web Browser Control • Kommunikation zwischen .NET und JavaScript Code über dediziertes API • Ermöglicht Migrationspfade • Anwendung nach und nach als SPA in JavaScript neu entwickeln • Oder nur Teilbereiche in der existierenden Anwendung in der neuen Welt bauen CefSharp
28. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Applikation • Echtzeit-Daten-Push direkt in die Anwendungen • Prinzip: Aufrechthalten einer Client-Serververbindung durch WebSockets • oder Fallback-Technologie, z.B. HTTP Long Polling • Für aktive, laufende Applikationen • ASP.NET SignalR oder socket.io Push
29. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop Plattform • Benutzung der nativen, herstellerspezifischen Push-Funktionen • Bspw. Azure App Services kombiniert iOS, Windows 10 Mobile und Android Push • Auch für inaktive Applikationen geeignet Push
30. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop • Native Touch Events vom Browser • Abstraktion über hammer.js möglich • Erkennung von Gesten • Pinch-to-Zoom • Rotate • Swipe Touchinteraktionen
31. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop • Integration plattformabhängiger APIs • Native Menüs • Geolocation • Globale Shortcuts Integration nativer Funktionen
32. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop • Synchronisieren der Daten in einen lokalen Speicher • IndexedDB • HTML5 Web Storage • Bearbeiten der Daten ohne aktive Internetverbindung • Synchronisation zurück zum Server nach Wiederherstellen einer Verbindung Offlinefähigkeit
33. Das Web wird nativ(er) • Die Idee: Wir brauchen keine App-Stores mehr • Web-App entspricht der App-App • Feature Parity: Native Experience mit Pushbenachrichtigungen, Offlineverfügbarkeit, … • Angetrieben von Google, auf Android schon heute verfügbar • Abwärtskompatibel (Progressive Enhancement) • Progressive Web Apps sind keine Technologie, sondern eine Sammlung von Eigenschaften Apps von morgen… Hands-on-Workshop Echte Cross-Plattform-Entwicklung für alle mit Angular
34. Vielen Dank! Fragen? Contact @chris_liebel christian.liebel@thinktecture.com @christianweyer christian.weyer@thinktecture.com @manuelrauber manuel.rauber@thinktecture.com