Apache Cordova 4.x

Gran Sasso Science Institute

Ivano Malavolta

Apache Cordova

Roadmap

•  The Cordova framework

•  Recurrent app architecture

•  Cordova CLI

•  Debugging Cordova applications

•  My development environment

PhoneGap VS Cordova

Adobe/Nitobi donated the PhoneGap codebase to the Apache foundation

à wider audience and contributors

à transparent governance

Better documentation

à easier contributions for companies

Apache Licensing

There was only one problem....

trademark ambiguity à CORDOVA

PhoneGap is a distribution of Apache Cordova

CordovaYou develop your app using the usual three guys

You use the same web view of the native OS

•  iOS = UIWebView

•  Android = android.webkit.WebView

htt

p://

pho

neg

ap.c

om

/blo

g/2

01

3/0

6/2

0/c

om

ing-

soo

n-p

ho

neg

ap3

0/

CordovaThe UI layer is a web browser view

•  100% width

•  100% height

Headless web browser

•  No URL bar

•  No decorations

•  No zooming

•  No text selection

Can I use HTML5, JS and CSS libraries I use everyday?

How does Cordova work?

Features coverage

When Cordova API is not enough...

Sometimes Cordova is not enough as is for our purposes

•  unsupported feature

•  heavyweight data processing is faster in native code

ex. images manipulation

•  background processing is better handled natively

ex. files sync

•  complex business logicà You can develop a

Cordova plugin

Cordova plugins

Purpose:

To expose a Phone native functionality to the browser

This is done by developing

•  a custom Native Component

it will be different for each platform

•  a custom JavaScript API

it should be always the same

Mobile Web app

JavaScript Plugin A

JavaScript Plugin B

iOSPlugin A

iOSPlugin B

Native Platform

Cordova plugin architecture

Since the 3.0 version, Cordova has a slim core with only the very basic native to web bridge technology

All other APIs are optionally installable

Plugins are installed and removed using the Cordova CLI instrument

Developers

Can compose a version of Cordova suited to their project needs

Cordova contributors

Can revision APIs independently + it is easier to upgrade and extend APIs

Users

Smaller and faster apps

Cordova plugin architecture

Cordova core is now composed of 17 repos

Comparing it to the old plugin architecture...

htt

p://

pho

neg

ap.c

om

/blo

g/2

01

3/0

6/2

0/c

om

ing-

soo

n-p

ho

neg

ap3

0/

Examples of available plugins

Roadmap



•  Cordova CLI



Recurrent app architecture

The app acts as a client for user interaction

The app communicates with an application server to receive data

The application server handles business logic and communicates with a back-end data repository

App

Application server

Data repository

The app

It generally uses the single-page application model

•  the application logic is inside a single HTML page

•  this page is never unloaded from memory

•  data will be displayed by updating the HTML DOM

•  data is retrieved from the application server using Ajax

The server

It is a classical web server

•  server-side scripting language such as Java, .NET, PHP, etc…

•  communication can be based on:

- RESTful services (XML, JSON, etc.)

- SOAP

•  it performs business logic, and generally gets or pushes data from a separate repository

The data repository

It may be:

•  a standard DB (even deployed in the same machine of the application server)

•  an external API

Both application server and back-end repository can be provided as a service à BaaS

Roadmap



•  Cordova CLI



Cordova CLI

The main tool to use for the cross-platform workflow

It allows you to:

•  create new projects

•  add platforms

•  build a project w.r.t. different platforms

•  emulate a project on platform-specific emulators

•  run a project on device

•  include specific plugins into a project

CLI = Command-Line Interface

If you prefer to use platform-specific SDKs, you can still use it

to initialize your project

Creates template project

•  PATH the folder that will contain your project

•  ID package identifier in reverse-domain style (optional)

•  NAME display name of the app (optional)

Project creation

The create command creates a

predefined project structure

•  hooks special Node.js scripts that are executed before/after other Cordova-specific commands

•  platforms platform specific projects (ex. an Eclipse project for Android, XCode for iOS)

•  plugins installed plugins (both JS files and native resources)

•  www contains your HTML, JS, CSS files

Project structure

config.xml contains core Cordova API features, plugins, and platform-specific settings. See here for the iOS values:

http://goo.gl/wjvjst

https://github.com/apache/cordova-app-hello-world/blob/master/hooks/README.md

https://github.com/apache/cordova-app-hello-world/blob/master/hooks/README.md

With this command you add a target platform of your project.

The platform will appear as subfolder of platforms containing the platform-specific project mirroring the www folder

•  PLATFORM_NAME

the name of the platform (e.g., ios, android, wp8)

Add platforms

If you do something like this:

cordova platform remove ios

you are removing a specific platform

You can use an SDK such as Eclipse or Xcode to open the project you created

The emulate command will run the app on a platform-specific emulator

The run command will run the app on a previously setup device (e.g., connected via USB and configured for being used as device for testing purposes)

•  PLATFORM_NAME

the name of the platform to be built (e.g., ios, android, wp8)

emulate/run the app

This generates platform-specific code within the project's platforms subdirectory

•  PLUGIN_ID

the id of the repository containing the source code of the plugin to be added to the project

add plugins A list of plugins can be found herehttp://plugreg.com

If the plugin you want to add is not in the cordova.io registry, you can directly refer to the URL of his GitHub repository

Examples of available plugins

Sometimes it may happen to need different JavaScript code, CSS stylesheets or generic assets for a specific platform

ex.Android-specific CSS stylesheet

iOS-specific assets for managing the back button graphics

...

In these cases you can put the platform-specific assets into the merges/PLATFORM_NAME folder

Cordova’s build command will take care of integrating them in your deployed app for the specific platform

Platform custom code

Roadmap



•  Cordova CLI



The killer app!

•  Check console

•  Breakpoints

•  Update the DOM at run-time

•  Access to all local DBs

•  Network profiling

•  CPU and memory profiling

•  Monitor event listeners

•  Monitor elements’ rendering time

Desktop Browser

•  very quick

•  very handy functions

•  see Chrome’s Web Development Tools

•  Breakpoints

PRO

•  browsers’ small differences and bugs

•  cannot test all Cordova’s specific functionalities

•  you need Phonegap shims

CONS

Desktop Browser

Chrome Security Restriction

If you need to test your JSON calls from a local web app, you need to relax Chrome’s security policies with respect to local files access and cross-domain resources access

•  OSX

open -‐a Google\ Chrome.app -‐-‐args “ -‐-‐disable-‐web-‐security“

•  Windows

chrome.exe -‐-‐disable-‐web-‐security

DO IT ONLY FORDEBUGGING!

Simulator

•  Officially supported by platform vendors

•  You use the “real” device’s browser

PRO

•  device’s performance is not considered

•  this is iOS-specific

•  Android’s emulator is a joke

CONS

On device

•  accurate

•  still handy

•  real performance tests

•  real browser tests

PRO

•  Deployment takes some time (~6 seconds for iOS)

CONS

Ripple

•  very quick

•  can use Chrome’s Web Development Tools

•  You can test Cordova’s API from the Desktop

•  browsers’ small differences and bugs

•  cannot test the interaction with external apps

PRO

CONS

It is based on Ripple, a Chrome plugin for mobile dev

from Cordova 3.0.0, you need to use the Ripple available at Apache

npm install -‐g ripple-‐emulator

ripple emulate

Apache Ripple

Remote Debugging

From iOS 6, Apple provided Mobile Safari with a remote web inspector

à You can debug your app by using the classical web inspector of Desktop Safari

It can connect both to

•  The iOS emulator

•  The real device

Since Android 4.4, this feature is available via Chrome’s web dev kit

Remote Debugging for older platforms

Weinre http://people.apache.org/~pmuellr/weinre/docs/latest/

3 main components:

Debug Server

the HTTP server for debug data

Debug Target

the (web) app you are debugging

Debug Client

the Web Inspector user interface

Public debug server: debug.phonegap.com

Debugging reference table

Make a favor to yourself, don’t debug craftsman way:

console.log() + alert()

iOS Android

Desktop Browser ✓ ✓

Ripple ✓ ✓

Device/simulator ✓ ✓

Weinre ✓ ✓

Safari Web Inspector

✓ X

Chrome Web Inspector

X ✓

Roadmap



•  Cordova CLI


•  My development environment and workflow

My development environment

Sublime Text 2

http://www.sublimetext.com

SublimeText Package Control

http://wbond.net/sublime_packages/package_control

Sidebar Enhancer

https://github.com/titoBouzout/SideBarEnhancements

HTML Prettify

https://github.com/victorporof/Sublime-HTMLPrettify

SublimeLinter

https://github.com/SublimeLinter/SublimeLinter

JsFormat

https://github.com/jdc0589/JsFormat

ITG Flat theme

http://itsthatguy.com/post/70191573560/sublime-text-theme-itg-flat

My development workflow

1.  Code & test using Ripple (very quick)

Quick sketch of layout and complete business logic

2.  Run and debug in the XCode simulator (handy & accurate)

Complete the UI for iOS devices and ~99% confidence about business logic

3.  Run and debug on devices (complete control & confidence)

Complete the UI for Android too and ~99% confidence about business logic

Remarks

These are MY development environment and development workflow

There are many tools and IDEs out there

à  Consider this as a starting point & feel free to use the ones that fit well with your attitude

References

http://cordova.apache.org/docs/en/edge

ContactIvano Malavolta |

Gran Sasso Science Institute

iivanoo

[email protected]

www.ivanomalavolta.com

Apache Cordova 4.x

Technology

Transcript of Apache Cordova 4.x