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

Cross-Plattform-HTML5 – hands-on

Manuel Rauber
September 23, 2016

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!

Manuel Rauber

September 23, 2016
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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, …)
  4. CSS3 • Umfassende Möglichkeiten zur Gestaltung von Web-Apps • 3D-Transformationen

    • Animationen • Zustandsübergänge • Responsive Layout
  5. JavaScript • Programmiersprache des Web • Sehr flexibel • Dynamisch

    typisiert • Prozedural, objektorientiert oder funktional programmierbar • Standardisierte Variante: ECMAScript • Aktuellste Version: ECMAScript 2015 (ES6)
  6. 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, …
  7. Push Services • HTTP implementiert eine explizite Request-basierte Kommunikation •

    Realität: Request-basiert + Push • Instant Messaging • Datensatzaktualisierungen • Frameworks wie ASP.NET SignalR, Socket.IO, …
  8. 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, …
  9. 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
  10. Sprachunterstützung • ECMAScript 6 • ECMAScript 7 experimentell • Klassen

    • Typisierte Arrays • Fat Arrow/Lambda-Ausdrücke • Templated Strings
  11. 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
  12. 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
  13. 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
  14. 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, …
  15. 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
  16. 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
  17. 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
  18. 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
  19. Was ist Gulp • Tool zur Build-Automatisierung mittels JavaScript •

    Node.js® Modul • Lesbare Build-Skripte • Gulp Erweiterungen auf NPM verfügbar
  20. Warum Gulp? • manuelle Aufgaben sind Risiken • release early,

    release often • Continuous Integration • Continuous Deployment
  21. Technische Sicht auf Gulp • Stream-basierte Verarbeitung • Gulp Tasks

    • sind reine JavaScript-Funktionen • werden asynchron ausgeführt • gulpfile.js wird von Gulp vorausgesetzt
  22. 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
  23. 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
  24. Was ist Electron • Cross Platform Desktop Framework von GitHub

    • Container für HTML5 Apps • Bereitstellung plattformübergreifender nativer Funktionalitäten • Automatische Updates • Crash Reporting
  25. 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
  26. Electron Architektur • Trennung in zwei unabhängige Prozesse • Main

    Prozess • Render Prozess • Kommunikation zwischen den Prozessen • IPC • Remote Require
  27. Electron Main Prozess • Main Prozess • Node.js • Electron

    APIs • Tray • App Menu • Benachrichtigungen • uvm…
  28. 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
  29. Ausblick • CefSharp • Push • Applikation • Plattform •

    Touch-Interaktionen • Native Integrationen • Offline-Fähigkeit
  30. 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
  31. 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
  32. 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
  33. Touchinteraktionen • Native Touch Events vom Browser • Abstraktion über

    hammer.js möglich • Erkennung von Gesten • Pinch-to-Zoom • Rotate • Swipe
  34. 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