Cross-Platform Applications for Windows, Web & Mobile with AngularJS and Cordova

Originally German session title for the Microsoft Technical Summit 2014 in Berlin. But all slides are in English!

Transcript

1. Cross-Plattform Apps für Windows, Web & Mobile mit AngularJS und Cordova christian.weyer@thinktecture.com @christianweyer
2. Talking Points Modern applications Target architecture Web-based application technologies Web going native End-to-end process automation 2
3. Modern Applications Cross platform != Mobile Mobile != Phones & Tablets 3
4. Today: focus on mobile devices & apps But what is mobile, anyway? From a small phone to a large phone to a small tablet to a large tablet to a small desktop – you get it…  We need UX & technologies to realize the Continuous Screen Adaptive user interfaces with optimized user experience With one code base & target architecture The ‚Continuous Screen‘ 4
5. „Write once, run anywhere – v2“ ??? 5
6. Target Architecture Groundhog day: „Hey babe, I got you babe…“ 6
9. Technology stack Request/response: Lightweight Web/HTTP APIs ASP .NET Web API Bi-directional: Push Services ASP .NET SignalR Token-based security Token & authorization servers Ubiquituous clients Web-based application technologies 9
10. Web-based Application Technologies „I didn‘t know I can do that!“ 10
11. HTML5 as a Platform HTML5 ~= Semantic markup + CSS3 + JavaScript An application development platform 11
12. JavaScript + Markup + CSS3 JavaScript as application language Optionally TypeScript AngularJS as application framework: MVVM Alternatives like EmberJS, KnockoutJS Templating frameworks for building views AngularJS has built-in templating Bootstrap as common-base layout system More app-like UX frameworks like WinJS or Materials 12
13. „I didn‘t know that!“ We can build large-scale applications with JavaScript We can have IntelliSense with JavaScript We can debug & profile JavaScript We can use JavaScript for real-time 3D JavaScript slowly gets near-native in performance We can have a fresh look at JavaScript Upcoming ECMAScript6 is a big leap forward 13
14. MVVM with AngularJS AngularJS is a client-side JavaScript SPA framework Tries to take away complexities Tries to prepare the way for ECMAScript6 Tries to prepare the way for Web Components Focus on separation of concerns with patterns Dependency injection Models Views ViewModels 14
15. Web going native Use the best from both worlds. 15
16. Native Web-based Mobile Apps: Cordova Framework & tools to create native apps from HTML5/JS codebase Wrapping your HTML5 code into native app shell Hook into platform features & events with APIs Extend app functionality with plugins CLI tools for project creation Still needs native SDKs 16
17. Platform support 17 http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support
18. Native Plugins Plugins are composed of Single JavaScript interface used across all platforms Native implementations with platform-specific plugin interfaces Core Cordova APIs are implemented using this architecture Installation via CLI Configuration via config.xml AngularJS integration via ng-cordova 18
19. Visual Studio Multi-Device Hybrid Apps Visual Studio 2013 extension for building Cordova applications (in preview) Easy to setup Takes care of all necessary dependenices in one installer Offers project template to integrate with Cordova Debug Windows Store, Windows Phone, Android straight from VS 19
20. End-to-end Process Automating the goodness. 20
21. Automation with Cordova CLI Tools Develop, test & debug in browser (primarily) Build native apps with script using Corova CLI commands PowerShell or Bash One code base results in various platform binaries Mix that with node-webkit, optionally 21
22. Summary Building cross-platform applications beyond mobile devices 22
23. Cross-Platform Security ADFS Customer Accounts AAD Thinktecture IdentityServer https://github.com/thinktecture/Thinktecture.IdentityServer.v3 23
24. Cross-Plattform Apps für Windows, Web & Mobile mit AngularJS und Cordova Cross platform != Mobile, and Mobile != Phones/Tablets HTML/JavaScript-based frameworks like AngularJS enable real applications Cordova offers platform & tools for native integration & deployment Secure target architecture with Web APIs, Push services and authorization servers 24
25. © 2014 Microsoft Corporation. All rights reserved. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. Vielen Dank! Christian Weyer, Thinktecture AG @christianweyer 25
26. Resources Visual Studio Multi-Device Hybrid Apps (Preview) http://www.visualstudio.com/en-us/explore/cordova-vs.aspx Cordova http://cordova.apache.org/ AngularJS https://angularjs.org/ ng-cordova http://ngcordova.com/ 26
27. Resources node-webkit https://github.com/rogerwang/node-webkit CEFSharp https://github.com/cefsharp/CefSharp Thinktecture IdentityServer v3 https://github.com/thinktecture/Thinktecture.IdentityServer.v3 Christian Weyer christian.weyer@thinktecture.com @christianweyer Thinktecture AG http://www.thinktecture.com 27
28. Samples Simple AngularJS (with ASP .NET Web API) demo https://github.com/ChristianWeyer/UG-ngDemo myProducts end-to-end demo application https://github.com/ChristianWeyer/myProducts-End-to-End 28
29. Interview (deutsch) Echtes Cross-Plattform statt einfache Apps http://windowsdeveloper.de/videos/ echtes-crossplattform-statt-einfache-apps-176440 29
30. Addendum Going Desktop with node-webkit & CEF node-webkit allows for same approach as Cordova but aiming desktop applications Windows, Linux, MacOS X CEFSharp can be used to integrate web-based technologies into existing Windows applications For migration paths 30