joket1999 / riotjs

A React- like, 2.5KB user interface library

A React- like, 2.5KB user interface library

Custom tags • Minimal syntax • Virtual DOM • Full stack • IE8

Riot brings custom tags to all browsers starting from IE8. Think React + Polymer, but squeezed into 5.7KB (2.5KB when gzipped).

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, Typescript, ES6 or any pre-processor you want.
• Integrate with NPM, CommonJS, AMD, Bower or Component
• Develop with Gulp, Grunt or Browserify plugins

Minimal syntax

• Power shortcuts: class={ enabled: is_enabled, hidden: hasErrors() }.
• No extra brain load such as render, state, constructor or shouldComponentUpdate
• Interpolation: Add #{ items.length + 1 } or class="item { selected: flag }"
• Compact ES6 method syntax.

Demos

• Simple TODO
• Timer
• Flux- like event controller for Riot
• Vuejs examples by Riotjs
• Another flux demo caparable to React ones
• Various experiments

Tutorials

• Building tabs with Riot
• The "React tutorial" for Riot
• How to package "tag libraries" in Riot

Resources

• Riot + Angular
• Module loader for WebPack
• Riot module for AngularJS
• Riot + Meteor
• Riot on CodeClimate

https://muut.com/riotjs/