This document discusses front-end databases and IndexedDB. It begins by describing the limitations of cookies and localStorage for storing data in the browser. It then introduces IndexedDB as an advanced key-value database that provides fast and reliable local data storage with limited capacity. The document demonstrates how to perform basic operations with IndexedDB like opening a database, creating object stores, adding and retrieving data using cursors and indexes. It notes some issues with IndexedDB's verbose API and discusses libraries that provide simpler interfaces. It concludes by explaining how IndexedDB is well-suited for offline and data-driven scenarios.

2. WHO’S AFRAID OF FRONT-
END DATABASES?

3. The problems

4. Performance

5. Offline Scenarios

6. User Experience

7. WHO’S AFRAID OF FRONT-
END DATABASES?

8. About Me
• sparXys CEO and senior consultant
• Microsoft MVP in the last 8 years
• Pro Single Page Application Development (Apress) co-author
• 4 Microsoft Official Courses (MOCs) co-author
• GDG Rishon and AngularUP co-organizer

9. Agenda
• The options
• IndexedDB
• Working with libraries

10. Storing Data in The Browser
• Cookies
• Super small storage, string based, API not friendly
• Web Storage (localStorage / sessionStorage)
• String based dictionary, synchronous API
• Web SQL database
• Deprecated!

11. Cookies
Are such an old technology…

12. DEMO: COOKIES

13. How localStorage feels like

14. DEMO: LOCALSTORAGE

16. IndexedDB
• Advanced key-value data management
IndexedDB
Front-end
App
Fast
Reliable
Limited capacity
Local access only
Information loss

17. IndexedDB
Database
objectStore
Cursor on
objectStore
key : value
key : value
key : value
Index
Cursor on
index

18. IndexedDB API
• Very massive!
• Asynchronous
• Important note: synchronous APIs were deprecated by W3C
• Exposed through window.indexedDB object

19. DEMO: INDEXEDDB IN
ACTION

21. IndexedDB – Open the Database
var db;
var request = window.indexedDB.open(“dbName");
request.onerror = function(event) {
…
};
request.onsuccess = function(event) {
db = request.result;
};

22. IndexedDB – Creating an objectStore
var request = indexedDB.open(‘dbName’, 2);
request.onupgradeneeded = function(event) {
// Create an objectStore to hold information about customers.
var objectStore = db.createObjectStore(“products", { keyPath: “id" });
// Create an index to search customers by name.
objectStore.createIndex("name", "name", { unique: false });
};

23. IndexedDB – Creating a Transaction
var transaction = db.transaction([“products"], “readwrite”);
transaction.oncomplete = function(event) { … };
transaction.onerror = function(event) { … };
// will add the object into the objectStore
var objectStore = transaction.objectStore(“products”);
var request = objectStore.add({ id: 7, name: “IndexedDB" });
request.onsuccess = function(event) {
// event.target.result == object.id
}

24. IndexedDB – Using a Cursor
var transaction = db.transaction([“products”]);
var objectStore = transaction.objectStore(“products”);
var cursor = objectStore.openCursor();
cursor.onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
…
cursor.continue();
} else {
console.log(“No entries”);
}
};

25. IndexedDB – Working with Indexes
var transaction = db.transaction([“products”]);
var objectStore = transaction.objectStore(“products”);
var index = objectStore.index(“name”);
var request = index.get(“John");
request.onsuccess = function(event) { … };

26. DEMO: LET’S CODE WITH
INDEXEDDB

27. IndexedDB Problems?
• Verbose syntax
• Too much boilerplate
• No support for queries style SQL
• No full text search
• And more

28. Libraries to the Rescue
• Dixie.js - http://dexie.org/
• localForage - https://github.com/localForage/localForage
• PouchDB - https://pouchdb.com/
• Working with Angular? you are covered
• Angular 1 service - https://github.com/bramski/angular-indexedDB
• angular2-indexeddb service - https://github.com/gilf/angular2-indexeddb

29. DEMO: DIXIE

30. Where IndexedDB Shines?
• Data driven scenarios
• As a hybrid application database
• Combined with Service Workers
• Or for any offline scenarios

31. Summary
• IndexedDB is a full blown database in your app’s front-end
• It can help you to persist your front-end data
• IndexedDB is suitable for offline scenarios

32. Resources
• IndexedDB on MDN - http://mzl.la/1u1sngQ
• angular2-indexeddb - https://github.com/gilf/angular2-indexeddb
• My Website – http://www.gilfink.net
• Follow me on Twitter – @gilfink

33. Thank You!