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.

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 christian.weyer@thinktecture.com @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. Moderne (Business) Anwendungen Modern == heute für morgen 4
5. Cross-Plattform 5
6. 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
7. Es ist ein Feature 7 Aber das sieht ja gar nicht wie eine native Anwendung aus. Genau.
8. Das Web als Plattform “Hey, wir haben das Jahr 2016!” 8
9. 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
10. 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
11. 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)" > …
12. Web & Nativ Das Beste aus beiden Welten 12
13. 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
14. Cordova Plattform-Unterstützung http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support 14
15. 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
16. Fazit HTML5 als Basis für echtes Cross-Plattform “Write Once, Run Anywhere” … ? 16
17. MacOS X Windows Desktop iOS Android Windows Mobile Browser Browser Browser Windows 10 / UWP Linux
18. Dankeschön! 18 @christianweyer
19. Christian Weyer Thinktecture AG christian.weyer@thinktecture.com @christianweyer BoardZ! Sample Application https://github.com/thinktecture/boardz-cross-platform-sample Kontakt 19
20. 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