Ce diaporama a bien été signalé.

Future of Mobile

12

Partager

Prochain SlideShare
Mobeers waterloo-2011
Mobeers waterloo-2011
Chargement dans…3
×
1 sur 75
1 sur 75

Plus De Contenu Connexe

Future of Mobile

  1. 1. The Future of Mobile HTML5 and cross-platform native apps for iOS, Android and Blackberry @brianleroux
  2. 2. -me http://brian.io
  3. 3. HTML5 and mobile • PhoneGap project background • mobile projects in practice • backend design concerns • mobile web client design • progressive enhancement to ‘native’
  4. 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. 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. 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. 7. philosophy • simple is better • when in doubt, use brute force • the web solved cross platform
  8. 8. goals # the web as a first class platform # => installable web apps # cease to exist # => browsers adopt this model
  9. 9. &
  10. 10. free, defined • free to use • free to modify • free to distribute • free to change • free to sell
  11. 11. “OMG, how does anyone make money?”
  12. 12. ever buy bottled water?
  13. 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. 14. web standards • w3c has many • bondi / jil / wac / webinos • de facto standards?
  15. 15. the PhoneGap technique * • colloquially called ‘the bridge’ • more correctly a FFI (foreign function interface) * originally we called it ‘the phonegap hack’
  16. 16. the hack 1. instantiate a webview 2. call js from the native code 3. call native code from the js
  17. 17. primary platforms • Apple iOS >= 3 (supported since 1.x) • Google Android >= 1.5 • BlackBerry >= 5.x (supported since 4.2)
  18. 18. platform support, • HP webOS • Nokia Symbian • Samsung Bada • Windows Phone 7.5
  19. 19. further experiments • various desktop experiments • mozilla firefox mobile (fennec) • Qt (thus Maemo/MeeGo)
  20. 20. No mobile dev platform supports as many deploy targets as PhoneGap. Not even a single web browser...not yet anyhow.
  21. 21. primary contributors • Nitobi • IBM • RIM • Microsoft
  22. 22. PhoneGap API http://docs.phonegap.com
  23. 23. device APIs • sensors • data • outputs
  24. 24. sensors • geo / accelerometer / gyroscope • camera
  25. 25. data • filesystem • contacts • media
  26. 26. outputs • device screen(s) • speakers • speaker jack
  27. 27. Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Media Notification Storage
  28. 28. plugins • all phonegap APIs are a plugin • any native API is permitted
  29. 29. plugins • all phonegap APIs are a plugin • any native API is permitted
  30. 30. frameworks • jQuery mobile Wink • jQTouch QooXDoo • Sencha Zepto • XUI JOApp
  31. 31. PhoneGap is just a fancy browser... ...so your code runs in less fancy ones, too.
  32. 32. A quick interlude about competition...
  33. 33. PhoneGap has no competition
  34. 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. 35. PhoneGap/Build We build your apps ‘in the cloud’. Free for Free/Open Source projects.
  36. 36. hello world already!
  37. 37. mobile in practice • define your project philosophy and goals • value != money • design (...not just the pretty) • shipping
  38. 38. the software process Problem definition outlines a solution value proposition. In other words: you can’t be a hero without an enemy.
  39. 39. have a singular goal.
  40. 40. great UX happens iteratively. design continuously; start with research. big upfront designs fail.
  41. 41. great UX happens iteratively. design continuously; start with research. big upfront designs fail. don’t fail.
  42. 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. 43. the exception, the web, is exceptional.
  44. 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. 45. shipping • a daily activity • unit tests for health and sanity • single click builds (test/dev/release) • utilize a distributed RCS • automate everything
  46. 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. 47. mobile web != WebKit • Opera is huge • Firefox making strides • IE happens still • ...which webkit btw?
  48. 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. 49. looks can kill • aesthetics that can hurt performance: ‣ border-radius ‣ box-shadow ‣ gradients
  50. 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. 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. 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. 53. testing • qUnit / Jasmine pretty popular • usually just test endpoints and business logic
  54. 54. deployment • concat / minify / obfuscate • inline everything into the markup to min http chatter
  55. 55. AppCache • used to not invalidate; which sucked • homescreen / installable web apps now seem valid
  56. 56. backend design • almost every legacy system needs a proxy • RESTful JSON endpoints are fastest
  57. 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. 58. deployment • Joyent • Heroku • Nodejitsu • soon: Microsoft Azure
  59. 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. 60. a photo sharing app
  61. 61. our JSON service API POST / # save a pic GET / # displays pics
  62. 62. PROTIP! Checkout all the src here: https://github.com/brianleroux/ghetto-photoshare
  63. 63. deployed on Heroku! http://deep- flower-8321.herokuapp.com/
  64. 64. native client design • available offline • access to native device capabilities • app store and ad hoc distribution
  65. 65. going offline • icons, splash screens and data access techniques • DomStorage, File, IndexedDB, SQLite
  66. 66. Device APIs: sensors and data Our example: Camera / Capture API
  67. 67. wiring it to our shitty photo sharing app
  68. 68. PROTIP! The entire app is here: https://gist.github.com/1219277
  69. 69. let’s try it out!
  70. 70. one more thing...
  71. 71. PhoneGap/Build • continuous deployment • no SDKs required • Cloud9IDE and GitHub compatible • remote debug your devices
  72. 72. recap • learned about PhoneGap • learned about the mobile web • picked up enough NodeJS to be dangerous • wrote a cross platform native app
  73. 73. thanks!

Notes de l'éditeur

  • \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
  • ×