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

Browser, Mobile und Desktop: Echte Cross-Plattform-Anwendungen mit HTML5 & Co.

Browser, Mobile und Desktop: Echte Cross-Plattform-Anwendungen mit HTML5 & Co.

HTML5 kombiniert mit dem Wort "Anwendung", geht denn das? Na klar! Und der Vorteil dabei: Einmal erstellt, läuft es auf drei Desktop-Plattformen, mehreren mobilen Plattformen – und im Browser sowieso. Auch der Weg in sämtliche App Stores ist daher kein Problem. Wie das geht? Mit nativen Host-Anwendungen und Frameworks wie Cordova, Electron und den Standard-Browsern. In dieser Session zeigt Christian Weyer wie einfach es ist, aus einer HTML5 Single Page Application mit Angular 2 eine "echte" Anwendung für eine Vielzahl heute üblicher Plattformen zu erstellen. Und das alles mit nur einer Codebasis. Willkommen im Jahr 2016.

Christian Weyer

June 02, 2016
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

  1. Browser, Mobile & Desktop Echte Cross-Plattform Anwendungen mit HTML5 &

    Co. Christian Weyer Thinktecture AG @christianweyer
  2. Mitgründer, Vorstand & Principal Consultant Thinktecture AG Fokus auf Mobile

    & Web-basierte Anwendungsarchitekturen Cross-Plattform-Lösungen Pragmatische End-to-End Implementierungen Microsoft MVP ASP.NET (Architecture) Google GDE Web Technologies [email protected] @christianweyer Christian Weyer 2
  3. Moderne Business-Anwendungen HTML5, CSS, JavaScript & Co. als Basis Angular

    als Smart Client Framework für den Browser Cordova für Mobile Apps Electron für Desktop-Anwendungen Themen 3
  4. Mobiler Lebensstil, mobile Arbeitsweise Daten und Prozesse müssen mobil sein

    Reichweite heißt die Maxime Ø Grenzen verschwimmen – und verschwinden Ø Installation nicht immer gewollt Ø REST/Web API-basierte Architekturen, mit Push User Experience steht vor neuen Herausforderungen Ø Immer ausgehend von den geforderten Use Cases Ø Angepasst an Formfaktoren und Stärken der Plattform Ø App/UI idealerweise mit einer Codebasis umsetzen „Mobile-First“ 6
  5. Es ist ein Feature 7 Aber das sieht ja gar

    nicht wie eine native Anwendung aus. Genau.
  6. Web Browser & HTML5 als potente Plattform, inklusive Offline-Betrieb JavaScript

    / TypeScript als Anwendungssprachen Bspw. Angular als Anwendungs-Framework Flexibles Layout-System mit CSS3 & Flexbox „Echte“ Anwendungen 9
  7. Clientseitiges Single Page Applications (SPA) Framework Ø Smart Clients im

    Browser Fokus auf Separation-of-Concerns durch erprobte Design Patterns Ø ViewModels & Views Ø Dependency Injection & Services Angular 2 Ø Konsequent komponentenbasiert Ø Metadaten-getrieben Ø Optimiert für mobile Performance Komponentenbasierte Anwendungen mit Angular 2 10
  8. Angular 2 setzt komplett auf TypeScript Komponenten beschrieben als Klassen

    & mit Metadaten dekoriert Angular 2 & TypeScript @Component({ selector: 'game-details' templateUrl: 'game.html', inputs: ['game'], outputs: ['ended'] }) export public class GameDetailsComponent { game: GameData; ended = new EventEmitter<GameData>(); … } 11 … <game-details [game]="myCurrentGame" (ended)="onGameEnded($event)" > …
  9. Framework & Toolkit zur Erstellung nativer Anwendungsrahmen für HTML5 /

    JS Codebasen Ø Möglichkeit über Plugins in die native Plattform einzuklinken Ø Nutzt Web-View-Komponenten der jeweiligen Plattform Ø Kann für Android auf Chrome fixiert werden CLI Tools für Build-Automation Benötigt native SDKs der jeweiligen Zielplattformen Mobile Apps mit Cordova 13
  10. Hybrider Ansatz wie Cordova, nur für Desktop-Betriebssysteme Ø Windows (Desktop),

    Linux, MacOS X Verwendet dedizierte Version von Chromium und node.js Ø Unabhängig von auf Zielsystemen installierten Browsern Ø Benötigt keine nativen SDKs Zugriff auf native Plattform durch node.js-Module Ø Inkludiert Auto Updating Ø Tools für Plattform-spezifische Installer verfügbar Desktop-Anwendungen mit Electron 15
  11. Angular • https://angular.io • https://angular.io/docs/ts/latest/guide/ architecture.html Bootstrap • http://getbootstrap.com/ WinJS

    • http://try.buildwinjs.com/ #angular Material • https://material.angularjs.org Cordova • http://cordova.apache.org/ Electron • http://electron.atom.io/ Gulp • http://gulpjs.com/ Ressourcen 20