When there’s IndexedDB, who needs MySQL?

Who Needs MySQL When There Is IndexedDB?

When it comes to increasing the complexity of the web apps, we design and provide today, Local and SessionStorage isn’t the only alternative. The W3C has released HTML5, which may be more of what you’re searching for, especially if you’re a lover of NoSQL-based technology. IndexedDB is the name of this option.

So, in this series, we’ll look at what IndexedDB is, its benefits and drawbacks, and whether or not it’s a good fit for your development needs. In the next episode, we’ll wrap things up with a sample application, so you can see how everything works firsthand.

Technology Overview

The (now deprecated) W3C standard WebSQL Database is replaced by IndexedDB (WebSQL). It was first released on April 23, 2009. Wikipedia provides the following description:

“… is a web page API for storing data in databases and querying them using a SQL variation.”

WebSQL does precisely what it says on the tin: it gives client-side application developers access to the full power of SQL. It is based on SQLite and allows us to use one of the essential abilities in our development arsenal, database development, on both the client and server sides.

The W3C announced on November 18, 2010, that it would no longer support the standard.This was due to a lack of consensus among vendors, including Mozilla and Microsoft, on how it should be implemented in practice and inadequate browser support. As a result, IndexedDB was introduced as an online data storage alternative standard.
IndexedDB, on the other hand, is an Object Store, not a browser database. It enables apps to construct, store, and manipulate things without the need for sterilisation and conduct high-speed searches on them.
It’s very similar to NoSQL databases like MongoDB and CouchDB. Objects are generated, manipulated, and then stored and updated in the object store using JavaScript.
However, it is not the same as a conventional PHP, Ruby, or Python script that creates and persists objects. When using it, there are a few things to keep in mind.

Operations Require Transactions

When utilising IndexedDB, every action you take must be done as part of a transaction. It doesn’t matter if you’re reading data from object storage, processing it, or changing its structure. 

There are three types of transactions:

Indexes & Cursors

Using the database example again, items in the object storage can have one or more indexes to help in data retrieval. Creating them is straightforward, as demonstrated by the following code from the Mozilla Development Network (MDN):

// This is what our customer data looks like. const customerData = [ { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" }, { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" } ]; // Create an objectStore to hold information about our customers. We're // going to use "ssn" as our key path because it's guaranteed to be // unique. var objectStore = db.createObjectStore("customers", { keyPath: "ssn" }); // Create an index to search customers by name. We may have duplicates // so we can't use a unique index. objectStore.createIndex("name", "name", { unique: false }); 

We may iterate over the data we obtain from the object store using cursors. An index can also limit the amount of information we receive. We do a ‘get all’ query in the example below, which is also from MDN:

var customers = []; objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { customers.push(cursor.value); cursor.continue(); } else { alert("Got all customers: " + customers); } }; 

Browser Support

Unfortunately, the news isn’t entirely positive yet. IndexedDB is currently only supported by the following browsers:

Because WebSQL is being phased out, IndexedDB support is likely to develop over time as the specification is revised. Try it out at caniuse.com to see which browsers (and their versions) support it.

Although Safari, Chrome, and Opera still support WebSQL, and you can technically develop apps with it, it’s not a brilliant idea. On the other hand, some propose a middle ground based on the usage of a wrapper library, which allows you to have the best of both worlds.

Advantages

1. A New Industry Standard

IndexedDB is quickly becoming a standard, thanks to widespread support from the W3C, Mozilla, Microsoft, and Google. It’s expected to remain around for a long time, so you’ll be able to grow against it with confidence. Furthermore, it provides a sense of permanence and independence from vendors that WebSQL does not.

2. Use Objects Instead of SQL

Furthermore, Indexed DB allows you to work with items in the way that best meets your application’s needs and design (whereas WebSQL required that you had a solid grasp of SQL.)

Disadvantages

1. Browser compatibility

The main disadvantage at present is the lack of browser support. Yes, it’s already in the current versions of Firefox and Chrome, and it’ll be in Internet Explorer 10 as well. However, it’s only available in the full version of Internet Explorer 10, only available on Windows 8. And, because Internet Explorer 10 was only recently introduced, it will be some time before it becomes the most widely used version of the browser.

​​The good news is that Chrome and Firefox account for roughly 54% of all browsers in use.

Where Is It a Good Fit?

As I previously mentioned, IndexedDB is a suitable fit if your client-side data needs are more sophisticated than what Local/SessionStorage can supply (i.e., your application requires more than a simple Key/Value store).

Yes, you may manage information stored in it with JavaScript techniques like JSON.stringify and JSON.parse. However, it lacks the flexibility and capability that IndexedDB provides. So, whether you’re looking for a storage layer that provides better performance, duplicate fundamental values, or a quick way to search through your data, IndexedDB is the way to go. If your needs are basic, Session and LocalStorage are the way to go. Remember that your needs should drive your decision.

Conclusion

That’s all there is to it. IndexedDB is expected to be one of two significant new standards for client-side data storage in the coming years. It enables us to store complex objects created and manipulated in JavaScript and has a reasonable degree of index performance while looking for the saved data.

We’ve discussed the benefits and drawbacks and whether it or MySQL is the better standard for the future. So, what are your thoughts on it? Do you think it’ll be a good fit for web application development in the future? Or do you believe MySQL would have been a better option? Send us an email. We’d like to hear your thoughts.

Enteros

About Enteros

​Enteros offers a patented database performance management SaaS platform. It proactively identifies root causes of complex business-impacting database scalability and performance issues across a growing number of RDBMS, NoSQL, and machine learning database platforms.