{"id":1524,"date":"2011-03-07T08:44:52","date_gmt":"2011-03-07T16:44:52","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=1524"},"modified":"2011-03-07T08:44:52","modified_gmt":"2011-03-07T16:44:52","slug":"datastore-an-abstraction-layer-for-storing-data-and-processing-requests","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2011\/03\/07\/datastore-an-abstraction-layer-for-storing-data-and-processing-requests\/","title":{"rendered":"DataStore – an abstraction layer for storing data and processing requests"},"content":{"rendered":"

Note: this is a repost from my blog. You can find the original post here.<\/a> Please head over there for comments.<\/em><\/p>\n

Table of contents<\/h2>\n
    \n
  1. Idea<\/a><\/li>\n
  2. From past to present, what now?<\/a><\/li>\n
  3. What does better mean?<\/a><\/li>\n
  4. Why should you care?<\/a><\/li>\n
  5. My scenario<\/a><\/li>\n
  6. What worked for me<\/a><\/li>\n
  7. Proposed features<\/a><\/li>\n
  8. Help!<\/a><\/li>\n<\/ol>\n

    Idea<\/h2>\n

    A library to unify all the different data storage\/retrieval\/sending\/receiving API’s such as XMLHttpRequest, WebSockets, localStorage, IndexedDB, and make it easier to use any number of them at once.<\/p>\n

    From past to present, what now?<\/h2>\n

    Past:<\/strong> Before, all we had was AJAX requests. Really.<\/p>\n

    To present:<\/strong> With the new technologies coming up in the HTML5 era, we’ve got localStorage and IndexedDB, WebSockets, node.js, and more. Hectic.<\/p>\n

    What now?<\/strong> Don’t you wish there was a better way<\/em> to send and receive data in the browser?<\/p>\n

    What does better mean?<\/h2>\n

    My general goals for this are:<\/p>\n

      \n
    1. Simple key\/value store common abstraction.<\/li>\n
    2. Pluggable handlers for each type of send\/receive.<\/li>\n
    3. Use other abstractions specified in each handler (library surfaces your API as well).<\/li>\n
    4. Straightforward way to define flow of data. More on this later.<\/a><\/li>\n<\/ol>\n

      Anything else you wish it could do?<\/p>\n

      Why should you care?<\/h2>\n

      Short answer: maintenance, scalability, flexibility.<\/strong><\/p>\n

      As these technologies become widely supported, you will start seeing a common problem for websites heavily relying on AJAX (or any kind of data transfer without page reloads): how do you take advantage of them without rewriting your entire codebase every time there’s a new technology (API\/storage engine\/etc) coming out?<\/em><\/p>\n

      My scenario<\/h2>\n

      The whole reason I got thinking about this was because it happened to me. And it was frustrating.<\/p>\n

      I had this client-side application using jQuery.ajax requests<\/a>, and I wanted to take advantage of localStorage for some of them, for data that I didn’t need to get from the server on every page load.<\/p>\n

      I considered:<\/p>\n