Javascript Strategies for Hybrid Apps and Mobile Web

2,473 views

Published on

In this talk we share challenging issues that we encountered when developing Webviews for Android and iOS. Why we think Webviews and Mobile Web are two closely related, but different problems. We will also discuss PhoneGap and how it is a game changer, but also how the best way to use it in a Hybrid App might not be the most obvious one.

Presented a short version of this talk at dotJS on 2013: https://www.youtube.com/watch?v=9xcZNBLGWsU

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,473
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Javascript Strategies for Hybrid Apps and Mobile Web

  1. 1. Javascript Strategies For Hybrid Apps and Mobile Web Sunday, November 17, 2013
  2. 2. Nuria Ruiz @pantojacoder Sunday, November 17, 2013
  3. 3. 5 million unique users per week 50% use Mobile 2 million use Mobile Only Sunday, November 17, 2013
  4. 4. HTML5 Sunday, November 17, 2013 Native
  5. 5. HTML5 Native Not your average mobile website. See Forecast.io Sunday, November 17, 2013
  6. 6. HTML5 Sunday, November 17, 2013 Native
  7. 7. HTML5 Sunday, November 17, 2013 Native
  8. 8. A Hybrid App is a Mobile App in which some of the main functionality is web based Sunday, November 17, 2013
  9. 9. Disclaimer: We are talking remote webviews Sunday, November 17, 2013
  10. 10. HTML5 Sunday, November 17, 2013 Native
  11. 11. Disclaimer: We are talking remote webviews Important: Not all Javascript has to be remote. You can mix local and remote Javascript Sunday, November 17, 2013
  12. 12. <interlude> Sunday, November 17, 2013
  13. 13. Intrinsic Differences Between Mobile Web and Webviews Sunday, November 17, 2013
  14. 14. 1.You can pack part of your Javascript with the App. Sunday, November 17, 2013
  15. 15. Sunday, November 17, 2013
  16. 16. 2. You can very easily open Native functionality from a WebView. Sunday, November 17, 2013
  17. 17. my-protocol://profile/123456 Link to profile Sunday, November 17, 2013
  18. 18. 3. End of sessions are likely not 301s anymore. Sunday, November 17, 2013
  19. 19. 4. Offline. AppCache Issues Improving AppCache Sunday, November 17, 2013
  20. 20. </interlude> Sunday, November 17, 2013
  21. 21. Hybrid Apps Value Proposition Sunday, November 17, 2013
  22. 22. Best of both worlds Or messy marriage? Sunday, November 17, 2013
  23. 23. What is the web good at? Portability Layout, formatting text. Delivery Sunday, November 17, 2013
  24. 24. What is the web good at? Portability Share Functionality Layout, formatting text. Fast Prototyping Delivery You Control the Updates Sunday, November 17, 2013
  25. 25. Not so Good. Sunday, November 17, 2013
  26. 26. Not so Good. Performance? Sunday, November 17, 2013
  27. 27. Not so Good. Performance? IOS Browser Speed Bake off Sunday, November 17, 2013
  28. 28. Not so Good. Performance? Performance differences are mostly determined by network speed IOS Browser Speed Bake off Sunday, November 17, 2013
  29. 29. Not so Good. Performance? In Android Native Browser ~ WebView Browser Uses V8 Sunday, November 17, 2013
  30. 30. Not so Good. Tools Android Webview Debug Tools Sencha FastBook Linked In Mobile Breakup Sunday, November 17, 2013
  31. 31. The Basic Rule Sunday, November 17, 2013
  32. 32. Know Your User Base Sunday, November 17, 2013
  33. 33. Know Your User Base Because It Determines Your strategy Sunday, November 17, 2013
  34. 34. beyond-the-mobile-web-yibu Sunday, November 17, 2013
  35. 35. Example Sunday, November 17, 2013
  36. 36. Sunday, November 17, 2013
  37. 37. On 2011 - 500K pageviews daily Sunday, November 17, 2013
  38. 38. On 2011 - 500K pageviews daily We still have about 100k daily Says that it supports Javascript.. but it doesn’t really Sunday, November 17, 2013
  39. 39. m.tuenti this week No Javascript support to speak of Sunday, November 17, 2013
  40. 40. Sunday, November 17, 2013
  41. 41. The Strategy Sunday, November 17, 2013
  42. 42. 1. Be Plain Sunday, November 17, 2013
  43. 43. Have a version 1. Be Plain without Javascript that works everywhere Sunday, November 17, 2013
  44. 44. Plain navigation No-Ajax submit Sunday, November 17, 2013
  45. 45. Plain navigation A webview in a low-grade Android would see a ‘plain’ version Sunday, November 17, 2013 No-Ajax submit
  46. 46. Bonus: Dumb Site can be used for not so smart desktop browsers ... IE6/IE7 Sunday, November 17, 2013
  47. 47. 2. Augment Sunday, November 17, 2013
  48. 48. no JS 2. Augment on first pageload, once loaded decorate Sunday, November 17, 2013
  49. 49. Fastest Javascript is the one you do not need to execute Sunday, November 17, 2013
  50. 50. How? Sunday, November 17, 2013
  51. 51. How? Sunday, November 17, 2013 Composed via annotations in code. No client-side loader framework needed
  52. 52. How? <?php /* @DependencyFileList(requires="js/wap/tuportal.js, js/wap/ tuportal/voicemail.js") */ class TuvoicemailPageCoordinator { } // Controller code goes here Sunday, November 17, 2013
  53. 53. Responsive Design starts on the server Sunday, November 17, 2013
  54. 54. HTTP request Rough User Agent Detection Windows Phone7 No Javascript Sunday, November 17, 2013
  55. 55. Responsive Design is not always possible Sunday, November 17, 2013
  56. 56. HTTP request Rough User Agent Detection Android < 4.* jPlayer Sunday, November 17, 2013
  57. 57. 3. Be Fancy Sunday, November 17, 2013
  58. 58. 3. Be Fancy, access native functionality from webview Sunday, November 17, 2013
  59. 59. WebView can access the device camera via Javascript Sunday, November 17, 2013
  60. 60. http://cordova.apache.org Sunday, November 17, 2013
  61. 61. http://www.appgyver.com/steroids Sunday, November 17, 2013
  62. 62. Disclaimer: We are talking remote webviews Not the standard way to set up your PhoneGap App Sunday, November 17, 2013
  63. 63. Cordova is big, 70K compressed Have the communication bridge deployed locally. Rest of JS is remote. Sunday, November 17, 2013
  64. 64. Android 2.3 requires some contortions Sunday, November 17, 2013
  65. 65. public class MyWebViewClient extends CordovaWebViewClient { /** Once the page has finished loading it loads cordova in a non blocking fashion. Note that this means that cordova initialization is slower for 2.* clients than it would be for 4.* clients as it happens after the DOMContentRender event **/ public void onPageFinished(WebView view, String url) { view.loadUrl("javascript:" + this.readFile("cordova.js")); super.onPageFinished(view, url) } } } Sunday, November 17, 2013
  66. 66. Conclusion Sunday, November 17, 2013
  67. 67. Worth Trying Sunday, November 17, 2013
  68. 68. Questions Sunday, November 17, 2013 @pantojacoder

×