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

An empty database in everybody's pocket at 4Developers

An empty database in everybody's pocket at 4Developers

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

Twilimoji chat: https://github.com/philnash/twilimoji

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

April 03, 2017
Tweet

Transcript

  1. A empt databas i everybod ' pocke Phil Nash 4Developers

    2017
  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. A empt databas i everybod ' pocke

  12. Th option

  13. Cookie

  14. LocalStorag

  15. LocalStorag localStorage.setItem('FEL', 'Awesome');

  16. Bu ...

  17. WebSQL?

  18. S ...

  19. IndexedDB

  20. IndexedDB ha ba reputatio

  21. Wha i IndexedDB?

  22. Objec stor

  23. Transactiona

  24. Asynchronou

  25. Sam origi polic

  26. Dem

  27. Ther ' mor !

  28. Indexe

  29. 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.
  30. 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.
  31. Upgrade

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

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

  35. Safar

  36. Librarie !

  37. id -keyva localForag id Dexi PouchDB

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

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

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

  41. IndexedDB hel t enhanc th experienc

  42. Performanc

  43. Resilienc

  44. Le ' l th s database !

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