Deadly simple declarative JavaScript framework for building UI.
- Tiny size. (2.3kb gzipped)
- Zero dependence.
- Pure ES6.
- No compiler. (Directly use taged template strings).
- Fast and extendable.
From CDN:
<script src="https://s3.ssl.qhres.com/!f8bdfee3/brief.min.js"></script>
With NPM:
npm install briefjs
const {tags, component, render} = briefjs;
const {div, span} = tags;
function randomColor() {
const r = Math.round(Math.random() * 255);
const g = Math.round(Math.random() * 255);
const b = Math.round(Math.random() * 255);
return `rgb(${r},${g},${b})`;
}
const MyTag = component({
props: {
color: 'red;',
},
componentDidMount() {
console.log('mounted');
},
clicked() {
this.props.color = randomColor();
},
render(slot) {
return div({style: {color: this.props.color}, onclick: this.clicked.bind(this)})`
${span`1`}
${span`2`}
${slot}
`;
},
});
const tpl = div`
${MyTag({color: 'blue'})}
${span`3`}
${span`4`}
${div`
${span`5`}
`}
`;
render('#app', tpl);