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

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

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!

Manuel Rauber

February 24, 2017
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. Christian Liebel
    @chris_liebel
    [email protected]
    Echtes Cross-Plattform-HTML5
    mit Angular
    Hands-on!
    Manuel Rauber
    @ManuelRauber
    [email protected]

    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
    [email protected]
    @manuelrauber
    [email protected]

    View Slide