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

An empty database in every pocket at DevTalks Bucharest

An empty database in every pocket at DevTalks Bucharest

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/

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

June 08, 2017
Tweet

Transcript

  1. A empt databas i ever pocke Phil Nash DevTalks Bucharest

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

  3. Warnin

  4. Bi Dat Trac

  5. Smal dat

  6. A empt databas i ever pocke

  7. Problem

  8. Performanc

  9. O lin

  10. O lin Poo connectivit

  11. O lin Poo connectivit Resilienc

  12. Use experienc

  13. Progressiv We Ap

  14. A empt databas i ever pocke

  15. Th option

  16. Cookie

  17. LocalStorag

  18. LocalStorag localStorage.setItem('DevTalks', 'Awesome');

  19. Bu ...

  20. WebSQL?

  21. S ...

  22. IndexedDB

  23. IndexedDB ha ba reputatio

  24. Wha i IndexedDB?

  25. Objec stor

  26. Transactiona

  27. Asynchronou

  28. Sam origi polic

  29. Dem

  30. Ther ' mor !

  31. Indexe

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

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

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

  38. Safar

  39. Librarie !

  40. id -keyva localForag id Dexi PouchDB

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

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

    }); 01. 02. 03. 04.
  43. A empt databas i ever pocke

  44. IndexedDB hel t enhanc th experienc

  45. Performanc

  46. Resilienc

  47. Le ' l th s database !

  48. Thank ! @philnash http://philna.sh philnash@twilio.com