Slide 1

Slide 1 text

Cross-Plattform Apps für Windows, Web & Mobile mit AngularJS und Cordova [email protected] @christianweyer

Slide 2

Slide 2 text

Talking Points Modern applications Target architecture Web-based application technologies Web going native End-to-end process automation 2

Slide 3

Slide 3 text

Modern Applications Cross platform != Mobile Mobile != Phones & Tablets 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

„Write once, run anywhere – v2“ ??? 5

Slide 6

Slide 6 text

Target Architecture Groundhog day: „Hey babe, I got you babe…“ 6

Slide 7

Slide 7 text

7

Slide 8

Slide 8 text

8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Web-based Application Technologies „I didn‘t know I can do that!“ 10

Slide 11

Slide 11 text

HTML5 as a Platform HTML5 ~= Semantic markup + CSS3 + JavaScript An application development platform 11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

„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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Web going native Use the best from both worlds. 15

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Platform support 17 http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

End-to-end Process Automating the goodness. 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Summary Building cross-platform applications beyond mobile devices 22

Slide 23

Slide 23 text

Cross-Platform Security ADFS Customer Accounts AAD Thinktecture IdentityServer https://github.com/thinktecture/Thinktecture.IdentityServer.v3 23

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

© 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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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 [email protected] @christianweyer Thinktecture AG http://www.thinktecture.com 27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Interview (deutsch) Echtes Cross-Plattform statt einfache Apps http://windowsdeveloper.de/videos/ echtes-crossplattform-statt-einfache-apps-176440 29

Slide 30

Slide 30 text

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