Have ideas to improve npm?Join in the discussion! »

    data-tier

    3.1.4 • 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. data-tier relies on an Observable-driven event cycle, having an embedded object-observer as the default Observable provider.

    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 also have a bunch of useful information on when and how to employ data binding in a modern client applications in a non-intrusive, non-prisoning, managable and extensible way.

    Support matrix

    CHROME61+ | FIREFOX60+ | EDGE79+

    Versions (full changelog)

    • 3.1.4

      • documentation
      • dependencies maintenance
    • 3.1.3

      • implemented Issue #68 - exposing Observable implementation that is bundled with this data-tier version
      • added cache-control to the CDN deployment
    • 3.1.0

      • implemented Issue #58 - allowed to create/update ties with primitive model (boolean, number, string)
      • implemented Issue #59 - capable of create/update ties with null
      • nullish model values (null, undefined) transformation into an empty string is now limited to only:
        • textContent target property for any element
        • value target property for these: INPUT, SELECT, TEXTAREA

    Installation

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

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

    Additionally, 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:

    • HTTPS only, no untrusted man-in-the-middle
    • highly available (with many geo spread edges)
    • agressive caching setup

    Documentation

    API

    WebComponents, ShadowDOM, MicroFrontends

    Tutorials

    Security

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

    Basic example

    There is a growing number of examples and ready to run tutorials in the repo self (docs/tutorials), but even more convenient is to play with the CodePen snippets below:

    • 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 :)

    As many similar libraries do, data-tier also employes the two:

    • declarative part of binding views to model found in HTML
    • functional part of defining and operating on the model in JavaScript

    Let's see how it plays in the code.

    functional (JS) part

    Having data model defined, for example, as:

    let bands = [
        {
            id: 1234,
            name: 'Dream Theater',
            since: 1985,
            albums: [
                { id: 2345, year: 1988, name: 'When Dream and Day Unite' },
                { id: 2346, year: 1991, name: 'Images and Words' }
            ]
        }
    ];

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

    const bandsModel = DataTier.ties.create('bandsTie', bands);

    create API returns an Observable clone of the provided object/array.

    If no model provided, data-tier will create an empty object model by default.

    bandsModel from our example may be operated on as a usual JS object/array, but it is also being observed by data-tier for any (deep) changes.

    Any direct (JS driven) change will be reflected in the tied views. Also, any relevant changes from the views will be reflected in the bandsModel back.

    declarative (HTML) part

    Any UI element may be tied to the model using the key and the path:

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

    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

    373

    Version

    3.1.4

    License

    ISC

    Unpacked Size

    54.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar