Does WebApp come Native to me?

Nadav WizmaniOS Development Leader

wiz@onavo.com

The JunctionAdvanced iOS Engineering

28 July, 2011

Agenda•Onavo•OnavoApp’s Evolution•The Challenge•Possibilities•The Spectrum•Conclusion •My Thoughts•Q & A

So, who is Onavo?

Onavo puts smartphone and tablet users in control of their mobile data usage

POC BETA

WebApp

Launch05/10 02/11 04/11

WebApp Container + Native

• App launched 3 months ago.• Winner @ The Next Web Start-up Rally

OnavoApp’s evolution

The ChallengeA GOOD product

Developer

Easy-to-make. Impressive. Familiar. Fast-to-make. As good as others. Pretty. Functional. Best. Worth money. Cross platform. Functional. Wide. Easy-to-update.....

Gorgeous. Really-pretty. Free. Easy-to-use. Valuable. Easy-to-install. Cheap. Cool. Recommended by Apple. Common. Unique. In The AppStore...

User

The ChallengeCategories of “A GOOD product”

• UX• Native Abilities• Distribution• Dynamic• Cross Platform• Development

The Possibilities WebApp

Container

Native

UX “A GOOD product”

categories

Container

Native

Pretty goodStill, lacks in loading time and responsivenessWebAp

p

Amazing !Also.. the users expect nothing less.

UX “A GOOD product”

categories

Container

Native

Pretty goodStill, lacks in loading time and responsivenessWebAp

p

Amazing !Also.. the users expect nothing less.

I highly recommend using advanced, well-established, amazing frameworks like Sencha Touch or Appcelerator’s Titanium Mobile

Native Abilities “A GOOD product”

categories

Container

Native

Nope. none. nada. (some pseudo abilities, but not really)

WebApp

Fully.

Yes we can!

Native Abilities “A GOOD product”

categories

Container

Native

Nope. none. nada. (some pseudo abilities, but not really)

WebApp

Fully.

Yes we can!

* Reminder: App Purchase / In-App Payments are also a Native Abilities

“A GOOD product” categories

Container

Yes we can!

DistributionNope. none. nada. 1,000,000 WebApp users? i don’t see it

WebApp

Yes, it’s crowded, yes, it’s noisy, and you have to work hard to get noticed - but it’s still THE go-to place for users looking for new apps

* Must read Apple’s guidelines.

Native

“A GOOD product” categories

Container

Yes we can!

DistributionNope. none. nada. 1,000,000 WebApp users? i don’t see it

WebApp

Yes, it’s crowded, yes, it’s noisy, and you have to work hard to get noticed - but it’s still THE go-to place for users looking for new apps

* Must read Apple’s guidelines.

Native

There are nice solution to manage iOS native beta distribution like TestFlight.

Dynamic“A GOOD product”

categories

Container

Native

Change it. now bring it back. now put something new..

WebApp

Hardly.Apple’s approve is required on each-and-every update

Like a charm

“A GOOD product” categories

Container

Native

WebApp Well. no.

(keep in mind, iOS is a range of devices

YES, with a bit more effort

Cross PlatformAs far as possible

“A GOOD product” categories

Container

Native

WebApp Well. no.

(keep in mind, iOS is a range of devices

YES, with a bit more effort

Cross PlatformAs far as possible

Frameworks like Sencha, PhoneGap provide very impressive Cross-Platform.

appcelerator’s Titanium Mobile translates your web code into different, cross-platform native Apps

“A GOOD product” categories

Container

Native

WebApp

Amazing development, design, debugging tools. VAST amount of developers.

A bit of both. major part is still developed as Web.

DevelopmentTools, Community & Support

Improving tools & frameworks, substantial developers community... until you get stuck

*stackoverflow.com is you friend

In a nutshellWebAp

p• Offline!• CACHE-MANIFEST.• Local Storage/DB.• Graphics / effects.• Touch Events.• Rich Content.• Completely Cross-platform.

In a nutshellOfflineWebAp

pCACHE MANIFEST

/main/home/main/app.js/settings/home/settings/app.jshttp://img.example.com/logo.pnghttp://img.example.com/check.pnghttp://img.example.com/cross.png

Cache

Storagevar db = openDatabase("Database_Name", "Database_Version"); database.executeSql("SELECT * FROM thejunction", function(result1) { database.executeSql("DROP TABLE thejunction", function(result2) { alert("My second database query finished executing!"); }); }); localStorage.setItem(‘userName’, ‘TheJunction’);

alert(“Hello “ + localStorage.userName);localStorage.removeItem(‘userName’);

In a nutshellJS-Native communication

ContainerNative code can set

JS variables and call it’s functions

JS code can triggerNative code callback

(with params)

ConclusionsLots of Questions to be asked.

My ThoughtsBest practices

•Read the Guidelines

•In-App Analytics

•Know your competition

•Treat BETA and product differently

•iOS is not just iPhone 4

•Go Native

Q & A

Nadav Wizmanwiz@onavo.com@nadavwiz