Save 37% off PRO during our Black Friday Sale! »

An empty database in everybody's pocket at JSDay

An empty database in everybody's pocket at JSDay

IndexedDB is not new. It is supported in almost every browser and can power the most modern of client side applications. 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 and Angular integrations 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/

Twilio Programmable Chat (from the demo): https://www.twilio.com/chat

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

May 11, 2017
Tweet

Transcript

  1. A empt databas i everybod ' pocke Phil Nash JSDay

    2017 | #jsday
  2. Phi Nas @philnash http://philna.sh philnash@twilio.com

  3. A empt databas i everybod ' pocke

  4. Problem

  5. Performanc

  6. O lin

  7. O lin Poo connectivit

  8. O lin Poo connectivit Resilienc

  9. Use experienc

  10. Progressiv We Ap

  11. ...ar no enoug

  12. A empt databas i everybod ' pocke

  13. Th option

  14. Cookie

  15. LocalStorag

  16. LocalStorag localStorage.setItem('JSDay', 'Awesome'); localStorage.getItem('JSDay'); // 'Awesome' localStorage.removeItem('JSDay'); 01. 02. 03.

    04.
  17. Bu ...

  18. LocalStorag • Synchronous • Too simple setItem('object', JSON.stringify(object)) • Slow

  19. WebSQL?

  20. S ...

  21. IndexedDB

  22. IndexedDB ha ba reputatio

  23. Wha i IndexedDB?

  24. Objec stor

  25. Transactiona

  26. Asynchronou

  27. Sam origi polic

  28. Dem

  29. Ther ' mor !

  30. Indexe

  31. Indexe 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.
  32. Indexe 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.
  33. Upgrade

  34. Upgrade request.onupgradeneeded = (event) => { const db = event.target.result;

    db.createObjectStore("messages", { keyPath: "sid" }); }; 01. 02. 03. 04.
  35. Upgrade 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.
  36. Bu

  37. Safar

  38. Librarie !

  39. id -keyva localForag id Dexi PouchDB

  40. Dexi const dexie = new Dexie("messageStore"); dexie.version(1).stores({ messages: 'sid,dateUpdated' });

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

    }); 01. 02. 03. 04.
  42. A empt databas i everybod ' pocke

  43. IndexedDB hel t enhanc th experienc

  44. Performanc

  45. Resilienc

  46. Le ' l th s database !

  47. https://joind.in/talk/04cff

  48. Thank ! @philnash http://philna.sh philnash@twilio.com https://joind.in/talk/04cff