Cross-Platform Mobile App Development with Cordova and Sencha Visual Studio

Code PluginRyan J. Salva, Microsoft

Sandeep Adwankar, Sencha

42% of professional developers are building mobile apps

58%

42%

Desktop & Server MobileVisionMobile 2016 Mobile Developer Report

17% of enterprise developers are building mobile apps

83%

17%

Desktop & Server MobileVisionMobile 2016 Mobile Developer Report

Innovators

Early Adopters

Early Majority

Late Majority Laggards

Consumer AppsLate majority market

Revenue through the app store

Enterprise AppsVery early majority market

Mobile apps are a cost centerDeployed to private stores

Modern AppsSystems of Engagement

and Innovation

Delivering personalized context

Direct to consumer

Short Time to Market

Each App for a concrete scenario

Companion LOB Client apps

In-the-moment tasks

New innovative UI

Open to Social networks

Targeting partners, employees and customers.

Mobile & Web

DESK

TOP

DEVICES

MOBILE

SOCIAL

WEB

Systems of Record

Foundational LOB Applications

Long-term

Foundational processes

Long development cycle

Departmental applications

Development productivity

Targeting employeesQoS

Core-Business

Dev. Easy to get started

Modern and Mobile Applications

More people use JavaScript than any other language

JavaScript

SQL

Java

C#

PHP

Python

C++

C

Node JS

Angular JS

Ruby

Objective-C

0% 10% 20% 30% 40% 50% 60%

Stack Overflow Developer Survey, March 2016

2X the Nearest Competitor

PhoneGap/Cordova

Xamarin

Unity

Qt

Adobe Air

Appcelerator

Corona

Marmelade

Codename One

Live Code

0% 10% 20% 30% 40% 50% 60% 70%61%

35%

31%

18%

15%

13%

12%

9%

4%

3%

Prioritize this tool Using this toolVision Mobile Analysis of Cross-Platform Development, July 2015

Who’s using hybrid?

Untappd

WeChat

Zynga Mob Wars

Swork It

Instagram

Feedly

Uber

AT&T

Apple App &Book Stores

So… yeah. It works.

What is Apache Cordova?

• Open-source framework• Hosted webview• Single, shared codebase deployed

to all targets• Plugins provide a common JS API to

access device capabilities• About 6% of apps in stores

(13% in enterprise)

Native Wrapper

<webview>Your JavaScript App

Cordova Plugin JS API

Xcode• HTML, CSS, JS• iOS Runtime• iOS Plugins• iOS Config

Visual Studio• HTML, CSS, JS• Windows Runtime• Windows Plugins• Windows Config

Android Studio• HTML, CSS, JS• Android Runtime• Android Plugins• Android Config

Cordova• HTML, CSS, JS • Resources• Configuration• Platform code• Plugin code

Build

Sencha Ext JS• HTML, CSS, JS • Resources• Configuration

UniversalWindows App

Native iOS App

NativeAndroid App

Platform Build ToolsDev. Environment Command Line Tools

Create

Visual Studio Code

2.0JavaScript

TypeScript

C++

HTML

C#

Go

Python

PHP

F#

Node JS

JSON

And more…

2 Million Installsin the first 6 months

100+ 300+ 1,000+LanguagesSupported

Pull RequestsContributed

ExtensionsCreated

TernJS

Eclipse Visual Studio IDE VS Code

Ext JS

Sencha Cmd

Sencha Visual Studio Code Plugin Architecture

Provides language services

Sencha VS Code Plugin - Now Early Access Available

• Supports Ext JS 4+ (non-minified versions)

• Works with custom classes and overrides in addition to framework

• No update required when upgrading the framework

Visual Studio Code Extensions

• Intellisense

• Code Generation

• Code Navigation

• Command Line Tools

• Documentation Lookup

• Debugging

Let’s code.

NEW

CodePush uploads your JavaScript package to the cloud (Azure)

After building your Sencha app, run:$ cd cordova$ code-push release-cordova [app] [platform]

Phone asks, “Hey, Azure! Do you have an update for me?”Azure says, “Yup! Here’s a ZIP with all the web assets.”

Code-Push extracts ZIP and replaces the contents of /www

Let’s code push.

Sencha VS Code Plugin

IntelliSense – Code Completion

• Properties

• Keys in Configs

• xtypes

• Events

Code Navigation

Supports code navigation for

• class name

• xtypes and other type aliases

• methods and properties

• config keys

• events

Documentation Lookup

Supports documentation lookup (F1) for Ext JS

• class name

• xtypes and other type aliases

• methods and properties

• config keys

• events

Code Generation - Create New Ext JS App

Code Generation - Template Creation

• Classes

• Views

• View Models

• View Controllers

• Models

• Controllers

• Stores

Integration with Sencha Cmd

• Watch app source code for changes

• Rebuild outputs

• Web Server is started and hosts app

• See compilation errors as they happen

Debugging Ext JS Apps

• Microsoft’s “Debugger for Chrome” extension

• Launch Chrome browser with remote debugging enabled

• Attach extension to the browser

• Start debugging F5

http://aka.ms/sencha-code Early Access VS Code Plugin

Available for all Ext JS packages (Std. Pro. Prem.)Follow us on Twitter! @ryanjsalva @adwankar