Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML 5 vs. Native Mobile Applications

3,531 views

Published on

The lead developer for Redfin's search application leads an engineer-to-engineer talk on

Published in: Technology
  • 'A random guy did a similar thing in HTML5 in a few weeks.'

    Where can we see this 'similar' thing?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML 5 vs. Native Mobile Applications

  1. 1. HTML 5 vs. Native Sasha Aickin  Search Team Lead, Redfin
  2. 2. The time: Yesterday The Place: Moscone West
  3. 3. Um, WTF? We often cast technology platform wars as "religious", but it's rare that we get actual monks involved.
  4. 4. Who doesn't love a little religious war? <ul><li>And why are mommy and daddy fighting? </li></ul>So... How did we get to this place? What should we as developers do about it?
  5. 5. Who doesn't love a little religious war? <ul><li>And why are Google and Apple fighting? </li></ul>So... How did we get to this place? What should we as developers do about it?
  6. 6. But first...  and the lessons we (should have?) learned A Brief History of the Mobile Internet
  7. 7. A Brief History of the Mobile Internet <ul><li>Phase one: The Sync-ternet  (1997-2001) </li></ul>
  8. 8. A Brief History of the Mobile Internet <ul><li>Phase one: The Sync-ternet  (1997-2001) </li></ul>Lesson the First: Mobile without wireless is just this side of useless.
  9. 9. A Brief History of the Mobile Internet <ul><li>Phase Two: WAP! (2000-2006) </li></ul>They promised:
  10. 10. A Brief History of the Mobile Internet <ul><li>Phase Two: WAP! (2000-2006) </li></ul>They delivered: FAIL
  11. 11. A Brief History of the Mobile Internet <ul><li>Phase Two: WAP! (2000-2006) </li></ul>Lesson the Second: Mobile without good user interface is not much better.
  12. 12. A Brief History of the Mobile Internet <ul><li>Phase Three: the Actual Internet (2007) </li></ul>
  13. 13. A Brief History of the Mobile Internet <ul><li>Phase Three: the Actual Internet (2007) </li></ul>&quot;Perhaps it’s playing well in the mainstream press, but here at WWDC, Apple’s “you can write great apps for the iPhone: they’re called ‘web sites’” — message went over like a lead balloon.... – John Gruber, June 2007      WWDC 2007 Keynote Notes If all you have to offer is a s*** sandwich, just say it. Don’t tell us how lucky we are and that it’s going to taste delicious.&quot;
  14. 14. A Brief History of the Mobile Internet <ul><li>Phase Three: the Actual Internet (2007) </li></ul>Lesson the Third: Mobile that's a second-class citizen also does not fly. 
  15. 15. A Brief History of the Mobile Internet <ul><li>Phase Four: Apps! The Internet without HTML (2008-?) </li></ul>
  16. 16. A Brief History of the Mobile Internet <ul><li>Phase Four: Apps! The Internet without HTML (2008-?) </li></ul>Lesson the Fourth: Users will pay for mobile that works. 
  17. 17. A Brief History of the Mobile Internet <ul><li>Phase Five: HTML5, the revenge of the standard (2009-?) </li></ul>VS.
  18. 18. SPOILER ALERT HTML5 wins. Um, eventually.
  19. 19. Case study on the desktop: CoolIris <ul><li>CoolIris developed a browser plugin over the course of several years which displays images and videos in a 3D wall. </li></ul>A random guy did a similar thing in HTML5 in a few weeks. HTML FTW
  20. 20. HTML5 is awesome! <ul><li>It's a standard. </li></ul>It's got massively widespread support. It works on many different devices. Your developers already know it. Case closed, right?
  21. 21. Er, no. Eventually is the key here. <ul><li>The bankruptcy courts of Silicon Valley are littered with the corpses of wireless Internet companies who thought that the wireless Internet was at hand before the technology and market caught up. </li></ul>So if you have to build a mobile app now: What should you do? Try to go HTML5, but first consider four questions.
  22. 22. <ul><li>The first (and easiest) question is: </li></ul>What will the app do?
  23. 23. There's a lot that can't be done in HTML5. Running in the background Accessing media files Taking video Taking pictures Accelerometer Gyroscope Vibration Notifications
  24. 24. But there's a shocking amount that can be: GPS and Compass Local SQL Storage Web App Cache Vector and bitmap 2D graphics 3D with OpenGL Touch and gesture recognition Native video tag Native audio tag
  25. 25. Functionality Case study: Hand of Greed <ul><li>  </li></ul>
  26. 26. The first question <ul><li>What will the app do? </li></ul>If the answer is &quot;something only supported natively&quot;, go native. Otherwise, move on to...
  27. 27. <ul><li>The second (and squirrelliest) question is: </li></ul>How will the app feel?
  28. 28. Look & Feel <ul><li>If you want a web app to look like a native app, you have two choices: </li></ul>1. Use iUI/SproutCore/iWebKit/jqTouch framework and write your app with native-ish controls in HTML/CSS/JavaScript ... and painstakingly fix the bugs and issues and weirdnesses... ... and end up with an app that still doesn't really look or feel like a native app.
  29. 29. Look & Feel <ul><li>If you want a web app to look like a native app, you have two choices: </li></ul>2. Give up and realize it was a bad idea to begin with.
  30. 30. The Weirdness of the Web <ul><li>There are bunch of web conventions that are page-like, not app-like: </li></ul>Bookmarks Back Button Refresh Button Page Flash Passed Links
  31. 31. Performance <ul><li>&quot;Speed kills.&quot; </li></ul>Performance is where abstractions go to die.
  32. 32. Performance case study: Amazon <ul><li>  </li></ul>
  33. 33. Performance case study: Google Maps <ul><li>  </li></ul>
  34. 34. The second question <ul><li>How will the app feel? </li></ul>If you prototype it in HTML5, and you can't stand how it feels, go native. Otherwise, move on to...
  35. 35. <ul><li>The third (and to some, the most important) question is: </li></ul>How on earth will you make money? <TODO: insert clichéd Jerry Maguire reference here>
  36. 36. More money, more problems? <ul><li>If you are ad-based, HTML vs. native is more or less a toss-up. </li></ul>Er, unless you're developing on iOS.  You can only send user or device data to: &quot;an independent advertising service provider whose primary business is serving mobile ads (for example, an advertising service provider owned by or affiliated with a developer or distributor of mobile devices, mobile operating systems or development environments other than Apple would not qualify as independent )&quot; – Apple iPhone Dev Terms of Service ( as quoted on allthingsd.com)
  37. 37. More money, more problems? <ul><li>If you are ad-based, HTML vs. native is more or less a toss-up. </li></ul>Er, unless you're developing on iOS.  You can only send user or device data to: &quot;an independent advertising service provider whose CEO's name does not rhyme with Chmidt &quot; – my co-worker's re-stating  of Apple Terms of Service
  38. 38. More money, more problems? <ul><li>If you want users to pay you directly, though, you are essentially hosed in the HTML5 world. </li></ul>Yes, PayPal has a mobile API, as does Google.  Have you ever tried to USE PayPal in a phone browser?  Exactly. P.S.  This is not PayPal's fault!  All the mobile HTML5 payment experiences kind of suck.
  39. 39. The third question <ul><li>How on earth will you make money? </li></ul>If you get paid for the app or in-app purchases, go native. Otherwise, move on to...
  40. 40. <ul><li>The fourth (and hardest) question is: </li></ul>How will users find your app?
  41. 41. Google is awesome! <ul><li>But not really for finding mobile web apps. </li></ul>Sometimes launching in an app store can feel like being a small fish in a big pond. But being a mobile webapp just out on the Internet is like being a small protozoa in an infinite universe.
  42. 42. Marketing on the App Stores is Gold You simply cannot underestimate the power of app store marketing. Launch Promoted on App Store
  43. 43. We need a good directory of HTML5 apps <ul><li>And it's maybe sorta kinda coming with the Chrome App Store. </li></ul>But maybe not. :(
  44. 44. The Mom Test <ul><li>My mom, like many moms, is (a) awesome and (b) not good at technology. </li></ul>Many, many apps. My mom has apps installed on her iPhone.  
  45. 45. The Dark Side of the Apple App Store <ul><li>Remember those bankruptcy courts in Silicon Valley that were full of mobile web companies? </li></ul>They are now full of iPhone softcore porn app companies, or tethering app companies, or telephony app companies. Redfin has had nothing but good experiences with Apple, but there is a business risk to depending on all your revenue going through them.
  46. 46. The fourth question <ul><li>How will users find your app? </li></ul>If you don't have a solid strategy for getting users to your app (and you can stomach the dangers in Apple's store), go native.
  47. 47. To conclude... <ul><li>If you aren't doing anything in your app that is outside HTML </li></ul><ul><li>AND </li></ul><ul><li>If you're OK with the level of performance and feel of HTML </li></ul><ul><li>AND </li></ul><ul><li>If you don't need to accept payments for or inside your app  </li></ul><ul><li>AND </li></ul><ul><li>You know how you can get users to your app... </li></ul>Go HTML5!
  48. 48. Otherwise... <ul><li>As much as it pains me to say it...  </li></ul>Go Native.
  49. 49. Moving to the Open Web <ul><li>In a perfect world, we'd be able to say: &quot;go HTML5 all the way!&quot; </li></ul>How do we get there?
  50. 50. Here's the plan, see... <ul><ul><li>Add more features to HTML5.    Camera?  Accelerometer?  Gyro?  Yes.  Back to work, Hixie. </li></ul></ul><ul><ul><li>Make faster devices and faster browsers.    Luckily, Google and Apple are in a death race to do just this. </li></ul></ul><ul><ul><li>Make payment in HTML5 easy.    No one has solved this or even seems to be working on it. </li></ul></ul><ul><ul><li>Smooth discovery and installation of web apps.    The Chrome web app store is a step down this path. </li></ul></ul>
  51. 51. That's it <ul><li>Good luck creating your app, whether it be written in HTML5 or natively, and let's work towards a more HTML-y world. </li></ul>Questions?  Praise?  Insults? [email_address]

×