Does WebApp come Native to me?
Nadav WizmaniOS Development Leader
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