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)