data-tier

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.

₆₁₊ | ₆₀₊ | ₇₉₊

Changelog is found here.

Note: thanks the Piotr Pazola there is an ability to tie the data to the attributes rather than properties now (3.3.0). This is done via specifying the target 'property' starting with data-, which will cause data-tier to set the attribute to the tied data.

Note: the above solution of attributes tying is a narrowed case of a more generic, and yet still missing, functionality. This issue, attributes ties, will be addressed fully as part of the Issue 74 and Issue 79 work.

Installation

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

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

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

import * 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.

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

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

import { ties } from 'https://libs.gullerya.com/data-tier/3.1.6/data-tier.js';

const model = ties.create('tieKeyA', {
	status: 'better than ever'
});

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