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!

667fbca1f58bc0215c744b5ae8f8e5d2?s=128

Manuel Rauber

February 24, 2017
Tweet

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