Cross-Plattform Apps für Windows,
Web & Mobile mit AngularJS und Cordova
christian.weyer@thinktecture.com
@christianweyer
Talking Points
Modern applications
Target architecture
Web-based application technologies
Web going native
End-to-end process automation
2
Modern Applications
Cross platform != Mobile
Mobile != Phones & Tablets
3
The ‚Continuous Screen‘
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
4
„Write once, run anywhere – v2“ ???
5
Target Architecture
Groundhog day: „Hey babe, I got you babe…“
6
7
8
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
Web-based Application
Technologies
„I didn‘t know I can do that!“
10
HTML5 as a Platform
HTML5 ~= Semantic markup + CSS3 + JavaScript
An application development platform
11
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
„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
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
14
Dependency injection
Models
Views
ViewModels
Web going native
Use the best from both worlds.
15
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
Platform support
17
http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support
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
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
End-to-end Process
Automating the goodness.
20
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
Summary
Building cross-platform applications
beyond mobile devices
22
Cross-Platform Security
AAD
ADFS
Thinktecture
IdentityServer
Customer Accounts
23
https://github.com/thinktecture/Thinktecture.IdentityServer.v3
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
Vielen Dank!
Christian Weyer, Thinktecture AG
@christianweyer
© 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.
25
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
Resources
node-webkit
https://github.com/rogerwang/node-webkit
CEFSharp
https://github.com/cefsharp/CefSharp
Christian Weyer
christian.weyer@thinktecture.com
@christianweyer
Thinktecture AG
http://www.thinktecture.com
27
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
Interview (deutsch)
Echtes Cross-Plattform statt einfache Apps
http://windowsdeveloper.de/videos/
echtes-crossplattform-statt-einfache-apps-176440
29
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