IndexedDB - Plugins and performance

HTML5 Dev Conf 2013 - IndexedDB Performance and plugins

Transcript

3. Prepare yourselves The Mobile has arrived
4. Go where no website has gone before
5. Connectivity Problems
6. Scotty, beam me up I have good internet bandwidth
7. Work when you are disconnected too Darth Vader Says
8. What if I told you that adding Offline support is easy ?
9. A simple website DATA in SERVER DATA in BROWSER
10. SHOW ME
11. http://nparashuram.com/conference
12. var Session = Backbone.Model.extend({}); var SessionList = Backbone.Collection.extend({}); var singleSession = new Session(); singleSession.get(101); view.update(singleSession); var allSessions = new SessionList(); allSessions.fetch(); view.render(allSessions); Simple Read Operation AjaxHandler = { getSession: function (id) { // code goes here }, getAllSessions: function () { // code goes here } }
13. Backbone.sync = function (method, model, options, error) { switch (method) { case "read": // Methods for reading from database break; case "create": // Create a record here break; case "update": // Update Records break; case "delete": // Delete record } RemoteDatabase.replicate(); });
14. case "read":// Pseudo Code if (model.id) {// for a single Model db.get(model.id, function (err, res) { if (err) { error(err); return; } options.success(res); } ); } else { // For all rows in the DB db.getAll ( function (err, resp) { if (err) { error(err); return; } options.success(resp); } ); }
15. I totally understand you With all that pseudo code
16. case "read": // Real IndexedDB Code if (model.id) {// for a single Model var openReq = window.indexedDB.open("DatabaseName"); openReq.onsuccess = function () { var db = openReq.result; var transaction = db.transaction(["Model1”], "readonly"); var objectStore = transaction.objectStore("Model1"); var readReq = objectStore.get(model.id); readReq.onsuccess = function () { option.success(readReq.result); }; }; openReq.onerror = function (e) { options.error(e); }; }
17. What did you just do ?
18. IndexedDB Refresher http://yourwebpage.com search Database Cursor on Object Store Object Store key : value key : value key : value Index Cursor on Index Database Cursor on Object Store Object Store key : value key : value key : value Index Cursor on Index Transaction
19. case "read": if (model.id) { var openReq = window.indexedDB.open("DatabaseName"); openReq.onsuccess = function () { var db = openReq.result; var transaction = db.transaction(["Model1”], "readonly"); var objectStore = transaction.objectStore("Model1"); var readReq = objectStore.get(model.id); readReq.onsuccess = function () { option.success(readReq.result); }; }; openReq.onerror = function (e) { options.error(e); }; }
20. You wrote so much code Just to read a single record ?
21. case "read": // Jquery-IndexedDB Plugin if (model.id) { var openReq = window.indexedDB.open("DatabaseName"); openReq.onsuccess = function () { var db = openReq.result; var transaction = db.transaction(["Model1”], "readonly"); var objectStore = transaction.objectStore("Model1"); var readReq = objectStore.get(model.id); readReq.onsuccess = function () { option.success(readReq.result); }; readReq.onerror = function (e) { options.error(e); }; }; openReq.onerror = function (e) { options.error(e); }; } $.indexedDB("DatabaseName") .objectStore("Model1") .get(model.id) .done(function(data) { }) .fail(function (error) { });
22. case "read": // Jquery-IndexedDB Plugin $.indexedDB("DatabaseName") .objectStore("Model1") .get(model.id) .done(function (data) { option.success(data); }).fail(function (error) { option.error(error); }); $.indexedDB("DatabaseName") .objectStore("Model1") .each(function (record) { display(record); }).done(function () { // Finished with all records }).fail(function () { // Error }); • Less Verbose • Chainable API • Use Promises • Smart Defaults • Almost transparent Project : gitbhub /axemclion /jquery-indexeddb
23. case "read":// Pouch DB Code if (model.id) {// for a single Model db.get(model.id, {}, function (err, res) { if (err) { error(err); return; } options.success(res); } ); } else { // For all rows in the DB db.allDocs ({}, function (err, resp) { if (err) { error(err); return; } options.success(resp); } ); } Pouch.replicate("idb://data","http://me.couchdb.com/data");
24. Sure, but can you query data ?
25. $.indexedDB("DatabaseName") .objectStore("Model1") .where('price < 100') .sortBy('price') .desc() Querying IndexedDB objectStore.index('price').openCursor( IDBKeyRange.lowerBound(100, false), "prev" );
26. $.indexedDB("DatabaseName") .objectStore("Model1") .where('price < 100 and >= 200') .sortBy('price') .desc() Querying IndexedDB objectStore.index('price').openCursor( IDBKeyRange.bound(100, 200, false, true), "prev" );
27. $.indexedDB("DatabaseName") .objectStore("Model1") .where('price < 100 and >= 200') .sortBy('name') .desc() .done(function(results){ // do something with results // results.length == ??? }) Querying IndexedDB var results = objectStore.index('price').openCursor( IDBKeyRange.bound(100, 200, false, true), "prev" );
28. $.indexedDB("DatabaseName") .objectStore("Model1") .where('price < 100 and >= 200') .where('ratings > 4') .sortBy('name') .desc() .each(function(result){ // process each result }) Querying IndexedDB cursorReq = objectStore.index('name').openCursor(); cursorReq.onsuccess = function () { if (cursorReq.result) { val = cursorReq.result.value; if (val.price < 100 && val.price > 200 ) callback(val); cursorReq.result.continue(); } } && val.ratings > 4) .done(function(results){ // do something with results // results.length == ??? })
29. $.indexedDB("DatabaseName") .objectStore("Model1") .where('price < 100 and >= 200') .where(‘Model2.empId < 5 ') .sortBy('name') .sortBy('price') .each(function(result){ // process each result }); Querying IndexedDB Fall back on Web Workers to do the job • Sorting on multiple columns • Where clauses across object stores • Sorting and clauses across object stores Project : //linq2indexeddb.codeplex.com/
30. ONE DOES NOT SIMPLY START USING INDEXEDDB WITHOUT LOOKING AT PERFORMANCE
31. Comparing IndexedDB and WebSQL ?
32. Performance Analysis • Not comparing IndexedDB vs WebSql vs LocalStorage • Not comparing browsers • Comparing Common cases when writing an application • Are string keys slower than integer keys • Should I combine read and write transactions ? • Started with JSPerf, Problems with Async Setup • Using Benchmarkjs Thanks to @slace for helping with code reviews
33. http://nparashuram.com/IndexedDB/perf