An empty database in everybody's pocket

IndexedDB is not new. It is supported in almost every browser. Without it, the future of progressive web apps are in peril. But there is not a lot of love for it and that needs to change.

We'll investigate why we should love IndexedDB and the kind of apps you can create when you have the power of a database in the browser. Then we'll dive into how to use IndexedDB with a look at both the terrifying API and the friendly libraries that will help us along the way. Together we'll discover a new love for IndexedDB.

--

Links:

idb-keyval: https://github.com/jakearchibald/idb-keyval
localForage: https://github.com/localForage/localForage
idb: https://github.com/jakearchibald/idb
Dexie: http://dexie.org/
PouchDB: https://pouchdb.com/

Transcript

1. An empty database in everybody's pocket
   Phil Nash
   Topconf Tallinn 2016
   

   View Slide

2. Phil Nash
   @philnash
   http://philna.sh
   philnash@twilio.com
   

   View Slide

3. An empty database in everybody's pocket
   

   View Slide

4. IndexedDB
   

   View Slide

5. IndexedDB has a bad reputation
   

   View Slide

6. The options
   

   View Slide

7. Cookies
   

   View Slide

8. LocalStorage
   

   View Slide

9. LocalStorage
   localStorage.setItem('Topconf', 'Awesome');
   

   View Slide

10. But...
    

    View Slide

11. WebSQL?
    

    View Slide

12. So... IndexedDB
    

    View Slide

13. Why?
    

    View Slide

14. Performance
    

    View Slide

15. Offline
    

    View Slide

16. Offline Poor connectivity
    

    View Slide

17. User experience
    

    View Slide

18. What is IndexedDB?
    

    View Slide

19. Object store
    

    View Slide

20. Transactional
    

    View Slide

21. Asynchronous
    

    View Slide

22. Same origin policy
    

    View Slide

23. Demo
    

    View Slide

24. There's more!
    

    View Slide

25. Indexes
    

    View Slide

26. Indexes
    request.onupgradeneeded = (event) => {
    const db = event.target.result;
    const objectStore = db.createObjectStore('messages', {
    keyPath: 'sid'
    });
    objectStore.createIndex('dateUpdated', 'dateUpdated');
    };
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    

    View Slide

27. Indexes
    const transaction = db.transaction(['messages']);
    const objectStore = transaction.objectStore('messages');
    const index = objectStore.index('dateUpdated');
    index.openCursor().onsuccess = (event) => {
    // do stuff
    }
    01.
    02.
    03.
    04.
    05.
    06.
    

    View Slide

28. Upgrades
    

    View Slide

29. Upgrades
    request.onupgradeneeded = (event) => {
    const db = event.target.result;
    db.createObjectStore("messages", { keyPath: "sid" });
    };
    01.
    02.
    03.
    04.
    

    View Slide

30. Upgrades
    request.onupgradeneeded = (event) => {
    const db = event.target.result;
    if (event.oldVersion < 1) {
    db.createObjectStore("messages", { keyPath: "sid" });
    }
    if (event.oldVersion < 2) {
    db.createObjectStore("channels", { keyPath: "sid" });
    }
    };
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    09.
    

    View Slide

31. Bugs
    

    View Slide

32. Safari
    

    View Slide

33. Libraries!
    

    View Slide

34. idb-keyval
    

    View Slide

35. idb-keyval
    idbKeyval.set('Topconf', 'Awesome')
    .then(() => console.log(' '))
    .catch(err => console.error(' ', err));
    01.
    02.
    03.
    

    View Slide

36. localForage
    

    View Slide

37. localForage
    localforage.setItem('key', 'value', function (err) {
    if (err) { console.error(' ', err); }
    else { console.log(' '); }
    });
    01.
    02.
    03.
    04.
    

    View Slide

38. localForage
    localforage.setItem('key', 'value')
    .then(() => { console.log(' '); })
    .catch((err) => { console.error(' ', err); });
    01.
    02.
    03.
    

    View Slide

39. idb
    

    View Slide

40. idb
    const dbPromise = idb.open('messages', 1, upgradeDB => {
    upgradeDB.createObjectStore('messages');
    });
    01.
    02.
    03.
    

    View Slide

41. idb
    dbPromise.then(db => {
    return db.transaction('messages')
    .objectStore('messages').get(key);
    });
    01.
    02.
    03.
    04.
    

    View Slide

42. Dexie
    

    View Slide

43. Dexie
    const dexie = new Dexie("messageStore");
    dexie.version(1).stores({
    messages: 'sid,dateUpdated'
    });
    01.
    02.
    03.
    04.
    

    View Slide

44. Dexie
    dexie.open().then((db) => {
    db.messages.where("sid").equals(key)
    .then((message) => { console.log(message.body); });
    });
    01.
    02.
    03.
    04.
    

    View Slide

45. pouchdb
    

    View Slide

46. pouchdb
    var db = new PouchDB('messages');
    db.put({
    _id: 'sid',
    body: ' ',
    }).then((response) => {
    console.log(' ');
    }).catch((err) => {
    console.error(' ', err);
    });
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    09.
    

    View Slide

47. IndexedDB enhances the experience
    

    View Slide

48. Let's fill those databases!
    

    View Slide

49. Thanks!
    @philnash
    http://philna.sh
    philnash@twilio.com
    

    View Slide