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 mitTools 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 CTO
2. 2 § Co-founder, co-owner and CTO at Thinktecture AG § Focus on § Mobile & web-based application architectures § Interoperability, cross-device § Pragmatic end-to-end solutions § Cloud-native architectures § Microsoft MVP for ASP.NET (Architecture) ASPInsider, AzureInsider § Google GDE for Web Technologies § christian.weyer@thinktecture.com § ! @christianweyer Christian Weyer mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
3. 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
4. 4 Modern business applications mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
5. 5 Mobile! Mobile! Mobile! https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
6. 6 Single-platform vs. multi-platform vs- cross-platform mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
7. 7 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen Real cross-platform & cross-form-factor
8. 8 § 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 (UX) 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” mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
9. 9 It’s a feature But that doesn’t look like a native application! Exactly. mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
10. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
11. 11 § 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 Cloud-native approaches like (event-driven) Serverless architectures § Offline-first is a different game! 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
12. 12 The web as a platform mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
13. 13 § 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 Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron
14. 14 § Smart clients with single page applications (SPA) § Open source, bets heavily on TypeScript § Features § Consequently component-based § Metadata-driven § Focus on proven patterns and separation of concerns § Components, views, view models § Services and dependency injection § Large tooling ecosystem and platform tools available § Angular CLI § IDEs like WebStorm, Visual Studio Code Component-based applications with Angular mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
15. 15 Web & native environments mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
16. 16 § 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
17. 17 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
18. 18 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
19. 19 § Create desktop applications from web apps § Hybrid approach, similar to Cordova § 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 available Desktop applications with Electron mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
20. 20 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 mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
21. 21 § Integrate HTML SPA apps into your existing C++, Java or .NET applications § Extend with new functionality to be shared with e.g. Web or mobile § Smoothly migrate away from Windows Forms, UWP § Chromium Embedded Framework (CEF) § Simple framework for embedding Chromium-based browsers in other applications § JCEF § Embedding CEF in other applications using Java § CEFSharp § .NET (WPF and Windows Forms) bindings for CEF Existing applications: Integration & Migration with CEF Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron 21 https://en.wikipedia.org/wiki/Chromium_Embedded_Framework
22. 22 “Write once, run anywhere?” mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
23. 23 § Native App-like user experience – but in the web browser § Initiative led by Google § Mozilla & Microsoft are in the boat, Apple is starting to act… § Typical PWA ‘features’, provided by browser engines § Not a product or framework – JS/SPA framework-independent mit Angular, Cordova & Electron The Future: Progressive Web Apps (PWA) App Shell / Fast Rendering App Manifest Home Screen HTTPS / HTTP/2 Service Worker Offline Cache & Data Background Sync Push Notifications Echte Cross-Plattform Anwendungen
24. 24 § Real cross-platform with Web-based technologies § SPA frameworks like Angular enable Java, .NET etc. developers to quickly move into the new world § Angular (plus a broad range of tools) enable spectrum of client application shapes § Purely web § Purely native § Hybrid, optimized for mobile § Hybrid, for web, desktop and mobile § Progressive Web Apps (PWA): Maybe we will no longer need Cordova, Electron et. al. in the future? Summary mit Angular, Cordova & Electron Echte Cross-Plattform Anwendungen
25. 25 Angular • https://angular.io Angular CLI • https://cli.angular.io/ Cordova • http://cordova.apache.org/ Electron • http://electron.atom.io/ • https://github.com/electron/electron-api-demos CEF • https://bitbucket.org/chromiumembedded/cef CEFSharp • https://github.com/cefsharp/CefSharp JCEF • https://github.com/cefsharp/CefSharp Progressive Web Apps (PWA) • https://developers.google.com/web/progressive-web-apps/ Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron Resources 25
26. Echte Cross-Plattform Anwendungen mit Angular, Cordova & Electron Christian Weyer @christianweyer christian.weyer@thinktecture.com Workshop Demo § https://github.com/thinktecture/angulardays-2018-spring-crossplatform