Echte Cross-Plattform Anwendungen mit Angular, Cordova & 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/UXKonzepte 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, macOS, iOS, Android und Co. – und natürlich den Browser. Sehen Sie all dies in Action!

Transcript

1. Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron Christian Weyer @christianweyer CEO & Principal Consultant
2. § Co-founder, co-owner and principal consultant at Thinktecture AG § Focus on § Mobile & web-based application architectures § Interoperability, cross-device § Pragmatic end-to-end solutions § Microsoft MVP for ASP.NET (Architecture) ASPInsider, AzureInsider § Google GDE for Web Technologies § christian.weyer@thinktecture.com § @christianweyer Christian Weyer
3. § Modern business applications § The Web: HTML5, CSS, {*}Script as a base § Angular: Smart client framework for the browser § Cordova: building mobile apps § Electron: creating desktop applications Topics
4. § https://github.com/thinktecture/angulardays-2017-spring- crossplatform Workshop repository
5. Modern business applications
6. Mobile! Mobile! Mobile! https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4
7. Single-platform vs. multi-platform vs- cross-platform
9. § 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 § Building UIs with one technology approach § But optimized for certain platforms and/or form factors “Mobile-First”
10. It’s a feature But that doesn’t look like a native application! Exactly.
11. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
12. § Service-based architectures § 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 HTTP HTTPS WebSocket Service A Service B Service C Web APIs (ASP.NET, Node.js, …) HTML5-Application (Single-Page Application) Web Cordova Electron
13. The web as a platform
14. § Web browser & HTML5 as a powerful platform § JavaScript & TypeScript as application programming languages § Angular as smart client application framework – or React, or… § Flexible layouts with CSS3 & flexbox Real applications
15. § 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
16. Web & native platforms
17. § 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 JS HTML CSS Native wrapper Deploy to devices
18. Cordova architecture 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
19. Cordova platform support 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
20. § 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
21. Electron architecture 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
22. § 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 § Angular CLI is based on Webpack Build process
23. “Write once, run anywhere?”
24. § Angular § https://angular.io § https://angular.io/docs/ts/latest/ guide/architecture.html § Bootstrap § http://getbootstrap.com/ § WinJS § http://try.buildwinjs.com/#angular § Material § https://material.angularjs.org § Cordova § http://cordova.apache.org/ § Electron § http://electron.atom.io/ § https://github.com/electron/electron- api-demos § Gulp § http://gulpjs.com/ § Webpack § https://webpack.github.io/ § Angular CLI § https://cli.angular.io/ Resources
25. Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron Christian Weyer @christianweyer christian.weyer@thinktecture.com