META JS

META JS is a collection of JavaScript libraries for building reusable web applications using WebComponents.

Get on GitHub

META JS is not under active development any more. We are considering using of Angular 2.0.

What is MetaJS

MetaJS provides libraries for:

  • DOM templates
  • View logic
  • Web applications UI
  • Data modeling
  • Each component can be used individualy (with dependencies).

Together they provide framework for effective development of web applications.

MetaJS is using experimental HTML5 Web Component features which are not part of living standard and thus they are not fully suported by web browsers.

MetaJS currently works natively only in Google Chrome.

Template HTML

<div id="tpl">
    <p class="project-name"></p>
</div>

Create template instance

var tpl = Meta.Template(document.getElementById('tpl'), {
    ".project_name":    "name"
});

Render template

tpl({
    name: "My project"
});

Result

<div id="tpl">
    <p class="project-name">My project</p>
</div>

DOM templates

MetaJS provides templating engine which manipulates directly with DOM. This way needs no re-rendering so it is efficient and provides high performance.

DOM based

No re-rendering and no browser re-parsing provides high performance and flexibility compared to other traditional string-based engines.

Data binding

Templating engine provides data binding, conditions and loops.

  • item is added to array -> new dom node appended
  • item is removed from array -> dom node removed
  • item index changed -> dom node moved
  • item data changed -> binding updated = no flickering

Rule based

Template logic is defined by rules (processing functions) and provides flexible interface for non-standard usage.

Define view template

<template is="meta-view" id="my-template">

    <p>This is meta-view template content where X = <span class="x">?</span></p>

    <button>Increment X</button>

</template>

<div id="target"></div>

Create view

var view = document.getElementById('my-template');
var target = document.getElementById('target');

//Create instance and define template rules
var instance = view.instance(target, {
    ".x": "x"
});

//Set model values
instance.model.x = 0;

//Do the first render
instance.render();

Views

MetaJS provides View component which is wrapper for templates and adds view-logic and other features such as automatic event-binding and name-based access.

Template definition & view logic

Views are extending native html template tag and provides its instacing. View wraps MetaJS templating engine and provides nice interface for view logic definition.

Event binding

Views provides automatic event binding when template data changed. So you define event bindings once and when nodes are added or changed their events are automatically binded.

Global registry

Views can be defined only once and can be added to registry so other components can access it via name reference.

Define fragment

Meta.Fragment("com.example.todo", {

    view: "com.example.todo",
    import: ["example-list"],
    extends: ["com.example.list"],

    binding: {
        "ul li": $__repeat("tasks", {
            "@":        [
                $__attrIf("completed", "completed"),
                $__prop("task", "@key")
            ],
            ".task":    "task"
        })
    },

    events: {
        "click #add": function(ev){

            var value = this.$.todo.value;

            if(value != ""){
                this.provider.addTask(value);
                this.$.todo.value = '';
            }

        }
    },

    onCreate: function(self){

        self.provider = new TodoProvider("com.example.simpleTodo");
        self.model.tasks = self.provider.tasks;

    },

    onResume: function(self){

        self.providerChanged = self.provider.on("changed", function(data){
            self.render();
        });

    },

    onPause: function(self){

        self.provider.off("changed", self.providerChanged);

    },

    onRender: function(self){

        console.log("Rendered");

    }

});

Use fragment

<meta-fragment name="com.example.todo" auto></meta-fragment>

Fragments & activities

MetaJS provides Fragment and Activity components which are representing reusable UI building blocks.

Fragments and activities also supports ShadowDOM for convenient styling and resource distribution.

Fragment

Fragment represents basic reusable component such as: header, toolbar, search-box, list-view, etc...

Activity

Activity represents specific use-case component such as: customers list, customer detail, user account, etc...

Component logic

Fragments uses Views and wraps its view-logic and event binding in a friendly way.

Data model

Fragments provides data model object which is automatically binded to view.

Custom methods & Events

Fragments provides interface for defining custom component methods and firing Element events which can be binded via standard addEventListener method.

Dynamic imports

Fragments can specify modules which must be dynamically loaded before initialization.

Mixins

Fragments and activites can inherit from multiple other fragments or activities.

Lifecycle

Fragments can be paused and resumed. When fragments is removed from parent element then it is paused and all event bindings are removed. Resume and pause methods also propagates to all child fragments.

Content providers

Content providers represents data modelling layer and in most cases they should be connected to server API.

MetaJS comes with basic reactive content providers such as ObservingProvider which implements deep Object.observe and automaticaly notifies about object changes.

Channels

MetaJS implements publish / subscribe messaging pattern for simple inter-component communication.

Channels can be created localy in variable scope or can be registered globaly so any application component can access it.