Riot brings custom tags to all browsers starting from IE8. Think React + Polymer, but squeezed into 2.5K.
riot.tag('timer','<p>Seconds Elapsed: { time }</p>', function(opts){
this.time = opts.start || 0;
this.tick = (function() {
this.update({ time: ++this.time });
}).bind(this)
var timer = setInterval(this.tick, 1000);
this.on('unmount', function() {
console.info('timer cleared');
clearInterval(timer);
});
});
riot.mount('timer',{ start: 0 });riot.mount('timer', { start: 0 })Custom tags lets you build complex views with HTML.
<timetable>
<timer start="0"></timer>
<timer start="10"></timer>
<timer start="20"></timer>
</timetable>HTML syntax is the de facto language on the web and it's designed for building user interfaces. The syntax is explicit, nesting is inherent to the language and attributes offer a clean way to provide options for custom tags.
- Smallest possible amount of DOM updates and reflows.
- All expressions are pre-compiled cached for high performance.
- No extra HTML root elements or
data-attributes. - No event loops or batching.
- No proprietary event system.
- Event normalization for IE8.
- The rendered DOM can be freely manipulated with other tools.
- Plays well with jQuery.