Echtes Cross-Plattform-HTML5 mit Angular 2

Slide 1

Slide 1 text

Christian Liebel @chris_liebel [email protected] Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Manuel Rauber @ManuelRauber [email protected]

Slide 2

Slide 2 text

Speakers Speakers https://www.thinktecture.com Speakers Christian Liebel Manuel Rauber

Slide 3

Slide 3 text

Prepare it Code it Build it Deploy it Echtes Cross-Plattform-HTML5 mit Angular Hands-on!

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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)

Slide 6

Slide 6 text

Willkommen Echtes Cross-Plattform-HTML5 mit Angular Hands-on!

Slide 7

Slide 7 text

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?

Slide 8

Slide 8 text

Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Single-Page Web Applications Cross-Platform-Technologiestack

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Web APIs Push Services Offlineunterstützung Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Zielarchitektur

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Echtes Cross-Plattform-HTML5 mit Angular Hands-on! „„Das sieht ja aber gar nicht wie eine native Anwendung aus!“

Slide 17

Slide 17 text

TypeScript Echtes Cross-Plattform-HTML5 mit Angular Hands-on!

Slide 18

Slide 18 text

Echtes Cross-Plattform-HTML5 mit Angular

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Ziele Performance Mobile Flexibilität Einfach zu lernen Angular

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Wofür? manuelle Aufgaben sind Risiken release early, release often • Continuous Integration • Continuous Deployment Gulp

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Echtes Cross-Plattform-HTML5 mit Angular Hands-on! API Gulp var gulp = require('gulp'); gulp.task('task-name', function(done){ // task logik });

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Main Prozess Node.js Electron APIs • Tray • App Menu • Benachrichtigungen • uvm… Electron

Slide 39

Slide 39 text

Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Der Render-Prozess Darstellung durch Chromium • Basisbibliothek von Google Chrome Chrome Developer Tools Electron

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Echtes Cross-Plattform-HTML5 mit Angular Hands-on! CefSharp Push • Applikation • Plattform Touch-Interaktionen Native Integrationen Offline-Fähigkeit Ausblick

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Integration plattformabhängiger APIs Native Menüs Geolocation Globale Shortcuts Integration nativer Funktionen

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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