building cross-platform mobile apps

Building Cross-Platform Mobile AppsMobile Dev+Test 14 April 2015 - San Diego CA

Troy Miles

Over 35 years of programming experience

Blog: http://therockncoder.blogspot.com/

Twitter: @therockncoder

Email: rockncoder@gmail.com

GitHub: https://github.com/Rockncoder

Agenda

A Quick & Dirty JavaScript Overview

What is PhoneGap?

Building PhoneGap Apps

Debugging

Plugins

AgendaBackbone

Underscore

Models

Collections

Views

The Router

Agenda

Templates

Chocolate Chip

Lists

Look and Feel

Summary

The End of HTML5 as a Platform?

Facebook mobile apps on iOS and Android were originally using HTML5

Users complained about speed and style

In 2012, Facebook switch to native apps

The pundits announced the end of HTML5 as a mobile platform and the end of PhoneGap too

JavaScript Best Practices

Avoid sloppy JavaScript

Avoid the Global Space

Encapsulate Code into Objects

Use Design Patterns

Avoid Sloppy JavaScript

Use “strict” mode

Always use ‘===’ & ‘!==’

Code in JavaScript not C#, Java, Ruby, etc.

Use JSLint or JSHint

Avoid the Global Space

Minimize use of global variables

Use Name-spacing

Use anonymous/immediate functions when appropriate

Functions

Functions are a first class type

Like other types they can be passed and assigned freely

Anonymous functions are used frequently

Objects

Objects are some what like Key/Value dictionaries in other languages

The Key can be anything when wrapped in quotes

The Value can be any type including a function

Events

Events allow for excellent separation of concerns

You can listen for system events or

Trigger and respond to your own

Many external libraries will communicate via events

Promises

A rather new JavaScript concept

Used to handle asynchronous callbacks

The app uses jQuery’s version

PhoneGap/Cordova History2009: 1st developed at an iPhoneDevCamp event

2009: Developers form a company, Nitobi

2011: Adobe acquires Nitobi

2011: Adobe open sources PhoneGap project to Apache

2012: Apache gives the project the name Cordova

Cordova ForksAdobe PhoneGap

IBM Worklight

Telerik Platform

Intel XDK

BlackBerry WebWorks

The Ionic Framework

Target PlatformsAmazon FireOS

Google Android

BlackBerry 10

Firefox OS

Apple iOS

Ubuntu Linux

Microsoft Windows Phone 8

Development PlatformsOS X

All except Windows Phone / Windows

Windows

All except iOS

Linux

All except Windows Phone and iOS

PhoneGap

Current release is 4.2

Node.js is a hard requirement since version 3.0

It is all command line instead of IDE

Recommend not upgrading your app to a new version right away

How PhoneGap works?

Most device APIs include an internal web browser

PhoneGap uses this internal web browser as its app canvas

It adds more features to the navigator via software which bridges the gap between the internal web and the device

The Hard Things

Installation

Knowing the difference between PhoneGap & Cordova

Deciding what to do past hello, world

Node Package Managernpm is very popular in the open source community

cross-platform

coding standard

storage site + discovery mechanism

delivery mechanism

used by phonegap/cordova

Let’s build an app, part 1a

Hello, world

cordova create hello com.rnc.hello Hello

cd hello

cordova platform add browser --usegit

cordova run browser

hooks

Allows you to execute code at defined points in the Cordova application build process

Example minify your JavaScript

platforms

One directory for each device framework you support

Because of the complexity involved in getting individual machines setup, we will demonstrate this but not actually work through it as an excercise

pluginsModular pieces of native code which give your app increased functionality

Familiar Plugins

console

device

dialogs

inappbrowser

wwwYour app's root directory

laid out as a set of sub-directories

css

img

js

index.html

config.xml

Defines a widget

Must be in root directory

Actually defined by the W3C

http://www.w3.org/TR/widgets/#configuration-document-0

Let’s build an app, part 1b

Adding a plugin

Two important pieces of information

how to install a plugin

how to make it work

http://plugins.cordova.io/#/package/org.apache.cordova.camera

cordova plugin add org.apache.cordova.camera

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,

destinationType: Camera.DestinationType.DATA_URL});

function onSuccess(imageData) {

var image = document.getElementById('myImage');

image.src = "data:image/jpeg;base64," + imageData;}

function onFail(message) {

alert('Failed because: ' + message);}

Debugging

Using the browser while developing

Chrome remote for Android devices

Safari remote for iOS devices

Windows Phone winre

UI Options

Roll Your Own

jQuery / jQuery UI

jQuery Mobile

Bootstrap

Chocolate Chip UI

Framework Options

Roll Your Own

AngularJS

Knockout

BackboneJS

Underscore

A utility belt library for JavaScript

Excellent at manipulating objects and collections

About 6kb minified and compressed

Required for Backbone apps

Backbone

A MV* Framework

Note: There are no controllers hence no ‘C’

More lightweight than Angular, Ember, or Knockout

Requires jQuery and Underscore

Models

The base object in Backbone

Essentially a wrapper around a JavaScript object

Use get and set command to access properties

Collections

A collection of models

Can associate a URL with a collection

Backbone native support of RESTful API

Can also use third party API

Views

Backbone’s UI layer

Also does much of what a controller would do in typical MVC

The Router

The router controls application state

In a web site it would control what is in the URL bar

PhoneGap apps may lack a visible URL bar, but it still exists

Templates

Templates render markup to the DOM in a cookie cutter fashion

Especially good for render collections to a view

Make it easier to create single page apps

Chocolate Chip UI

A UI Framework akin to jQuery Mobile or even Bootstrap

Does a great job of impersonating iOS, Android, and Windows Phone 8

Lists

You will work a lot with lists in mobile apps

In CC, lists will have the look and feel of the device

Lists typically will need a bit of code to make them fully functional

Lists

Lists have classes which enhance their looks

Classes exists to indicate:

Navigation to another page

Navigation to a details page

Widgets

CC uses a combo of its own stuff with HTML5

For example the Range Slider is simply an HTML5 input type=range

But a switch is a combination of HTML, CSS3, and JavaScript

Look & Feel

Switching the look and feel is easy, just change CSS files

PhoneGap version 3+ automates the process

Look & Feel

iOS: chui-ios-3.8.4.min.css

Android 4+: chui-android-3.8.4.min.css

Windows Phone 8: chui-win-3.8.4.min.css

Look & Feel

PhoneGap’s merges folder

one directory for each supported device

Its contents will be copied and overwrite during the build command

Name all of the css files identically

Place in each appropriate folder

Let’s build an app, part 2

pg-twitter

cordova create pg-twitter com.rnc.pgtwitter pg-twitter

cd pg-twitter

cordova platform add browser --usegit

cordova run browser

merges directory

Must be created by hand

named after support platforms

contents of the merge directory will be written to the www during build

files/directories with the same name will be overwritten

Two Things Really Quick

PhoneGap Build

PhoneGap Developer App

Resources

http://phonegap.com/

http://cordova.apache.org/docs/en/4.0.0/index.html

http://cordova.apache.org/

http://backbonejs.org/

http://underscorejs.org/

Resources

http://momentjs.com/

http://plugins.cordova.io/#/

http://jquery.com/

http://chocolatechip-ui.com/index.html

http://www.raymondcamden.com/

The Rockncoder

http://therockncoder.blogspot.com

http://www.youtube.com/user/rockncoder

https://github.com/Rockncoder/pg-twitter

http://www.slideshare.net/rockncoder

Summary

Speed of development

Ease of development

Cross-platform by design

Please rate this talk!http://spkr8.com/t/44241