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

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