riot

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, Browserify, or Wintersmith 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

• Riot Todo MVC
• Hackernews reader
• Vuejs examples by Riotjs
• Flux-like ES6 Todo
• Simple TODO
• Timer
• 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

Video Tutorials

• Introduction
• Loops, Events and Callbacks

Libraries

• Flux- like event controller for Riot
• flux-riot framework
• Cheftjs - chinese framework for Riot

Components

• RiotGear
• Riot Bootstrap
• iToolkit

Resources

• Riot + Angular
• Module loader for WebPack
• Riot module for AngularJS
• Riot + Meteor
• Riot on CodeClimate
• Riot Snake Game
• Riot Tag Syntax Checker
• Riot 文档中译版 :cn:
• Riot + Wintersmith
• Riot precompiler plugin for lineman

Miscellaneous

• Q&A with RiotJS author Tero Piirainen

Credits

Riot is made with :heart: by many smart people. Thanks to all the contributors

 project  : riot
 repo age : 1 year, 9 months
 active   : 303 days
 commits  : 1276
 files    : 189
 authors  :
   383  Tero Piirainen          30.0%
   342  Gianluca Guarini        26.8%
   150  Aurimas                 11.8%
    41  Tsutomu Kawamura        3.2%
    35  rsbondi                 2.7%
    27  Marcelo Eden            2.1%
    19  Kalman Speier           1.5%
    18  Juha Lindstedt          1.4%
    14  andynemzek              1.1%
    12  Márcio Coelho          0.9%
    11  Hrvoje Šimić          0.9%
    10  Andy VanEe              0.8%
     9  Anton Heryanto          0.7%
     8  Alberto Martínez       0.6%
     8  Mark Henderson          0.6%
     8  Andreas Heintze         0.6%
     7  Ashley Brener           0.5%
     7  marciojcoelho           0.5%
     7  Tianxiang Chen          0.5%
     6  Jens Anders Bakke       0.5%
     6  Greg                    0.5%
     6  hemanth.hm              0.5%
     5  jigsaw                  0.4%
     5  Avner Peled             0.4%
     5  midinastasurazz         0.4%
     4  blissland               0.3%
     4  Avnerus                 0.3%
     4  Eric Baer               0.3%
     4  Giovanni Cappellotto    0.3%
     4  Tatu Tamminen           0.3%
     4  Richard Bondi           0.3%
     3  sethyuan                0.2%
     3  Jim Sparkman            0.2%
     3  Alan R. Soares          0.2%
     3  Artem Medeusheyev       0.2%
     3  korige                  0.2%
     3  Magnus Wolffelt         0.2%
     2  xieyu33333              0.2%
     2  yibuyisheng             0.2%
     2  Žiga                   0.2%
     2  Markus A. Stone         0.2%
     2  Philippe CHARRIERE      0.2%
     2  Tobias Baunbæk         0.2%
     2  Andrew Luetgers         0.2%
     2  Antoine Goutagny        0.2%
     2  Tim Kindberg            0.2%
     2  Andrew Feng             0.2%
     2  crazy2be                0.2%
     2  Steve Clay              0.2%
     2  jmas                    0.2%
     2  luffs                   0.2%
     2  Moot Inc                0.2%
     2  Simon JAILLET           0.2%
     2  Sergey Martynov         0.2%
     2  Alexis THOMAS           0.2%
     1  陈海峰               0.1%
     1  Andrew Kiellor          0.1%
     1  Ari Makela              0.1%
     1  Barkóczi Dávid        0.1%
     1  Benoit Hirbec           0.1%
     1  Boris Huai              0.1%
     1  Collin Green            0.1%
     1  Constantin Rack         0.1%
     1  Courtney Couch          0.1%
     1  Danil Semelenov         0.1%
     1  David Salazar           0.1%
     1  Eliseo Arias            0.1%
     1  Eric Capps              0.1%
     1  Fernando Correia        0.1%
     1  Ian Walter              0.1%
     1  Ivan Saorin             0.1%
     1  Joel Thornton           0.1%
     1  Jonathan Dumaine        0.1%
     1  Jonny Buchanan          0.1%
     1  Jorrit Schippers        0.1%
     1  Justin Dorfman          0.1%
     1  Juwan Yoo               0.1%
     1  Liu Jin                 0.1%
     1  Marcin Jekot            0.1%
     1  Matthew McCullough      0.1%
     1  Maxence Dalmais         0.1%
     1  Mike Breen              0.1%
     1  Mohammed Irfan          0.1%
     1  Patrik Buckau           0.1%
     1  Quim Calpe              0.1%
     1  Riccardo Gueli Alletti  0.1%
     1  Ryan O’Hara           0.1%
     1  Sam Morgan              0.1%
     1  Simone Vittori          0.1%
     1  Steel Brain             0.1%
     1  Steven Koch             0.1%
     1  TZ | 天猪             0.1%
     1  Tenor Biel              0.1%
     1  The Gitter Badger       0.1%
     1  Trent Ogren             0.1%
     1  Umut Sirin              0.1%
     1  Zach Aysan              0.1%
     1  a-moses                 0.1%
     1  afc163                  0.1%
     1  borishuai               0.1%
     1  kylobite                0.1%
     1  oldpig                  0.1%
     1  typicode                0.1%
     1  xieyu03                 0.1%

https://muut.com/riotjs/