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 full-size slide

  2. 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 full-size slide

  3. https://youtu.be/bWXAZboHZN8

    View full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

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

    View full-size slide

  8. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 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 full-size slide

  12. https://www.pwastats.com/

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

  23. 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 full-size slide

  24. https://github.com/localForage/localForage

    View full-size slide

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

    View full-size slide

  26. Apache CouchDB
    PouchDB
    IBM Cloudant

    View full-size slide

  27. “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 full-size slide

  28. 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 full-size slide

  29. https://pouchdb.com/

    View full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Cloudant Envoy

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. Thank you
    IBM Cloud / March 6, 2018 / © 2018 IBM Corporation
    Bradley Holt
    Developer Advocate
    Senior Software Engineer

    ibm.com

    View full-size slide

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

    View full-size slide