An empty database in every pocket at FullStackCon

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

Transcript

1. A empt databas i ever pocke
2. Phi Nas @philnash http://philna.sh philnash@twilio.com
3. A empt databas i ever 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 ever pocke
12. Th option
13. Cookie
14. LocalStorag
15. LocalStorag localStorage.setItem('FullStackCon', '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. Suppo ?
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. id -keyva
41. id -keyva idbKeyval.set('FullStackCon', 'Awesome') .then(() => console.log(' ')) .catch(err => console.error(' ', err)); 01. 02. 03.
42. localForag
43. localForag localforage.setItem('FullStackCon', 'Awesome', function (err) { if (err) { console.error(' ', err); } else { console.log(' '); } }); 01. 02. 03. 04.
44. localForag localforage.setItem('FullStackCon', 'Awesome') .then(() => { console.log(' '); }) .catch((err) => { console.error(' ', err); }); 01. 02. 03.
45. id
46. id const dbPromise = idb.open('messages', 1, upgradeDB => { upgradeDB.createObjectStore('messages'); }); 01. 02. 03.
47. id dbPromise.then(db => { return db.transaction('messages') .objectStore('messages').get(key); }); 01. 02. 03. 04.
48. Dexi
49. Dexi const dexie = new Dexie("messageStore"); dexie.version(1).stores({ messages: 'sid,dateUpdated' }); 01. 02. 03. 04.
50. Dexi dexie.open().then((db) => { db.messages.where("sid").equals(key) .then((message) => { console.log(message.body); }); }); 01. 02. 03. 04.
51. pouchd
52. pouchd 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.
53. A empt databas i ever pocke
54. IndexedDB hel t enhanc th experienc
55. Performanc
56. Resilienc
57. Le ' l th s database !
58. Thank !
59. Thank ! @philnash http://philna.sh philnash@twilio.com