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

Hands-on-Workshop: Echte Cross-Plattform-Entwicklung für alle mit Angular

Hands-on-Workshop: Echte Cross-Plattform-Entwicklung für alle mit Angular

HTML5 und Frameworks wie Angular 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. Dieser Workshop zeigt in nur einem Tag, wie es geht.

GitHub: https://github.com/thinktecture/basta-spring-2018-xplatform-ws

Manuel Rauber

February 23, 2018
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. Christian Liebel
    @chris_liebel
    Echte Cross-Plattform-Entwicklung für
    alle mit Angular
    Hands-on-Workshop
    Manuel Rauber
    @ManuelRauber
    Consultant
    Christian Weyer
    @christianweyer
    CTO Consultant

    View full-size slide

  2. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    https://www.thinktecture.com
    Sprecher
    Christian Liebel Christian Weyer Manuel Rauber

    View full-size slide

  3. 08:30–10:00 Workshop
    10:00-10:30 Pause
    10:30-12:00 Workshop
    12:00-13:00 Mittagessen
    13:00-14:30 Workshop
    14:30-15:00 Kuchenbuffet
    15:00-16:30 Workshop
    Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    Zeitplan

    View full-size slide

  4. 08:30–10:00 Workshop
    10:00-10:30 Pause
    10:30-12:00 Workshop
    12:00-12:45 Mittagessen
    12:45-14:15 Workshop
    14:15-14:45 Kuchenbuffet
    14:45-16:15 Workshop
    Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    Zeitplan (Vorschlag)

    View full-size slide

  5. Willkommen
    Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop

    View full-size slide

  6. Nintendo DS
    Windows
    Windows Mobile
    iOS
    Android
    BlackBerry 10
    FireOS
    macOS
    Linux Fernseher
    Kühlschrank
    Browser
    Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    Single-, Multi- und Cross-Plattform
    Cross-Plattform == Cross-Plattform?

    View full-size slide

  7. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    „Das sieht ja aber gar
    nicht wie eine native
    Anwendung aus!“

    View full-size slide

  8. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    https://spotifyblogcom.files.wordpress.com/2014/12/overview.png

    View full-size slide

  9. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg

    View full-size slide

  10. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    Single-Page Web Applications
    Cross-Plattform-Technologiestack

    View full-size slide

  11. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    Zielarchitektur
    • REST APIs, HTTP APIs, „irgendwas APIs“
    • Use Case orientierte Modellierung: Funktionale Services
    mit einem dedizierten Interface
    • Kann weitere Datenquellen
    (Dateisystem, Datenbank, …) anbinden
    • Abgesichert via Tokens
    • Kann von jedem HTTPS-sprechenden Client
    konsumiert werden
    • Nutzung von WebSocket für Echtzeitkommunikation
    HTTP HTTPS WebSocket
    Web API
    HTML5-Application
    (Single-Page Application)
    Web Cordova Electron
    Node.js .NET Core

    View full-size slide

  12. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    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
    • die native Plattformfeatures nutzt
    Demo
    LIVE DEMO

    View full-size slide

  13. $ git clone https://github.com/thinktecture/basta-spring-2018-
    xplatform-ws.git
    $ cd basta-spring-2018-xplatform-ws
    $ npm install
    # Hat es geklappt?
    $ ng version
    $ npm start
    # Browser: http://localhost:4200/
    Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    Repository-Setup

    View full-size slide

  14. $ cd basta-spring-2018-xplatform-ws
    $ git pull
    $ npm install
    $ npm start
    $ git reset --hard
    Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    Hilfreiche Git-Befehle

    View full-size slide

  15. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    TypeScript

    View full-size slide

  16. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    • 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 full-size slide

  17. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    • Open-Source-Projekt von Google
    • Entwicklungsplattform für Desktop- und Web-Apps
    • Framework für Web und Mobile optimiert
    • Angular CLI: Zentraler Ausgangspunkt für Angular-Projekte
    Angular

    View full-size slide

  18. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    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 full-size slide

  19. Features
    • Besonders einfaches und schnelles Setup
    • Keine Konfiguration notwendig
    • 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-Workshop
    Echte Cross-Plattform-Entwicklung für alle mit Angular

    View full-size slide

  20. Verwendung
    Bootstrapping
    • ng new project
    Buildprozess
    • ng build
    Entwicklungsserver
    • ng serve
    Angular CLI
    Hands-on-Workshop
    Echte Cross-Plattform-Entwicklung für alle mit Angular

    View full-size slide

  21. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    • 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 full-size slide

  22. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    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 full-size slide

  23. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    • 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 full-size slide

  24. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    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 full-size slide

  25. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    Zusammenfassung
    Windows 10 Mobile
    iPhone, iPad
    Android
    Windows Store
    Windows Desktop
    Linux
    macOS App
    Node.js
    npm Gulp
    TypeScript
    ECMAScript 2017
    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 2.0

    View full-size slide

  26. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    • Chromium Embedded Framework (CefSharp)
    • Push
    • Applikation
    • Plattform
    • Touch-Interaktionen
    • Native Integrationen
    • Offline-Fähigkeit
    • Progressive Web Apps
    Ausblick

    View full-size slide

  27. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    • 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 full-size slide

  28. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    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 full-size slide

  29. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    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 full-size slide

  30. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    • Native Touch Events vom Browser
    • Abstraktion über hammer.js möglich
    • Erkennung von Gesten
    • Pinch-to-Zoom
    • Rotate
    • Swipe
    Touchinteraktionen

    View full-size slide

  31. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    • Integration plattformabhängiger APIs
    • Native Menüs
    • Geolocation
    • Globale Shortcuts
    Integration nativer Funktionen

    View full-size slide

  32. Echte Cross-Plattform-Entwicklung für alle mit Angular
    Hands-on-Workshop
    • Synchronisieren der Daten in einen lokalen Speicher
    • IndexedDB
    • HTML5 Web Storage
    • Bearbeiten der Daten ohne aktive Internetverbindung
    • Synchronisation zurück zum Server nach Wiederherstellen einer Verbindung
    Offlinefähigkeit

    View full-size slide

  33. 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-Workshop
    Echte Cross-Plattform-Entwicklung für alle mit Angular

    View full-size slide

  34. Vielen Dank! Fragen?
    Contact
    @chris_liebel
    [email protected]
    @christianweyer
    [email protected]
    @manuelrauber
    [email protected]

    View full-size slide