building cross-platform javascript apps using cordova

Cordova

Noam Kfir | Sela Group | 2014

Agenda

Convergence

What’s in a Name?

Diving In

One for All and All for One

Going Native

Mobile Development Strategies

Divergent

Different platforms

Different IDEs

Different languages

Convergent

Unified platforms

Any IDE (or just one)

One language

Divergent Options

Android

Android Studio

(or Eclipse)

Java C++

iOS

Xcode

Objective-C Swift

Windows Phone

Visual Studio

C# C++ JavaScript

Convergent Options

Xamarin

Xamarin Studio

C#

Mobile Web

Any IDE

JavaScript*

Cordova

Any IDE

JavaScript*

Comparing Our Choices

Option Deploy Languages Tools Platform Pricing

Divergent Manage stores individually

Different Different Native Negligible (mostly)

Mobile Web Web JavaScript Any Web Inapplicable

Xamarin Multiple stores C# One Native Bindings

$299 or $999per year per devper platform

Telerik Platform

Multiple stores JavaScript Any Web + Native Bindings

$468 or $948per year per devfor all platforms

Adobe PhoneGap

Manage stores individually

JavaScript Any Web + Native Bindings

$120 or $360 (Creative Cloud) per year

Disclaimer: This is a rough comparison that does not take into account all of the advantages and disadvantages of each option.

Built on Apache Cordova

“Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript”

Exposes native device capabilities

The Web as a Platform

Cordova App Structure

Native Shell

Browser Control

Your App

Installing Cordova

Install node and npm

npm install -g cordova

Creating a Cordova Project

cordova create path namespace name

Example: cordova create hello-world com.gettingStarted.helloWorld HelloWorld

Adding Platform Support

Install the iOS SDK

cordova platforms add ios

Install the Android SDK and build tools (e.g., ant)

cordova platforms add android

Install the Windows Phone 8 SDK (on Windows)

cordova platforms add wp8

Folder Structure

www

the app

platforms

platform support

libraries and tools

plugins

support for native

features

config.xml

app parameters

Build iOS Platform

cordova build ios

Open Xcode and Run in the Simulator

npm install -g ios-sim

cordova emulate ios

Build Android Platform

cordova build android

Create at least one virtual device with android avd

cordova emulate android

Build Windows Phone 8 Platform

cordova build wp8

Install Windows Phone 8 virtual devices Based on Hyper-V

cordova emulate wp8

One for All and All for One

Cordova

Adobe PhoneGap

Telerik Platform

IBM Worklight

Salesforce Mobile SDK

???

Telerik’s Approach to Mobile Dev

imag

e s

ou

rce:

htt

p:/

/pla

tform

.tele

rik.

com

The Telerik Platform

• AppPrototyperDesign

• AppBuilder, CordovaBuild

• Backend ServicesConnect

• Mobile TestingTest

• AppManagerDeploy and Manage

• AppFeedback, AnalyticsMeasure

Design AppPrototyper

Online wireframing tool

Collaborative features

Screens can be exported as a starting template Based on Kendo

Without the UI itself

Not yet mature, but shows promise

Build AppBuilder

Work in any environment Telerik’s AppBuilder IDE – online or offline

Choose your own environment

Git integration

Test your app in an online simulator

Or on a real device with LiveSync

Publish your app to any app store

Connect Backend Services

Unified API for cloud-based services

Management portal

Cloud storage for data and files

Push notifications iOS, Android, Windows Phone

User management Facebook, Microsoft, Google, Twitter

Server-code execution

Test Mobile Testing

Write JavaScript tests Based on Telerik’s testing framework

Similar to Jasmine but with higher-order capabilities

Run the tests using agents Browser agents – browse to a provided URL

Device agents – install the Telerik Mobile Testing app from the appropriate app store

View results on the dashboard

Deploy and Manage AppManager

Automatically publish your app to the Apple, Google or Windows app stores

Also supports private app stores for in-house apps

Integrated with AppBuilder via the Publish button

Edit configurations using the AppBuilder

Measure AppFeedback

Lets users and testers provide feedback directly from within the app

Can automatically collect usage data Screenshots

System info

User comments

Feedback shows up in the AppFeedback dashboard where it can be managed centrally Assign, resolve, etc.

Request additional feedback or send replies

Measure Analytics

Rich analytics platform, visible in the workspace dashboard

Opt-in using the Analytics plugin

Collects automatic data

Analytics API supports custom events and data

Going Native

Plugins provide support for native features

Don’t have to be native!

Anyone can write a plugin

Plugin registry: http://plugins.cordova.io

Adding Plugins

cordova plugin add plugin-identifier

Common Plugins

org.apache.cordova.console

org.apache.cordova.device

org.apache.cordova.notification

Summary

Questions?