Cross-Plattform-HTML5 – hands-on

Slide 1

Slide 1 text

Christian Weyer, Christian Liebel, Manuel Rauber Cross-Platform HTML5  Hands on!

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Willkommen

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Cross-Platform- Technologiestack Single-Page Web Applications

Slide 7

Slide 7 text

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, …)

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Zielarchitektur

Slide 11

Slide 11 text

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, …

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Ofﬂine-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, …

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

TypeScript

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Node.js

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

TypeScript

Slide 24

Slide 24 text

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, …

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Angular 2

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

GULP

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

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

Slide 38

Slide 38 text

Electron

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Ausblick • CefSharp • Push • Applikation • Plattform • Touch-Interaktionen • Native Integrationen • Ofﬂine-Fähigkeit

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Ofﬂinefä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