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

Modern business applications are facing entirely different challenges today. End-users are used to just leverage their mobile phone, tablets, laptops and (maybe) desktop computers. Applications, data and processes just need to work, just need to “be there” – regardless of the application hosting and provisioning model. Developers should realize these ever-changing challenges and should address possible approaches for ubiquitous solutions. In this full-day workshop, Thorsten and Christian from Thinktecture show you a way how to design, architect, implement and run modern business applications – end-to-end. Come and see how to provide lightweight APIs into your business processes via Serverless technolgoies and architectures in Azure. Feel the power of real-cross platform HTML5 SPAs – e.g. based on Angular – to offer a use-case-optimized user experience across all platforms on any devices and runtimes. Let’s start with Angular web applications for the browser and augment them to have native functionalities on the mobile platforms with Apache Cordova and on desktop operating systems with GitHub Electron. Last but not least, join us for a sneak preview into a hopefully not too disitant future: Progressive Web Apps (PWA) could be the ever-lasting ultimate app model for everybody. Apps without the need to install, just running inside the browser engines with power to interact natively. Sounds too good? Let’s see – all this in action!

Transcript

1. Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Thorsten Hans @thorstenhans Consultant Christian Weyer @christianweyer CTO
2. § 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 § christian.weyer@thinktecture.com § ! @christianweyer § Consultant at Thinktecture AG § Focus on § Cross-Platform applications § Kubernetes § Cloud-native architectures § Microsoft MVP for Visual Studio and Development Tools § thorsten.hans@thinktecture.com § ! @ThorstenHans § https://thorsten-hans.com Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Christian Weyer Thorsten Hans 2
3. 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. 4 Modern Business Applications Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with
5. 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. 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. 7 Distributed Architectures Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with
8. 8 Serverless Architectures Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with
9. 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. 10 What is Serverless, anyway? Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with
11. 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. 12 Angular Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with
13. 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. 14 Progressive Web Apps Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with
15. 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
16. 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. 17 Mobile Apps with Cordova Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with
18. 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. 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. 20 Desktop Applications with Electron (& CEF) Angular, Cordova, Electron, PWA & Serverless Backends Modern Cross-Platform Business Applications with
21. 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. 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. 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. 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
25. Modern Cross-Platform Business Applications with Angular, Cordova, Electron, PWA & Serverless Backends Thorsten Hans @thorstenhans thorsten.hans@thinktecture.com Christian Weyer @christianweyer christian.weyer@thinktecture.com Thank you! https://github.com/thinktecture/techorama-2018-mba-ws