Browser Big Data with Dexie and Typescript

Photo by Aditya Chinchure on Unsplash

Updated Version

There’s an updated version of this article here:

Browser Big Data with Dexie and Typescript

Introduction

DexieJS is a mind blowingly well designed API wrapper for Indexeddb:

Dexie.js - Minimalistic IndexedDB Wrapper

Play with in in the browser and learn:

• Entity Modeling
• Relational design
• Await/async semantics
• Promise semantics

All while creating a brilliant local storage solution all at the same time. WUUUUUT???? Yeah it’s that good! The people that created it are even better. You know Swedes make good stuff! Volvo, Ikea, Dexie, and the Swedish Chef — Need we say more??!!

You can work with Dexie in plain Javascript but here we will be using Typescript. Lets do this!

Playground

Today I took the Typescript repository demo and created a Stackblitz out of it so that those new to Dexie have a live environment to play with:

With an exception of having to remap some of the console functionality for Stackblitz, the above stackblitz has the code that matches the DexieJS Repository :

dfahlander/Dexie.js

We will be making some changes to this in order to remove the database from the entity models. This is such that we can us external model packages when designing the application database.

Lets have a look at the details:

Console

In order to be able to see what Dexie is doing we will use the Dexie Typescript console implemented like this within within our Stackblitz index.ts :

import Dexie from 'dexie';
import { Console } from './console';
import { db } from './db';
import { Contact } from './Contact';
const console = new Console();
// Test it:
console.log("Hello Dexie Lovers!");
console.log("==================\n");

Now when we do console.log it will log directly to the rendering pane and we wont have to open the console to see logging statements.

Model

We will store contacts, phone numbers, and emails. The Contact instances have a One to Many relationship with the IEmailAddress and IPhoneNumber instances, and thus we have a contactId field on these instances such that we can look them up using our the id property on our Contact instance.

Below is a gist of the entity models contained in the model.ts file:

We removed methods containing references to the database and placed them in a utility for performing database operations.

Also note how Object.defineProperties is used to avoid double saving IEmailAddress and IPhoneNumber instances when the Contact instance is saved or updated.

We’ll have a look at these next.

Database Utilities

These utilities are used to save contacts and load navigation properties (emails and phone records):

Database

The database will be defined in the db.ts file (The code contains elaboration comments from the Dexie repository implementation):

Note that the comment over mapToClass is no longer 100% true, since we removed the loadEmailsAndPhones method from the Contact class and put it in a utility ( utilites.ts ). Also the table properties ( contacts, emails, phones are public such that we can access these properties in our utilities.ts file.

Application Script

We will make some modifications here from the original Dexie examples as we have moved the database specific save and load functions from the Contact model to the utilities.ts file:

Final Demo

Hope you enjoyed the article and please star the Dexie repo. David Fahlander has been a huge help in figuring some of this stuff out.