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
   

   View Slide

2. Speakers
   Speakers
   https://www.thinktecture.com
   Speakers
   Christian Liebel Manuel Rauber
   

   View Slide

3. Prepare it Code it
   Build it Deploy it
   Echtes Cross-Plattform-HTML5 mit Angular
   Hands-on!
   

   View Slide

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
   

   View Slide

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)
   

   View Slide

6. Willkommen
   Echtes Cross-Plattform-HTML5 mit Angular
   Hands-on!
   

   View Slide

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?
   

   View Slide

8. Echtes Cross-Plattform-HTML5 mit Angular
   Hands-on!
   Single-Page Web Applications
   Cross-Platform-Technologiestack
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. Web APIs
    Push Services
    Offlineunterstützung
    Echtes Cross-Plattform-HTML5 mit Angular
    Hands-on!
    Zielarchitektur
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. Echtes Cross-Plattform-HTML5 mit Angular
    Hands-on!
    „„Das sieht ja aber gar
    nicht wie eine native
    Anwendung aus!“
    

    View Slide

17. TypeScript
    Echtes Cross-Plattform-HTML5 mit Angular
    Hands-on!
    

    View Slide

18. Echtes Cross-Plattform-HTML5 mit Angular
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. Echtes Cross-Plattform-HTML5 mit Angular
    Hands-on!
    Ziele
    Performance
    Mobile
    Flexibilität
    Einfach zu lernen
    Angular
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. Echtes Cross-Plattform-HTML5 mit Angular
    Hands-on!
    Wofür?
    manuelle Aufgaben sind Risiken
    release early, release often
    • Continuous Integration
    • Continuous Deployment
    Gulp
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. Echtes Cross-Plattform-HTML5 mit Angular
    Hands-on!
    API
    Gulp
    var gulp = require('gulp');
    gulp.task('task-name', function(done){
    // task logik
    });
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. Echtes Cross-Plattform-HTML5 mit Angular
    Hands-on!
    Main Prozess
    Node.js
    Electron APIs
    • Tray
    • App Menu
    • Benachrichtigungen
    • uvm…
    Electron
    

    View Slide

39. Echtes Cross-Plattform-HTML5 mit Angular
    Hands-on!
    Der Render-Prozess
    Darstellung durch Chromium
    • Basisbibliothek von Google Chrome
    Chrome Developer Tools
    Electron
    

    View Slide

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
    

    View Slide

41. Echtes Cross-Plattform-HTML5 mit Angular
    Hands-on!
    CefSharp
    Push
    • Applikation
    • Plattform
    Touch-Interaktionen
    Native Integrationen
    Offline-Fähigkeit
    Ausblick
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. Echtes Cross-Plattform-HTML5 mit Angular
    Hands-on!
    Integration plattformabhängiger APIs
    Native Menüs
    Geolocation
    Globale Shortcuts
    Integration nativer Funktionen
    

    View Slide

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
    

    View Slide

48. Vielen Dank! Fragen?
    Contact
    @chris_liebel
    christian.liebel@thinktecture.com
    @manuelrauber
    manuel.rauber@thinktecture.com
    

    View Slide