3. HTML5 and mobile
• PhoneGap project background
• mobile projects in practice
• backend design concerns
• mobile web client design
• progressive enhancement to ‘native’
4.
5. 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
6. 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
7. 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
8. philosophy
• simple is better
• when in doubt, use brute force
• the web solved cross platform
9. goals
# the web as a first class platform
# => installable web apps
# cease to exist
# => browsers adopt this model
14. 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
15. web standards
• w3c has many
• bondi / jil / wac / webinos
• de facto standards?
16. the PhoneGap technique *
• colloquially called ‘the bridge’
• more correctly a FFI (foreign function
interface)
* originally we called it ‘the phonegap hack’
17. the hack
1. instantiate a webview
2. call js from the native code
3. call native code from the js
18. primary platforms
• Apple iOS >= 3 (supported since 1.x)
• Google Android >= 1.5
• BlackBerry >= 5.x (supported since 4.2)
19. platform support,
• HP webOS
• Nokia Symbian
• Samsung Bada
• Windows Phone 7.5
20. further experiments
• various desktop experiments
• mozilla firefox mobile (fennec)
• Qt (thus Maemo/MeeGo)
21. No mobile dev platform
supports as many deploy
targets as PhoneGap.
Not even a single web
browser...not yet anyhow.
35. 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
41. great UX happens iteratively.
design continuously; start with research.
big upfront designs fail.
42. great UX happens iteratively.
design continuously; start with research.
big upfront designs fail.
don’t fail.
43. 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’
45. 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
46. shipping
• a daily activity
• unit tests for health and sanity
• single click builds (test/dev/release)
• utilize a distributed RCS
• automate everything
47. 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
48. mobile web != WebKit
• Opera is huge
• Firefox making strides
• IE happens still
• ...which webkit btw?
49. 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
50. looks can kill
• aesthetics that can hurt performance:
‣
border-radius
‣
box-shadow
‣
gradients
51. your brand > theirs
• your brand is cross platform
• a device manufacturer or software vendor is
not your brand
• design to solve your problem!
52. 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
53. 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
54. testing
• qUnit / Jasmine pretty popular
• usually just test endpoints and business
logic
55. deployment
• concat / minify / obfuscate
• inline everything into the markup to min http
chatter
56. AppCache
• used to not invalidate; which sucked
• homescreen / installable web apps now
seem valid
57. backend design
• almost every legacy system needs a proxy
• RESTful JSON endpoints are fastest
58. 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
60. 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