Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Thorsten Hans @thorstenhans Consultant Christian Weyer @christianweyer CTO 

§ Co-founder, co-owner and CTO at Thinktecture AG § Focus on § Mobile & web-based application architectures § Pragmatic end-to-end solutions § Cloud-native architectures § Microsoft Regional Director § Microsoft MVP for ASP.NET (Architecture) ASPInsider, AzureInsider § Google GDE for Web Technologies § [email protected] § ! @christianweyer § Consultant at Thinktecture AG § Focus on § Cross-Platform applications § Kubernetes § Cloud-native architectures § Microsoft MVP for Visual Studio and Development Tools § [email protected] § ! @ThorstenHans § https://thorsten-hans.com Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Christian Weyer Thorsten Hans 2 

3 § Modern business applications § Serverless architectures in Azure § Angular § Progressive Web Apps § Cordova § Electron § Q&A Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Topics 

4 Modern Business Applications Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

5 § Native operating systems & platforms get less important for users § Windows, Linux, macOS, Android, iOS: a mixture of everything, anywhere § Desktop is still important, not everything is mobile § Software developers need to care about & target ubiquitous systems § Depending on the actual audience, on the actual use cases § APIs as a standard entry point into business services § HTTPS-based § WebSockets etc. § The web has proven to be a universal platform Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Modern Business Applications 

6 § Single Page Applications (SPAs) are the new smart clients Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Modern Business Applications & the Web 

7 Distributed Architectures Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

8 Serverless Architectures Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

9 § We can choose from a continuum § VM ➔ § Containers ➔ § Orchestrators ➔ § PaaS ➔ § Serverless Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Evolution to Cloud Compute Continuum PaaS IaaS On-Premises Serverless 

10 What is Serverless, anyway? Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

11 § Serverless Compute → Azure Functions § Serverless Database → Azure Cosmos DB § Serverless Events → Azure Event Grid § Serverless Workflows → Azure Durable Functions Azure Logic Apps § Serverless Analytics → Azure Application Insights § ... and more: https://azure.microsoft.com/en-us/overview/serverless-computing/ Angular, Cordova, Electron, PWA & Serverless Backends Serverless in Azure (Serverless != FaaS-only) Modern Cross-Platform Business Applications with 

12 Angular Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

13 § 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 Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

14 Progressive Web Apps Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

15 § Applications should… § Feel & behave like a native app § Be installable, without (classic) app stores § Be able to work completely offline, without any server connections § Receive push notifications, without running § offer in-app payment options § PWAs are both, mobile and desktop § Progressive Web Apps are not a technology, rather a collection of characteristics an application must/should support § An “Uber Pattern” § Various technologies are available to progressively enhance an application § Some outstanding standards like Web App Manifest, Service Worker Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Progressive Web Apps (PWA) – the Web gets more native 

Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Offline Capability with Service Worker Mobile or Desktop system Remote storage Server HTTPS 16 Browser sandbox Web App HTML/JS Cache storage fetch Service Worker 

17 Mobile Apps with Cordova Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

18 § Toolkit and framework for building native application shells for our web apps § Make ‘app apps’ from ‘web apps’ J - for iOS, Android (and others) § 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 Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

19 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 Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

20 Desktop Applications with Electron (& CEF) Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

21 § 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 Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

22 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 Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with 

23 § 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 Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends https://en.wikipedia.org/wiki/Chromium_Embedded_Framework 

24 § Modern business applications (MBAs) need APIs to talk to § Could be full–blown Web API with microservices § Could be lightweight, highly specialized Functions § Modern business applications need to run anywhere § The Web is the perfect platform nowadays § Angular is a proven & mature SPA framework for building MBAs § Progressive Web Apps & related technologies can enhance the functionality and user experience without native application shells § Cordova can be used to create native apps from SPAs & interact with the mobile platforms § Electron & CEF can be applied to create native desktop applications & interact with the operating systems Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Summary 

Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Thorsten Hans @thorstenhans [email protected] Christian Weyer @christianweyer [email protected] Thank you! https://github.com/thinktecture/techorama-2018-mba-ws