Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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!


Christian Weyer

November 12, 2014

More Decks by Christian Weyer

Other Decks in Programming


  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…“

  7. 7

  8. 8

  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!“

  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