Multi-device apps withVisual Studio tooling for Apache Cordova™Amanda Silver

DEV-B323

Cloud Scenarios for Enterprise DevelopersDev & Test

in the Cloud

Mobile AppsIn the Cloud

Hybrid Apps

Web SitesIn the Cloud

Native - Rich

Desktop reassurance

• WPF core investments• Access to modern features• Common distribution• Easier transition to Store apps

Native and web investments

Web - Reach

Modern web

• Productive HTML5 development

• Highly interactive web with JavaScript and TypeScript.

• Ready for Enterprise LOB apps and cloud modernization

Optimize for devices

• Universal apps and native compilation

• Cross-device Windows, iOS, Android native apps (thru Xamarin)

Embrace hybrid apps

• Cordova tooling support built on existing Modern Web support in

Visual Studio and TypeScript.• Android, iOS support including

the entire developer flow.

HTML

Productivity of Visual Studio for hybrid apps

Scale to complex Enterprise apps through optional TypeScript support

End-to-end development workflow included

Flexibility to use any JavaScript framework

Visual Studio tools for Apache Cordova™

Hybrid-HTML apps

New Cordova tooling in Visual Studio

Natural path for web developers targeting devices

Shortest path for cross-platform mobile

Especially relevant for Enterprise B2E scenarios

Black Box

CSS | HTMLJavaScript | TypeScript

What it does…

What it doesn’t do…

End to End Workflow for Hybrid Mobile App

Value Prop

Value Prop

What it does…

What it doesn’t do…

Black Box10

21 Manage Device

Capabilities 3Manage

ServiceCapabili

ties 4Edit Code 5Edit

& Style

UI 6Build & Run 7Debug &

Diagnose 8CI &Cloud Build 9 Publish &

ManageTest on Device

s

Highly iterative, not sequential

Create Project

Adding new features, platforms, capabilities pushes backwards

Demo

Hybrid cross-platform mobile development• Tools for Apache Cordova™ in Visual Studio

Step 0

Acquisition

Installs

Step-by-step Guide

OSS pre-reqs (Ant, Android SDK, Git, node.js, etc.)

Visual Studio Extension

Visual Studio Update (debugging)

Details each step of configuration for your development machine including gotchas

Black Box

Step 1

Create New

Templates

Notes

JavaScript & TypeScript

Blank templates

AngularJS

Backbone + Underscore + jQuery

WinJS (base.js + ui.js)

Black Box

Samples

Step 2Manage Device Capabilities

Config EditorSimilar to Windows App Manifest with cross-platform capabilities included as part of Cordova

Can manually update plug-in versions via XML or pull custom plugins from plugins.cordova.io

Locks to version dependencies to avoid breaks

Also supports ability to add local custom native plug-ins

Black Box

What it does…

What it doesn’t do…

Connecting your app with Services

It’s easier than ever to build applications that use Microsoft services. Add a

service to your app in

Visual Studio

Configure your service

settings

Write code to use the

service

Azure Active Directory

AuthenticationOffice 365 Exchange &

Files

Azure Mobile Services

Auth, Data, & PushApplication

Insights Analytics

Step 3

Step 6

Build & Run

BuildUses Cordova CLI

Custom build process to optimize for iterative loop

Launch remote build agent

Initiate deployment to iOS simulator

Remote build to in-network OSX

Step 7

Debug & Diagnose

Same great Visual Studio debug experienceBreakpoints, DOM Inspection, Just-my-code

Call-stacks, Locals, Watch

TypeScript Source Mapping

Debug against Simulator, Emulator, Device targets

(Windows & Android 4.4+ for best experience)

Black Box

But now with additional targets

Step 10

Publish & Manage

Deploy via Windows Intune

Black Box

Manage distribution & version updates

Built in data points optimized for mobile apps

Support for custom events

Monitor via Application Insights

Deploy Via iTunes for local iOS device

Download the Preview

Build & Test for the breadth of devices

Deploy your app via Windows Intune

Monitor with Applications Insights

Breathe

Come on, bring your own device!We can handle it.

Breakout Sessions

Related content

Find Me Later At. . . “the Booth”

FDN-05 – The Microsoft Application Platform for Developers: Create Applications that Span Devices and Services

DEVB310 – Getting Started with TypeScript

DevB333 – Sharing Code and UI with Universal Projects and Windows Library for JavaScript (WinJS)

DevB221 – Native Mobile Application Development for iOS, Android, and Windows in C# and Visual Studio

DEVB420 – Building Rich Apps with AngularJS on ASP.NET

2:15 – 4:00 TODAY!

Developer Platform and Tools

Visit the Developer Platform & Tools BoothHaving a friend buy your coffee?Yea, it’s kind of like that.

MSDN Subscribers get up to $150/mo in Azure credits.

Stop by the Developer Platform and Tools booth and visit the MSDN Subscriptions station to activate your benefits and receive a gift!

http://aka.ms/msdn_teched

3 Steps to New Gear! With Application Insights

1. Create a Visual Studio Online account http://visualstudio.com

2. Install Application Insights Tools for Visual Studio Online http://aka.ms/aivsix

3. Come to our booth for a t-shirt and a chance to win!

VSIP QR Tag Contests Visit our booth to join the hunt for cool prizes!

ResourcesMicrosoft Engineering Stories

How Microsoft Builds Softwarehttp://aka.ms/EngineeringStories

Visual Studio Industry Partner Program

Meet Our New Visual Studio Online Partners or Join Now.http://vsipprogram.com

Visual Studio | Integrate

Create Your Own Dev Environmenthttp://integrate.visualstudio.com

Development tools & services for teams of all sizeshttp://www.visualstudio.com

Complete an evaluation and enter to win!

Evaluate this session

Scan this QR code to evaluate this session.

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. 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.