mattlgy/riot

A React-like, user interface library

A React- like, 3.5KB UI lib

Framework Size Comparison

Framework	Version	Minified Size
Ember	1.13.3	493.3kb
Angular	1.4.2	145.5kb
React	0.13.3	121.7kb
Web Components Polyfill	0.7.5	117.1kb
Riot	2.2.2	13.11kb

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 + AngularJS
• Module loader for WebPack
• Riot + Meteor
• Riot Snake Game
• Riot Tag Syntax Checker
• Riot 文档中译版 🇨🇳
• Riot + Wintersmith
• Riot precompiler plugin for lineman
• Riot Startkit - Flux inspired skeleton app + WebPack + PostCSS

Miscellaneous

• Q&A with RiotJS author Tero Piirainen

Credits

Riot is made with ❤️ by many smart people. Thanks to all the contributors

 project  : riot
 repo age : 1 year, 10 months
 active   : 366 days
 commits  : 1524
 files    : 200
 authors  :
   484  Gianluca Guarini        31.8%
   392  Tero Piirainen          25.7%
   150  Aurimas                 9.8%
    50  Tsutomu Kawamura        3.3%
    44  rsbondi                 2.9%
    27  Marcelo Eden            1.8%
    20  Kalman Speier           1.3%
    18  Márcio Coelho          1.2%
    18  Juha Lindstedt          1.2%
    17  Alberto Martínez       1.1%
    15  Anton Heryanto          1.0%
    14  andynemzek              0.9%
    13  Greg                    0.9%
    11  Hrvoje Šimić          0.7%
    10  Andy VanEe              0.7%
     9  a-moses                 0.6%
     9  Avner Peled             0.6%
     8  Mark Henderson          0.5%
     8  Andreas Heintze         0.5%
     7  Richard Bondi           0.5%
     7  Lee Tagg                0.5%
     7  marciojcoelho           0.5%
     7  Ashley Brener           0.5%
     7  Avnerus                 0.5%
     7  Tianxiang Chen          0.5%
     6  Jens Anders Bakke       0.4%
     6  sethyuan                0.4%
     6  hemanth.hm              0.4%
     5  midinastasurazz         0.3%
     5  Tatu Tamminen           0.3%
     5  jigsaw                  0.3%
     4  xieyu33333              0.3%
     4  Eric Baer               0.3%
     4  Jasmine Hegman          0.3%
     4  Giovanni Cappellotto    0.3%
     4  blissland               0.3%
     3  Alan R. Soares          0.2%
     3  Artem Medeusheyev       0.2%
     3  Jim Sparkman            0.2%
     3  Magnus Wolffelt         0.2%
     3  korige                  0.2%
     2  Markus A. Stone         0.1%
     2  Philippe CHARRIERE      0.1%
     2  Bolt                    0.1%
     2  Žiga                   0.1%
     2  Milosz                  0.1%
     2  David Salazar           0.1%
     2  crazy2be                0.1%
     2  Mohammed Irfan          0.1%
     2  Moot Inc                0.1%
     2  Sergey Martynov         0.1%
     2  jmas                    0.1%
     2  陈海峰               0.1%
     2  Tim Kindberg            0.1%
     2  luffs                   0.1%
     2  Antoine Goutagny        0.1%
     2  Andrew Luetgers         0.1%
     2  Tobias Baunbæk         0.1%
     2  oldpig                  0.1%
     2  Andrew Kiellor          0.1%
     2  Andrew Feng             0.1%
     2  Simon JAILLET           0.1%
     2  Collin Green            0.1%
     2  Alexis THOMAS           0.1%
     2  yibuyisheng             0.1%
     2  Eric Capps              0.1%
     2  Steve Clay              0.1%
     1  The Gitter Badger       0.1%
     1  Constantin Rack         0.1%
     1  Trent Ogren             0.1%
     1  Umut Sirin              0.1%
     1  Zach Aysan              0.1%
     1  Boris Huai              0.1%
     1  afc163                  0.1%
     1  Benoit Hirbec           0.1%
     1  borishuai               0.1%
     1  boynet                  0.1%
     1  h2so5                   0.1%
     1  Barkóczi Dávid        0.1%
     1  Ari Makela              0.1%
     1  kylobite                0.1%
     1  nino-porcino            0.1%
     1  typicode                0.1%
     1  xieyu03                 0.1%
     1  Jonathan Dumaine        0.1%
     1  Jorrit Schippers        0.1%
     1  Jonny Buchanan          0.1%
     1  Joel Thornton           0.1%
     1  Justin Dorfman          0.1%
     1  Juwan Yoo               0.1%
     1  Ivan Saorin             0.1%
     1  Ian Walter              0.1%
     1  Liu Jin                 0.1%
     1  Fernando Correia        0.1%
     1  Marcin Jekot            0.1%
     1  Matthew McCullough      0.1%
     1  Maxence Dalmais         0.1%
     1  Mike Breen              0.1%
     1  Mike Ward               0.1%
     1  Eliseo Arias            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  Danil Semelenov         0.1%
     1  Tenor Biel              0.1%
     1  Courtney Couch          0.1%

https://muut.com/riotjs/