The document discusses front-end databases and IndexedDB. It provides an overview of IndexedDB, describing it as an advanced key-value data management system that allows storage of large numbers of objects locally and fast insertion/extraction. It outlines some of IndexedDB's capabilities and limitations. The document then details aspects of the IndexedDB API like opening a database, creating object stores and indexes, performing transactions, and using cursors. It notes the API is verbose and asynchronous. Finally, it recommends libraries like PouchDB that provide a simpler wrapper for IndexedDB and discusses the presenter's angular2-indexeddb library.

1. WHO’S AFRAID OF
FRONT-END
DATABASES?
Gil Fink
sparXys CEO

2. Front-end Storage Problem

3. Cookies
Are such an old technology…

4. How localStorage feels like

6. About Me
• sparXys CEO and senior consultant
• ASP.NET/IIS Microsoft MVP in the last 7 years
• Pro Single Page Application Development (Apress)
co-author
• 4 Microsoft Official Courses (MOCs) co-author
• GDG Rashlatz and ng-conf Israel co-organizer

7. Agenda
• IndexedDB
• Libraries to the rescue

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

9. IndexedDB
• Made of records holding simple values or
hierarchical objects
o Each record consists of a key and a corresponding value
• Enables
o Storage of large numbers of objects locally
o Fast insertion and extraction
• Satisfy some of the offline data requirements for
web applications

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

11. IndexedDB API
• Very massive API!
• API is asynchronous
o Synchronous APIs were removed by W3C
• Exposed through window.indexedDB object

13. IndexedDB – Open the
Database
var db;
var request = window.indexedDB.open(“dbName");
request.onerror = function(event) {
console.log(“Database error on open: ” + event.target.errorCode);
};
request.onsuccess = function(event) {
db = request.result;
};

14. 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 });
// Store value in the newly created objectStore.
objectStore.add({ id: 3, name: “db“ });
};

15. IndexedDB – Creating a
Transaction
var transaction = db.transaction([“products"], IDBTransaction.READ_WRITE);
transaction.oncomplete = function(event) {
console.log(“Transaction completed”);
};
transaction.onerror = function(event) {
// handle transaction errors
};
// 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
}

16. 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) {
console.log(“id:”+cursor.key+” has name:”+cursor.value.name);
cursor.continue();
}
else {
console.log(“No entries”);
}
};

17. IndexedDB – Working
with Indexes
var transaction = db.transaction([“products”]);
var objectStore = transaction.objectStore(“products”);
var index = objectStore.index(“name”);
var request = index.get(“IndexedDB");
request.onsuccess = function(event) {
console.log(“id: " + event.target.result.id);
};

18. IndexedDB
Demo

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

20. Libraries to the Rescue
• PouchDB - https://pouchdb.com/
o Good wrapper on top of IndexedDB with fallbacks
• Angular 1 service -
https://github.com/bramski/angular-indexedDB
• My angular2-indexeddb experimental service -
https://github.com/gilf/angular2-indexeddb

21. Questions?

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

23. 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

24. Thank You!