Successfully reported this slideshow.
Your SlideShare is downloading. ×

Who's afraid of front end databases

Upcoming SlideShare
Redux data flow with angular
Redux data flow with angular
Loading in …3
×

Check these out next

1 of 26 Ad
1 of 26 Ad
Advertisement

More Related Content

Advertisement
Advertisement

Who's afraid of front end databases

  1. 1. WHO’S AFRAID OF FRONT-END DATABASES? Gil Fink CEO and Senior Consultant, sparXys @gilfink
  2. 2. Front-end Storage Problem
  3. 3. Cookies Are such an old technology…
  4. 4. How localStorage feels like
  5. 5. 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
  6. 6. Agenda • IndexedDB • Libraries to the rescue
  7. 7. 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!
  8. 8. localStorage Demo
  9. 9. IndexedDB • Advanced key-value data management IndexedDB Front-end App Fast Reliable Limited capacity Local access only Information loss
  10. 10. 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
  11. 11. IndexedDB Database objectStore Cursor on objectStore key : value key : value key : value Index Cursor on index
  12. 12. IndexedDB API • Very massive API! • API is asynchronous o Note: Synchronous APIs were deprecated by W3C • Exposed through window.indexedDB object
  13. 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. 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. 15. 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 }
  16. 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. 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. 18. IndexedDB Demo
  19. 19. Problems? • Verbose syntax o Too much boilerplate • No support for queries style SQL • No full text search • And more
  20. 20. 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
  21. 21. angular2-indexeddb Demo
  22. 22. 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
  23. 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. 24. Thank You!

×