IBM Code Tech Talk: Building Offline First Apps for Exceptional User Experiences

Offline First is an approach to app development in which you design your app for the most resource-constrained environment first. An Offline First approach provides a consistent user experience whether a device has no connectivity, limited connectivity, or great connectivity. One of the biggest benefits of Offline First apps is that they can be very fast, as they provide zero-latency access to content and data stored directly on the device. Learn how to build an Offline First data layer for Progressive Web Apps, hybrid mobile apps, native mobile apps, and even desktop apps using open source components including Apache CouchDB, Hoodie, and PouchDB.

Transcript

1. IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
   Building Offline First
   Apps for Exceptional
   User Experiences
   —
   Bradley Holt
   Developer Advocate
   Senior Software Engineer
   

   View Slide

2. View Slide

3. Offline Camp
   IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
   We are building an
   Offline First
   community, one
   campfire at a time.
   Offline Camp has
   visited the Catskills
   of New York, the
   Central Coast of
   California, Berlin,
   and Oregon.
   

   View Slide

4. https://youtu.be/bWXAZboHZN8
   

   View Slide

5. View Slide

6. Not just
   offline…
   IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
   Accès wi-fi à Gorakshep (5140m) by Jerome Bon, on Flickr (CC BY 2.0).
   

   View Slide

7. Reliable, fast, and
   engaging user
   experience—
   regardless of network
   connectivity
   IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
   Static Wallpaper by James Spinks, on Flickr (CC BY-SA 2.0).
   

   View Slide

8. Zero-latency
   access to
   content & data
   IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
   speed 3 by Monkieyes, on Flickr (CC BY 2.0).
   

   View Slide

9. IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
   Offline, Online & ¯\_(ツ)_/¯
   underground by weckgeschnappt_, on Flickr (CC BY 2.0).
   

   View Slide

10. View Slide

11. Shopping List
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    A series of demo
    Progressive Web
    Apps, hybrid
    mobile apps,
    native mobile
    apps, and a
    desktop app—
    each built using a
    different stack
    https://ibm-watson-data-lab.github.io/shopping-list-demo
    

    View Slide

12. https://github.com/ibm-watson-data-lab/shopping-list
    

    View Slide

13. https://developer.ibm.com/code/patterns/create-an-offline-first-shopping-list-with-polymer-and-pouchdb/
    

    View Slide

14. Progressive Web Apps
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Provides both the
    discoverability of a
    web app and the
    reliable, fast, and
    engaging user
    experience of a
    native mobile app
    

    View Slide

15. https://www.pwastats.com/
    

    View Slide

16. https://developers.google.com/web/showcase/2017/twitter
    

    View Slide

17. The next
    billion people
    on the internet
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    the galaxy by tommy@chau, on Flickr (CC BY 2.0).
    

    View Slide

18. Geolocation API
    Network Information API
    IndexedDB
    WebRTC API
    Push API
    Notifications API
    Device Orientation API
    Screen Orientation API
    Permissions API
    Proximity API
    Pointer Lock API
    Vibration API
    Payment Request API
    Battery Status API
    Ambient Light Sensor API
    Service Worker API
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).
    

    View Slide

19. Service Workers
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Service Workers
    allow for fine-
    grained control
    over caching of
    content and
    assets, enabling
    cache-first web
    apps
    Service Workers fetch diagram by Mozilla Contributors (CC-BY-SA 2.5).
    

    View Slide

20. https://caniuse.com/#feat=serviceworkers
    

    View Slide

21. Registering a service worker example by Mozilla Contributors (CC-BY-SA 2.5).
    

    View Slide

22. Install and activate a service worker example by Mozilla Contributors (CC-BY-SA 2.5).
    

    View Slide

23. Custom service worker response example by Mozilla Contributors (CC-BY-SA 2.5).
    

    View Slide

24. IndexedDB
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    IndexedDB enables
    app data to be
    stored locally
    within a browser
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).
    

    View Slide

25. https://caniuse.com/#search=indexdb
    

    View Slide

26. localForage
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    localForage is a
    polyfill that wraps
    IndexedDB,
    WebSQL, or
    localStorage,
    providing a
    consistent API
    regardless of which
    storage mechanism
    is supported by the
    end user’s browser
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).
    

    View Slide

27. https://github.com/localForage/localForage
    

    View Slide

28. Sync
    is
    Hard
    Technological devices designed by D3Images / Freepik .
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    

    View Slide

29. View Slide

30. Apache CouchDB
    PouchDB
    IBM Cloudant
    

    View Slide

31. “CouchDB’s superpower is sync.
    Sometimes I even try to explain it to
    people by saying, ‘CouchDB isn’t a
    database; it’s a sync engine.’ It’s a
    way of efficiently transferring data
    from one place to another, while
    intelligently managing conflicts and
    revisions. It’s very similar to Git.
    When I make that analogy, the light
    bulb often goes off.”
    Nolan Lawson
    PouchDB & CouchDB: An interview with Nolan Lawson
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    https://blog.couchdb.org/2017/04/04/pouchdb-couchdb-an-interview-with-nolan-lawson/
    

    View Slide

32. Offline Sync for
    Progressive
    Web Apps
    Apache CouchDB
    PouchDB
    Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    

    View Slide

33. https://pouchdb.com/
    

    View Slide

34. Pokedex.org
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    An offline-capable
    Progressive Web
    App built with
    Service Worker and
    PouchDB
    https://www.pokedex.org/
    

    View Slide

35. Hybrid Mobile Apps
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Tools such as
    Cordova and Ionic
    can be used to
    build native mobile
    apps using web
    platform tooling
    (HTML, CSS, and
    JavaScript),
    enabling you to
    target multiple
    platforms with one
    codebase
    

    View Slide

36. Offline Sync
    for Hybrid
    Mobile Apps
    Apache CouchDB
    PouchDB
    (SQLite adapter)
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    

    View Slide

37. Offline Sync
    for Hybrid
    Mobile Apps
    Apache CouchDB
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    Cloudant Sync –
    Cordova Plugin
    

    View Slide

38. Native Mobile Apps
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Native mobile apps
    provide a user
    experience
    tailored to the end
    user’s platform of
    choice
    

    View Slide

39. Offline Sync
    for Native
    Mobile Apps
    Apache CouchDB
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    Cloudant Sync
    for iOS or
    Android
    

    View Slide

40. Desktop Apps
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Tools such as
    Electron can be
    used to build cross-
    platform desktop
    apps using web
    platform tooling
    (HTML, CSS, and
    JavaScript)
    

    View Slide

41. Offline Sync
    for Desktop
    Electron Apps
    Apache CouchDB
    Technological devices designed by D3Images / Freepik . | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    PouchDB
    (LevelDB or SQLite adapter)
    

    View Slide

42. IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Multi-User
    Apps with
    Hoodie
    http://hood.ie/
    

    View Slide

43. View Slide

44. Apache CouchDB
    Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    

    View Slide

45. Cloudant Envoy
    

    View Slide

46. Join the
    Offline First
    community
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    

    View Slide

47. IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    offlinefirst.org/chat
    

    View Slide

48. View Slide

49. https://medium.com/offline-camp
    

    View Slide

50. Thank you
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Bradley Holt
    Developer Advocate
    Senior Software Engineer
    —
    ibm.com
    

    View Slide

51. IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    

    View Slide