Echtes Cross-Plattform-HTML5 mit Angular 2 – hands-on

Die Konferenz ist vorbei, und Sie haben viel gesehen und gelernt. HTML5 und Frameworks wie Angular 2 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. Im Zusammenspiel mit TypeScript/JavaScript und CSS3 bringt HTML5 viele Funktionen, die lange Zeit nur nativen Anwendungen vorbehalten waren, auch ins Web: Offlinefähigkeit, clientseitige Datenhaltung, 2-D- und 3-D-Animationen oder standortbezogene Dienste sind nur wenige Beispiele für die neuen Möglichkeiten, die sich durch den Webstandard eröffnen. Über Cordova kann eine einmal bspw. mit Angular 2 geschriebene App mit einem Mausklick für viele verschiedene Plattformen gebaut werden. Christian Weyer, Manuel Rauber und Christian Liebel zeigen Ihnen anhand eines Beispiels, wie und mit welchen Tools ansprechende Apps auf Basis von HTML5 und Angular 2 heute entwickelt werden, ohne auf Touchinteraktion, flüssige Effekte oder native Funktionen verzichten zu müssen – von der ersten Codezeile bis zum fertigen App-Paket für verschiedenste Plattformen. Und Sie programmieren aktiv mit!

Transcript

1. Christian Liebel @chris_liebel christian.liebel@thinktecture.com Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Manuel Rauber @ManuelRauber manuel.rauber@thinktecture.com
2. Speakers Speakers https://www.thinktecture.com Speakers Christian Liebel Manuel Rauber
3. Prepare it Code it Build it Deploy it Echtes Cross-Plattform-HTML5 mit Angular Hands-on!
4. 08:30–10:00 Prepare it 10:00–10:30 Kaffeepause 10:30–12:00 Code it 12:00–13:00 Mittagessen 13:00–14:30 Build it 14:30–15:00 Kaffeepause 15:00–16:30 Deploy it Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Zeitplan
5. 08:30–10:00 Prepare it 10:00–10:15 Kaffeepause 10:15–11:45 Code it 11:45–12:30 Mittagessen 12:30–14:00 Build it 14:00–14:30 Kaffeepause 14:30–16:00 Deploy it Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Zeitplan (Vorschlag)
6. Willkommen Echtes Cross-Plattform-HTML5 mit Angular Hands-on!
7. Nintendo DS Windows Windows Mobile iOS Android BlackBerry 10 FireOS macOS Linux Fernseher Kühlschrank Browser Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Single-, Multi- und Cross-Plattform Cross-Plattform == Cross-Plattform?
8. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Single-Page Web Applications Cross-Platform-Technologiestack
9. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Auszeichnungssprache Bringt native Plattform-Features ins Web • Umfassendere Eingabe- und Steuerelemente • Audio-/Video-Wiedergabe ohne Plugin • Hardwarebeschleunigte 3D-Inhalte ohne Plugin • Gamepad-Steuerung, Mikrofoneingabe ohne Plugin • Lokaler Speicher (Key-Value-Speicher, Datenbanken, …) HTML5
10. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Umfassende Möglichkeiten zur Gestaltung von Web-Apps • 3D-Transformationen • Animationen • Zustandsübergänge • Responsive Layout CSS3
11. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Programmiersprache des Web Sehr flexibel • Dynamisch typisiert • Prozedural, objektorientiert oder funktional programmierbar Standardisierte Variante: ECMAScript Aktuellste Version: ECMAScript 2016 JavaScript
12. Web APIs Push Services Offlineunterstützung Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Zielarchitektur
13. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Modellierung & Implementierung fachlicher Services • Logik raus aus dem Button1_Click()! Echtes Cross-Plattform braucht interoperable, leichtgewichtige Schnittstellen • HTTP als Basis • Aber: Sicher! Unterstützung auf allen möglichen Technologieplattformen • ASP.NET Web API, Node.js, … Web APIs
14. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! HTTP implementiert eine explizite Request-basierte Kommunikation Realität: Request-basiert + Push • Instant Messaging • Datensatzaktualisierungen Frameworks wie ASP.NET SignalR, Socket.IO, … Push Services
15. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Heute kann überall ein Arbeitsplatz sein (Hotel, Zug, Park, …) Aber: Nicht überall gibt es (schnelles) Internet Apps müssen auch diese Situationen mitmachen! Daher: Lokale Datenhaltung, Synchronisation HTML5 Web Storage API, WebSQL, IndexedDB, … Offline-Unterstützung
16. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! „„Das sieht ja aber gar nicht wie eine native Anwendung aus!“
17. TypeScript Echtes Cross-Plattform-HTML5 mit Angular Hands-on!
18. Echtes Cross-Plattform-HTML5 mit Angular
19. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! 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, Atom, … TypeScript
20. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! und die Features von Morgen Statische Typisierung ermöglicht besseres Refactoring Statische Code-Analyse und Typenprüfung Bessere Code Completion Syntaktischer Zucker Async/Await Operators Generics Decorators TypeScript
21. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Transpilierung TypeScript Compiler (TSC), installiert über NPM • npm i typescript TSC-Watcher für inkrementelles Transpilieren • tsc -w ./src/*.ts Zusätzlich Angabe von Modulsystem oder Zieldialekt möglich TypeScript
22. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Motivation Nachfolger von AngularJS (2009) Open-Source-Projekt von Google Die Entwicklungsplattform für Desktop- und Web-Apps Ein Framework für Web und Mobile optimiert Angular
23. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Ziele Performance Mobile Flexibilität Einfach zu lernen Angular
24. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! 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
25. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Tool zur Build-Automatisierung mittels JavaScript Node.js Modul Lesbare Build-Skripte Gulp-Erweiterungen auf npm verfügbar Gulp
26. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Wofür? manuelle Aufgaben sind Risiken release early, release often • Continuous Integration • Continuous Deployment Gulp
27. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Stream-basierte Verarbeitung Gulp-Tasks • sind reine JavaScript-Funktionen • werden asynchron ausgeführt gulpfile.js wird von Gulp vorausgesetzt Gulp
28. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Skripte ausführen Bei globaler Installation ( npm install gulp -g ) • $ gulp [task-name] Bei lokaler Installation ( npm install gulp --save-dev ) • $./node_modules/.bin/gulp [task-name] Ohne Argument versucht Gulp den default Task zu starten Gulp
29. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! API Gulp var gulp = require('gulp'); gulp.task('task-name', function(done){ // task logik });
30. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! • 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
31. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Cordova Architektur Mobile OS iOS Android Windows 10 UWP and more Cordova Application Cordova Plugins Geolocation Notifications Media Camera Custom Plugins HTML Rendering Engine (WebView) Single-Page Application HTML JS CSS Assets HTML APIs Cordova APIs OS APIs OS APIs Cordova Native APIs
32. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! • 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
33. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Architecture 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
34. var gulp = require('gulp'), typescript = require('gulp-typescript'); gulp.task('compile:typescript', function(done){ return gulp.src('src/app/**/*.ts') .pipe(typescript()) .pipe(gulp.dest('dist/app')); }); Echtes Cross-Plattform-HTML5 mit Angular Hands-on! API am Beispiel Typescript Gulp
35. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Cross Platform Desktop Framework von GitHub Container für HTML5-Apps Bereitstellung plattformübergreifender nativer Funktionalitäten Automatische Updates Crash Reporting Electron
36. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Big Picture Electron WINDOWS OSX LINUX ELECTRON MAIN PROZESS (NODE.JS MIT NATIVEN ADD-INS) ELECTRON RENDER PROZESS CHROMIUM EIGENE HTML5 APP EIGENE NODE.JS MODULE
37. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Architektur Trennung in zwei unabhängige Prozesse • Main Prozess • Render Prozess Kommunikation zwischen den Prozessen • IPC • Remote Require Electron
38. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Main Prozess Node.js Electron APIs • Tray • App Menu • Benachrichtigungen • uvm… Electron
39. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Der Render-Prozess Darstellung durch Chromium • Basisbibliothek von Google Chrome Chrome Developer Tools Electron
40. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Zusammenfassung Windows 10 Mobile iPhone, iPad Android Windows Store Windows Desktop Linux macOS App Node.js npm Gulp TypeScript ECMAScript 2015 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 1.0
41. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! CefSharp Push • Applikation • Plattform Touch-Interaktionen Native Integrationen Offline-Fähigkeit Ausblick
42. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! 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
43. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! 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
44. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! 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
45. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Native Touch Events vom Browser Abstraktion über hammer.js möglich Erkennung von Gesten • Pinch-to-Zoom • Rotate • Swipe Touchinteraktionen
46. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Integration plattformabhängiger APIs Native Menüs Geolocation Globale Shortcuts Integration nativer Funktionen
47. Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Synchronisieren der Daten in einen lokalen Speicher • WebSQL • IndexedDB • LocalStorage Bearbeiten der Daten ohne aktive Internetverbindung Synchronisation zurück zum Server nach Wiederherstellen einer Verbindung Offlinefähigkeit
48. Vielen Dank! Fragen? Contact @chris_liebel christian.liebel@thinktecture.com @manuelrauber manuel.rauber@thinktecture.com