Who's afraid of front end databases
0 likes330 views
This document discusses front-end databases and introduces IndexedDB as an advanced key-value data management solution for storing large amounts of data locally in web applications. It outlines some of IndexedDB's capabilities like storing hierarchical objects and enabling fast data insertion. The document also acknowledges problems with IndexedDB's verbose syntax and lack of query support, and recommends libraries like PouchDB and Angular services that provide wrappers to simplify usage of IndexedDB. It includes a demo of interacting with IndexedDB and querying data using angular2-indexeddb.
![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
}](https://image.slidesharecdn.com/whosafraidoffront-enddatabases-160915204842/85/Who-s-afraid-of-front-end-databases-17-320.jpg)
![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â);
}
};](https://image.slidesharecdn.com/whosafraidoffront-enddatabases-160915204842/85/Who-s-afraid-of-front-end-databases-18-320.jpg)
![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);
};](https://image.slidesharecdn.com/whosafraidoffront-enddatabases-160915204842/85/Who-s-afraid-of-front-end-databases-19-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Who's afraid of front end databases (20)
![[Nuxeo World 2013] OPENING KEYNOTE - ERIC BARROCA, NUXEO CEO](https://cdn.slidesharecdn.com/ss_thumbnails/nxw13-keynoteeric-131017103013-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Gil Fink (20)
Ad
Recently uploaded (20)
Who's afraid of front end databases
- 1. WHOâS AFRAID OF FRONT-END DATABASES? Gil Fink CEO and Senior Consultant, sparXys @gilfink
- 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!
- 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
- 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!