HTML5 vs. Native

Presented @ W3C's HTML5Fest

Transcript

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