Echtes Cross-Platform mit HTML5 und JavaScript

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 Plugin – 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, 2D- und 3D-Animationen oder standortbezogene Dienste sind nur wenige Beispiele für die neuen Möglichkeiten, die sich durch moderne Webstandards eröffnen.

Mithilfe von Apache Cordova und GitHub Electron kann eine zum Beispiel mit Angular geschriebene App mit einem Mausklick für viele verschiedene Desktop- und Mobilplattformen gebaut werden. Christian Liebel und Manuel Rauber zeigen Ihnen anhand einer Beispielanwendung, wie und mit welchen Tools ansprechende Apps auf Basis von HTML5 heute entwickelt werden, ohne auf Touch-Interaktion, flüssige Effekte oder native Funktionen verzichten zu müssen – von der ersten Codezeile bis zum fertigen App-Paket für verschiedenste Plattformen.

GitHub: https://github.com/thinktecture/ddf-xplatform-workshop

Transcript

1. Christian Liebel
   @chris_liebel
   christian.liebel@thinktecture.com
   Echtes Cross-Platform mit HTML5 und
   JavaScript
   Hands-on!
   Manuel Rauber
   @ManuelRauber
   manuel.rauber@thinktecture.com
   

   View Slide

2. Echtes Cross-Platform mit HTML5 und JavaScript
   Hands-on!
   https://www.thinktecture.com
   Sprecher
   Christian Liebel Manuel Rauber
   

   View Slide

3. Was Sie nicht erwartet
   Masterplan zur App-Entwicklung
   für jeden Anwendungsfall
   Wunderschön aufgehübschte
   Anwendung
   Production-Ready Code
   Was Sie erwartet
   Rundumschlag zu den
   Themenfeldern Cross-Platform-
   Entwicklung und Angular
   Sie implementieren aktiv mit:
   HTML, TypeScript – hier werden
   Ihre Hände schmutzig
   Ihre App landet (mit etwas
   Glück) auf Ihrem
   Smartphone/Tablet
   Hands-on!
   Echtes Cross-Platform mit HTML5 und JavaScript
   

   View Slide

4. Prepare it Code it
   Build it Deploy it
   Echtes Cross-Platform mit HTML5 und JavaScript
   Hands-on!
   

   View Slide

5. 09:00–10:45 Prepare it
   10:45–11:15 Pause
   11:15–13:00 Code it
   13:00–14:00 Mittagessen
   14:00–15:00 Build it
   15:00–15:30 Kuchenbuffet
   15:30–17:00 Deploy it
   Echtes Cross-Platform mit HTML5 und JavaScript
   Hands-on!
   Zeitplan
   

   View Slide

6. 09:00–10:45 Prepare it
   10:45–11:00 Pause
   11:00–13:00 Code it
   13:00–13:45 Mittagessen
   13:45–15:00 Build it
   15:00–15:30 Kuchenbuffet
   15:30–16:30 Deploy it
   Echtes Cross-Platform mit HTML5 und JavaScript
   Hands-on!
   Zeitplan (Vorschlag)
   

   View Slide

7. Willkommen
   Echtes Cross-Platform mit HTML5 und JavaScript
   Hands-on!
   

   View Slide

8. Prepare it
   • Cross-Platform
   • HTML5, CSS3,
   JavaScript
   • Zielarchitektur
   Code it
   • TypeScript
   • Angular
   Build it
   • Electron
   • Cordova
   Deploy it
   • Windows, macOS, Linux
   • iOS, Android
   • Ausblick
   Echtes Cross-Platform mit HTML5 und JavaScript
   Hands-on!
   

   View Slide

9. Nintendo DS
   Windows
   Windows Mobile
   iOS
   Android
   BlackBerry 10
   FireOS
   macOS
   Linux Fernseher
   Kühlschrank
   Browser
   Echtes Cross-Platform mit HTML5 und JavaScript
   Hands-on!
   Single-, Multi- und Cross-Plattform
   Cross-Plattform == Cross-Plattform?
   

   View Slide

10. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    „Das sieht ja aber gar
    nicht wie eine native
    Anwendung aus!“
    

    View Slide

11. Creating real cross-platform applications
    Angular, Cordova & Electron
    https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
    

    View Slide

12. Creating real cross-platform applications
    Angular, Cordova & Electron
    http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg
    

    View Slide

13. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Single-Page Web Applications
    Cross-Platform-Technologiestack
    

    View Slide

14. Echtes Cross-Platform mit HTML5 und JavaScript
    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

15. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Umfassende Möglichkeiten zur Gestaltung von Web-Apps
    • 3D-Transformationen
    • Animationen
    • Zustandsübergänge
    • Responsive Layout
    CSS3
    

    View Slide

16. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Programmiersprache des Web
    Sehr flexibel
    • Dynamisch typisiert
    • Prozedural, objektorientiert oder funktional programmierbar
    Standardisierte Variante: ECMAScript
    Aktuellste Version: ECMAScript 2016
    JavaScript
    

    View Slide

17. Web APIs
    Push Services
    Offlineunterstützung
    Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Zielarchitektur
    

    View Slide

18. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Zielarchitektur
    

    View Slide

19. Echtes Cross-Platform mit HTML5 und JavaScript
    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

20. Echtes Cross-Platform mit HTML5 und JavaScript
    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

21. Echtes Cross-Platform mit HTML5 und JavaScript
    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

22. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Wir schreiben heute eine App…
    • auf Basis von Angular, TypeScript und HTML
    • die sich an die Bildschirmabmessungen anpasst
    (Responsive Design)
    • auf unterschiedlichen Geräten und Plattformen
    funktioniert (Cross-Platform)
    Demo
    LIVE DEMO
    

    View Slide

23. Und jetzt Sie!
    git clone https://github.com/thinktecture/ddf-xplatform-
    workshop.git
    cd ddf-xplatform-workshop
    npm install # or yarn (if installed)
    # Hat es geklappt?
    ng version
    npm start
    Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Repository-Setup
    

    View Slide

24. git pull
    git reset --hard
    Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Hilfreiche Git-Befehle
    

    View Slide

25. Prepare it
    • Cross-Platform
    • HTML5, CSS3,
    JavaScript
    • Zielarchitektur
    Code it
    • TypeScript
    • Angular
    Build it
    • Electron
    • Cordova
    Deploy it
    • Windows, macOS, Linux
    • iOS, Android
    • Ausblick
    Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    

    View Slide

26. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    TypeScript
    

    View Slide

27. Creating real cross-platform applications
    Angular, Cordova & Electron
    macOS
    iOS
    Windows Mobile
    Android
    Windows Desktop
    Windows 10/UWP
    Linux
    Browser
    

    View Slide

28. Echtes Cross-Platform mit HTML5 und JavaScript
    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/IntelliJ IDEA, Atom, …
    TypeScript
    

    View Slide

29. Echtes Cross-Platform mit HTML5 und JavaScript
    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

30. AngularJS vs. Angular 2 vs. Angular
    AngularJS
    Erste Ausgabe (2009), geschrieben in JavaScript
    Angular 2
    Vollständiger Rewrite (2016), geschrieben in TypeScript
    Angular
    “It’s just Angular!” Semantische Versionierung, zeitbasierter Releaseplan
    (Mar 23, 2017: Angular 4, Sep/Oct 2017: Angular 5)
    AngularXYZ?
    Hands-on!
    Echtes Cross-Platform mit HTML5 und JavaScript
    

    View Slide

31. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Motivation
    Open-Source-Projekt von Google
    Die Entwicklungsplattform für Desktop- und Web-Apps
    Ein Framework für Web und Mobile optimiert
    Angular CLI: Zentraler Ausgangspunkt für Angular-Projekte
    Angular
    

    View Slide

32. Features
    Besonders einfaches und schnelles Setup
    Keine Konfiguration
    Unterstützung für E2E- und Unit-Tests
    Der zentrale Ausgangspunkt unter anderem
    • zum Lernen von Angular
    • für schnelle Ergebnisse
    Angular CLI
    Hands-on!
    Echtes Cross-Platform mit HTML5 und JavaScript
    

    View Slide

33. Verwendung
    Bootstrapping
    • ng new project
    Scaffolding
    • ng generate component foo
    Buildprozess
    • ng build
    Entwicklungsserver
    • ng serve
    Angular CLI
    Hands-on!
    Echtes Cross-Platform mit HTML5 und JavaScript
    

    View Slide

34. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Ziele
    Performance
    Mobile
    Flexibilität
    Einfach zu lernen
    Angular
    

    View Slide

35. Echtes Cross-Platform mit HTML5 und JavaScript
    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

36. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Und jetzt Sie!
    Binden Sie das Poké API (https://pokeapi.co/) in die Anwendung ein. Auf den folgenden Slides
    finden Sie zusätzliche Informationen zu allen Punkten, die Sie beachten müssen:
    1. Datenmodell
    2. Service
    3. Komponente
    4. Routing
    5. Verlinkung im Menü
    Poké API
    

    View Slide

37. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Datenmodell
    • Daten sind der eigentliche Kraftstoff jeder App. Im nächsten Schritt wollen wir mit der PokéAPI
    einen Webservice anbinden, der uns diese Daten liefert. Einer der Vorteile von TypeScript ist
    die optionale statische Typisierung. In TypeScript können Sie die Datenstruktur mithilfe von
    Interfaces oder Klassen modellieren.
    • Legen Sie ein Interface für ein Pokémon an: ng generate interface
    • Die Eigenschaften eines Pokémon können Sie sich auf der Website zur PokéAPI anschauen:
    https://pokeapi.co/
    • Gibt es Tools, die eine TypeScript-Klasse oder ein -Interface aus JSON-Daten heraus
    generieren können?
    Poké API
    

    View Slide

38. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service
    • Das Konstrukt, um wiederverwendbare nicht-UI-bezogene Funktionalität in Angular zu
    kapseln, wird als Service bezeichnet. Services dienen der horizontalen Segmentierung Ihrer
    Anwendung. Denken Sie sich einen Service als Gegenstück zu Ihrem Controller in ASP.NET
    MVC: Er schachtelt alle HTTP-Anfragen, die zu einem bestimmten Teilbereich Ihrer
    Problemdomäne gehören.
    • Legen Sie einen Service zum Zugriff auf die PokéAPI an: ng generate service
    • Folgende Liste muss beim Entwickeln des Services beachtet werden, welche auf den
    nachfolgenden Slides beschrieben sind:
    • Injecting des HTTP-Services
    • Abruf der Pokémon-Liste
    • Abruf eines einzelnen Pokémons
    • Einhängen des Services in die Dependency Injection
    Poké API
    

    View Slide

39. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service – Injecting des HTTP-Services
    Zum Konsumieren von Abhängigkeiten können Sie sich diese einfach in Ihren Konstruktor
    einreichen lassen. Die Konstruktorinjektion ist typbasiert. Der HTTP-Service, der von Angular
    bereitgestellt wird, heißt "Http". Lassen Sie sich diesen in Ihren neuen Service einreichen. Zu aller
    Not können Sie beim StarWarsService spicken.
    Poké API
    

    View Slide

40. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service – Abrufen der Pokémon-Liste
    • Entwickeln Sie eine Methode "list()", welche eine Liste aller Pokémon abruft. Welcher Endpunkt
    zu wählen ist, erfahren Sie auf https://pokeapi.co/
    • Der Http-Service kapselt die verschiedenen HTTP-Verben (GET, POST, etc.) durch
    gleichnamige Methoden: Http.get()
    • Diese Methode liefert ein Observable zurück. Darunter versteht man einen (oder mehrere)
    Wert(e), die erst in der Zukunft feststehen. Ein Observable hat einen generischen
    Typparameter: Http.get() liefert etwa ein Observable zurück, das eine HTTP-Response enthält.
    Um auf die Nutzlast der Antwort zuzugreifen, müssen Sie diese zunächst entsprechend der
    Antwort des Servers transformieren. Die Poké API gibt JSON zurück, aber es könnte auch
    Plain-Text sein.
    • Hierbei hilft Ihnen der Rx.js-Operator map: return http.get(…).map(response => response.json())
    • Geben Sie das Ergebnis als Observable einer Liste von Instanzen des Interfaces, das sie vorhin
    definiert haben, zurück. Das geht ganz einfach: public list(): Observable { … } – ein
    Type-Cast ist hier nicht erforderlich.
    Poké API
    

    View Slide

41. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service – Abrufen eines einzelnen Pokémons
    • Entwickeln Sie analog zu oben eine Methode "get()", die ein bestimmtes Pokémon unter
    Angabe seiner Nummer im nationalen Pokédex (seiner ID).
    • Die Implementierung wird sich ähnlich gestalten wie bei der Liste, nur dass diesmal eine ID
    übergeben und die URL entsprechend zusammengesetzt werden muss.
    • Zum Konkatenieren von Zeichenketten gibt es ab ECMAScript 2015 die sogenannten
    Templateliterale. Auch in .NET sind sie bekannt, denn dort haben sie mit C# 6 unter dem
    Namen String Interpolation Einzug gehalten, wenn auch mit abweichender Syntax. In
    JavaScript geht das so: `http://example.com/${id}` – Achten Sie auf die Backticks.
    • Beachten Sie ebenfalls, dass sich der generische Typparameter des Observable ändert: Wir
    geben nun kein Array, sondern einen einzelnen Datensatz zurück.
    Poké API
    

    View Slide

42. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service – Konfiguration der Dependency Injection
    Haben Sie beim Erstellen des Services über die Angular CLI die Warnung entdeckt? Die Angular
    CLI bindet den Service standardmäßig nicht in Ihre Anwendung ein. Stellen Sie nun den Service
    über die Dependency-Injection bereit. Finden Sie in der Datei module.ts die richtige Stelle?
    Poké API
    

    View Slide

43. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Komponente
    • Der Begriff der Komponente ist so alt wie der Begriff des Software-Engineering selbst. Unter
    einer Komponente versteht man wiederverwendbare, einfach kombinierbare
    Softwarebausteine. Im Falle von Angular sind diese UI-bezogen. Sie bringen also ein eigenes
    Template mit. Erzeugen Sie eine neue Komponente über die Angular CLI: ng generate
    component pokemonList
    • Angular CLI hängt die Komponente freundlicherweise bereits in das Modul ein – im Gegensatz
    zum Service.
    Poké API
    

    View Slide

44. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Komponente – Listenanzeige
    • Auch in Komponenten können Sie sich Abhängigkeiten einreichen lassen: Wieder über den
    Konstruktor und wieder über die Verwendung des Typs – hier also Ihrer Service-Klasse.
    • Legen Sie ein Feld an: public pokemon: Observable.
    • Führen Sie im Konstruktor folgende Zuweisung durch: this.pokemon = pokemonService.list();
    • Kommen wir nun zum zugehörigen HTML-Template Ihrer Komponente: Legen Sie dort eine
    unsortierte Liste (ul) an und legen sie einen Listeneintrag (li) hinein. Zeichnen Sie das li-Element mit
    der Direktive *ngFor="let item of pokemon | async" aus.
    • Die async-Pipe wartet darauf, dass der Netzwerkrequest abgeschlossen wird. Sobald das der Fall
    ist, werden die Pokémon angezeigt und das li-Element für jedes Pokémon wiederholt.
    • Innerhalb des li-Tag können Sie nun Data-Binding anwenden. Das geht mithilfe der Moustache-
    Syntax: {{ item.name }}
    • Zeigen Sie mindestens Namen, Gewicht und Größe des Pokémon in der Liste an.
    • Sie können Ihre Komponente ausprobieren, indem Sie diese in Ihre HomeComponent einbetten:
    
    Poké API
    

    View Slide

45. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Komponente – Detailanzeige
    • Führen Sie nun ähnliche Schritte auch zur Implementierung einer Detail-Komponente durch.
    • Diesmal benötigen Sie aber keine Liste, sondern zeigen Details zu einem bestimmten
    Datensatz an. Da wir Databindung nur dann anwenden können, wenn auch ein Datensatz
    geladen wurde, schalten Sie die Anzeige der Daten nur bei Vorhandensein eines Datensatzes
    an: {{ pokemon.name }}
    • Innerhalb des "div" können Sie sicher auf das Pokémon zugreifen. Zeigen Sie mindestens Name,
    Gewicht, Größe und den Basiserfahrungswert an.
    • Verwenden Sie zum Abrufen von Daten zunächst eine statische ID, zum Beispiel 151 für Mew.
    Poké API
    

    View Slide

46. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Routing – Liste
    • Routing ist ein elementarer Bestandteil von Single-Page Web Applications. Fügen Sie in der
    Datei routes.ts eine neue Route für die Listenansicht der Pokémon-Liste ein. Parameter
    werden mit führendem Doppelpunkt (:) deklariert.
    • Falls nötig, lassen Sie sich inspirieren von der Route zur StarWars-API. Vernachlässigen Sie
    dabei die Angabe von "model" und "page".
    • Sie können die korrekte Umsetzung prüfen, indem Sie in Ihrem Browser die neue Route
    eingeben.
    Poké API
    

    View Slide

47. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Routing – Detailseite
    • Legen Sie nun auch eine Route für die Detail-Ansicht eines Pokémon an. Falls nötig, lassen Sie
    sich inspirieren von der Route zur StarWars-API. Vernachlässen Sie dabei die Angabe von
    "model". Die "id" wird allerdings benötigt.
    • Innerhalb Ihrer Komponente pokemonDetail müssen Sie nun an die ID kommen, die in der Route
    eingegeben wurde. Zugriff auf die Parameter erhalten Sie über den Service mit dem Typ
    ActivatedRouteSnapshot. Dieser Service bietet die Eigenschaft "params", auf dem die URL-
    Parameter abgelegt sind. Starten Sie abhängig davon die Abfrage gegen Ihren Pokémon-
    Service.
    • Sie können die korrekte Umsetzung prüfen, indem Sie in Ihrem Browser die neue Route
    eingeben.
    • Schauen Sie sich die Angular-Dokumentation zu "routerLink" an. Wie können Sie aus der
    Pokémon-Liste heraus auf die einzelnen Einträge verlinken?
    Poké API
    

    View Slide

48. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Verlinkung im Menü
    • Abschließend wollen wir die Pokémon-Liste noch im Menü referenzieren.
    • Navigieren Sie dazu zur Datei src/app/components/menu/menu.html
    • Fügen Sie einen neuen Menüeintrag analog zu den übrigen Menüeinträgen hinzu.
    Poké API
    

    View Slide

49. Prepare it
    • Cross-Platform
    • HTML5, CSS3,
    JavaScript
    • Zielarchitektur
    Code it
    • TypeScript
    • Angular
    Build it
    • Electron
    • Cordova
    Deploy it
    • Windows, macOS, Linux
    • iOS, Android
    • Ausblick
    Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    

    View Slide

50. Echtes Cross-Platform mit HTML5 und JavaScript
    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

51. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Cordova Architektur
    Cordova Application
    Single-Page Application
    HTML JS CSS Assets
    Cordova Plugins
    Geolocation
    Notifications
    Media
    Camera
    Custom Plugins
    HTML Rendering Engine (WebView)
    Cordova Native APIs
    Cordova APIs
    HTML APIs
    Mobile OS
    Android iOS Windows 10 UWP and more…
    OS APIs
    OS APIs
    

    View Slide

52. Echtes Cross-Platform mit HTML5 und JavaScript
    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

53. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Electron Architektur
    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

54. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Und jetzt Sie!
    Eines der wichtigsten Features: Teilen
    Bilder, Links, … weitergeben an Freunde und Bekannte
    Wir wollen Pokémon teilen!
    Teilen mit Freu(n)den
    

    View Slide

55. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Plattformerkennung
    • Entwickeln Sie einen Service "PlatformService" mit drei statischen Methoden, die zur
    Bestimmung der Plattform genutzt werden können:
    • "isBrowserApplication()": Liefert einen boolschen Wert, der true ist, wenn die Anwendung in
    einem Browser läuft.
    • "isCordovaApplication()": Liefert einen boolschen Wert, der true ist, wenn die Anwendung in
    Cordova ausgeführt wird.
    • "isElectronApplication()": Liefert einen boolschen Wert, der true ist, wenn die Anwendung in
    Electron ausgeführt wird.
    • Cordova schreibt auf das globale "window"-Objekt eine gleichnamige Property, wenn die
    Anwendung in Cordova ausgeführt wird.
    • Bei Electron lässt sich mit Hilfe des User Agents und dem Vorhandensein des Strings
    "Electron" prüfen, ob die Anwendung in Electron ausgeführt wird.
    Teilen mit Freu(n)den
    

    View Slide

56. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service – Schnittstellendefinition
    • Entwickeln Sie einen abstrakten Service, der die Schnittstelle zum Teilen von Inhalten definiert.
    • Definieren Sie ein abstrakte Methode "share()", die einen Titel und eine Beschreibung als String
    entgegennimmt.
    Teilen mit Freu(n)den
    

    View Slide

57. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service – Teilen im Browser
    • Entwickeln Sie Service, der den abstrakten Share Service ableitet und implementieren Sie die
    Methode "share()".
    • Im Falle des Browsers soll das E-Mail-Programm des Benutzers geöffnet werden und sowohl
    Titel als auch Inhalt der E-Mail vorausgefüllt werden.
    • Das E-Mail-Programm können Sie mit einem "mailto:"-Link öffnen.
    Teilen mit Freu(n)den
    

    View Slide

58. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service – Konfiguration der Dependency Injection
    • Entwickeln Sie eine Funktion "shareServiceFactory()", die eine Instanz des
    BrowserShareService erzeugt.
    • Fügen Sie diese Factory der Angular Dependency Injection hinzu:
    https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#factory-provider
    Teilen mit Freu(n)den
    

    View Slide

59. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Komponente – Erweiterung der Detailseite
    • Erweitern Sie die Detailseite mit einem "Share to a friend"-Button.
    • Bei Klick auf diesen Button soll eine Methode "share()" ausgeführt werden.
    • Die Methode "share()" benutzt den ShareService, um den Inhalt zu teilen.
    • Vergessen Sie nicht, den Service via Konstruktorinjektion anzufordern.
    Teilen mit Freu(n)den
    

    View Slide

60. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service – Teilen auf mobilen Geräten
    • Entwickeln Sie einen Service, der den abstrakten Share Service ableitet und implementieren
    Sie die Methode "share()".
    • Im Falle einer Cordova-basierten Ausführung kann die native "Teilen"-Oberfläche des Geräts
    benutzt werden.
    • Die Anwendung integriert bereits ein Plugin, um die native "Teilen"-Oberfläche anzusprechen:
    https://www.npmjs.com/package/cordova-plugin-x-socialsharing
    • Benutzen Sie die Funktionen des Plugins, um über JavaScript mit der nativen Funktion zu
    sprechen.
    • Erweitern Sie Ihre ShareServiceFactory und erzeugen Sie eine Instanz vom
    "CordovaShareService", wenn Sie erkennen, dass die Anwendung in Cordova ausgeführt wird.
    Teilen mit Freu(n)den
    

    View Slide

61. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service – Zugriff auf den Desktop
    • Entwickeln Sie einen Service, um Zugriff auf Electron zu erhalten.
    • Sie erhalten Zugriff auf Electron, in dem Sie die auf dem "window"-Objekte definierte Methode
    "require()" aufrufen und ihr als Parameter den Wert "electron" übergeben.
    • Achtung: Die Methode "require()" steht nur zur Verfügung, wenn die Anwendung in Electron
    ausgeführt
    Teilen mit Freu(n)den
    

    View Slide

62. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Service – Teilen auf dem Desktop
    • Entwickeln Sie einen Service, der den abstrakten Share Service ableitet und implementieren
    Sie die Methode "share()".
    • Im Falle einer Electron-basierten Ausführung soll, wie im Falle des Browsers, das E-Mail-
    Programm geöffnet werden.
    • Probieren Sie die Anwendung in Electron mit dem BrowserShareService aus. Was stellen Sie
    hier fest?
    • Benutzen Sie den ElectronService, um Zugriff auf "shell" zu erhalten, um externe Links zu
    öffnen: https://github.com/electron/electron/blob/master/docs/api/shell.md
    • Erweitern Sie Ihre ShareServiceFactory und erzeugen Sie eine Instanz vom
    "ElectronShareService", wenn Sie erkennen, dass die Anwendung in Electron ausgeführt wird.
    • Aufgemerkt: Ihre ShareServiceFactory benötigt eine Abhängigkeit, um den
    ElectronShareService zu erzeugen.
    Teilen mit Freu(n)den
    

    View Slide

63. Prepare it
    • Cross-Platform
    • HTML5, CSS3,
    JavaScript
    • Zielarchitektur
    Code it
    • TypeScript
    • Angular
    Build it
    • Electron
    • Cordova
    Deploy it
    • Windows, macOS, Linux
    • iOS, Android
    • Ausblick
    Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    

    View Slide

64. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Zusammenfassung
    Windows 10 Mobile
    iPhone, iPad
    Android
    Windows Store
    Windows Desktop
    Linux
    macOS App
    Node.js
    npm Gulp
    TypeScript
    ECMAScript 2016
    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

65. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    CefSharp
    Push
    • Applikation
    • Plattform
    Touch-Interaktionen
    Native Integrationen
    Offline-Fähigkeit
    Progressive Web Apps
    Ausblick
    

    View Slide

66. Echtes Cross-Platform mit HTML5 und JavaScript
    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

67. Echtes Cross-Platform mit HTML5 und JavaScript
    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

68. Echtes Cross-Platform mit HTML5 und JavaScript
    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

69. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Native Touch Events vom Browser
    Abstraktion über hammer.js möglich
    Erkennung von Gesten
    • Pinch-to-Zoom
    • Rotate
    • Swipe
    Touchinteraktionen
    

    View Slide

70. Echtes Cross-Platform mit HTML5 und JavaScript
    Hands-on!
    Integration plattformabhängiger APIs
    Native Menüs
    Geolocation
    Globale Shortcuts
    Integration nativer Funktionen
    

    View Slide

71. Echtes Cross-Platform mit HTML5 und JavaScript
    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

72. Das Web wird nativ(er)
    • Die Idee: Wir brauchen keine App-Stores mehr
    • Web-App entspricht der App-App
    • Feature Parity: Native Experience mit
    Pushbenachrichtigungen, Offlineverfügbarkeit, …
    • Angetrieben von Google, auf Android schon
    heute verfügbar
    • Abwärtskompatibel (Progressive Enhancement)
    • Progressive Web Apps sind keine Technologie,
    sondern eine Sammlung von Eigenschaften
    Apps von morgen…
    Hands-on!
    Echtes Cross-Platform mit HTML5 und JavaScript
    

    View Slide

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

    View Slide