It has been a blistering ride, but you get to the point where if you are ‘not’ seeing something new and exciting pop up on your radar then something is wrong with the industry, or you are just too darn busy to pay attention.
For a few months, I have been playing with client-side database solution called IndexedDB. Which is an integrated browser-based database available in Chrome, Firefox and Internet Explorer. Tools of which simplify development and prototyping. (WebSQL can be used in some browsers, but it is depreciated and will not be supported moving forward (more information on that here http://www.w3.org/TR/webdatabase/.
What is indexedDB?
It is a NoSQL asynchronous key/value store. Pausing for the sound of crickets.
No? Oh well, let’s look at some snapshots of ‘teh codez’ to see what we can do.
First, in order to see these results, you can download my code below, and run it on your local machine with Google Chrome. Once downloaded, unzipped and opened in Chrome, you will be looking at a page which shows nothing (but there is something there…I can feel it). Do a right mouse click on the screen and choose “Inspect Element” in the menu of options. In the bar that pops up at the bottom of your browser click on resources (tab) then click through your IndexedDB structure to see the build.
Let’s look at what it does.
In this example I have created a client side database called “deadTreeBookPrinters”. In this database is a table called ‘topthreebooks,’ and I have two fields in this table called ‘by_title’ and ‘by_author’
This is a structure that can be asynchronously talked to and worked with via JavaScript (and changed or updated or deleted).
Now here is the code I used to create it (I used the indexeddb.js jQuery plugin which you can find here http://nparashuram.com/jquery-indexeddb/ ).
I also have included jQuery 1.11.0 (renamed and minified).
Stepping through the code.
I am using straight javascript at the top to destroy my database, so I can recreate it fresh. The rest ties to the jQuery plugin.
I then request the DB to open (which creates it through a request scoped struct).
It adds my tables, my fields and I roll through a structure (store.put) and add my authors, book titles and ISBN numbers.
So then the question is: Why do I need this? Well you don’t …but it could come in handy for prototyping code and simulating database calls so you can work with structured data that otherwise couldn’t be done unless you have hosting set up with server-side scripting and database hooks (which requires a database to be installed). With this all you need is jQuery, the indexeddb plugin and your code.
No server-side setup required!
IndexedDB is a new technology subset of your browser, but it doesn’t work with all browsers. Here is a list of browsers that work and don’t work with indexedDB (image snapped from http://caniuse.com/indexeddb).
So it seems like Safari, iOS Safari and Opera Mini are the outliers. I would imagine Apple’s lack of participation is intentional, while Opera’s just doesn’t have the wherewithal or interest.
So here we have it. A client-side database solution that essentially removes the need for Apache, IIS, PHP, Coldfusion, MySQL or SQL Server and allows a developer to do what they do best, which is coding instead of being bogged down with admin and environment setup and interconnectivity.
Here is my code: indexedDBtest.zip
More information on the tools I used for this post can be found here:
- http://nparashuram.com/jquery-indexeddb/
- https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
- http://www.html5rocks.com/en/tutorials/webdatabase/websql-indexeddb/
Are you in need of a brand refresh or complete overhaul? Improve the quality and impact of your online marketing with the power of custom design.