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

Cross-Plattform-HTML5 – hands-on

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. Christian Weyer, Christian Liebel, Manuel Rauber
    Cross-Platform HTML5

    Hands on!

    View Slide

  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

    View Slide

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

    View Slide

  4. Willkommen

    View Slide

  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

    View Slide

  6. Cross-Platform-
    Technologiestack
    Single-Page Web Applications

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. Zielarchitektur

    View Slide

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

    View Slide

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

    View Slide

  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,

    View Slide

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

    View Slide

  15. TypeScript

    View Slide

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

    View Slide

  17. Node.js

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  23. TypeScript

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  27. Angular 2

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  31. GULP

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  38. Electron

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  45. Ausblick
    • CefSharp
    • Push
    • Applikation
    • Plattform
    • Touch-Interaktionen
    • Native Integrationen
    • Offline-Fähigkeit

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide