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

Echte Cross-Plattform-Anwendungen mit Angular 2 - in Action

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 Ihnen 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. Kommen Sie vorbei und sehen Sie all dies in Action!

Christian Weyer

March 16, 2016
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

  1. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 CHRISTIAN WEYER ▸ Microsoft MVP

    für ASP.NET (Architektur) ▸ Google GDE für Web-Technologien ▸ [email protected] ▸ @christianweyer ▸ http://thinktecture.com VORSTAND & PRINCIPAL CONSULTANT @ THINKTECTURE AG 2
  2. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 SINGLE-PLATTFORM VS. MULTI-PLATTFORM VS. CROSS-PLATTFORM

    Nintendo DS Windows Windows Mobile iOS Android BlackBerry 10 FireOS OS X Linux Fernseher Kühlschrank Browser 3
  3. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 HTML5 ▸ Mehr als nur

    Markup ▸ 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) 5
  4. DAS SIEHT JA ABER GAR NICHT WIE EINE NATIVE ANWENDUNG

    AUS. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2
  5. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 ANGULAR 2 - 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 9
  6. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 ANGULAR 2 - PARADIGMA ▸

    Komponentenorientierung ▸ Erlaubt Entwicklung nach dem MV*-Entwurfsmuster ▸ Ziel: Reusability, Skalierung ▸ Baut auf TypeScript ▸ Zentrale Konstrukte ▸ Komponente: Abgeschlossener und wiederverwendbarer Softwarebaustein ▸ eigene UI, eigenes Routing etc. ▸ Service: Wiederverwendbare Klassen ohne UI ▸ Bspw. für Client-seitige Business- Logik 10
  7. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 GITHUB ELECTRON ▸ Cross Platform

    Desktop Framework von GitHub ▸ Container für HTML5-Anwendungen ▸ Bereitstellung plattformübergreifender nativer Funktionalitäten ▸ Automatische Updates ▸ Crash Reporting ▸ npm$install$*g$electron*prebuilt 11
  8. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 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 12
  9. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 ELECTRON - ARCHITEKTUR ▸ Trennung

    in zwei unabhängige Prozesse ▸ Main-Prozess ▸ Render-Prozess ▸ Kommunikation zwischen den Prozessen ▸ IPC ▸ Remote Require 13
  10. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 ELECTRON - MAIN-PROZESS ▸ Main

    Prozess ▸ Node.js ▸ Electron APIs ▸ Tray ▸ Application Menu ▸ Benachrichtigungen ▸ u.v.m. 14
  11. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 ELECTRON - RENDER-PROZESS ▸ Darstellung

    durch Chromium ▸ Basis-Engine von Google Chrome ▸ Chrome Developer Tools 15
  12. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 APACHE CORDOVA ▸ Verpackt Web-Anwendungen

    in native App-Pakete für mobile Plattformen ▸ Unterstützte Plattformen: Windows Universal, iOS, Android, BlackBerry 10, Tizen etc. ▸ Unterstützung nativer Funktionalitäten über Plugins ▸ Implementierung einer nativen Funktion mit der nativen Programmiersprache ▸ Kapseln dieser Funktionalität in plattformübergreifende JavaScript-APIs ▸ z.B. Zugriff auf Kontakte, Statusbar u.ä. ▸ npm$install$*g$cordova 16
  13. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 TACO ▸ http://taco.tools ▸ Tools

    for Apache Cordova ▸ Toolchain von Microsoft ▸ CLI für schnelles Projekt-Setup ▸ Bezieht alle notwendigen Abhängigkeiten ▸ Kits: verifizierte Zusammenstellung von Cordova- und Plugin-Versionen ▸ npm$install$*g$taco*cli 17
  14. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 CHANNEL9 - THEMENTAG ▸ Video-Serie

    zu “Cross Plattform Entwicklung mit HTML5 & JavaScript” ▸ https://channel9.msdn.com/Series/Thementag-Cross-Plattform-Entwicklung-mit- HTML5--Javascript ▸ 8 Sessions 18
  15. DEMO-APP CROSS PLATFORM BoardZ! auf GitHub MacOS X Windows.Desktop iOS

    Android Windows.Mobile Browser Browser Browser Windows.10./.UWP Linux