0
Revised v4Presenter
Web or Native for Mobile Development?
Android
Reto Meier
@retomeier
Web
Michael Mahemoff
@mahemoff
The Question
• Should you build you mobile apps as HTML5 apps or
native apps?
The Answer
YES
The Case for Native Apps
If you can't think of a way to improve your
web app using Android SDK features...
If you can't think of a way to improve your
web app using Android SDK features...
You're doing it wrong!
Standards Will Always Trail Innovation
• Hardware support
• Rich Integration
Impending Hardware Standards
• Location Based Services
• Microphone input
• Accelerometers
Hardware is Rapidly Evolving
• 2007: Multi-touch, accelerometers, microphone
• 2008: Video, compass, background apps
• 200...
New Hardware Platforms
• Tablets
• Televisions
• Cars? Picture Frames? Fridges? Washing Machines?
Currently Supported Hardware
• Smartphones / Tablets / Television
• Microphone
• Video camera (front facing / rear facing)...
Intents Based Data Sharing
• Lets 3rd parties exchange data
• Lets apps extend each other
Ubiquity
• Widget, Live Folders, Live Wallpapers
• Quick Search Box
• Notifications
• Ability to replace native apps
True Background Services
• Alarms
• Intent Receivers
• Cloud to Device Messaging
• Background execution / concurrent apps
Current Android Platform Features
• Geo services
• Sensors
• Interprocess communications (Intents!)
• Background, schedule...
Native App Strengths
• Apps that use the hardware
• Apps that integrate system features
• Apps that work with other apps
•...
The Case for HTML5
Remember when computers were computers?
TVs were TVs?
Mobile phones were thumping great bricks?
Form Factors Rock!
Form Factors Rock
... for users!
But less so for developers.
Modern Developer,
You need to consider ...
Desktop
Laptop
Netbook
Smartphone
Feature phone
Tablet
TV
As a Developer, you need to
consider ...
Watch?
Car?
Fridge?
USB Desktop Aquarium?
(Maybe not.)
Desktop
Windows
OSX
Linux
...
Mobile
Android
iOS
BlackBerry
Windows Mobile 6.5
Windows Mobile 7 (rewrite)
Symbian
Meego
...
How about in 2015?
Anyone's guess!
But one platform is likely to be there: Web.
Write Once, Run Many
is starting to sound like a good idea
Web Handles Many User Interfaces
Browsers use a fluid layout model.
Sensible defaults, whether a 10cm phone or a 200cm TV
...
Web Provides Secure Sandboxing
Same-origin policy prevents sharing across different domains
Web Provides Porous Boundaries
It's not black-and-white.
Apps *can* share data securely - OAuth, Cross-Origin
Resource Sha...
Web Supports Permissioning
Now we have rich functionality on the web, e.g. GeoLocation.
But not every app gets access.
As ...
So Web Architecture is Good in Theory
How about in practice?
HTML5 is Ready Today
Not 2050, Not 2020. Today.
HTML5 is Ready Today
Oh and it's fast too
Javascript Performance Benchmark
http://is.gd/dAKqS
Firefox 0.8 (2004): 1802ms
C...
User Interface: Canvas
Canvas: Effect Engine
HTML5 Game Jam: "Enterprise"
User Interface: CSS
Custom Fonts
Transforms
Much more...
Input
Geolocation
Orientation
Speech Detection
Idle Detection
Device API: Camera? Microphone?
http://flickr.com/photos/mof...
Networking
Your Grandpa's HTML:
Links
Forms
Ajax:
XMLHttpRequest
Now:
Cross-Domain access with CORS
2-Way Streaming with W...
Offline
Application Caching
Web Storage
Web SQL Database
Indexed Database
File Access
Installable, if you want to
Mobile: PhoneGap, Titanium, Roll-Your-Own
Desktop: Google Chrome Web Store
And Besides Compatibility ...
Open standards
Open source
Easy to dive in
Tools and library support
Diverse community
Want to Learn More?
HTML5Rocks.com
ChromeExperiments.com
Want to Learn Even More?
http://www.html5rocks.com/resources.html
'Which?' is the Wrong Question
Web Apps
• Near universal coverage
• Deploy once, update instanly
Native Apps
• Deep hardware and platform integration
• S...
• Yes!
• Build a web client first to offer your app to the largest
possible community of users.
• Build an optimized nativ...
• Hardware access?
• Feel the need for speed?
• Background or concurrent execution?
• System access?
• Deep integration?
U...
HTML5 in Native
Most platforms include a native Web View control.
Include Web View for specific features
Book reader: The ...
HTML5 for Entire App
Wrap HTML5 app as native.
Can also use native capabilities.
Nitobi PhoneGap
http://phonegap.com/apps
...
Native Apps with HTML5
Make it work offline.
Use client-side storage when offline.
Don't point to server...package it up!
...
Native Apps with HTML5
Prioritize platforms.
For high-priority platforms, customise UI and incorporate
native features.
CS...
Questions!
• Twitter:
o @retomeier (Android)
o @mahemoff (Web)
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
Upcoming SlideShare
Loading in...5
×

HTML5 or Android for Mobile Development?

67,243

Published on

Android apps or the mobile web? It's often a hard choice when deciding where to invest your mobile development resources. While the mobile web continues to grow, apps and app stores are incredibly popular. We will present both perspectives and offer some suggestions for making the most of each platform.

Published in: Technology
6 Comments
45 Likes
Statistics
Notes
No Downloads
Views
Total Views
67,243
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1,227
Comments
6
Likes
45
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 or Android for Mobile Development?"

  1. 1. Revised v4Presenter Web or Native for Mobile Development? Android Reto Meier @retomeier Web Michael Mahemoff @mahemoff
  2. 2. The Question • Should you build you mobile apps as HTML5 apps or native apps?
  3. 3. The Answer YES
  4. 4. The Case for Native Apps
  5. 5. If you can't think of a way to improve your web app using Android SDK features...
  6. 6. If you can't think of a way to improve your web app using Android SDK features... You're doing it wrong!
  7. 7. Standards Will Always Trail Innovation • Hardware support • Rich Integration
  8. 8. Impending Hardware Standards • Location Based Services • Microphone input • Accelerometers
  9. 9. 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: ???
  10. 10. New Hardware Platforms • Tablets • Televisions • Cars? Picture Frames? Fridges? Washing Machines?
  11. 11. 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
  12. 12. Intents Based Data Sharing • Lets 3rd parties exchange data • Lets apps extend each other
  13. 13. Ubiquity • Widget, Live Folders, Live Wallpapers • Quick Search Box • Notifications • Ability to replace native apps
  14. 14. True Background Services • Alarms • Intent Receivers • Cloud to Device Messaging • Background execution / concurrent apps
  15. 15. 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
  16. 16. 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
  17. 17. The Case for HTML5
  18. 18. Remember when computers were computers?
  19. 19. TVs were TVs?
  20. 20. Mobile phones were thumping great bricks?
  21. 21. Form Factors Rock!
  22. 22. Form Factors Rock ... for users! But less so for developers.
  23. 23. Modern Developer, You need to consider ... Desktop Laptop Netbook Smartphone Feature phone Tablet TV
  24. 24. As a Developer, you need to consider ... Watch? Car? Fridge? USB Desktop Aquarium? (Maybe not.)
  25. 25. Desktop Windows OSX Linux ...
  26. 26. Mobile Android iOS BlackBerry Windows Mobile 6.5 Windows Mobile 7 (rewrite) Symbian Meego ...
  27. 27. How about in 2015? Anyone's guess! But one platform is likely to be there: Web.
  28. 28. Write Once, Run Many is starting to sound like a good idea
  29. 29. 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
  30. 30. Web Provides Secure Sandboxing Same-origin policy prevents sharing across different domains
  31. 31. Web Provides Porous Boundaries It's not black-and-white. Apps *can* share data securely - OAuth, Cross-Origin Resource Sharing, Cross-Document Messaging.
  32. 32. 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.
  33. 33. So Web Architecture is Good in Theory How about in practice?
  34. 34. HTML5 is Ready Today Not 2050, Not 2020. Today.
  35. 35. 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)
  36. 36. User Interface: Canvas Canvas: Effect Engine HTML5 Game Jam: "Enterprise"
  37. 37. User Interface: CSS Custom Fonts Transforms Much more...
  38. 38. Input Geolocation Orientation Speech Detection Idle Detection Device API: Camera? Microphone? http://flickr.com/photos/mofetos/435827739/
  39. 39. 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
  40. 40. Offline Application Caching Web Storage Web SQL Database Indexed Database File Access
  41. 41. Installable, if you want to Mobile: PhoneGap, Titanium, Roll-Your-Own Desktop: Google Chrome Web Store
  42. 42. And Besides Compatibility ... Open standards Open source Easy to dive in Tools and library support Diverse community
  43. 43. Want to Learn More? HTML5Rocks.com ChromeExperiments.com Want to Learn Even More? http://www.html5rocks.com/resources.html
  44. 44. 'Which?' is the Wrong Question
  45. 45. 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
  46. 46. • 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?
  47. 47. • Hardware access? • Feel the need for speed? • Background or concurrent execution? • System access? • Deep integration? Understand Your App's Needs
  48. 48. 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 ...
  49. 49. 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
  50. 50. 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.
  51. 51. 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 ...
  52. 52. Questions! • Twitter: o @retomeier (Android) o @mahemoff (Web)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×