Data Stores #

Data stores are used in Varv to store the state of concept instances and their properties. A data store can be anything that can store data in a key-value format. One purpose of using a separate data layer in Varv is to be able to dynamically store data in heterogeneous ways, which allows users to define properties in the schema of concept definitions without having to take care of how and where it is stored. It, further, allows to collaborate on the same shared data store without necessarily using the some interactive behavior in the concept definitions.

Defining Data Stores #

Data stores are defined in concept definitions in the "dataStores" object. Each data store in the object needs to have a unique name. For example:

{
    "dataStores": {
        "myFirstDataStore": { "type": "dom" },
        "mySecondDataStore": { "type": "memory" }
    }
}

Different types of data stores can also have options, which are explained further down.

Default Data Stores #

When creating a new Varv webstrate, Varv adds the following default data stores. The default mapping for properties in concepts is using the "dom" data store. The default data stores are called "dom", "localStorage", and "memory". They are defined as follows:

{
    "dataStores": {
        "dom": { "type": "dom" },
        "localStorage": { "type": "localStorage" },
        "memory": { "type": "memory" }
    }
}

Mappings #

Mappings are used to map properties of concepts to specific data stores. The default data or custom named data stores can be used within the mappings.

Mappings are defined inside the "mappings" object within concepts. Each mapping takes an array of data stores it should be mapped to:

{
    "myConcept": {
        "schema": {
            "myProperty": "string",
            "myOtherProperty": "boolean"
        },
        "mappings": {
            "myProperty": [ "memory", "myFirstDataStore"],
            "myOtherProperty": [ "localStorage", "mySecondDataStore" ]
        }
    }
}

Default Mappings #

The default mappings of properties in a new Varv webstrate are to the "dom" and "cauldron" data stores.

Overwriting Default Mappings of Concepts #

If all properties of a concept should by default be mapped to another concept, the "defaultMappings" object can be used within concepts to set the default mapping for all properties within a concept:

{
    "myConcept": {
        "schema": {
            // ...
        },
        "defaultMappings": [ "memory", "myFirstDataStore"]
    }
}

`"cauldron"` Mapping #

This data store connects properties to the Cauldron’s data inspector for Varv. It makes it possible to inspect and modify properties and concept instances in Cauldron. This data store, however, is not persisted and state in Cauldron is discarded after page refresh. For persisted data, this data store should be paired with, e.g., the "dom" or "localStorage" data stores.

Data Store Types #

`"dom"` Data Store #

This data store stores state inside the DOM of a website. When using Webstrates, which synchronizes the DOM, this data store allows for collaborative applications using Varv. It can take two options to define in which element and in which webstrate state should be stored.

Options:

Option	Description
`"storageName"`	The DOM element in which the Varv state should be stored in (Default: `varv-data`).
`"storageWebstrate"`	The webstrate in which the Varv state should be stored (Default: the current webstrate).

Example:

{
    "dataStores": {
        "myDomDataStore": {
            "type": "dom",
            "options": {
                "storageName": "my-data-element",
                "storageWebstrate": "another-webstrate-123"
            }
        }
    }
}

Stored state example:

<body>
    <varv-data>
        <concept type="todo" uuid="concept7c3762396270868b3b2e">
            <property name="text" value="Hello World"></property>
        </concept>
    </varv-data>
</body>

`"localStorage"` Data Store #

This data store stores state in the localStorage object of web browser. It allows to store (semi-)persisted state within a browser that is not shared with other users.

The localStorage object is shared per domain, so state in it can be used across multiple webstrates and Varv applications. By default, however, the data store uses the name of the current webstrate as the storage name. This means, that state is stored on a per webstrate basis. Using the same storage name across two webstrates, however, synchronizes the state between the two.

Options:

Option	Description
`"storageName"`	The name of the data store prefix for state in the `localStorage` element (Default: the name of the current webstrate).

Example:

{
    "dataStores": {
        "myDomDataStore": {
            "type": "localStorage",
            "options": { "storageName": "my-storage-name" }
        }
    }
}

`"memory"` Data Store #

This data store stores state in the JavaScript memory of a website. This state is not shared and not persisted. The state is discarded after refreshing the website. A use case for this data store is, e.g., in input fields or selection that should not be synchronized with others.