Cross-Plattform-HTML5 – hands-on

Die Konferenz ist vorbei, und Sie haben viel gesehen und gelernt. 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 Plug-in – 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, 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 in HTML5 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 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 Weyer, Christian Liebel, Manuel Rauber
   Cross-Platform HTML5

   Hands on!
   

   View Slide

2. Zeitplan
   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
   

   View Slide

3. Speakers
   Christian Weyer Christian Liebel Manuel Rauber
   http://www.thinktecture.com
   

   View Slide

4. Willkommen
   

   View Slide

5. Nintendo DS
   Windows
   Windows Mobile
   iOS
   Android
   BlackBerry 10
   FireOS
   OS X
   Linux Fernseher
   Kühlschrank
   Browser
   SINGLE-PLATTFORM VS. MULTI-PLATTFORM VS. CROSS-PLATTFORM
   

   View Slide

6. Cross-Platform-
   Technologiestack
   Single-Page Web Applications
   

   View Slide

7. HTML5
   • 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, …)
   

   View Slide

8. CSS3
   • Umfassende Möglichkeiten zur
   Gestaltung von Web-Apps
   • 3D-Transformationen
   • Animationen
   • Zustandsübergänge
   • Responsive Layout
   

   View Slide

9. JavaScript
   • Programmiersprache des Web
   • Sehr flexibel
   • Dynamisch typisiert
   • Prozedural, objektorientiert oder
   funktional programmierbar
   • Standardisierte Variante: ECMAScript
   • Aktuellste Version: ECMAScript 2015 (ES6)
   

   View Slide

10. Zielarchitektur
    

    View Slide

11. WEB APIS
    • Modellierung & Implementierung von fachlichen 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, …
    

    View Slide

12. Push Services
    • HTTP implementiert eine explizite
    Request-basierte Kommunikation
    • Realität: Request-basiert + Push
    • Instant Messaging
    • Datensatzaktualisierungen
    • Frameworks wie ASP.NET SignalR,
    Socket.IO, …
    

    View Slide

13. Offline-Unterstützung
    • 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,
    …
    

    View Slide

14. „Das sieht ja aber gar
    nicht wie eine native
    Anwendung aus!“
    

    View Slide

15. TypeScript
    

    View Slide

16. Demo-App
    MacOS X
    Windows Desktop
    iOS
    Android
    Windows Mobile
    Browser
    Browser
    Browser
    Windows 10 / UWP Linux
    

    View Slide

17. Node.js
    

    View Slide

18. Was ist Node.js?
    • Serverseitiges JavaScript, powered by Chromes V8 JavaScript
    Engine
    • Support für ECMAScript 6 und experimentelle ECMAScript
    7 Features
    • Asynchrone, event-getriebene I/O APIs
    • Paketmanager ähnlich NuGet: Node Package Manager (npm)
    • Cross Plattform: Windows, OS X, Linux
    • Upcoming: Integration Microsofts ChakraCore als
    Alternative zu V8
    

    View Slide

19. Sprachunterstützung
    • ECMAScript 6
    • ECMAScript 7 experimentell
    • Klassen
    • Typisierte Arrays
    • Fat Arrow/Lambda-Ausdrücke
    • Templated Strings
    

    View Slide

20. Hosting
    • Node.js-Modul: express
    • Hosting von Web-Anwendungen, ähnlich
    wie ASP.NET MVC
    • Diverse Template Engines zum Rendern von
    Views
    • Middleware-Support, ähnlich wie OWIN
    

    View Slide

21. Web APIs
    • Node.js-Modul: restify
    • restify ist De-facto-Standard für Node.js Web
    APIs, 

    ähnlich wie ASP.NET Web API
    • Middleware-Support, ähnlich wie bei express
    oder OWIN
    • Built-In Support für DTrace
    • Client- und Server-Komponenten
    

    View Slide

22. Datenbanken
    • Anbindung vieler verschiedener Datenbanken durch
    Node.js-Module
    • NoSQL-Datenbanken: MongoDB, CouchDB, …
    • Relationale Datenbanken: MSSQL, PostgreSQL,
    SQLite, …
    • Entity-Framework ähnliches ORM: SequelizeJS
    • Unterstützung mehrerer relationaler Datenbanken
    • Migrations
    

    View Slide

23. TypeScript
    

    View Slide

24. Was ist TypeScript?
    • Open Source Entwicklung von Microsoft
    • Superset von JavaScript
    • Statische Typisierung
    • Bietet diverse Features von ECMAScript 6 und 7
    • Transpilierung nach JavaScript
    • TypeScript Compiler CLI
    • Vielseitiger IDE Support: Visual Studio (Code),
    WebStorm, Atom, …
    

    View Slide

25. TypeScript und die Features von
    Morgen
    • Statische Typisierung ermöglicht besseres
    Refactoring
    • Statische Code-Analyse und Typenprüfung
    • Bessere Auto Completion
    • Syntaktischer Zucker
    • Fat Arrow-/Lambda-Ausdrücke
    • Generics
    • Decorators
    

    View Slide

26. TypeScript 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
    

    View Slide

27. Angular 2
    

    View Slide

28. Motivation
    • AngularJS (2009) - https://angularjs.org
    • „HTML, verbessert für Anwendungen“
    • Basiert auf Erfahrungen bei der Entwicklung großer Google-SPAs
    • Angular 2 (2016) - https://angular.io
    • „Die Entwicklungsplattform für Desktop- und Web-Apps“
    • Ein Framework für Web und Mobile optimiert
    

    View Slide

29. Ziele
    •Performance
    •Mobile
    •Flexibilität
    •Einfach zu lernen
    

    View Slide

30. Angular 2
    • 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
    

    View Slide

31. GULP
    

    View Slide

32. Was ist Gulp
    • Tool zur Build-Automatisierung mittels JavaScript
    • Node.js® Modul
    • Lesbare Build-Skripte
    • Gulp Erweiterungen auf NPM verfügbar
    

    View Slide

33. Warum Gulp?
    • manuelle Aufgaben sind Risiken
    • release early, release often
    • Continuous Integration
    • Continuous Deployment
    

    View Slide

34. Technische Sicht auf Gulp
    • Stream-basierte Verarbeitung
    • Gulp Tasks
    • sind reine JavaScript-Funktionen
    • werden asynchron ausgeführt
    • gulpfile.js wird von Gulp vorausgesetzt
    

    View Slide

35. Gulp 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
    

    View Slide

36. GULP API
    var gulp = require('gulp');
    gulp.task('task-name', function(done){
    // task logik
    });
    

    View Slide

37. 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'));
    });
    GULP API - Am Beispiel
    Typescript
    

    View Slide

38. Electron
    

    View Slide

39. Was ist Electron
    • Cross Platform Desktop Framework von
    GitHub
    • Container für HTML5 Apps
    • Bereitstellung plattformübergreifender
    nativer Funktionalitäten
    • Automatische Updates
    • Crash Reporting
    

    View Slide

40. Electron Big Picture
    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

41. Electron Architektur
    • Trennung in zwei unabhängige Prozesse
    • Main Prozess
    • Render Prozess
    • Kommunikation zwischen den Prozessen
    • IPC
    • Remote Require
    

    View Slide

42. Electron Main Prozess
    • Main Prozess
    • Node.js
    • Electron APIs
    • Tray
    • App Menu
    • Benachrichtigungen
    • uvm…
    

    View Slide

43. Der Render-Prozess
    • Darstellung durch Chromium
    • Basisbibliothek von Google Chrome
    • Chrome Developer Tools
    

    View Slide

44. Zusammenfassung
    Windows Phone
    iPhone, iPad
    Android
    Windows Store
    Windows Desktop
    Linux
    Mac OS X App
    Node.js
    npm Gulp
    TypeScript
    ECMAScript 6
    HTML5 CSS3
    Restify
    Token-Authentication
    SequelizeJS
    SQLite
    Electron NW.js
    Apache Cordova
    TACO Tools
    Angular 2
    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

45. Ausblick
    • CefSharp
    • Push
    • Applikation
    • Plattform
    • Touch-Interaktionen
    • Native Integrationen
    • Offline-Fähigkeit
    

    View Slide

46. Migration von existierenden
    Client-Anwendungen mit CefSharp
    • 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
    

    View Slide

47. Push - Applikation
    • Echtzeit-Daten-Push direkt in die Anwendungen
    • Prinzip: Aufrechthalten einer Client <->
    Serververbindung durch WebSockets
    • oder Fallback-Technologie with HTTP Long
    Polling
    • Für aktive, laufende Applikationen
    • ASP.NET SignalR oder socket.io
    

    View Slide

48. Push - Plattform
    • Benutzung der nativen,
    herstellerspezifischen Push-Funktionen
    • Bspw. Azure App Services kombiniert iOS,
    Windows Phone und Android Push
    • Auch für inaktive Applikationen geeignet
    

    View Slide

49. Touchinteraktionen
    • Native Touch Events vom Browser
    • Abstraktion über hammer.js möglich
    • Erkennung von Gesten
    • Pinch-to-Zoom
    • Rotate
    • Swipe
    

    View Slide

50. Native Integrationen
    • Integration
    plattformabhängiger APIs
    • Native Menüs
    • Geolocation
    • Globale Shortcuts
    

    View Slide

51. Offlinefähigkeit
    • 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
    

    View Slide