Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Bradley Holt

March 06, 2018
Tweet

More Decks by Bradley Holt

Other Decks in Programming

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 [email protected], 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