Echtes Cross-Platform mit HTML5 und JavaScript – in Action!

HTML5 hat die Karten bei der Anwendungsentwicklung komplett neu gemischt. Der Webstandard enthält viel mehr als nur neue Struktur- und Formularelemente oder die Wiedergabe von Audio und Video ohne Plugin – und läuft zudem auf allen denkbaren Plattformen. Im Zusammenspiel mit JavaScript und CSS3 bringt HTML5 viele Funktionen, die lange Zeit nur nativen Anwendungen vorbehalten waren, auch ins Web: Offlinefähigkeit, clientseitige Datenhaltung, 2D- und 3D-Animationen oder standortbezogene Dienste sind nur wenige Beispiele für die neuen Möglichkeiten, die sich durch moderne Webstandards eröffnen.
Mithilfe von Apache Cordova und GitHub Electron kann eine zum Beispiel mit Angular geschriebene App mit einem Mausklick für viele verschiedene Desktop- und Mobilplattformen gebaut werden. Christian Liebel zeigt Ihnen anhand einer Beispielanwendung, wie und mit welchen Tools ansprechende Apps auf Basis von HTML5 heute entwickelt werden, ohne auf Touch-Interaktion, flüssige Effekte oder native Funktionen verzichten zu müssen – von der ersten Codezeile bis zum fertigen App-Paket für verschiedenste Plattformen.

Transcript

1. Christian Liebel @christianliebel Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop dotnet Cologne 2018 Consultant
2. Hello, it’s me. Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform, Cloud & Enterprise Blockchain Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop
3. 09:30–11:00 Workshop 11:00-11:30 Pause 11:30-13:00 Workshop 13:00-14:00 Mittagessen 14:00-15:30 Workshop 15:30-16:00 Kuchenbuffet 16:00-17:30 Workshop Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop Zeitplan
4. Willkommen Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop
5. Nintendo DS Windows Windows Mobile iOS Android BlackBerry 10 FireOS macOS Linux Fernseher Kühlschrank Browser Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop Single-, Multi- und Cross-Plattform Cross-Plattform == Cross-Plattform?
6. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop „Das sieht ja aber gar nicht wie eine native Anwendung aus!“
7. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
8. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg
9. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop Single-Page Web Applications Cross-Plattform-Technologiestack
10. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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
11. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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
12. bit.ly/dnc18xp Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop GitHub-Repo
13. $ git clone https://github.com/thinktecture/dotnet-cologne- 2018-xplatform.git $ cd dotnet-cologne-2018-xplatform $ npm install # Hat es geklappt? $ ng version $ npm start # Browser: http://localhost:4200/ Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop Repository-Setup
14. $ cd dotnet-cologne-2018-xplatform $ git pull $ npm install $ npm start $ git reset --hard Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop Hilfreiche Git-Befehle
15. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop TypeScript
16. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop • Open-Source-Entwicklung von Microsoft • Superset von JavaScript • Statische Typisierung • Bietet diverse Features von ECMAScript 2018+ • Transpilierung nach JavaScript • TypeScript Compiler CLI • Vielseitiger IDE Support: Visual Studio (Code), WebStorm/IntelliJ IDEA, Atom, … TypeScript
17. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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 Echtes Cross-Platform mit HTML5 und JavaScript – in Action!
20. Verwendung Bootstrapping • ng new project Buildprozess • ng build Entwicklungsserver • ng serve Angular CLI Hands-on-Workshop Echtes Cross-Platform mit HTML5 und JavaScript – in Action!
21. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop • Chromium Embedded Framework (CefSharp) • Push • Applikation • Plattform • Touch-Interaktionen • Native Integrationen • Offline-Fähigkeit • Progressive Web Apps Ausblick
27. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop • Native Touch Events vom Browser • Abstraktion über hammer.js möglich • Erkennung von Gesten • Pinch-to-Zoom • Rotate • Swipe Touchinteraktionen
31. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! Hands-on-Workshop • Integration plattformabhängiger APIs • Native Menüs • Geolocation • Globale Shortcuts Integration nativer Funktionen
32. Echtes Cross-Platform mit HTML5 und JavaScript – in Action! 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 Echtes Cross-Platform mit HTML5 und JavaScript – in Action!
34. Vielen Dank! Fragen? Christian Liebel @christianliebel