data-tier

Overview

data-tier ('tier' from 'to tie') is a two way binding (MVVM) service targeting client (browser) HTML/Javascript applications. data-tier relies on an Observable-driven event cycle, having an embedded object-observer as the default Observable provider.

In future I may consider allowing provision of custom Observable implementation if there will be any interest in it.

Support matrix: ₆₁₊ | ₆₀₊ | ₁₆₊

Performance report: TBD

Versions (full changelog)

• 1.0.0

  • First release to hold an ES6 module flavor distribution only (pay attention to the library loading)
  • Fixed view -> model flow for input of type checkbox
  • Fixed an error in the log where non-tied elements were removed from DOM

• 0.6.25

  • Fixed issue no. 13

• 0.6.21

  • initial provisioning of data-tier as ES6 module
  • new API defined and implemented in ES6 module distribution

Loading the Library

import * as DataTier from 'dist/data-tier.min.js';

Basic concepts

My, definitely opinionated, insights of how client application should look like in general and how data-tier library comes into that picture can be found here. That would probably be the most completed overview of the library's overall usage intent.

Tie

Tie holds an observable data structure associated with tie's name, it's about what to tie. Thus, ties serve most and foremost data segregation and management purposes.

Having the following data structure:

let bands = [
    {
        id: 1234,
        name: 'Dream Theater',
        since: 1985,
        albums: [
            { id: 2345, name: 'When Dream and Day Unite', since: 1988 },
            { id: 2346, name: 'Images and Words', since: 1991 }
        ]
    }
];
bands.totalTooltip = 'My hall-of-fame bands';

one can create a tie named, say, 'bandsTie', having its data set to the bands array:

let bandsDataStore = DataTier.ties.create('bandsTie', bands);

and then tie any UI element to it via the tie name and the path:

<span data-tie="bandsTie:length > textContent, bandsTie:totalTooltip > tooltip"></span>

<div>
    <span data-tie="bandsTie:0.albums.1.name => textContent"></span>
    <custom-album-viewer data-tie="bandsTie:0.albums => data"></custom-album-viewer>
</div>

where:

• the first item in the path is always the tie's name, having colon separating it from an actual path within the model
• bandsTie:0 - refer to the whole object at index 0 of our array
• bandsTie:length - length property, inherited from the native Array, may also be used
• bandsTie:0.name - path can get deeper...
• bandsTie:0.albums.1.since - ...actually, it can get to any level of deepness

Basically, it is possible to create a single dataset for the whole application, making a single 'uber-tie' from it and operating everything from there, but IMHO it would be a bad practice. Having say that, I'll note, that there is no limitations on the size or the structure complexity of the tied model, nor there are any negative effects of those on application performance.

Tie object not only meant to hold the link between the data and its namespace, but also tie's specific configurations/customizations and data management APIs. For more details see API reference.

Documentation

New data-tier

Tutorials