Javascript Strategies for Hybrid Apps and Mobile Web

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.

Transcript

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