who's afraid of front end databases
TRANSCRIPT
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
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!
IndexedDB • Advanced key-value data management
IndexedDB Front-end
App
Fast
Reliable
Limited capacity
Local access only
Information loss
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
IndexedDB
Database
objectStore
Cursor on objectStore
key : value
key : value
key : value
Index
Cursor on index
IndexedDB API • Very massive API!
• API is asynchronous o Note: Synchronous APIs were deprecated by W3C
• Exposed through window.indexedDB object
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;
};
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“ });
};
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
}
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”);
}
};
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);
};
Problems? • Verbose syntax
o Too much boilerplate
• No support for queries style SQL
• No full text search
• And more
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
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
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