1.
Building Cross-Platform
Mobile Apps
Mobile Dev+Test
14 April 2015 - San Diego CA

2.
Troy Miles
Over 35 years of programming experience
Blog: http://therockncoder.blogspot.com/
Twitter: @therockncoder
Email: rockncoder@gmail.com
GitHub: https://github.com/Rockncoder

3.
Agenda
A Quick & Dirty JavaScript Overview
What is PhoneGap?
Building PhoneGap Apps
Debugging
Plugins

4.
Agenda
Backbone
Underscore
Models
Collections
Views
The Router

5.
Agenda
Templates
Chocolate Chip
Lists
Look and Feel
Summary

6.
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

7.
JavaScript Best Practices
Avoid sloppy JavaScript
Avoid the Global Space
Encapsulate Code into Objects
Use Design Patterns

8.
Avoid Sloppy JavaScript
Use “strict” mode
Always use ‘===’ & ‘!==’
Code in JavaScript not C#, Java, Ruby, etc.
Use JSLint or JSHint

9.
Avoid the Global Space
Minimize use of global variables
Use Name-spacing
Use anonymous/immediate functions when appropriate

10.
Functions
Functions are a first class type
Like other types they can be passed and assigned
freely
Anonymous functions are used frequently

11.
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

12.
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

13.
Promises
A rather new JavaScript concept
Used to handle asynchronous callbacks
The app uses jQuery’s version

14.
PhoneGap/Cordova History
2009: 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

15.
Cordova Forks
Adobe PhoneGap
IBM Worklight
Telerik Platform
Intel XDK
BlackBerry WebWorks
The Ionic Framework

16.
Target Platforms
Amazon FireOS
Google Android
BlackBerry 10
Firefox OS
Apple iOS
Ubuntu Linux
Microsoft Windows Phone 8

17.
Development Platforms
OS X
All except Windows Phone / Windows
Windows
All except iOS
Linux
All except Windows Phone and iOS

18.
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

19.
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

20.
The Hard Things
Installation
Knowing the difference between PhoneGap & Cordova
Deciding what to do past hello, world

21.
Node Package Manager
npm is very popular in the open source community
cross-platform
coding standard
storage site + discovery mechanism
delivery mechanism
used by phonegap/cordova

22.
Let’s build an app, part 1a

23.
Hello, world
cordova create hello com.rnc.hello Hello
cd hello
cordova platform add browser --usegit
cordova run browser

24.
hooks
Allows you to execute code at defined points in the
Cordova application build process
Example minify your JavaScript

25.
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

26.
plugins
Modular pieces of native code which give your app increased
functionality
Familiar Plugins
console
device
dialogs
inappbrowser

27.
www
Your app's root directory
laid out as a set of sub-directories
css
img
js
index.html

28.
config.xml
Defines a widget
Must be in root directory
Actually defined by the W3C
http://www.w3.org/TR/widgets/#configuration-
document-0

29.
Let’s build an app, part 1b

30.
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

31.
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);}

32.
Debugging
Using the browser while developing
Chrome remote for Android devices
Safari remote for iOS devices
Windows Phone winre

33.
UI Options
Roll Your Own
jQuery / jQuery UI
jQuery Mobile
Bootstrap
Chocolate Chip UI

34.
Framework Options
Roll Your Own
AngularJS
Knockout
BackboneJS

35.
Underscore
A utility belt library for JavaScript
Excellent at manipulating objects and collections
About 6kb minified and compressed
Required for Backbone apps

36.
Backbone
A MV* Framework
Note: There are no controllers hence no ‘C’
More lightweight than Angular, Ember, or Knockout
Requires jQuery and Underscore

37.
Models
The base object in Backbone
Essentially a wrapper around a JavaScript object
Use get and set command to access properties

38.
Collections
A collection of models
Can associate a URL with a collection
Backbone native support of RESTful API
Can also use third party API

39.
Views
Backbone’s UI layer
Also does much of what a controller would do in typical
MVC

40.
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

41.
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

42.
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

43.
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

44.
Lists
Lists have classes which enhance their looks
Classes exists to indicate:
Navigation to another page
Navigation to a details page

45.
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

46.
Look & Feel
Switching the look and feel is easy, just change CSS
files
PhoneGap version 3+ automates the process

47.
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

48.
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

49.
Let’s build an app, part 2

50.
pg-twitter
cordova create pg-twitter com.rnc.pgtwitter pg-twitter
cd pg-twitter
cordova platform add browser --usegit
cordova run browser

51.
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

52.
Two Things Really Quick
PhoneGap Build
PhoneGap Developer App

53.
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/

54.
Resources
http://momentjs.com/
http://plugins.cordova.io/#/
http://jquery.com/
http://chocolatechip-ui.com/index.html
http://www.raymondcamden.com/

55.
The Rockncoder
http://therockncoder.blogspot.com
http://www.youtube.com/user/rockncoder
https://github.com/Rockncoder/pg-twitter
http://www.slideshare.net/rockncoder

56.
Summary
Speed of development
Ease of development
Cross-platform by design

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