Skip to content

theofidry/riot

 
 

Repository files navigation

Riot logo

A React-like user interface micro-library

Build Status Riot Forum Join the chat at https://gitter.im/riot/riot

NPM version NPM downloads MIT License Coverage Status Code Quality

Sauce Test Status

Framework Size Comparison

Framework Version Minified Size
Ember 2.2.0 446.0kb
Polymer 1.0.6 183.0kb
Angular 1.4.8 148.0kb
React 0.14.3 136.0kb
Web Components Polyfill 0.7.19 118.0kb
Riot 2.3.11 20kb

Custom tags • Concise syntax • Virtual DOM • Full stack

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>

Open this example on Plunker

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

CDN hosting

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

Video Tutorials

Libraries / Frameworks

Components

Resources

Performance

Miscellaneous

Credits

Riot is made with ❤️ by many smart people from all over the world. Thanks to all the contributors
It's actively maintained by:

https://riotjs.com/

About

A React-like, user interface library

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.0%
  • HTML 2.2%
  • Other 0.8%