1.
The Future of
Mobile
HTML5 and cross-platform native apps for iOS, Android and Blackberry
@brianleroux

2.
-me
http://brian.io

3.
HTML5 and mobile
• PhoneGap project background
• mobile projects in practice
• backend design concerns
• mobile web client design
• progressive enhancement to ‘native’

4.
PhoneGap project
• history/goals/philosophy • device apis: sensors
• licensing • device apis: data
• web standards • device apis: outputs
• the phonegap technique • present and future: a little
(ffi / bridge) about our roadmap
• platform support • phonegap/build
• more on the bridge: plugins • perceived competition
• the future of mobile is
device apis

5.
PhoneGap project
• history/goals/philosophy • device apis: sensors
• licensing • device apis: data
ckin’ a little
• web standards • device apis: outputs
fu
apresent and future:
ach y about our roadmap
(ffi / bridge) ma te
• the phonegap technique •
im ai ght?
g, phonegap/build
ythin perceived competition
ever
• platform support •
• more on the bridge: plugins•
• the future of mobile is
device apis

6.
history
2008 : got its start as a lofty summertime hack; gained
traction as a concept @nitobi with android and
blackberry implementations in the fall
2009 : ppl started to pay attention when we got
‘rejected’ by apple; we added Symbian and webOS
support. Sony Ericsson contributes
2010 : IBM began tag teaming w/ Nitobi
2011 : RIM contributing. Shipped 1.x! Added Windows
Phone 7 support

7.
philosophy
• simple is better
• when in doubt, use brute force
• the web solved cross platform

8.
goals
# the web as a first class platform
# => installable web apps
# cease to exist
# => browsers adopt this model

9.
&

10.
free, defined
• free to use
• free to modify
• free to distribute
• free to change
• free to sell

11.
“OMG, how does anyone
make money?”

12.
ever buy bottled water?

13.
Nitobi vs. PhoneGap
• we are the creators of and contributors to
PhoneGap
• we are a software company
• we give away as much IP as possible

14.
web standards
• w3c has many
• bondi / jil / wac / webinos
• de facto standards?

15.
the PhoneGap technique *
• colloquially called ‘the bridge’
• more correctly a FFI (foreign function
interface)
* originally we called it ‘the phonegap hack’

16.
the hack
1. instantiate a webview
2. call js from the native code
3. call native code from the js

17.
primary platforms
• Apple iOS >= 3 (supported since 1.x)
• Google Android >= 1.5
• BlackBerry >= 5.x (supported since 4.2)

18.
platform support,
• HP webOS
• Nokia Symbian
• Samsung Bada
• Windows Phone 7.5

19.
further experiments
• various desktop experiments
• mozilla firefox mobile (fennec)
• Qt (thus Maemo/MeeGo)

20.
No mobile dev platform
supports as many deploy
targets as PhoneGap.
Not even a single web
browser...not yet anyhow.

21.
primary contributors
• Nitobi
• IBM
• RIM
• Microsoft

22.
PhoneGap API
http://docs.phonegap.com

23.
device APIs
• sensors
• data
• outputs

24.
sensors
• geo / accelerometer / gyroscope
• camera

25.
data
• filesystem
• contacts
• media

26.
outputs
• device screen(s)
• speakers
• speaker jack

27.
Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device
Events
File
Geolocation
Media
Notification
Storage

28.
plugins
• all phonegap APIs are a plugin
• any native API is permitted

29.
plugins
• all phonegap APIs are a plugin
• any native API is permitted

30.
frameworks
• jQuery mobile Wink
• jQTouch QooXDoo
• Sencha Zepto
• XUI JOApp

31.
PhoneGap is just a fancy
browser...
...so your code runs in less
fancy ones, too.

32.
A quick interlude about
competition...

33.
PhoneGap has no
competition

34.
let’s review
• philosophy
• licensing
• number of supported platforms
• community adoption
• contributors
• tooling from 3rd parties
• no lock in: your app runs in a browser too

35.
PhoneGap/Build
We build your apps ‘in the cloud’.
Free for Free/Open Source projects.

36.
hello world
already!

37.
mobile in practice
• define your project philosophy and goals
• value != money
• design (...not just the pretty)
• shipping

38.
the software process
Problem definition outlines
a solution value
proposition.
In other words: you can’t be a
hero without an enemy.

39.
have a singular goal.

40.
great UX happens iteratively.
design continuously; start with research.
big upfront designs fail.

41.
great UX happens iteratively.
design continuously; start with research.
big upfront designs fail.
don’t fail.

42.
bias
• technical bias is a normal condition
• embrace your bias; it is skills you have
• embrace your existing technical debt
• be wary of anything preaching a ‘one true
way’

43.
the exception,
the web,
is exceptional.

44.
good news!
• you have likely already invested in the web
• today you have the knowledge and skills to
build end to end systems with HTML, CSS
and JavaScript

45.
shipping
• a daily activity
• unit tests for health and sanity
• single click builds (test/dev/release)
• utilize a distributed RCS
• automate everything

46.
web client design
• constraints are your ally in the battle against
complexity and clients whom are not chill
• phones suck: cpu, ram, bandwidth, size,
battery, network...everything!
• start with a benchmark and monitor that
benchmark

47.
mobile web != WebKit
• Opera is huge
• Firefox making strides
• IE happens still
• ...which webkit btw?

48.
layouts
• flex-box rules!
• css media queries ftw!
• meta tag w/ viewport
http://developer.palm.com/blog/2011/07/css-3-flexible-box-model-and-enyo-flex-
layout/
http://mediaqueri.es
http://developer.android.com/guide/webapps/targeting.html

49.
looks can kill
• aesthetics that can hurt performance:
‣
border-radius
‣
box-shadow
‣
gradients

50.
your brand > theirs
• your brand is cross platform
• a device manufacturer or software vendor is
not your brand
• design to solve your problem!

51.
JS libraries
• start with your problem, not a generic solution
• Zepto and its older brother XUI are all you need to start
• JOapp is fantastic option
• Backbone and/or Spine are worth watching and perhaps
using on your project
• jQueryMobile, Sencha are mature fullstack options
• Dojo and YUI are on the way

52.
automation
• not just for servers! benching, testing, and
deployment require separated compilation
• there are tools...and I’m torn on this one..
but I still recommend rolling your own
• basic concat, min/obfuscate, embed
• yes: this is necessary for perf

53.
testing
• qUnit / Jasmine pretty popular
• usually just test endpoints and business
logic

54.
deployment
• concat / minify / obfuscate
• inline everything into the markup to min http
chatter

55.
AppCache
• used to not invalidate; which sucked
• homescreen / installable web apps now
seem valid

56.
backend design
• almost every legacy system needs a proxy
• RESTful JSON endpoints are fastest

57.
NodeJS
• hit the scene in 2009
• plenty fast (async io)
• community is mental (npm)
• reuse your JS skills
• supported by Joyent, Microsoft and many
others

58.
deployment
• Joyent
• Heroku
• Nodejitsu
• soon: Microsoft Azure

59.
serious business time
• defining a problem informs the solution
(epic hero needs an epic arch enemy theory)
• create a min viable product statement
• do not fuck around shaving yaks

60.
a photo sharing app

61.
our JSON service API
POST / # save a pic
GET / # displays pics

62.
PROTIP! Checkout all the src here:
https://github.com/brianleroux/ghetto-photoshare

63.
deployed on Heroku!
http://deep-
flower-8321.herokuapp.com/

64.
native client design
• available offline
• access to native device capabilities
• app store and ad hoc distribution

65.
going offline
• icons, splash screens and data access
techniques
• DomStorage, File, IndexedDB, SQLite

66.
Device APIs: sensors and data
Our example: Camera / Capture API

67.
wiring it to our shitty
photo sharing app

68.
PROTIP! The entire app is here:
https://gist.github.com/1219277

69.
let’s try it out!

70.
one more thing...

71.
PhoneGap/Build
• continuous deployment
• no SDKs required
• Cloud9IDE and GitHub
compatible
• remote debug your
devices

72.
recap
• learned about PhoneGap
• learned about the mobile web
• picked up enough NodeJS to be dangerous
• wrote a cross platform native app

73.
thanks!