An empty database in everybody's pocket at Front End London

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

Transcript

1. An empty database in everybody's pocket Phil Nash Front End London November 2016
2. Phil Nash @philnash http://philna.sh philnash@twilio.com
3. An empty database in everybody's pocket
4. Problems
5. Performance
6. Offline
7. Offline Poor connectivity
8. Offline Poor connectivity Resiliency
9. User experience
10. An empty database in everybody's pocket
11. The options
12. Cookies
13. LocalStorage
14. LocalStorage localStorage.setItem('FEL', 'Awesome');
15. But...
16. WebSQL?
17. So...
18. IndexedDB
19. IndexedDB has a bad reputation
20. What is IndexedDB?
21. Object store
22. Transactional
23. Asynchronous
24. Same origin policy
25. Demo
26. There's more!
27. Indexes
28. Indexes 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.
29. Indexes 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.
30. Upgrades
31. Upgrades request.onupgradeneeded = (event) => { const db = event.target.result; db.createObjectStore("messages", { keyPath: "sid" }); }; 01. 02. 03. 04.
32. Upgrades 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.
33. Bugs
34. Safari
35. Libraries!
36. idb-keyval localForage idb Dexie PouchDB
37. Dexie const dexie = new Dexie("messageStore"); dexie.version(1).stores({ messages: 'sid,dateUpdated' }); 01. 02. 03. 04.
38. Dexie dexie.open().then((db) => { db.messages.where("sid").equals(key) .then((message) => { console.log(message.body); }); }); 01. 02. 03. 04.
39. An empty database in everybody's pocket
40. IndexedDB enhances the experience
41. Performance
42. Resiliency
43. Let's fill those databases!
44. Thanks! @philnash http://philna.sh philnash@twilio.com