Native v. Hybrid v. Web

3994db1807811ceface5667bbbcb7311?s=47 Brian Fling
October 02, 2011

Native v. Hybrid v. Web

Presented at Web Directions Unplugged about some of the specific costs and challenges we face when selecting a mobile development strategy.

3994db1807811ceface5667bbbcb7311?s=128

Brian Fling

October 02, 2011
Tweet

Transcript

  1. native hybrid web vs vs

  2. @fling

  3. the format

  4. ask questions. get answers.

  5. my sad love story of the mobile web

  6. native hybrid web vs vs

  7. bradfrostweb.com

  8. bradfrostweb.com “[Brian] made me feel the same way I feel

    when my grandpa talks to me about surviving the Great Depression. —Brad Frost
  9. That Guy

  10. None
  11. None
  12. None
  13. 3:1 QA : Dev

  14. For every hour spent on development, three had to be

    spent in QA.
  15. mobile ux web

  16. mobile ux web

  17. None
  18. 2010

  19. 2010 “If the web was my religion, I feel as

    though I’ve lost my faith.
  20. mobiledesign.org

  21. None
  22. “[Brian] states making a native application can be the best

    thing for a product, but confirms on the other hand that the mobile web is the only long term commercially viable content platform for mobile devices —Thibault Imbert
  23. MADE WITH LOVE IN SEATTLE BY

  24. while my friends were rolling in cash from native apps,

  25. while my friends were rolling in cash from native apps,

    I couldn’t pay my rent building web apps.
  26. None
  27. “I want desperately to be a web developer again, but

    if I have to wait until 2020 for browsers to do what Cocoa can do in 2010, I won’t wait. —Joe Hewitt 29 April 2010
  28. pinch/zoom pinchzoom.com

  29. Price Apps !

  30. iflowreader.com

  31. iflowreader.com “We bet everything on Apple and iOS and then

    Apple killed us by changing the rules in the middle of the game.
  32. suck my ass

  33. I bet everything on the web and I lost.

  34. That Guy

  35. Why?

  36. None
  37. MADE WITH LOVE IN SEATTLE BY MADE WITH LOVE IN

    SEATTLE BY
  38. computing network internet devices web 2010 2000 1990 1980 1970

    2020 mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  39. computing network internet devices web 2010 2000 1990 1980 1970

    2020 ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  40. computing network internet devices web 2010 2000 1990 1980 1970

    3G 2020 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  41. computing network internet devices web 2010 2000 1990 1980 1970

    3G 2020 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  42. computing network internet devices web 2010 2000 1990 1980 1970

    IPv4 3G 2020 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  43. computing network internet devices web 2010 2000 1990 1980 1970

    IPv4 3G IPv6 2020 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  44. computing network internet devices web 2010 2000 1990 1980 1970

    feature brick IPv4 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  45. computing network internet devices web 2010 2000 1990 1980 1970

    feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
  46. computing network internet devices web dot-com 2010 2000 1990 1980

    1970 web 2.0 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe academia MADE WITH LOVE IN SEATTLE BY
  47. computing network internet devices web dot-com 2010 2000 1990 1980

    1970 web 2.0 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe next academia MADE WITH LOVE IN SEATTLE BY
  48. computing network internet devices web dot-com 2010 2000 1990 1980

    1970 web 2.0 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe next academia MADE WITH LOVE IN SEATTLE BY
  49. computing network internet devices web dot-com 2010 2000 1990 1980

    1970 web 2.0 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe next academia MADE WITH LOVE IN SEATTLE BY touch IPv6 4G ubiquity next
  50. everything has led to this moment

  51. the future of mobile will not be the web...

  52. the future of mobile will not be the web... ...or

    apps
  53. None
  54. None
  55. it’s everything everywhere

  56. That Guy

  57. native hybrid web vs vs

  58. native app An application that is specifically written for a

    device platform.
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. “They are expensive to create —a simple app could cost

    you $32,639 and take two months to create.
  67. $32,639 for a simple app 2 months to create 2

    weeks per feature 4 features $8,160 per feature
  68. “A complex app could have a price tag of more

    than $163,200 and take six months to develop.
  69. $163,200 for a complex app 6 months to create 2

    weeks per feature 12 features $13,600 per feature
  70. “This price multiplies if you decide you want to make

    it available on more than one operating system.
  71. PLATFORM RESOURCES iPhone 100% iPad 150% Android 175% Honeycomb 200%

    Blackberry 300%
  72. Cost of Native Simple App Complex App iPhone $32,639 $163,200

    iPad $48,959 $244,800 Android $57,118 $285,600 Honeycomb $65,278 $326,400 Blackberry $97,917 $489,600 Total $301,911 $1,509,600
  73. hybrid app An application using primarily web technologies inside a

    native container.
  74. hybrid app ...to be in the App Store.

  75. None
  76. None
  77. None
  78. None
  79. Price Apps !

  80. None
  81. The PhoneGap Box Score 1.2 Platforms 53 Reviews Stars

  82. None
  83. PLATFORM RESOURCES Hybrid iPhone 113% Hybrid iPad 141% Hybrid Android

    225% Hybrid Honeycomb 225% Hybrid Blackberry 338%
  84. wtf?

  85. 2.85:1 QA : Dev

  86. For every hour spent on development, three has to be

    spent in QA.
  87. Simple App Native Hybrid Mobile Web iPhone $32,639 $36,719 $24,479

    iPad $48,959 $45,899 $30,599 Android $57,118 $73,438 $48,959 Honeycomb $65,278 $73,438 $48,959 Blackberry $97,917 $110,157 $73,438 Total $301,911 $339,650 $226,433
  88. Complex App Native Hybrid Mobile Web iPhone $163,200 $183,600 $122,400

    iPad $244,800 $229,500 $153,000 Android $285,600 $367,200 $244,800 Honeycomb $326,400 $367,200 $244,800 Blackberry $489,600 $550,800 $367,200 Total $1,509,600 $1,698,300 $1,132,200
  89. None
  90. web app An application that runs within a web browser.

  91. p/z universal build a website that provided the best possible

    experience to the context. iPad magazine iPhone web app Desktop website
  92. None
  93. Content in Context

  94. None
  95. MADE WITH LOVE IN SEATTLE BY

  96. 1x HTML5 Markup 1x Hexadecimal CSS Framework 1x Typography Framework

    3x Javascript Frameworks 12x Media-Query-based Layouts
  97. a hexadecimal what?

  98. the hex-grid Typically when using a grid web designers are

    typically only using vertical units.
  99. the hex-grid but in mobile design, we must use horizontal

    units as well. this means that any unit size must work vertically as well as horizontally.
  100. None
  101. None
  102. iPad magazine iPhone web app Desktop website ‣ pagination was

    a nightmare. ‣ had to create an entirely new css framework to deal with all the screen sizes. ‣ every page had to be designed individually. ‣ content had to be type fitted, similar to print layout workflow. ‣ had to disable pinch to zoom. ‣ large image needs for iPad were brutal. ‣ had to add device detection to reduce JS page load per context. ‣ typical navigation had to be scrapped. ‣ design sacrifices had to be made to make it work. ‣ page flow was less than ideal.
  103. None
  104. None
  105. 2.85:1 QA : Dev

  106. None
  107. sni er.pinchzoom.com

  108. Simple App Native Hybrid Mobile Web iPhone $32,639 $36,719 $24,479

    iPad $48,959 $45,899 $30,599 Android $57,118 $73,438 $48,959 Honeycomb $65,278 $73,438 $48,959 Blackberry $97,917 $110,157 $73,438 Total $301,911 $339,650 $226,433
  109. Complex App Native Hybrid Mobile Web iPhone $163,200 $183,600 $122,400

    iPad $244,800 $229,500 $153,000 Android $285,600 $367,200 $244,800 Honeycomb $326,400 $367,200 $244,800 Blackberry $489,600 $550,800 $367,200 Total $1,509,600 $1,698,300 $1,132,200
  110. That Guy

  111. ask questions. get answers.

  112. native? hybrid? web? + +