| Framework | Version | Minified Size |
|---|---|---|
| Ember | 2.2.0 | 446.0kb |
| Polymer | 1.0.6 | 183.0kb |
| Angular | 1.4.8 | 148.0kb |
| React | 0.14.3 | 136.0kb |
| Web Components Polyfill | 0.7.19 | 118.0kb |
| Riot | 2.3.11 | 20kb |
Riot brings custom tags to all browsers, including IE8. Think React + Polymer but with enjoyable syntax and a small learning curve.
<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>riot.mount('timer', { start: 0 })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.
- 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.
- 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.
- 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
- 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.
- Riot Examples - Community's Official
- Riot Todo MVC
- Hackernews reader
- Vuejs examples by Riotjs
- Flux-like ES6 Todo
- Simple TODO
- Timer
- Another flux demo comparable to React ones
- Various experiments
- Isomorphic application
- Isomorphic proof of concept
- flux-riot todo
- Another Riot Todo MVC
- Cheft isomorphic by express
- Building Apps with Riot, ES6 and Webpack
- Building Apps with Riot, Babel, RiotControl and Webpack
- 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
- The anatomy of a tag - a primer tutorial
- Flux- like event controller for Riot
- flux-riot framework
- Cheftjs - chinese framework for Riot
- Veronica - flux adaption for Riot
- Material UI
- RiotGear
- Riot Bootstrap
- iToolkit
- Riot Routehandler-(Demo)
- Riot Grid - (Demo)
- ESLint Riot Plugin
- riot-animate
- 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
- Sublime Syntax Highlighting for Riot Tag Files
- Riot loader plugin for RequireJS
- Riot loader plugin for JSPM/SystemJS
- Riot vs React performance: (Riot version) vs (React version)
Riot is made with ❤️ by many smart people from all over the world. Thanks to all the contributors
It's actively maintained by: