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

An empty database in everybody's pocket at NG-Poland

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
November 22, 2016

An empty database in everybody's pocket at NG-Poland

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:

Angular2-indexedDB: https://github.com/gilf/angular2-indexeddb
Angular-indexedDB: https://github.com/bramski/angular-indexedDB

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

November 22, 2016
Tweet

Transcript

  1. An empty database in everybody's pocket Phil Nash NG-Poland 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('NG-Poland', '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. 0:00 / 0:48

  27. 0:00 / 4:36

  28. Open the database let db; const request = indexedDB.open("messagesTest", 1);

    request.onerror = (err) => console.error(err); request.onupgradeneeded = (event) => { const db = event.target.result; db.createObjectStore("messages", { keyPath: "sid" }); }; request.onsuccess = (event) => { // do other stuff } 01. 02. 03. 04. 05. 06. 07. 08.
  29. Add messages to the database const transaction = db.transaction(["messages"], "readwrite");

    const objectStore = transaction.objectStore("messages"); const request = objectStore.put(message); request.onsuccess = (event) => console.log(event); 01. 02. 03. 04.
  30. Read messages from the database request.onsuccess = (event) => {

    db = event.target.result; const transaction = db.transaction(["messages"]); const objectStore = transaction.objectStore("messages"); objectStore.openCursor().onsuccess = (event) => { const cursor = event.target.result; if (cursor) { messageList.addMessage(cursor.value); cursor.continue(); } else { renderMessages(messageList); } }; }; 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14.
  31. There's more!

  32. Indexes

  33. 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.
  34. 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.
  35. Upgrades

  36. Upgrades request.onupgradeneeded = (event) => { const db = event.target.result;

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

  39. Safari

  40. Libraries!

  41. idb-keyval localForage idb Dexie PouchDB

  42. angular2-indexeddb

  43. angular2-indexedDB import {AngularIndexedDB} from 'angular2-indexeddb'; const db = new AngularIndexedDB('messageStore',

    1); db.createStore(1, (event) => { const objectStore = event.currentTarget.result; objectStore.createObjectStore('messages', { keyPath: "sid"}); }); 01. 02. 03. 04. 05. 06. 07. 08.
  44. angular2-indexedDB db.update('messages', message).then(() => { console.log("yay!"); }, (error) => {

    console.error("boo!", error); }); 01. 02. 03. 04. 05.
  45. angular2-indexedDB db.openCursor('messages', (event) => { const cursor = event.target.result; if(cursor)

    { // do something with cursor.value cursor.continue(); } else { // render } }); 01. 02. 03. 04. 05. 06. 07. 08. 09.
  46. Angular 1?

  47. angular-indexedDB

  48. An empty database in everybody's pocket

  49. IndexedDB enhances the experience

  50. Performance

  51. Resiliency

  52. Let's fill those databases!

  53. Thanks! @philnash http://philna.sh philnash@twilio.com