Skip to content

thepian/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
Polymer 1.0.6 101.2kb
Riot 2.2.4 12.75kb

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

Performance

Miscellaneous

Credits

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

 project  : riot
 repo age : 1 year, 11 months
 active   : 392 days
 commits  : 1653
 files    : 213
 authors  :
   552  Gianluca Guarini        33.4%
   400  Tero Piirainen          24.2%
   150  Aurimas                 9.1%
    56  Tsutomu Kawamura        3.4%
    45  rsbondi                 2.7%
    43  Alberto Martínez       2.6%
    27  Marcelo Eden            1.6%
    20  Kalman Speier           1.2%
    18  Juha Lindstedt          1.1%
    18  Márcio Coelho          1.1%
    15  Anton Heryanto          0.9%
    14  andynemzek              0.8%
    14  Greg                    0.8%
    13  a-moses                 0.8%
    11  Hrvoje Šimić          0.7%
    10  Andy VanEe              0.6%
     9  Avner Peled             0.5%
     8  Richard Bondi           0.5%
     8  Mark Henderson          0.5%
     8  Andreas Heintze         0.5%
     7  Lee Tagg                0.4%
     7  marciojcoelho           0.4%
     7  Ashley Brener           0.4%
     7  Tianxiang Chen          0.4%
     7  Avnerus                 0.4%
     6  hemanth.hm              0.4%
     6  sethyuan                0.4%
     6  Jens Anders Bakke       0.4%
     5  jigsaw                  0.3%
     5  Tatu Tamminen           0.3%
     5  midinastasurazz         0.3%
     4  blissland               0.2%
     4  Jasmine Hegman          0.2%
     4  xieyu33333              0.2%
     4  Giovanni Cappellotto    0.2%
     4  Eric Baer               0.2%
     3  Artem Medeusheyev       0.2%
     3  scott                   0.2%
     3  Jim Sparkman            0.2%
     3  korige                  0.2%
     3  Alan R. Soares          0.2%
     3  Magnus Wolffelt         0.2%
     2  Mohammed Irfan          0.1%
     2  Eric Capps              0.1%
     2  Sergey Martynov         0.1%
     2  Simon JAILLET           0.1%
     2  Antonino Porcino        0.1%
     2  Steve Clay              0.1%
     2  Alexis THOMAS           0.1%
     2  Tim Kindberg            0.1%
     2  Tobias Baunbæk         0.1%
     2  Jon Wolfe               0.1%
     2  crazy2be                0.1%
     2  jmas                    0.1%
     2  luffs                   0.1%
     2  oldpig                  0.1%
     2  Andrew Feng             0.1%
     2  yibuyisheng             0.1%
     2  Žiga                   0.1%
     2  陈海峰               0.1%
     2  Bolt                    0.1%
     2  Andrew Kiellor          0.1%
     2  Markus A. Stone         0.1%
     2  Collin Green            0.1%
     2  Andrew Luetgers         0.1%
     2  Milosz                  0.1%
     2  Moot Inc                0.1%
     2  Mtpc                    0.1%
     2  Antoine Goutagny        0.1%
     2  Philippe CHARRIERE      0.1%
     2  David Salazar           0.1%
     1  kylobite                0.1%
     1  Andrew L. Van Slaars    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  Claudio Holanda         0.1%
     1  Constantin Rack         0.1%
     1  Courtney Couch          0.1%
     1  Danil Semelenov         0.1%
     1  Eliseo Arias            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  Mike Ward               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  XiongLiding             0.1%
     1  Zach Aysan              0.1%
     1  afc163                  0.1%
     1  borishuai               0.1%
     1  boynet                  0.1%
     1  h2so5                   0.1%
     1  jamesnolanverran        0.1%
     1  nino-porcino            0.1%
     1  typicode                0.1%
     1  xieyu03                 0.1%
     1  なりたけいすけ   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.3%
  • HTML 2.8%
  • Other 0.9%