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!

Transcript

1. ECHTE CROSS-PLATTFORM- ANWENDUNGEN MIT ANGULAR 2 IN ACTION! Christian Weyer
 @christianweyer
2. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 CHRISTIAN WEYER ▸ Microsoft MVP für ASP.NET (Architektur) ▸ Google GDE für Web-Technologien ▸ christian.weyer@thinktecture.com ▸ @christianweyer ▸ http://thinktecture.com VORSTAND & PRINCIPAL CONSULTANT @ THINKTECTURE AG 2
3. 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
4. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 ZIELARCHITEKTUR 4
5. 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
6. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 CROSS-PLATFORM-TECHNOLOGIESTACK 6 SINGLE-PAGE WEB APPLICATIONS - ONE CODEBASE
7. DAS SIEHT JA ABER GAR NICHT WIE EINE NATIVE ANWENDUNG AUS. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2
8. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 TypeScript 8
9. 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
10. 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
11. 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
12. 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
13. 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
14. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 ELECTRON - MAIN-PROZESS ▸ Main Prozess ▸ Node.js ▸ Electron APIs ▸ Tray ▸ Application Menu ▸ Benachrichtigungen ▸ u.v.m. 14
15. ECHTE CROSS-PLATTFORM-ANWENDUNGEN MIT ANGULAR 2 ELECTRON - RENDER-PROZESS ▸ Darstellung durch Chromium ▸ Basis-Engine von Google Chrome ▸ Chrome Developer Tools 15
16. 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
17. 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
18. 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
19. DEMO-APP CROSS PLATFORM BoardZ! auf GitHub MacOS X Windows.Desktop iOS Android Windows.Mobile Browser Browser Browser Windows.10./.UWP Linux