Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
The Future of                 MobileHTML5 and cross-platform native apps for iOS, Android and Blackberry                  ...
-mehttp://brian.io
HTML5 and mobile•   PhoneGap project background•   mobile projects in practice•   backend design concerns•   mobile web cl...
PhoneGap project•   history/goals/philosophy      •   device apis: sensors•   licensing                     •   device api...
PhoneGap project•   history/goals/philosophy   •   device apis: sensors•   licensing                  •   device apis: dat...
history2008 : got its start as a lofty summertime hack; gainedtraction as a concept @nitobi with android andblackberry imp...
philosophy•   simple is better•   when in doubt, use brute force•   the web solved cross platform
goals# the web as a first class platform# => installable web apps# cease to exist# => browsers adopt this model
&
free, defined•   free to use•   free to modify•   free to distribute•   free to change•   free to sell
“OMG, how does anyone    make money?”
ever buy bottled water?
Nitobi vs. PhoneGap•   we are the creators of and contributors to    PhoneGap•   we are a software company•   we give away...
web standards•   w3c has many•   bondi / jil / wac / webinos•   de facto standards?
the PhoneGap technique *•   colloquially called ‘the bridge’•   more correctly a FFI (foreign function    interface)      ...
the hack1. instantiate a webview2. call js from the native code3. call native code from the js
primary platforms•   Apple iOS >= 3 (supported since 1.x)•   Google Android >= 1.5•   BlackBerry >= 5.x (supported since 4...
platform support,•   HP webOS•   Nokia Symbian•   Samsung Bada•   Windows Phone 7.5
further experiments•   various desktop experiments•   mozilla firefox mobile (fennec)•   Qt (thus Maemo/MeeGo)
No mobile dev platformsupports as many deploy  targets as PhoneGap.   Not even a single web browser...not yet anyhow.
primary contributors• Nitobi• IBM• RIM• Microsoft
PhoneGap APIhttp://docs.phonegap.com
device APIs•   sensors•   data•   outputs
sensors•   geo / accelerometer / gyroscope•   camera
data•   filesystem•   contacts•   media
outputs•   device screen(s)•   speakers•   speaker jack
Accelerometer      Camera      Capture     Compass  Connection     Contacts       Device        Events           File  Geo...
plugins•   all phonegap APIs are a plugin•   any native API is permitted
plugins•   all phonegap APIs are a plugin•   any native API is permitted
frameworks•   jQuery mobile   Wink•   jQTouch         QooXDoo•   Sencha          Zepto•   XUI             JOApp
PhoneGap is just a fancy      browser... ...so your code runs in less        fancy ones, too.
A quick interlude about    competition...
PhoneGap has no  competition
let’s review•   philosophy•   licensing•   number of supported platforms•   community adoption•   contributors•   tooling ...
PhoneGap/BuildWe build your apps ‘in the cloud’.Free for Free/Open Source projects.
hello world already!
mobile in practice•   define your project philosophy and goals•   value != money•   design (...not just the pretty)•   ship...
the software processProblem definition outlinesa solution valueproposition.In other words: you can’t be ahero without an en...
have a singular goal.
great UX happens iteratively.design continuously; start with research.big upfront designs fail.
great UX happens iteratively.design continuously; start with research.big upfront designs fail.don’t fail.
bias•   technical bias is a normal condition•   embrace your bias; it is skills you have•   embrace your existing technica...
the exception,the web,is exceptional.
good news!•   you have likely already invested in the web•   today you have the knowledge and skills to    build end to en...
shipping•   a daily activity•   unit tests for health and sanity•   single click builds (test/dev/release)•   utilize a di...
web client design•   constraints are your ally in the battle against    complexity and clients whom are not chill•   phone...
mobile web != WebKit•   Opera is huge•   Firefox making strides•   IE happens still•   ...which webkit btw?
layouts•   flex-box rules!•   css media queries ftw!•   meta tag w/ viewporthttp://developer.palm.com/blog/2011/07/css-3-fle...
looks can kill•   aesthetics that can hurt performance:    ‣        border-radius    ‣        box-shadow    ‣        gradi...
your brand > theirs•   your brand is cross platform•   a device manufacturer or software vendor is    not your brand•   de...
JS libraries•   start with your problem, not a generic solution•   Zepto and its older brother XUI are all you need to sta...
automation•   not just for servers! benching, testing, and    deployment require separated compilation•   there are tools....
testing•   qUnit / Jasmine pretty popular•   usually just test endpoints and business    logic
deployment•   concat / minify / obfuscate•   inline everything into the markup to min http    chatter
AppCache•   used to not invalidate; which sucked•   homescreen / installable web apps now    seem valid
backend design•   almost every legacy system needs a proxy•   RESTful JSON endpoints are fastest
NodeJS•   hit the scene in 2009•   plenty fast (async io)•   community is mental (npm)•   reuse your JS skills•   supporte...
deployment•   Joyent•   Heroku•   Nodejitsu•   soon: Microsoft Azure
serious business time•   defining a problem informs the solution    (epic hero needs an epic arch enemy theory)•   create a...
a photo sharing app
our JSON service APIPOST / # save a picGET / # displays pics
PROTIP! Checkout all the src here:https://github.com/brianleroux/ghetto-photoshare
deployed on Heroku!          http://deep-   flower-8321.herokuapp.com/
native client design•   available offline•   access to native device capabilities•   app store and ad hoc distribution
going offline•   icons, splash screens and data access    techniques•   DomStorage, File, IndexedDB, SQLite
Device APIs: sensors and dataOur example: Camera / Capture API
wiring it to our shitty photo sharing app
PROTIP! The entire app is here:https://gist.github.com/1219277
let’s try it out!
one more thing...
PhoneGap/Build•   continuous deployment•   no SDKs required•   Cloud9IDE and GitHub    compatible•   remote debug your    ...
recap•   learned about PhoneGap•   learned about the mobile web•   picked up enough NodeJS to be dangerous•   wrote a cros...
thanks!
Future of Mobile
Future of Mobile
Prochain SlideShare
Chargement dans…5
×

Future of Mobile

7 454 vues

Publié le

Publié dans : Technologie
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Great presentation!
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Future of Mobile

  1. 1. The Future of MobileHTML5 and cross-platform native apps for iOS, Android and Blackberry @brianleroux
  2. 2. -mehttp://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. 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. 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 hack1. instantiate a webview2. call js from the native code3. 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 platformsupports 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 APIhttp://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/BuildWe 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 processProblem definition outlinesa solution valueproposition.In other words: you can’t be ahero 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/ 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. 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 APIPOST / # save a picGET / # 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 dataOur 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!

×