Getting started with cross platform mobile apps using cordova

Getting Started with Cross-Platform Mobile Development using Cordova Mostafa Elzoghbi Sr. Technical Evangelist - MicrosoftFollow me on Twitter @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

vaSc

ript

Java

C/C++

Objec

tive-

C C#

Visual D

evelop

men

t Too

l

Java

/Coff

ee/T

ype

Scrip

tPH

P

Pyth

on

ActionS

cript

Ruby

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 Cordova

6% 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? Extension to Visual Studio 2013 In-box with Visual Studio 2015

Community Edition (Recommended)

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 Ripple –

Phone Emulator

Easy to deploy & Debug

Integration with needed mobile toolset

DEMOVisual Studio Client Tools - Cordova

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

VS2015’s Cordova investments include: Improved CLI and project system interop with 3rd party CLIs Updated Cordova, plugins, emulators, and OSS components An improved build path for iOS 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 support with WinRT access Embedded 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:

Workshop

cordova create workshop com.yourname.workshop Workshop Add or remove platforms:

cordova platforms add ios

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.

Cordova Apps Best Practices

DEMO AngularJS, Backbone, & WinJS

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

Resources

© 2015 Microsoft Corporation. All rights reserved.

Thank You