Save 37% off PRO during our Black Friday Sale! »

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

667fbca1f58bc0215c744b5ae8f8e5d2?s=128

Manuel Rauber

February 23, 2018
Tweet

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
  2. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop https://www.thinktecture.com Sprecher Christian

    Liebel Christian Weyer Manuel Rauber
  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
  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)
  5. Willkommen Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop

  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?
  7. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop „Das sieht ja

    aber gar nicht wie eine native Anwendung aus!“
  8. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop https://spotifyblogcom.files.wordpress.com/2014/12/overview.png

  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

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

    Cross-Plattform-Technologiestack
  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
  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
  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
  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
  15. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop TypeScript

  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  34. Vielen Dank! Fragen? Contact @chris_liebel christian.liebel@thinktecture.com @christianweyer christian.weyer@thinktecture.com @manuelrauber manuel.rauber@thinktecture.com