Offline First – Made Simple!

Have you ever tried to send a tweet in the subway? Access your cloud-stored
notes while your train enters tunnel? Tried to get a navigation route
abroad?

We can't keep building apps with the desktop mindset of permanent, fast
connectivity, where a temporary disconnection or slow service is regarded
as a problem and communicated as an error. The rise of mobile devices don't
provide that same level of quality and consistency, but at the same time
drive the expectations of ubiquitous data, across all devices.

The good news is: all the technology is here today, there is no reason not
to make your apps work offline. Neither are the problems unique to your
application. Generic solutions like Hoodie allow developers to build
excellent user experiences that deliver in the face of network
interruptions.

Today's apps should work offline per default, not as an exception. This
talk explains how.

Transcript

1. Offline First,
   Made Easy!
   Gregor Martynus / @gr2m / #offlinefirst
   

   View Slide

2. View Slide

3. View Slide

4. image: plane
   

   View Slide

5. View Slide

6. Oh, you're not from
   here?
   

   View Slide

7. Don't make
   assumptions on
   anything beyond
   your user's device.
   

   View Slide

8. Our offline experiences
   suck!
   ... and we should do something about it
   

   View Slide

9. Good news, everyone:
   We can build web apps that
   work offline today.
   Plus it's easy.
   Gregor from Team @HoodieHQ
   

   View Slide

10. Hi, I'm Gregor.
    

    View Slide

11. I'm a both-end Developer &
    UX Designer
    

    View Slide

12. I've created minutes.io –
    Offline First since 2011
    

    View Slide

13. Initiator at Hoodie, an Open Source
    Architecture to build Offline First
    apps
    (and to stop worrying about the backend).
    

    View Slide

14. Talk to me: @gr2m
    Talk to us: @hoodiehq
    Discuss #offlinefirst
    

    View Slide

15. View Slide

16. "Unlike the always-wired machines of
    the past, computers are now mobile and
    truly personal, and people move
    through online and offline seamlessly."
    

    View Slide

17. "Our apps should do the same."
    Commons sense.
    

    View Slide

18. Our Problem is ...
    

    View Slide

19. We live in a bubble.
    

    View Slide

20. We have been there
    before.
    

    View Slide

21. "More often than not, the mobile
    experience for a Web application or
    site is designed and built after the
    PC version is complete."
    Luke Wroblewski (2009)
    

    View Slide

22. 1. Mobile is exploding
    

    View Slide

23. 1. Mobile is exploding
    2. Mobile forces you to focus
    

    View Slide

24. 1. Mobile is exploding
    2. Mobile forces you to focus
    3. Mobile extends your
    capabilities
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. Offline First
    It's not a feature. It's a mindset.
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. How to build
    Offline First?
    

    View Slide

36. Steps for Offline First
    1. Separate Apps From Data
    2. Deliver App Code
    3. Save Data Offline
    4. Detect Connectivity
    5. Sync Data
    

    View Slide

37. Separate Apps from Data
    If you build JavaScript Apps today, you are there already.
    Backbone, Ember, Angular ... are your friends.
    

    View Slide

38. Deliver App Code
    And make it cacheable.
    Use appCache* today, ServiceWorkers tomorrow.
    *appCache is a Douchbag
    

    View Slide

39. CACHE MANIFEST
    # 2010-06-18:v2
    # Explicitly cached 'master entries'.
    CACHE:
    /favicon.ico
    index.html
    stylesheet.css
    images/logo.png
    scripts/main.js
    # Resources that require the user to be online.
    NETWORK:
    *
    # offline.html will be served if search is inaccessible
    # offline.jpg will be served in place of all images in images/large/
    FALLBACK:
    /search /offline.html
    images/large/ images/offline.jpg
    # MUST READ: http://alistapart.com/article/application-cache-is-a-douchebag
    

    View Slide

40. Sava Data Offline
    localStorage, IndexedDB, Wrapper of your choice
    

    View Slide

41. Detect Connectivity
    navigator.onLine, anyone?
    

    View Slide

42. Sync Data
    This is hard. Don't even think about inventing your own
    protocol. Build upon existing solutions.
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. Offline First is hard.
    

    View Slide

48. Everything is hard
    before it is easy
    1
    Johann Wolfgang von Goethe
    

    View Slide

49. Offline First,
    Made Easy?
    

    View Slide

50. // store an object
    hoodie.store.add('todo', {name: 'get the sun screen'})
    

    View Slide

51. // store an object
    hoodie.store.add('todo', {name: 'get the sun screen'})
    // create an account
    hoodie.account.signUp('joe@example.com', 'secret')
    

    View Slide

52. // store an object
    hoodie.store.add('todo', {name: 'get the sun screen'})
    // create an account
    hoodie.account.signUp('joe@example.com', 'secret')
    // send an email
    hoodie.email.send( emailProperties )
    

    View Slide

53. // store an object
    hoodie.store.add('todo', {name: 'get the sun screen'})
    // create an account
    hoodie.account.signUp('joe@example.com', 'secret')
    // send an email
    hoodie.email.send( emailProperties )
    But ... where is the Offline?
    

    View Slide

54. // store an object
    hoodie.store.add('todo', {name: 'get the sun screen'})
    // create an account
    hoodie.account.signUp('joe@example.com', 'secret')
    // send an email
    hoodie.email.send( emailProperties )
    Offline? Why should you care?
    

    View Slide

55. View Slide

56. // store an object
    hoodie.store.add('todo', {name: 'get the sun screen'})
    // create an account
    hoodie.account.signUp('joe@example.com', 'secret')
    // send an email
    hoodie.email.send( emailProperties )
    // events
    hoodie.store.on('change', handleObjectChange)
    hoodie.account.on('signin', handleSignIn)
    hoodie.on('disconnected', handleConnectionError)
    

    View Slide

57. Hoodie Architecture
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. Example
    hoodie.email.send(properties)
    

    View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. Offline First extends
    your capabilities.
    Now come the good parts
    

    View Slide

74. Conversion?
    

    View Slide

75. View Slide

76. Scaling?
    You barely know someone is using your app.
    

    View Slide

77. Latency? Zero.
    

    View Slide

78. View Slide

79. Save?
    All the time.
    

    View Slide

80. Server
    down?
    What do I care?
    

    View Slide

81. View Slide

82. Backend?
    Swappable commodity.
    

    View Slide

83. Offline First is an
    ongoing discussion
    

    View Slide

84. View Slide

85. Recap
    

    View Slide

86. Our Offline Experiences
    SUCK
    we have to do something about it.
    

    View Slide

87. Offline First
    is hard.
    if you need sync.
    

    View Slide

88. Take it easy
    use Hoodie <3
    

    View Slide

89. Questions?
    iOS/Android? Conflicts?
    Security? Administration?
    Hosting? Backbone/Ember/Angular?
    Production ready? Plugins? ...?
    

    View Slide

90. Offline First,
    Made Easy!
    Gregor Martynus / @gr2m / #offlinefirst
    Slides: go.hood.ie/jsonfbr-offlinefirst
    

    View Slide

91. Credits
    4 CatDog
    4 London tube station escalator
    4 The Origin of Internet Cats
    

    View Slide