Does WebApp come Native to me? Nadav Wizman iOS Development Leader [email_address] The Junction Advanced 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 Launch 05/10 02/11 04/11 WebApp Container + Native
App launched  3 months ago. Winner @ The Next Web Start-up Rally OnavoApp ’ s evolution
The Challenge A 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 Challenge Categories of  “ A GOOD product ” UX Native Abilities Distribution Dynamic Cross Platform Development
The Possibilities  WebApp Container Native
UX  “ A GOOD product ”   categories Pretty good Still, lacks in loading time and responsiveness Amazing ! Also.. the users expect nothing  less. Container Native WebApp
UX  “ A GOOD product ”   categories Pretty good Still, lacks in loading time and responsiveness Amazing ! Also.. the users expect nothing  less. Container Native WebApp I highly recommend using advanced, well-established, amazing frameworks like   Sencha Touch  or  Appcelerator ’ s Titanium Mobile
Native Abilities  “ A GOOD product ”   categories Nope. none. nada.  (some pseudo abilities, but not really)  Fully. Yes we can! Container Native WebApp
Native Abilities  “ A GOOD product ”   categories Nope. none. nada.  (some pseudo abilities, but not really)  Fully. Yes we can! Container Native WebApp * Reminder:   App Purchase / In-App Payments are also a Native Abilities
Distribution “ A GOOD product ”   categories Yes we can! Nope. none. nada.  1,000,000 WebApp users? i don ’ t see it 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. Container WebApp Native
Distribution “ A GOOD product ”   categories Yes we can! Nope. none. nada.  1,000,000 WebApp users? i don ’ t see it 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. Container WebApp Native There are nice solution to manage iOS native beta distribution like  TestFlight .
Dynamic “ A GOOD product ”   categories Change it. now bring it back.  now put something new.. Hardly. Apple ’ s approve is required on each-and-every update Like a charm Container Native WebApp
Cross Platform “ A GOOD product ”   categories Well. no. (keep in mind, iOS is a range of devices YES, with a bit more effort As far as possible Container Native WebApp
Cross Platform “ A GOOD product ”   categories Well. no. (keep in mind, iOS is a range of devices YES, with a bit more effort As far as possible Container Native WebApp Frameworks like  Sencha ,  PhoneGap  provide very impressive Cross-Platform. appcelerator ’ s  Titanium Mobile  translates your web code into different, cross-platform native Apps
Development Tools, Community & Support  “ A GOOD product ”   categories Amazing development, design, debugging tools. VAST amount of developers. A bit of both. major part is still developed as Web. Improving tools & frameworks, substantial developers community... until you get stuck *stackoverflow.com is you friend Container Native WebApp
In a nutshell WebApp Offline! CACHE-MANIFEST. Local Storage/DB. Graphics / effects. Touch Events. Rich Content. Completely Cross-platform.
In a nutshell Offline WebApp Cache Storage CACHE MANIFEST /main/home /main/app.js /settings/home /settings/app.js http://img.example.com/logo.png http://img.example.com/check.pn g http://img.example.com/cross.p ng var 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 nutshell JS-Native communication Container Native code can set  JS variables and  call it ’ s functions JS code can trigger Native code callback (with params)
Conclusions Lots of Questions to be asked.
My Thoughts Best 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 Wizman [email_address] @nadavwiz

Advanced iOS Engineering - The Junction Talk

  • 1.
    Does WebApp comeNative to me? Nadav Wizman iOS Development Leader [email_address] The Junction Advanced iOS Engineering 28 July, 2011
  • 2.
    Agenda Onavo OnavoApp’ s Evolution The Challenge Possibilities The Spectrum Conclusion My Thoughts Q & A
  • 3.
    So, who isOnavo? Onavo puts smartphone and tablet users in control of their mobile data usage
  • 4.
    POC BETA WebAppLaunch 05/10 02/11 04/11 WebApp Container + Native
  • 5.
    App launched 3 months ago. Winner @ The Next Web Start-up Rally OnavoApp ’ s evolution
  • 6.
    The Challenge AGOOD 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
  • 7.
    The Challenge Categoriesof “ A GOOD product ” UX Native Abilities Distribution Dynamic Cross Platform Development
  • 8.
    The Possibilities WebApp Container Native
  • 9.
    UX “A GOOD product ” categories Pretty good Still, lacks in loading time and responsiveness Amazing ! Also.. the users expect nothing less. Container Native WebApp
  • 10.
    UX “A GOOD product ” categories Pretty good Still, lacks in loading time and responsiveness Amazing ! Also.. the users expect nothing less. Container Native WebApp I highly recommend using advanced, well-established, amazing frameworks like Sencha Touch or Appcelerator ’ s Titanium Mobile
  • 11.
    Native Abilities “ A GOOD product ” categories Nope. none. nada. (some pseudo abilities, but not really) Fully. Yes we can! Container Native WebApp
  • 12.
    Native Abilities “ A GOOD product ” categories Nope. none. nada. (some pseudo abilities, but not really) Fully. Yes we can! Container Native WebApp * Reminder: App Purchase / In-App Payments are also a Native Abilities
  • 13.
    Distribution “ AGOOD product ” categories Yes we can! Nope. none. nada. 1,000,000 WebApp users? i don ’ t see it 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. Container WebApp Native
  • 14.
    Distribution “ AGOOD product ” categories Yes we can! Nope. none. nada. 1,000,000 WebApp users? i don ’ t see it 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. Container WebApp Native There are nice solution to manage iOS native beta distribution like TestFlight .
  • 15.
    Dynamic “ AGOOD product ” categories Change it. now bring it back. now put something new.. Hardly. Apple ’ s approve is required on each-and-every update Like a charm Container Native WebApp
  • 16.
    Cross Platform “A GOOD product ” categories Well. no. (keep in mind, iOS is a range of devices YES, with a bit more effort As far as possible Container Native WebApp
  • 17.
    Cross Platform “A GOOD product ” categories Well. no. (keep in mind, iOS is a range of devices YES, with a bit more effort As far as possible Container Native WebApp Frameworks like Sencha , PhoneGap provide very impressive Cross-Platform. appcelerator ’ s Titanium Mobile translates your web code into different, cross-platform native Apps
  • 18.
    Development Tools, Community& Support “ A GOOD product ” categories Amazing development, design, debugging tools. VAST amount of developers. A bit of both. major part is still developed as Web. Improving tools & frameworks, substantial developers community... until you get stuck *stackoverflow.com is you friend Container Native WebApp
  • 19.
    In a nutshellWebApp Offline! CACHE-MANIFEST. Local Storage/DB. Graphics / effects. Touch Events. Rich Content. Completely Cross-platform.
  • 20.
    In a nutshellOffline WebApp Cache Storage CACHE MANIFEST /main/home /main/app.js /settings/home /settings/app.js http://img.example.com/logo.png http://img.example.com/check.pn g http://img.example.com/cross.p ng var 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 ’ );
  • 21.
    In a nutshellJS-Native communication Container Native code can set JS variables and call it ’ s functions JS code can trigger Native code callback (with params)
  • 22.
    Conclusions Lots ofQuestions to be asked.
  • 23.
    My Thoughts Bestpractices Read the Guidelines In-App Analytics Know your competition Treat BETA and product differently iOS is not just iPhone 4 Go Native
  • 24.
    Q & ANadav Wizman [email_address] @nadavwiz