IndexedDB concept#1

Hello everyone! Today I will talk about IndexedDB.

In this first video, we will present the main concepts of this client-based NoSQL database.

IndexedDB is a front-end database. 

It means that it runs directly in your browser contrarily to MySQL, Postgres or Oracle databases that run on the server side.

In our case, we've got a NoSQL database, it means that we will not be able to use SQL.

And in the NoSQL world of databases, we will find different kinds of databases...

Some use graph representations, some use object representations.

In our case, we will store directly JavaScript objects.

Here is an example; in this case, you've got a person defined by two properties: firstName and lastName. 

It is designed to work with huge amount of data with also very good performances. 

You can use indexes. 

So an index system allows you to specify that some properties will be ‘indexes’ and this will make requests on these properties much faster. 

For example, if I've got 100 000 people in my database, and I am looking for all the people with the last name equal to ‘Buffa’.

If the lastName is an index, the retrieval will be very very fast.

And also, remember that in the JavaScript world, all operations are asynchronous.

So we will see in the next video that we will that we use callbacks everywhere.

You open a video, you will need to check that it has been correctly opened in a callback.

You insert data, you will need to check in a callback that the insert has been performed correctly.

So databases, when you store objects inside are called ‘object stores’, they have a name and they are attached to a domain.

You can imagine they are attached to a Web app.

So let's look at some examples. 

The first very popular example is Google Drive.

So Google Drive stores lots of documents, spreadsheets, presentations… and if you are offline, it works! So I just open the dev tools and you can see that Google Drive relies a lot on IndexedDB. 

So we've got different data stores here and the different data stores will hold, for example, the synced documents I've got in my repository.

And these documents are JavaScript objects, you can see the brackets here that are typical of JavaScript objects, and you have got properties like the data, the viewMode and so on.

Another example is a guitar pedalboard I wrote for processing in real time the sound of the guitar. 

You can see that we have got different categories… and we can select different presets, and each preset is attached with some values or a position… and if I reload the application it remembers exactly the settings because every time I am doing an action, I am storing the current state in an IndexedDB database, here... and I am storing directly JavaScript object with the preset values and so on.

And we are synchronizing this database that is located in the browser with a MongoDB database that is located on the server side and that holds also JavaScript objects.

So having the same representation for data -JavaScript objects-, is really comfortable.

So in the course, you will see a lot of small examples that we prepared on JSBin, and each of these examples show an individual operation, a very core operation like creating a Customer database.

So if I click on the "create CustomerDB database" (button), and if I open the devtools console, and I go to IndexedDB, I can see that the CustomerDB database I created appeared here, and I can see that the objects are stored: people with an age, email, name and a social security number. 

So you will see examples for creating a database, for working with data, for inserting data, removing data, modifying data, getting data and so on. 

And each of these small examples will provide very useful code that you can reuse in your own examples.

In the course, you will also find more complete examples like this one that shows how you can make requests to collect just some subset of data using what we called ‘bounds’.

So, for example, if you want to get just one single result, you can interactively try this application, or if you want all the data running from ‘Batman’ to ‘Curry’, you can also try this…

These examples should be good starting points for writing big scale application.

In the next video, we will complete the presentation of the main concepts, so see you there, bye!

• A catalog of DVDs in a lending library.

• Mail clients, to-do lists, notepads.

• Data for games: high-scores, level definitions, etc.

• Google Drive uses IndexedDB extensively...

External resources

Much of this chapter either builds on or is an adaptation of articles posted on the Mozilla Developer Network (MDN) Web site (IndexedDB, Basic Concepts of IndexedDB and Using IndexedDB).

• W3C specification about IndexedDB

• MDN's page about the IndexedDB API

• Getting Started with Persistent Offline Storage with IndexedDB

Current support is excellent both on mobile and desktop browsers.