data-tier

data-tier ('tier' from 'to tie') is a two way binding (MVVM) library targeting client (browser) HTML/JavaScript applications.

Primary reasons for data-tier (or - why bother):

• simplicity, it is much simpler than any other MVVM libs I'm aware of
• performant and robust data handling due to object-observer
• perfectly suited for web-components based applications

It is highly advised to briefly review the library's Lifecycle documentation for a main concepts.

Once ready, data-tier's approach to client app architecture will provide a full author's take on when and how to employ data binding in a modern client applications in a non-intrusive, non-prisoning, managable and extensible way.

data-tier relies on an Observable-driven event cycle, having an embedded object-observer as the default Observable provider.

data-tier implements a data binding declaration API (part of this library), which specifies tying data source to element's:

• attribute
• event
• method
• property

The simplest example of usage, just to give some look'n'feel:

1DataTier.ties.create('key1', { firstName: 'Uria' });

1<span data-tie="key1:firstName"></span>

Support matrix: ₆₁₊ | ₆₀₊ | ₇₉₊ | ₁₃₊

Changelog is found here.

Installation

Use regular npm install @gullerya/data-tier --save-prod to use the library from your local environment:

1import * as DataTier from 'node_modules/@gullerya/data-tier/dist/data-tier.min.js';

CDN deployment is available (AWS driven), so one can import it as following:

1import * as DataTier from 'https://libs.gullerya.com/data-tier/x.y.z/data-tier.min.js';

Note: replace the x.y.z by the desired version, one of the listed in the changelog.

CDN features:

• security:
  • HTTPS only
• performance
  • highly available (with many geo spread edges)
  • agressive caching setup

Documentation

Starting walkthrough

Deep dive - API

Use cases - WebComponents, ShadowDOM, MicroFrontends

Security

Security policy is described here. If/when any concern raised, please follow the process.

Examples

The easiest point to start from is the walkthrough examples.

Additionally, there are few the CodePen snippets:

• DataTier binding with regular DOM elements - simple input element, its change event and span reflecting the changed value
• WebComponent scoped binding - this time we have input tied to the reflecting span by an input event (immediate changes), while all of those scoped within a web-component, each instance of which has its own encapsulated model
• ... more to come :)

Here we'll overview a rather simple, but quite self explanatory case.

2 elements below are both views tied to the same model. span is one-way bound to reflect the data. input employs two-way binding.

1<input data-tie="tieKeyA:status => value => input">
2<br>
3<span data-tie="tieKeyA:status"></span>

This is our model initialization to make it all play together:

1import { ties } from 'https://libs.gullerya.com/data-tier/3.1.6/data-tier.js';
2
3const model = ties.create('tieKeyA', {
4	status: 'better than ever'
5});

For more details see API reference.

Extensions

I believe, that data-tier as a framework should serve a single purpose of tying the model with the view in its very basic form: propagating the changes/values to the relevant recipient/s (more conceptual details and examples here).

Functionalities like repeater, router and other well known UI paradigms should be provided by a dedicated components, probably, yet not necessary, built on top of data-tier or any other framework.

Me myself investing some effort in building data-tier oriented components. I'll maintain the list below, updating it from time to time (please update me if you have something to add here).

• data-tier-list - repeater-like component to render a list of a similar items based on a single template
• i18n - internationalization library, mostly concerned with translation, where dynamic replacement of the localized texts upon active locale change is driven by data-tier