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
   

   View Slide

2. @pantojacoder
   Nuria Ruiz
   Thursday, November 7, 2013
   

   View Slide

3. 5 million unique users
   per week
   50% use Mobile
   2 million use Mobile Only
   Thursday, November 7, 2013
   

   View Slide

4. HTML5 Native
   Thursday, November 7, 2013
   

   View Slide

5. HTML5 Native
   Not your average mobile
   website. See Forecast.io
   Thursday, November 7, 2013
   

   View Slide

6. HTML5 Native
   Thursday, November 7, 2013
   

   View Slide

7. HTML5 Native
   Thursday, November 7, 2013
   

   View Slide

8. A Hybrid App is a
   Mobile App in which
   some
   of the main
   functionality is web
   based
   Thursday, November 7, 2013
   

   View Slide

9. Disclaimer: We
   are talking
   remote
   webviews
   Thursday, November 7, 2013
   

   View Slide

10. HTML5 Native
    Thursday, November 7, 2013
    

    View Slide

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
    

    View Slide

12. 
    Thursday, November 7, 2013
    

    View Slide

13. Intrinsic Differences
    Between Mobile Web and
    Webviews
    Thursday, November 7, 2013
    

    View Slide

14. 1.You can pack part
    of your Javascript
    with the App.
    Thursday, November 7, 2013
    

    View Slide

15. Thursday, November 7, 2013
    

    View Slide

16. 2. You can very
    easily open Native
    functionality from
    a WebView.
    Thursday, November 7, 2013
    

    View Slide

17. Link to
    profile
    my-protocol://profile/123456
    Thursday, November 7, 2013
    

    View Slide

18. 3. End of sessions
    are likely not 301s
    anymore.
    Thursday, November 7, 2013
    

    View Slide

19. 4. Offline.
    AppCache Issues
    Improving AppCache
    Thursday, November 7, 2013
    

    View Slide

20. 
    Thursday, November 7, 2013
    

    View Slide

21. Value
    Proposition
    Hybrid Apps
    Thursday, November 7, 2013
    

    View Slide

22. Best of both
    worlds
    Or messy marriage?
    Thursday, November 7, 2013
    

    View Slide

23. What is the web good at?
    Portability
    Layout, formatting text.
    Delivery
    Thursday, November 7, 2013
    

    View Slide

24. What is the web good at?
    Portability
    Layout, formatting text.
    Delivery
    Share Functionality
    You Control the Updates
    Fast Prototyping
    Thursday, November 7, 2013
    

    View Slide

25. Not so Good.
    Thursday, November 7, 2013
    

    View Slide

26. Not so Good.
    Performance?
    Thursday, November 7, 2013
    

    View Slide

27. Not so Good.
    Performance?
    IOS Browser Speed Bake off
    Thursday, November 7, 2013
    

    View Slide

28. Not so Good.
    Performance?
    IOS Browser Speed Bake off
    Performance differences are mostly
    determined by network speed
    Thursday, November 7, 2013
    

    View Slide

29. Not so Good.
    Performance?
    Native Browser ~ WebView Browser
    In Android
    Uses V8
    Thursday, November 7, 2013
    

    View Slide

30. Not so Good.
    Linked In Mobile Breakup
    Sencha FastBook
    Tools
    Android Webview Debug Tools
    Thursday, November 7, 2013
    

    View Slide

31. The
    Basic Rule
    Thursday, November 7, 2013
    

    View Slide

32. Know Your
    User Base
    Thursday, November 7, 2013
    

    View Slide

33. Know Your
    User Base
    Because It Determines
    Your strategy
    Thursday, November 7, 2013
    

    View Slide

34. beyond-the-mobile-web-yibu
    Thursday, November 7, 2013
    

    View Slide

35. Example
    Thursday, November 7, 2013
    

    View Slide

36. Thursday, November 7, 2013
    

    View Slide

37. On 2011 - 500K pageviews daily
    Thursday, November 7, 2013
    

    View Slide

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
    

    View Slide

39. m.tuenti this week
    No Javascript
    support to
    speak of
    Thursday, November 7, 2013
    

    View Slide

40. Thursday, November 7, 2013
    

    View Slide

41. The
    Strategy
    Thursday, November 7, 2013
    

    View Slide

42. 1. Be Plain
    Thursday, November 7, 2013
    

    View Slide

43. 1. Be Plain
    Have a
    version
    without
    Javascript that works
    everywhere
    Thursday, November 7, 2013
    

    View Slide

44. Plain
    navigation
    No-Ajax
    submit
    Thursday, November 7, 2013
    

    View Slide

45. Plain
    navigation
    No-Ajax
    submit
    A webview
    in a low-grade
    Android would
    see a ‘plain’
    version
    Thursday, November 7, 2013
    

    View Slide

46. Bonus: Dumb Site
    can be used for not so
    smart desktop
    browsers ... IE6/IE7
    Thursday, November 7, 2013
    

    View Slide

47. 2. Augment
    Thursday, November 7, 2013
    

    View Slide

48. 2. Augment no JS
    on first
    pageload, once loaded
    decorate
    Thursday, November 7, 2013
    

    View Slide

49. Fastest
    Javascript is the
    one you do not need to
    execute
    Thursday, November 7, 2013
    

    View Slide

50. How?
    Thursday, November 7, 2013
    

    View Slide

51. How? Composed via
    annotations
    in code. No
    client-side
    loader
    framework
    needed
    Thursday, November 7, 2013
    

    View Slide

52. /*
    @DependencyFileList(requires="js/wap/tuportal.js, js/wap/
    tuportal/voicemail.js")
    */
    class TuvoicemailPageCoordinator {
    // Controller code goes here
    }
    How?
    Thursday, November 7, 2013
    

    View Slide

53. Responsive
    Design starts on
    the server
    Thursday, November 7, 2013
    

    View Slide

54. HTTP request
    Rough User Agent
    Detection
    Windows Phone7
    No Javascript
    Thursday, November 7, 2013
    

    View Slide

55. Responsive
    Design is not
    always possible
    Thursday, November 7, 2013
    

    View Slide

56. HTTP request
    Rough User Agent
    Detection
    jPlayer
    Android < 4.*
    Thursday, November 7, 2013
    

    View Slide

57. 3. Be Fancy
    Thursday, November 7, 2013
    

    View Slide

58. 3. Be Fancy,
    native functionality from
    webview
    access
    Thursday, November 7, 2013
    

    View Slide

59. WebView can
    access the
    device
    camera via
    Javascript
    Thursday, November 7, 2013
    

    View Slide

60. http://cordova.apache.org
    Thursday, November 7, 2013
    

    View Slide

61. http://www.appgyver.com/steroids
    Thursday, November 7, 2013
    

    View Slide

62. Disclaimer: We
    are talking
    remote
    webviews
    Not the standard way to set up
    your PhoneGap App
    Thursday, November 7, 2013
    

    View Slide

63. Cordova is big, 70K
    compressed
    Have the communication
    bridge deployed locally.
    Rest of JS is remote.
    Thursday, November 7, 2013
    

    View Slide

64. Android 2.3
    requires some
    contorsions
    Thursday, November 7, 2013
    

    View Slide

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
    

    View Slide

66. Conclusion
    Thursday, November 7, 2013
    

    View Slide

67. Worth Trying
    Thursday, November 7, 2013
    

    View Slide

68. Questions
    @pantojacoder
    Thursday, November 7, 2013
    

    View Slide