Prepare yourselvesThe Mobile has arrived
Go where no website has gone before
Scotty, beam me upI have good internet bandwidth
Darth Vader SaysWork when you are disconnected too
What if I told youthat adding Offline support is easy ?
A simple website                   DATA in                   SERVER                    DATA in                   BROWSER
SHOW ME
http://nparashuram.com/conference
Simple Read OperationAjaxHandler = {    getSession: function (id) {        // code goes here    },    getAllSessions: func...
Backbone.sync = function (method, model, options, error){    switch (method) {        case "read":            // Methods f...
case "read":// Pseudo Codeif (model.id) {// for a single Model    db.get(model.id,        function (err, res) {         if...
With all that pseudo code I totally understand you
case "read": // Real IndexedDB Codeif (model.id) {// for a single Model    var openReq = window.indexedDB.open("DatabaseNa...
What did you just do ?
IndexedDB Refresher     http://yourwebpage.com                                               search               Database...
case "read":if (model.id) {    var openReq = window.indexedDB.open("DatabaseName");    openReq.onsuccess = function () {  ...
You wrote so much codeJust to read a single record ?
case "read": // Jquery-IndexedDB Pluginif (model.id) {    var openReq = window.indexedDB.open("DatabaseName");    $.indexe...
case "read": // Jquery-IndexedDB Plugin$.indexedDB("DatabaseName")    .objectStore("Model1")    .get(model.id)            ...
case "read":// Pouch DB Code if (model.id) {// for a single Model     db.get(model.id, {},         function (err, res) {  ...
Sure, but can you query data ?
Querying IndexedDB        $.indexedDB("DatabaseName")            .objectStore("Model1")            .where(price < 100)    ...
Querying IndexedDB        $.indexedDB("DatabaseName")            .objectStore("Model1")            .where(price < 100 and ...
Querying IndexedDBvar results = $.indexedDB("DatabaseName")                  .objectStore("Model1")                  .wher...
Querying IndexedDB                  $.indexedDB("DatabaseName")                        .objectStore("Model1")             ...
Querying IndexedDB          $.indexedDB("DatabaseName")              .objectStore("Model1")              .where(price < 10...
Querying IndexedDB                       $.indexedDB("DatabaseName")                           .objectStore("Model1")     ...
ONE DOES NOT SIMPLY START USING INDEXEDDB    WITHOUT LOOKING AT PERFORMANCE
Comparing IndexedDB and WebSQL ?
Performance Analysis• Common cases when writing an application   • Are string keys slower than integer keys   • Should I c...
http://nparashuram.com/IndexedDB/perf
May the force be with you     http://nparashuram.com    @nparashuram           Resources   @OpenAtMicrosoft      (@obloch)...
IndexedDB - Querying and Performance
IndexedDB - Querying and Performance
IndexedDB - Querying and Performance
IndexedDB - Querying and Performance
IndexedDB - Querying and Performance
Upcoming SlideShare
Loading in …5
×

IndexedDB - Querying and Performance

12,115 views

Published on

Talk at HTMl5DevConf on April 1, 2013 about IndexedDB, Plugins for IndexedDB and performance analysis of IndexedDB.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,115
On SlideShare
0
From Embeds
0
Number of Embeds
8,704
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

IndexedDB - Querying and Performance

  1. 1. Prepare yourselvesThe Mobile has arrived
  2. 2. Go where no website has gone before
  3. 3. Scotty, beam me upI have good internet bandwidth
  4. 4. Darth Vader SaysWork when you are disconnected too
  5. 5. What if I told youthat adding Offline support is easy ?
  6. 6. A simple website DATA in SERVER DATA in BROWSER
  7. 7. SHOW ME
  8. 8. http://nparashuram.com/conference
  9. 9. Simple Read OperationAjaxHandler = { getSession: function (id) { // code goes here }, getAllSessions: function () { // code goes here }} 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);
  10. 10. 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();});
  11. 11. case "read":// Pseudo Codeif (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); } );}
  12. 12. With all that pseudo code I totally understand you
  13. 13. case "read": // Real IndexedDB Codeif (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); };}
  14. 14. What did you just do ?
  15. 15. IndexedDB Refresher http://yourwebpage.com search Database Database Transaction Object Store Object Store key : value Index key : value Index key : value key : value Cursor on Cursor on key : value Index key : value Index Cursor on Object Cursor on Object Store Store
  16. 16. 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); };}
  17. 17. You wrote so much codeJust to read a single record ?
  18. 18. case "read": // Jquery-IndexedDB Pluginif (model.id) { var openReq = window.indexedDB.open("DatabaseName"); $.indexedDB("DatabaseName") openReq.onsuccess = function () { var db = openReq.result; var transaction = db.transaction(["Model1”], "readonly"); var objectStore = transaction.objectStore("Model1"); .objectStore("Model1") .get(model.id) objectStore.get(model.id); var readReq = readReq.onsuccess = function () { .done(function(data) { option.success(readReq.result); }; }) readReq.onerror = function (e) { .fail(function (error) { options.error(e); }; }); }; openReq.onerror = function (e) { options.error(e); };}
  19. 19. case "read": // Jquery-IndexedDB Plugin$.indexedDB("DatabaseName") .objectStore("Model1") .get(model.id) • Less Verbose .done(function (data) { option.success(data); • Chainable API }).fail(function (error) { option.error(error); • Use Promises }); • Smart Defaults • Almost transparent$.indexedDB("DatabaseName") .objectStore("Model1") .each(function (record) { display(record); }).done(function () { // Finished with all records Project : }).fail(function () { gitbhub // Error }); /axemclion /jquery-indexeddb
  20. 20. 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"); }
  21. 21. Sure, but can you query data ?
  22. 22. Querying IndexedDB $.indexedDB("DatabaseName") .objectStore("Model1") .where(price < 100) .sortBy(price) .desc() objectStore.index(price).openCursor( IDBKeyRange.lowerBound(100, false), "prev" );
  23. 23. Querying IndexedDB $.indexedDB("DatabaseName") .objectStore("Model1") .where(price < 100 and >= 200) .sortBy(price) .desc() objectStore.index(price).openCursor( IDBKeyRange.bound(100, 200, false, true), "prev" );
  24. 24. Querying IndexedDBvar results = $.indexedDB("DatabaseName") .objectStore("Model1") .where(price < 100 and >= 200) .sortBy(name) .desc() .done(function(results){ // do something with results // results.length == ??? }) objectStore.index(price).openCursor( IDBKeyRange.bound(100, 200, false, true), "prev" );
  25. 25. Querying IndexedDB $.indexedDB("DatabaseName") .objectStore("Model1") .where(price < 100 and >= 200) .where(ratings > 4) .sortBy(name) .desc() .each(function(result){ .done(function(results){ process each result // do something with results }) // results.length == ???cursorReq = }) objectStore.index(name).openCursor();cursorReq.onsuccess = function () { if (cursorReq.result) { val = cursorReq.result.value; if (val.price < 100 && val.price > 200 && val.ratings > 4) ) callback(val); cursorReq.result.continue(); }}
  26. 26. Querying IndexedDB $.indexedDB("DatabaseName") .objectStore("Model1") .where(price < 100 and >= 200) .where(‘Model2.empId < 5) .sortBy(name) .sortBy(price) .each(function(result){ // process each result });
  27. 27. Querying IndexedDB $.indexedDB("DatabaseName") .objectStore("Model1") .where(price < 100 and >= 200) .where(‘Model2.empId < 5 ) .sortBy(name) .sortBy(price) .each(function(result){ // process each result }); 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/
  28. 28. ONE DOES NOT SIMPLY START USING INDEXEDDB WITHOUT LOOKING AT PERFORMANCE
  29. 29. Comparing IndexedDB and WebSQL ?
  30. 30. Performance Analysis• 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
  31. 31. http://nparashuram.com/IndexedDB/perf
  32. 32. May the force be with you http://nparashuram.com @nparashuram Resources @OpenAtMicrosoft (@obloch)http://nparashuram.com/IndexedDB http://www.html5labs.com/

×