A React- like, 3.5KB UI lib
Custom tags • Concise syntax • Virtual DOM • Full stack • IE8
Riot brings custom tags to all browsers, including IE8. Think React + Polymer but with enjoyable syntax and a small learning curve.
Tag definition
<timer>
<p>Seconds Elapsed: { time }</p>
this.time = opts.start || 0
tick() {
this.update({ time: ++this.time })
}
var timer = setInterval(this.tick, 1000)
this.on('unmount', function() {
clearInterval(timer)
})
</timer>
Mounting
riot.mount('timer', { start: 0 })
Nesting
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.
Virtual DOM
- Absolutely the smallest possible amount of DOM updates and reflows.
- One way data flow: updates and unmounts are propagated downwards from parent to children.
- Expressions are pre-compiled and cached for high performance.
- Lifecycle events for more control.
Close to standards
- No proprietary event system.
- Event normalization for IE8.
- The rendered DOM can be freely manipulated with other tools.
- No extra HTML root elements or
data-
attributes. - Plays well with jQuery.
Use your dearest language and tools
- Create tags with CoffeeScript, Jade, LiveScript, Typescript, ES6 or any pre-processor you want.
- Integrate with NPM, CommonJS, AMD, Bower or Component
- Develop with Gulp, Grunt or Browserify plugins
Concise syntax
- Power shortcuts:
class={ enabled: is_enabled, hidden: hasErrors() }
. - No extra brain load such as
render
,state
,constructor
orshouldComponentUpdate
- Interpolation:
Add #{ items.length + 1 }
orclass="item { selected: flag }"
- Compact ES6 method syntax.
Demos
- Riot Todo MVC
- Hackernews reader
- Vuejs examples by Riotjs
- Flux-like ES6 Todo
- Simple TODO
- Timer
- Flux- like event controller for Riot
- Another flux demo caparable to React ones
- Various experiments
- Isomorphic application
- flux-riot todo
Tutorials
- Building Apps with Riot, ES6 and Webpack
- Building Apps with Riot, Babel and Browserify
- Building tabs with Riot
- The "React tutorial" for Riot
- How to package "tag libraries" in Riot
- Another React tutorial with Riot
- Riot Custom Tag by Example
- Riot Compiler Explained
- Adding compiled Riot tags to your Gulp + Browserify build