DevelopingCross-Platform Mobile Apps using Apache Cordova

Mostafa Elzoghbi Sr. Technical Evangelist - MicrosoftTwitter: @MostafaElzoghbiwww.MostafaElzoghbi.com

Agenda• Apps dominates the mobile

web• Languages to build Mobile Apps• What is Cordova ?• How does Cordova work ?• Visual Studio Tools for Cordova• Cordova App vs Native Apps• Using CL Tools for Cordova• Cordova Apps Best Practices

Native Wrapper

<webview> or WWAhost

Your JavaScript App

Cordova Plugin JS API

Please interrupt me.Feel free to ask me questions

Way back machine: 2010

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

43%

64%

Time Spent in Apps vs. Browser

Apps Web Source: Flurry Analytics

Apps dominate the mobile web

2013 20140%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

80% 86%

20% 14%Time Spent in Apps vs. Browser

Apps Web Source: Flurry Analytics

HTML is the most popular language among mobile developers.

Source: Developer Economics State of the Developer Nation Q3 2014

HTML/Ja

vaScri

pt Java

C/C++

Objectiv

e-C C#

Visua

l Deve

lopmen

t Too

l

Java/C

offee

/Type

Scrip

tPH

PPyt

hon

Actio

nScri

ptRu

by Lua

42%

38%

26%24% 23%

17%15%

11%

7%

3% 3% 3%

The Languages Developers Know Best% of developers who consider them-

selves proficient by language

HTML trails closely behind Java and Objective-C as developers’ primary language.Source: Developer Economics State of the Developer Nation Q3 2014

Java

Objective-C

HTML/JavaScript

C#

C/C++

Visual Development Tool

Java/Coffee/Type Script

PHP

Python

ActionScript

Lua

Ruby

26%

17%

17%

14%

10%

8%

3%

1%

1%

1%

1%

1%

24%

20%

17%

13%

9%

7%

3%

1%

1%

1%

1%

1%

Primary Language Share% of developers using each as their

primary language

Full-time Professionals All Developer Segments

What is Cordova?• Open source framework• A web app in a native wrapper• Android + iOS use a webview• Windows uses WWAhost• Single, shared JavaScript

codebase deployed to all targets

• Plugins provide a common JavaScript API to access device capabilities

Native Wrapper

<webview>Your JavaScript App

Cordova Plugin JS API

Enter Apache Cordova6% of apps in stores14% of apps in the business category

Source:App Brain, April 2015

How does Cordova work?

Cordova Project

• HTML, CSS, JS, assets

• Configuration• Platform code• Plugin code

Visual Studio Project• HTML, CSS, JS, assets• Windows-specific runtime• Windows-specific plugin

code• Windows-specific

configurationXCode Project• HTML, CSS, JS, assets• iOS-specific runtime• iOS-specific plugin code• iOS-specific configuration

Android Project• HTML, CSS, JS, assets• Android-specific runtime• Android-specific plugin code• Android-specific

configuration

Create Build

Native Windows App

Native iOS App

Native Android App

How do I get it? In-box with Visual Studio 2015

Community Edition (Recommended) [[ FREE ]]

Visual Studio Code [[ FREE ]]

All the stuff you need Visual Studio installs and

uses the third party tools you need for multi-device development

As you use Visual Studio, each time it opens, it runs dependency checks and keeps up-to-date a verified stack of open source tools from the community

All the stuff you need Phone Emulator:

VS Emulator *New* Google Emulator *New* Ripple

Easy to deploy & Debug

Integration with needed mobile toolset

DEMOTools for Apache Cordova (TACO) in VS 2015

Use Cordova if you want to… Use your web skills & assets Maintain one codebase Use the JS libraries you love ( Jquery, AngularJS, Knockout, Ionic, …

etc)

You might be better off writing native apps if…

You’re want to build a consumer app in the top 3% You want different apps on different devices You ♥ Swift, Java, Objective-C or DirectX. If you love C#, consider Xamarin – ( Mobile Cross Platform

Development )

Should I build a Cordova app or Native apps?

Are you guys totally for serial about Cordova?

Yup.

Visual Studio has had support for Cordova for a year [[updated]]

VS2015’s Cordova investments include: 100% compatibility with Cordova CLI Updated Cordova, plugins, emulators, and OSS components Mac Only SDKs & connect to Mac remote build Additional app services support for mobile services, auth, O365, and analytics

Windows is committed to building and growing a first class Cordova platform

Major Windows investment for Cordova included: Hosted app content & webview support with WinRT access Security model redesign Contribution of all Cordova code to the Apache Cordova OSS project

• Cordova Browser Platform + Browser Support for Top 30 Plugins

• Ripple Emulator• Cordova Windows Platform• Cordova Test Infrastructure (MEDIC) • Cordova CLI (--list, --save, --restore, --arch)• Filling out the Plugin support matrix• Hosted app support for File, Media Capture, and

Camera plugins• Performance tests

Contributions to Open Source

• Use Command Window or Terminal to create projects• Install Cordova is a single command line:npm install –g cordova OR sudo npm install –g cordova• Create a project: directory workshop, project:

Workshopcordova create workshop com.yourname.workshop Workshop Add or remove platforms:cordova platforms add ios • Not a VS Dev ? Use VS Code as your Code Editor (Free)

Using CL for Cordova Apps

• Single Page Application (SPA) is a best practice to build fast, efficient mobile apps.

• Single HTML Page.• The “views” are injected & removed from the DOM.• UI is entirely created at the client-side with no

dependency on server.• All assets should be under www folder.• Use Front-End Frameworks for incredible UX.

Cordova Apps Best Practices

DEMO Weather App

Download the tools (free) http://aka.ms/cordova Documentation http://aka.ms/cordova-docs Videos http://aka.ms/cordova-videos Tutorials http://aka.ms/cordova-tutorials Samples http://aka.ms/cordova-samples Support forums http://www.stackoverflow.com Packaging Apps to Google Store: https://

channel9.msdn.com/Blogs/MostafaElzoghbi/Packaging-Cordova-Apps-to-Google-Store

Resources

Microsoft Azure TourTuesday, Oct 13, Philadelphia

Featuring a Keynote fromScott GuthrieExecutive Vice PresidentCloud & Enterprise

http://MicrosoftAzureTour.com

Top engineers from Redmond and independent experts from around the world will present:

12 technical sessions across two tracks (IT Experts and Developers)

6 hands-on labsSecurity, Networking, Big Data, Storage, Identity, Web,Mobile, Hybrid, Containers, Devops, Open Source, Management, Internet of Things

© 2015 Microsoft Corporation. All rights reserved.

Thank You