Download - HTML5 or Android for Mobile Development?
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• 2009: Bluetooth, multiple screen sizes• 2010: Gyroscopes, front facing cameras, NFC• 2011: ???
New Hardware Platforms
• Tablets• Televisions• Cars? Picture Frames? Fridges? Washing Machines?
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
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, 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
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
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
...
MobileAndroid
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 Manyis starting to sound like a good idea
Web Handles Many User InterfacesBrowsers use a fluid layout model.
Sensible defaults, whether a 10cm phone or a 200cm TV
Target specific platforms with CSS Media Queries
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 Sharing, Cross-Document Messaging.
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.
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 Benchmarkhttp://is.gd/dAKqSFirefox 0.8 (2004): 1802msChrome 7 (2010): 10ms
DOM Rendering Benchmarkhttp://jsperf.com/dom-selection-appending/2Firefox 0.8 (2004): ~111ms (9 ops/sec)Chrome 7 (2010): 2ms (460 ops/sec)
User Interface: Canvas
Canvas: Effect Engine
HTML5 Game Jam: "Enterprise"
User Interface: CSS
Custom FontsTransformsMuch more...
Input
Geolocation
Orientation
Speech Detection
Idle Detection
Device API: Camera? Microphone?http://flickr.com/photos/mofetos/435827739/
Networking
Your Grandpa's HTML:LinksForms
Ajax:XMLHttpRequest
Now:Cross-Domain access with CORS2-Way Streaming with WebSocketServer-Sent Events with EventSource
Offline
Application Caching
Web StorageWeb SQL DatabaseIndexed DatabaseFile 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.comChromeExperiments.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• Support for rapid hardware innovation• Device and platform specific features• Optimized user experience
Two Great Tastes that Taste Great Together
• 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?
• Hardware access?• Feel the need for speed?• Background or concurrent execution?• System access?• Deep integration?
Understand Your App's Needs
HTML5 in Native
Most platforms include a native Web View control.
Include Web View for specific featuresBook reader: The catalogueGame: High scores
or use HTML5 for the entire app ...
HTML5 for Entire App
Wrap HTML5 app as native.Can also use native capabilities.Nitobi PhoneGaphttp://phonegap.com/appshttp://build.phonegap.com (private beta)http://apparat.io/ from Uxebu (private beta)Appcelerator Titaniumhttp://appcelerator.com
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.
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 ...
Questions!
• Twitter: o @retomeier (Android)o @mahemoff (Web)