Für Browser, Desktop & Mobile: Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova

Der Traum von einer einzigen Code-Basis für alle Client-Plattformen: er lebt irgendwie immer noch. In dieser Session zeigt uns Christian Weyer wie weit dieser Traum Wirklichkeit werden kann - mit HTML5, JavaScript, TypeScript und aktuellen Cross-Platform-Frameworks und -Werkzeugen. Auf Basis moderner UI/UX-Konzepte lassen sich Oberflächen für Desktops, Tablets und Smartphones entwerfen - mit einer Code-Basis.

Transcript

1. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile Christian Weyer @christianweyer Principal Consultant & CEO
2. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile Thinktecture AG - http://thinktecture.com § Microsoft MVP for ASP.NET § Google GDE for Web Technologies § Focus on cross-platform solutions – end-to-end § christian.weyer@thinktecture.com § @christianweyer Christian Weyer 2
3. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Modern business applications § The Web: HTML5, CSS, {*}Script as a base § Angular 2: Smart client framework for the browser § Cordova: building mobile apps § Electron: creating desktop applications Topics 3
4. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile Modern business applications 4
5. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile “Mobile! Mobile! Mobile!” ? https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4 5
6. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile Cross-Platform
7. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Modern lifestyle, modern way of working § Data and processes need to be mobile, not just the devices we use § Reach is important § Boundaries are blurring – and will vanish § User experience will become even more important § Facing new challenges – use case-driven § Building UIs with one technology approach § Optimized for certain platforms and/or form factors “Mobile-First” 7
8. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile It’s a feature But that doesn’t look like a native application! Exactly. 8
9. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Web / REST APIs § Express or Restify § Jersey § ASP.NET Web API § Push Services § socket.io § Atmosphere § ASP.NET SignalR § Consider Offline-first § Heavily influences your architecture and entire project Service-based architectures needed 9
10. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile The web as a platform 10
11. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Web browser & HTML5 as a powerful platform § JavaScript & TypeScript as application programming languages § Angular 2 as smart client application framework § Flexible layouts with CSS3 & flexbox Real applications 11
12. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Client-side single page applications (SPA) § Features § Consequently component-driven § Metadata-driven § Tooling ecosystem § Focus on proven pattern and separation of concerns § Components, views, view models § Services and dependency injection Angular 2 12
13. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Angular 2 bets on TypeScript § Components built as classes & described with metadata decorators Angular 2 & TypeScript @Component({ selector: 'game-details' templateUrl: 'game.html', }) export public class GameDetailsComponent { @Input() game: GameData; @Output() ended = new EventEmitter<GameData>(); … } … <game-details [game]="myCurrentGame" (ended)="onGameEnded($event)" > … 13
14. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile Web & native platforms 14
15. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Toolkit and framework for building native application shells for our web apps § Make ‘app apps’ from ‘web apps’ J § Uses native web view components to host the original web app locally § Provides framework and APIs via plugins to interact with underlying native platforms § CLI tools for automating project creation & build § We always need the native SDKs (e.g. iOS, Android, Windows) Mobile apps with Cordova 15 JS HTML CSS Native wrapper Deploy to devices
16. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile Cordova platform support 16 Android Blackberry 10 iOS Windows Phone 8 Windows (8.1 / 10, Phone 8.1) Cordova CLI MacOS, Windows, Linux MacOS, Windows, Linux MacOS Windows a Embedded WebView a x a x x Plugin Interface a a a a a
17. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile Cordova architecture 17 Mobile OS iOS Android Windows 10 UWP many more Cordova Application Cordova Plugins Geolocation Notifications Contacts Media Camera Custom Plugins HTML Rendering Engine (WebView) Single Page App HTML JS CSS Assets config.xml HTML APIs Cordova APIs OS APIs OS APIs Cordova Native APIs
18. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Create real desktop applications from web apps § Similar to Cordova’s base idea § Target Windows desktop, macOS, and Linux § Marriage of Chromium and Node.js § Independent of installed browsers on target machines § Does not need native SDKs to build final artifact § Access to native platform features § Electron API § Node modules ecosystem § Auto-updating and platform deployment Desktop applications with Electron 18
19. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile Electron architecture 19 Desktop OS Electron Renderer Process (technically Chromium) Electron Main Process (technically Node.JS) MacOS Windows Linux Your Single Page Application Electron API Your custom Node.JS modules IPC Remote Node.JS
20. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Build automation is important for effective development, testing and deployment § Gulp has been king for years § Large community § Lot of online resources § Many project experience § Webpack gains a lot of traction § Consider Angular CLI § Still evolving § Closed architecture by design Build process & automation 20
21. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile “Write once, run anywhere?” 21
24. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Demo application § http://bit.ly/hacks-xitaso2016 § Contact § christian.weyer@thinktecture.com § @christianweyer Thank you!
25. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Angular § https://angular.io § https://angular.io/docs/ts/ latest/guide/architecture.html § Bootstrap § http://getbootstrap.com/ § Material § https://material.angularjs.org § WinJS § http://try.buildwinjs.com/ #angular § Cordova § http://cordova.apache.org/ § Electron § http://electron.atom.io/ § Gulp § http://gulpjs.com/ § Webpack § https://webpack.github.io/ § Angular CLI § https://cli.angular.io/ Resources 25
26. Echte Cross-Plattform-Anwendungen mit Angular 2, Electron & Cordova Für Browser, Desktop & Mobile § Christian Weyer über leichtgewichtige Architekturen und Angular 2 § https://entwickler.de/online/web/service-architektur-angular-2-302663.html Xamarin, Angular oder Cordova? Erstmal die passende Service-Architektur! 26