Future of Mobile

  • 6,116 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,116
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
205
Comments
1
Likes
14

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. The Future of MobileHTML5 and cross-platform native apps for iOS, Android and Blackberry @brianleroux
  • 2. -mehttp://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. history2008 : got its start as a lofty summertime hack; gainedtraction as a concept @nitobi with android andblackberry implementations in the fall2009 : ppl started to pay attention when we got‘rejected’ by apple; we added Symbian and webOSsupport. Sony Ericsson contributes2010 : IBM began tag teaming w/ Nitobi2011 : RIM contributing. Shipped 1.x! Added WindowsPhone 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 hack1. instantiate a webview2. call js from the native code3. 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 platformsupports as many deploy targets as PhoneGap. Not even a single web browser...not yet anyhow.
  • 21. primary contributors• Nitobi• IBM• RIM• Microsoft
  • 22. PhoneGap APIhttp://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/BuildWe 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 processProblem definition outlinesa solution valueproposition.In other words: you can’t be ahero 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/ viewporthttp://developer.palm.com/blog/2011/07/css-3-flexible-box-model-and-enyo-flex-layout/http://mediaqueri.eshttp://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 APIPOST / # save a picGET / # 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 dataOur 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!