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 ofmyComponent.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