Skip to content

tzs007/riotjs

 
 

Repository files navigation

Riot logo

A React- like, 3.5KB UI lib

Build Status NPM version NPM downloads Riot Forum

MIT License

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 or shouldComponentUpdate
  • Interpolation: Add #{ items.length + 1 } or class="item { selected: flag }"
  • Compact ES6 method syntax.

Demos

Tutorials

Resources

https://muut.com/riotjs/

About

A React- like, 3.5KB user interface library

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 96.3%
  • HTML 2.8%
  • Other 0.9%