Cross-Plattform-HTML5 – hands-on

Die Konferenz ist vorbei, und Sie haben viel gesehen und gelernt. 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 Plug-in – 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, 2-D- und 3-D-Animationen oder standortbezogene Dienste sind nur wenige Beispiele für die neuen Möglichkeiten, die sich durch den Webstandard eröffnen. Über Cordova kann eine einmal in HTML5 geschriebene App mit einem Mausklick für viele verschiedene Plattformen gebaut werden. Christian Weyer, Manuel Rauber und Christian Liebel zeigen Ihnen anhand eines Beispiels, wie und mit welchen Tools ansprechende Apps auf Basis von HTML5 heute entwickelt werden, ohne auf Touchinteraktion, flüssige Effekte oder native Funktionen verzichten zu müssen – von der ersten Codezeile bis zum fertigen App-Paket für verschiedenste Plattformen. Und Sie programmieren aktiv mit!

Transcript

1. Christian Weyer, Christian Liebel, Manuel Rauber Cross-Platform HTML5
 Hands on!
2. 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
3. Speakers Christian Weyer Christian Liebel Manuel Rauber http://www.thinktecture.com
4. Willkommen
5. 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
6. Cross-Platform- Technologiestack Single-Page Web Applications
7. 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, …)
8. CSS3 • Umfassende Möglichkeiten zur Gestaltung von Web-Apps • 3D-Transformationen • Animationen • Zustandsübergänge • Responsive Layout
9. JavaScript • Programmiersprache des Web • Sehr flexibel • Dynamisch typisiert • Prozedural, objektorientiert oder funktional programmierbar • Standardisierte Variante: ECMAScript • Aktuellste Version: ECMAScript 2015 (ES6)
10. Zielarchitektur
11. 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, …
12. Push Services • HTTP implementiert eine explizite Request-basierte Kommunikation • Realität: Request-basiert + Push • Instant Messaging • Datensatzaktualisierungen • Frameworks wie ASP.NET SignalR, Socket.IO, …
13. Offline-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, …
14. „Das sieht ja aber gar nicht wie eine native Anwendung aus!“
15. TypeScript
16. Demo-App MacOS X Windows Desktop iOS Android Windows Mobile Browser Browser Browser Windows 10 / UWP Linux
17. Node.js
18. 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
19. Sprachunterstützung • ECMAScript 6 • ECMAScript 7 experimentell • Klassen • Typisierte Arrays • Fat Arrow/Lambda-Ausdrücke • Templated Strings
20. 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
21. 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
22. 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
23. TypeScript
24. 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, …
25. 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
26. 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
27. Angular 2
28. 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
29. Ziele •Performance •Mobile •Flexibilität •Einfach zu lernen
30. 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
31. GULP
32. Was ist Gulp • Tool zur Build-Automatisierung mittels JavaScript • Node.js® Modul • Lesbare Build-Skripte • Gulp Erweiterungen auf NPM verfügbar
33. Warum Gulp? • manuelle Aufgaben sind Risiken • release early, release often • Continuous Integration • Continuous Deployment
34. Technische Sicht auf Gulp • Stream-basierte Verarbeitung • Gulp Tasks • sind reine JavaScript-Funktionen • werden asynchron ausgeführt • gulpfile.js wird von Gulp vorausgesetzt
35. 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
36. GULP API var gulp = require('gulp'); gulp.task('task-name', function(done){ // task logik });
37. 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
38. Electron
39. Was ist Electron • Cross Platform Desktop Framework von GitHub • Container für HTML5 Apps • Bereitstellung plattformübergreifender nativer Funktionalitäten • Automatische Updates • Crash Reporting
40. 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
41. Electron Architektur • Trennung in zwei unabhängige Prozesse • Main Prozess • Render Prozess • Kommunikation zwischen den Prozessen • IPC • Remote Require
42. Electron Main Prozess • Main Prozess • Node.js • Electron APIs • Tray • App Menu • Benachrichtigungen • uvm…
43. Der Render-Prozess • Darstellung durch Chromium • Basisbibliothek von Google Chrome • Chrome Developer Tools
44. 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
45. Ausblick • CefSharp • Push • Applikation • Plattform • Touch-Interaktionen • Native Integrationen • Offline-Fähigkeit
46. 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
47. 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
48. Push - Plattform • Benutzung der nativen, herstellerspezifischen Push-Funktionen • Bspw. Azure App Services kombiniert iOS, Windows Phone und Android Push • Auch für inaktive Applikationen geeignet
49. Touchinteraktionen • Native Touch Events vom Browser • Abstraktion über hammer.js möglich • Erkennung von Gesten • Pinch-to-Zoom • Rotate • Swipe
50. Native Integrationen • Integration plattformabhängiger APIs • Native Menüs • Geolocation • Globale Shortcuts
51. Offlinefä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