data-tier

    3.5.1 • Public • Published

    NPM License: ISC

    Quality pipeline Codecov Codacy

    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:

    DataTier.ties.create('key1', { firstName: 'Uria' });
    <span data-tie="key1:firstName"></span>

    Support matrix: CHROME61+ | FIREFOX60+ | EDGE79+ | Safari13+

    Changelog is found here.

    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

    Install

    npm i data-tier

    DownloadsWeekly Downloads

    467

    Version

    3.5.1

    License

    ISC

    Unpacked Size

    55.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar