Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron

Der Traum von einer einzigen Codebasis für alle Client-Plattformen – er lebt immer noch.
In dieser Session zeigt Christian Weyer, wie weit dieser Traum Wirklichkeit werden kann, mit HTML5 & JavaScript/TypeScript sowie aktuellen Cross-Plattform-Werkzeugen.
Auf Basis moderner UI/UX-Konzepte lassen sich Oberflächen für Desktops, Tablets und Smartphones entwerfen – mit einer Code-Basis. Mischt man diesen Ansatz mit Tools wie Cordova und Electron, kann man mit Single-Page-Applications-Frameworks wie Angular echte Anwendungen für alle relevanten Plattformen und Device-Größen bauen, mobile und für den Desktop: Windows, Linux, MacOS, iOS, Android & Co. – und natürlich den Browser.

Transcript

1. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron Christian Weyer @christianweyer CTO & Principal Consultant
2. § Co-founder, co-owner and principal consultant at Thinktecture AG § Focus on § Mobile & web-based application architectures § Interoperability, cross-device § Cloud-native solutions § 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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 2
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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 3
4. Modern business applications Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 4
5. Mobile! Mobile! Mobile! https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 5
6. Single-platform vs. multi-platform vs- cross-platform Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 6
7. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron Real cross-platform & cross-form-factor 7
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” Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 8
9. It’s a feature But that doesn’t look like a native application! Exactly. Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 9
10. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 https://spotifyblogcom.files.wordpress.com/2014/12/overview.png 10
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 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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 11
12. The web as a platform Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 12
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 13
14. § Client-side 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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 14
15. Web & native environments Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 15
16. § Toolkit and framework for building native application shells for our web apps (aka hybrid 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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 16
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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 17
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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 18
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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 19
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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 20
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. “Write once, run anywhere?” Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 22
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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron The Future: Progressive Web Apps (PWA) 23 App Shell / Fast Rendering App Manifest Home Screen HTTPS / HTTP/2 Service Worker Offline Cache & Data Background Sync Push Notifications
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 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron 24
25. § Simple sample for building modern cross-platform applications with Angular, Cordova & Electron – and CEFSharp § https://github.com/thinktecture/herbstcampus-2017 Echte Cross-Plattform-Anwendungen mit Angular, Cordova & Electron Demo application 25
26. 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 26