Skip to content

jamesnolanverran/riot

 
 

Repository files navigation

Riot logo

A React- like, 3.5KB UI lib

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 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

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

Components

Resources

Miscellaneous

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/

About

A React-like, user interface library

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 96.2%
  • HTML 2.9%
  • Other 0.9%