building cross-platform mobile apps
TRANSCRIPT
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: [email protected]
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
