“Write once, run anywhere” – jetzt aber!? Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron

Der Traum von einer einzigen Codebasis für alle Clientplattformen: Er lebt immer noch. In dieser Session zeigt Ihnen Christian Weyer, wie weit dieser Traum mit HTML5/JavaScript und aktuellen Cross-Plattform-Werkzeugen Wirklichkeit werden kann. Auf Basis moderner UI/UX-Konzepte lassen sich Oberflächen für Desktops, Tablets und Smartphones entwerfen – mit einer Codebasis. Mischt man diesen Ansatz mit Tools wie Cordova und Electron, so kann man mit Single-Page-Applications-(SPA-)Frameworks wie Angular 2 echte Anwendungen für alle relevanten Plattformen und Devicegrößen bauen, Mobile und Desktop: Windows, Linux, Mac OS, iOS, Android und Co. – und natürlich den Browser. Kommen Sie vorbei und sehen Sie all dies in Action!

Transcript

1. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron “Write once, run anywhere” – jetzt aber!? Christian Weyer @christianweyer Principal Consultant & CEO
2. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? Thinktecture AG - http://thinktecture.com § Christian Weyer § 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. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § 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. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? Modern business applications 4
5. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? “Mobile! Mobile! Mobile!” ? https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4 5
6. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? Cross-Platform
7. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § 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 an even more important part of software development § Facing new challenges – use case-driven § Building UIs with one technology approach § Optimized for certain platforms and/or form factors “Mobile-First” 7
8. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? It’s a feature But that doesn’t look like a native application! Exactly. 8
9. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § “We need an app!”... § Service-based architectures needed § Web / REST APIs § Use any platform server-side § Express or Restify § Jersey § ASP.NET Web API § Push Services § socket.io § SignalR § Consider Offline-first § Heavily influences your architecture and entire project Target architecture 9
10. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? The web as a platform 10
11. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § 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. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § 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 Component-based applications with Angular 2 12
13. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § Angular 2 bets on TypeScript § Components are built as classes and 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. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? Web & native platforms 14
15. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § 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. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? Cordova architecture 16 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
17. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? Cordova platform support 17 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
18. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § 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. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? 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. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § 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. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? “Write once, run anywhere?” 21
24. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § Demo application § http://bit.ly/hacks-wjax2016 § Contact § christian.weyer@thinktecture.com § @christianweyer Thank you!
25. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § 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. Cross-Plattform-Anwendungen mit Angular 2, Cordova und Electron Write once, run anywhere – jetzt aber!? § 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