data-tier
Version:
Tiny and fast two way (MV-VM) data binding framework for browser environments.
122 lines (84 loc) • 6.07 kB
Markdown
[](https://www.npmjs.com/package/data-tier)
[](./license.md)
[](https://github.com/gullerya/data-tier/actions?query=workflow%3A%22Quality+pipeline%22)
[](https://codecov.io/gh/gullerya/data-tier/branch/main)
[](https://app.codacy.com/app/gullerya/data-tier)
# `data-tier`
> Starting v4 `data-tier`'s NPM will be relocated to the scoped [@gullerya/data-tier](https://www.npmjs.com/package/@gullerya/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`](https://github.com/gullerya/object-observer)
- perfectly suited for web-components based applications
It is highly advised to briefly review the library's [Lifecycle](docs/lifecycle.md) documentation for a main concepts.
> Once ready, [`data-tier`'s approach to client app architecture](docs/client-app-architecture.md) 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`](https://github.com/gullerya/object-observer/blob/main/docs/observable.md)-driven event cycle, having an embedded [object-observer](https://github.com/gullerya/object-observer) as the default `Observable` provider.
`data-tier` implements a [data binding declaration API](docs/api-tying-declaration.md) (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:
```js
DataTier.ties.create('key1', { firstName: 'Uria' });
```
```html
<span data-tie="key1:firstName"></span>
```
Support matrix:
<sub>61+</sub> |
<sub>60+</sub> |
<sub>79+</sub> |
<sub>13+</sub>
Changelog is found [here](docs/changelog.md).
## Installation
Use regular `npm install data-tier --save-prod` to use the library from your local environment:
```js
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:
```js
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](docs/changelog.md).
CDN features:
- security:
- __HTTPS__ only
- performance
- highly __available__ (with many geo spread edges)
- agressive __caching__ setup
## Documentation
[Starting walkthrough](docs/walkthrough.md)
[Deep dive - API](docs/api-reference.md)
[Use cases - WebComponents, ShadowDOM, MicroFrontends](docs/web-components.md)
## Security
Security policy is described [here](https://github.com/gullerya/data-tier/blob/main/docs/security.md). If/when any concern raised, please follow the process.
## Examples
The easiest point to start from is the [walkthrough](docs/walkthrough.md) examples.
Additionally, there are few the `CodePen` snippets:
- [DataTier binding with regular DOM elements](https://codepen.io/gullerya/pen/abdmebe) - simple `input` element, its `change` event and `span` reflecting the changed value
- [WebComponent scoped binding](https://codepen.io/gullerya/pen/xxZEvbK) - 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.
```html
<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:
```js
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__](docs/api-reference.md).
## 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](docs/client-app-architecture.md)).
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`](https://www.npmjs.com/package/data-tier-list) - repeater-like component to render a list of a similar items based on a single template
* [`i18n`](https://www.npmjs.com/package/@gullerya/i18n) - internationalization library, mostly concerned with translation, where dynamic replacement of the localized texts upon active locale change is driven by `data-tier`