2. Revised v4Presenter
Web or Native for Mobile Development?
Android
Reto Meier
@retomeier
Web
Michael Mahemoff
@mahemoff

3. The Question
• Should you build you mobile apps as HTML5 apps or
native apps?

4. The Answer
YES

5. The Case for Native Apps

6. If you can't think of a way to improve your
web app using Android SDK features...

7. If you can't think of a way to improve your
web app using Android SDK features...
You're doing it wrong!

9. Standards Will Always Trail Innovation
• Hardware support
• Rich Integration

10. Impending Hardware Standards
• Location Based Services
• Microphone input
• Accelerometers

11. Hardware is Rapidly Evolving
• 2007: Multi-touch, accelerometers, microphone
• 2008: Video, compass, background apps
• 2009: Bluetooth, multiple screen sizes
• 2010: Gyroscopes, front facing cameras, NFC
• 2011: ???

12. New Hardware Platforms
• Tablets
• Televisions
• Cars? Picture Frames? Fridges? Washing Machines?

13. Currently Supported Hardware
• Smartphones / Tablets / Television
• Microphone
• Video camera (front facing / rear facing)
• Sensors (compass, gyro, accelerometers, light
• Multi-touch
• Telephony and SIP stacks
• Bluetooth

14. Intents Based Data Sharing
• Lets 3rd parties exchange data
• Lets apps extend each other

15. Ubiquity
• Widget, Live Folders, Live Wallpapers
• Quick Search Box
• Notifications
• Ability to replace native apps

16. True Background Services
• Alarms
• Intent Receivers
• Cloud to Device Messaging
• Background execution / concurrent apps

17. Current Android Platform Features
• Geo services
• Sensors
• Interprocess communications (Intents!)
• Background, scheduled, and concurrent apps
• Home screen widgets and quick search box
• Rich multimedia
• Native (C/C++) development
• Full database / SQLLite support
• Camera and microphone access
• Deep system integration / replacement

18. Native App Strengths
• Apps that use the hardware
• Apps that integrate system features
• Apps that work with other apps
• Apps that need to be fast
• Apps that are ubiquitous

19. The Case for HTML5

20. Remember when computers were computers?

21. TVs were TVs?

22. Mobile phones were thumping great bricks?

23. Form Factors Rock!

24. Form Factors Rock
... for users!
But less so for developers.

25. Modern Developer,
You need to consider ...
Desktop
Laptop
Netbook
Smartphone
Feature phone
Tablet
TV

26. As a Developer, you need to
consider ...
Watch?
Car?
Fridge?
USB Desktop Aquarium?
(Maybe not.)

27. Desktop
Windows
OSX
Linux
...

28. Mobile
Android
iOS
BlackBerry
Windows Mobile 6.5
Windows Mobile 7 (rewrite)
Symbian
Meego
...

29. How about in 2015?
Anyone's guess!
But one platform is likely to be there: Web.

30. Write Once, Run Many
is starting to sound like a good idea

31. Web Handles Many User Interfaces
Browsers use a fluid layout model.
Sensible defaults, whether a 10cm phone or a 200cm TV
Target specific platforms with CSS Media Queries

32. Web Provides Secure Sandboxing
Same-origin policy prevents sharing across different domains

33. Web Provides Porous Boundaries
It's not black-and-white.
Apps *can* share data securely - OAuth, Cross-Origin
Resource Sharing, Cross-Document Messaging.

34. Web Supports Permissioning
Now we have rich functionality on the web, e.g. GeoLocation.
But not every app gets access.
As with smartphones, browsers ask permission first.

35. So Web Architecture is Good in Theory
How about in practice?

36. HTML5 is Ready Today
Not 2050, Not 2020. Today.

37. HTML5 is Ready Today
Oh and it's fast too
Javascript Performance Benchmark
http://is.gd/dAKqS
Firefox 0.8 (2004): 1802ms
Chrome 7 (2010): 10ms
DOM Rendering Benchmark
http://jsperf.com/dom-selection-appending/2
Firefox 0.8 (2004): ~111ms (9 ops/sec)
Chrome 7 (2010): 2ms (460 ops/sec)

38. User Interface: Canvas
Canvas: Effect Engine
HTML5 Game Jam: "Enterprise"

39. User Interface: CSS
Custom Fonts
Transforms
Much more...

40. Input
Geolocation
Orientation
Speech Detection
Idle Detection
Device API: Camera? Microphone?
http://flickr.com/photos/mofetos/435827739/

41. Networking
Your Grandpa's HTML:
Links
Forms
Ajax:
XMLHttpRequest
Now:
Cross-Domain access with CORS
2-Way Streaming with WebSocket
Server-Sent Events with EventSource

42. Offline
Application Caching
Web Storage
Web SQL Database
Indexed Database
File Access

43. Installable, if you want to
Mobile: PhoneGap, Titanium, Roll-Your-Own
Desktop: Google Chrome Web Store

44. And Besides Compatibility ...
Open standards
Open source
Easy to dive in
Tools and library support
Diverse community

45. Want to Learn More?
HTML5Rocks.com
ChromeExperiments.com
Want to Learn Even More?
http://www.html5rocks.com/resources.html

46. 'Which?' is the Wrong Question

47. Web Apps
• Near universal coverage
• Deploy once, update instanly
Native Apps
• Deep hardware and platform integration
• Support for rapid hardware innovation
• Device and platform specific features
• Optimized user experience
Two Great Tastes that Taste Great Together

48. • Yes!
• Build a web client first to offer your app to the largest
possible community of users.
• Build an optimized native client that leverages platform
specific features and an optimized user experience.
Both? Really?

49. • Hardware access?
• Feel the need for speed?
• Background or concurrent execution?
• System access?
• Deep integration?
Understand Your App's Needs

50. HTML5 in Native
Most platforms include a native Web View control.
Include Web View for specific features
Book reader: The catalogue
Game: High scores
or use HTML5 for the entire app ...

51. HTML5 for Entire App
Wrap HTML5 app as native.
Can also use native capabilities.
Nitobi PhoneGap
http://phonegap.com/apps
http://build.phonegap.com (private beta)
http://apparat.io/ from Uxebu (private beta)
Appcelerator Titanium
http://appcelerator.com

52. Native Apps with HTML5
Make it work offline.
Use client-side storage when offline.
Don't point to server...package it up!
Or use Application Cache and Client-Side Storage.

53. Native Apps with HTML5
Prioritize platforms.
For high-priority platforms, customise UI and incorporate
native features.
CSS Media Queries.
JavaScript Feature Detection (Modernizr library).
Introduce native styling.
UI Toolkits: Sencha Touch, jQTouch, jQuery Mobile ...

54. Questions!
• Twitter:
o @retomeier (Android)
o @mahemoff (Web)