Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 vs. Native

D1406b664a4d18d820f06a8fb94c5452?s=47 Joey Simhon
November 20, 2012

HTML5 vs. Native

Presented @ W3C's HTML5Fest


Joey Simhon

November 20, 2012


  1. HTML5 vs. Native Real life lessons from both worlds

  2. Moi • Passionate technologist • Building web and mobile products

    since 2000 • Founded Netcraft in 2003 (later acquired by Tapuz) • To (partially) be blamed for FED • Founded Everything (formerly DoAT) in 2010
  3. Everything • Changing the usage of apps on smartphones •

    Apps can be used from the phone or from the cloud • Cloud apps are instant and intent- based • Building the dynamic phone - what you need rather than what you installed • Apps become - discoverable by intent, instant and inherently shareable
  4. Everything #2 • Multi-disciplinary team: • Data & Algorithms •

    Backend & Infrastructure • Web • Native Mobile Clients • We’ve built over a 100 html5 mobile apps • And a bunch of native ones
  5. Everything #3 • We’ve built over a 100 html5 mobile

    apps • And a bunch of native ones
  6. Goal - make HTML5 useful for your mobile product

  7. When you say HTML5 • A single term that wraps

    several different advancements: • New HTML capabilities (e.g. video) • New Javascript APIs (e.g. geolocation) • New styling capabilities (aka CSS3) • Some vendor-specific additions (iOS touch icon meta tag)
  8. Mobile apps have different flavors HTML5 Native Wrapper Hybrid Generated

  9. HTML5 Skills Web development, FED at least, server-side optional Delivery

    method A site accessed by a web browser Release Cycle Whenever
  10. Native Skills Platform SDK, iOS/ Objective-C, Android/Java, WP/.Net Delivery method

    An executable ran on a device Release Cycle App submission process
  11. Wrapper Skills Advanced HTML5, intermediate Native Delivery method An executable

    ran on a device which launches a browser to render app Release Cycle Whe App submission process for wrapper, ongoing for HTML5 never
  12. Hybrid Skills Advanced HTML5 and Advanced Native Delivery method An

    executable ran on a device with some browser rendered app portions Release Cycle App submission process for client, ongoing HTML5 portions
  13. How we built our app(s)

  14. DoAT v1.0 - Native • Launched at TCD, May 2011

    • All native • Shows results inside a browser (webview)
  15. Why Native? • Had to go native • Needed to

    deal with low-level networking optimizations (read - we were slow)
  16. Everything v0.1 - HTML5 • The first in many iterations

    of our new interface • Started as an HTML image-map with links to other screens • Later developed as a full blown HTML5 app
  17. Why HTML5? • We wanted to get mockups in the

    hands of users • We had the available skills (or lacked the iOS ones) • We wanted to move FAST, without native release friction
  18. Everything v0.2 - Hybrid • v0.1 HTML5 interface wrapped within

    a browser (loaded from our servers) • Ability to launch apps in their own separate browser (HTML5 communicating with Native code)
  19. Why Hybrid? • We wanted to have a different experience

    for launching apps (separate browsers) • We wanted to go full screen • We wanted to leverage our existing HTML5 investment
  20. Everything beta - Full blown HTML5 app • Launched and

    still runs under everything.me • Our main product testbed for 4-6 months • Cross platform (Android 2.2+ / iOS 5+)
  21. Why HTML5? • Awesome flexibility in experimenting with UI and

    product tweaks • Releasing early and often, sometimes even 5+ times a day • Allowed us to use external testing services such as UserTesting
  22. Everything iOS App - Hybrid • A native iOS app

    that uses HTML5 to render some of its views
  23. Everything iOS App - Hybrid • Some really important features

    rely on HTML5 • Feed - rendered with HTML5 • Snapping process, templates are powered by HTML5 • Heavy use of offline for native’ish feel
  24. Why Hybrid? • Parallel work done on 2 teams -

    iOS and Web, allowing for quicker delivery and responsiveness • We work iteratively, HTML5 helped us handle changes better • The right tool for the job
  25. Why Hybrid? #2 • Ability to have short release cycles

    • No expedited review for bug fixing FTW!
  26. Cut to the chase Native Hybrid HTM L5 W rapper

    Native capabilities Change rate
  27. But wait, isn’t HTML5 bad for your stock?

  28. It’s not a question of one winner The web is

    here to stay, and on mobile it’s HTML5
  29. You need to be where your users are Facebook has

    x2 more traffic on their web app than their native apps combined
  30. “Beast don’t look, it’s HTML5”

  31. HTML5 is part of the mobile future Talk to the

    Mozillians here about FirefoxOS Samsung/Intel are building Tizen
  32. Thanks! @joeysim joey@everything.me W e’re Hiring! http://corp.everything.me/jobs