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 |
| 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
- 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,constructororshouldComponentUpdate - Interpolation:
Add #{ items.length + 1 }orclass="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
- Another Riot Todo MVC
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
Libraries
Components
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
- Yeoman generator - Generator riot mobile
- Yeoman generator - Generator riot element
- Riot for TypeScript
Performance
- Riot vs React performance: (Riot version) vs (React version)
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%