Build Reusable UI in Javascript

Yama.js is an attempt to combine what I liked most of Angular, Knockout and React.

It gets :

• from React: The "everything is a component" philosophy and UI description in javascript files,
• from Angular : Observables with seamless js syntax. myComponent.title = "Hi" instead of myComponent.title("Hi")
• from Knockout : Declarative binding attributes

Yama encourages you to describe your UI as a component, that means you can reuse it later inside another component.

Yama includes a simple templating syntax to build the dom tree of your UI, and it binds automatically events and observables to your view object.

Observables with seamless js syntax. Yama uses native javascript accessors to handle changes in view objects. It means that you can't get in trouble with digest loop because there isn't one.

fork this repo

works with any web framework and has no dependencies.

You only take care of writing the behaviour of your UI, nothing else. See "to do list" example

7 KB when minified

yama.register({
    name : 'myComponent1',
    draw : function(){
        /*!
        root
            div text:title
        !*/
    },

    title : "Hello, world !"
});

and you can use it like this :

var myComponent = new yama.components.myComponent1(document.body);

yama.register({
    name : 'toDoListComponent',
    draw : function(){
        /*!
        root
          input value:curTask avalue:curTask onenter:addTask
          div
            foreach:itVar taskItem:taskList
              div
                span text:taskItem
                span:close text:closeText onclick:onCloseClick
        !*/
    },

    curTask : "",
    closeText : "×",
    taskList : ["Go to Walmart", "Learn to Play Guitar", "Justin Bieber concert"],

    addTask : function(){
        this.taskList.unshift(this.curTask);
        this.curTask = '';
    },
    onCloseClick : function(g){
        this.taskList.splice(g('itVar'), 1);
    }
});

Result : See it live

See more examples on project website

MIT