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

Für Browser, Desktop & Mobile: Echte Cross-Plat...

Für Browser, Desktop & Mobile: Echte Cross-Plattform-Anwendungen mit Angular 2 – in Action!

Der Traum von einer einzigen Code-Basis für alle Client-Plattformen: er lebt immer noch – heute sogar mehr denn je.

In dieser Session zeigt euch Christian Weyer wie weit dieser Traum Wirklichkeit werden kann mit Angular 2 und quelloffenen Cross-Plattform-Werkzeugen.

Auf Basis moderner UI-Konzepte lassen sich Oberflächen für Desktops, Tablets und Smartphones entwerfen. Mischt man diesen Ansatz mit Tools wie Cordova und Electron, so kann man auf Basis des SPA Frameworks Angular 2 echte Anwendungen für alle relevanten Plattformen und Device-Größen bauen: Windows, Linux, MacOS, iOS, Android & Co.

Kommt vorbei und seht all das in Action!

Avatar for Christian Weyer

Christian Weyer

July 18, 2016
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

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

    – in Action! Christian Weyer Thinktecture AG @christianweyer
  2. Mitgründer & Principal Consultant Thinktecture AG Fokus auf § Mobile

    & Web-basierte Anwendungsarchitekturen § Cross-Plattform-Lösungen § Pragmatische End-to-End Implementierungen Microsoft MVP ASP.NET (Architecture) ASPInsider, AzureInsider Google GDE Web Technologies [email protected] @christianweyer Christian Weyer 2
  3. Mobiler Lebensstil, mobile Arbeitsweise Daten und Prozesse müssen mobil sein

    Reichweite heißt die Maxime § Grenzen verschwimmen – und verschwinden User Experience steht vor neuen Herausforderungen § UI idealerweise mit einer Codebasis umsetzen § Aber angepasst an Formfaktoren und Stärken der Plattform „Mobile-First“ 5
  4. Es ist ein Feature 6 Aber das sieht ja gar

    nicht wie eine native Anwendung aus. Genau.
  5. 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 8
  6. Clientseitiges Single Page Applications (SPA) Framework 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 9
  7. Angular 2 setzt komplett auf TypeScript Komponenten beschrieben als Klassen

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

    JS Codebasen § Nutzt Web-View-Komponenten der jeweiligen Plattform § Möglichkeit über Plugins in die native Plattform einzuklinken CLI Tools für Build-Automation § Benötigt native SDKs der jeweiligen Zielplattformen Mobile Apps mit Cordova 12
  9. Ähnlicher Ansatz wie Cordova, nur für Desktop-Betriebssysteme § Windows (Desktop),

    Linux, macOS 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 14
  10. Video-Serie zu “Cross Plattform Entwicklung mit HTML5 & JavaScript” §

    https://channel9.msdn.com/Series/Thementag-Cross-Plattform-Entwicklung-mit- HTML5--Javascript § 8 Sessions Channel9 - Thementag 19
  11. Angular • https://angular.io • https://angular.io/docs/ts/latest/guid e/ architecture.html Bootstrap • http://getbootstrap.com/

    Material • https://material.angularjs.org Cordova • http://cordova.apache.org/ Electron • http://electron.atom.io/ Gulp • http://gulpjs.com/ LVM-IT RoCA vs. SPA • https://github.com/LVM-IT/spa- prototype Ressourcen 20