A session I delivered in DevDay 2016.

1. WHO’S AFRAID OF
FRONT-END DATABASES?
Gil Fink
CEO and Senior Consultant, sparXys
@gilfink

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 Angular UP co-organizer

7. Agenda
• IndexedDB
• Libraries to the rescue

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

9. localStorage
Demo

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

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

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

13. IndexedDB API
• Very massive API!
• API is asynchronous
o Note: Synchronous APIs were deprecated by W3C
• Exposed through window.indexedDB object

15. 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;
};

16. 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“ });
};

17. IndexedDB – Creating a
Transaction
var transaction = db.transaction([“products"], “readwrite”);
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
}

18. 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”);
}
};

19. 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);
};

20. IndexedDB
Demo

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

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

23. angular2-indexeddb
Demo

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

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

26. Thank You!