Framework | Version | Minified Size |
---|---|---|
Ember | 1.13.3 | 493.3kb |
Angular | 1.4.2 | 145.5kb |
React | 0.14.1 | 132.6kb |
Web Components Polyfill | 0.7.5 | 117.1kb |
Polymer | 1.0.6 | 101.2kb |
Riot | 2.3.11 | 18kb |
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
,constructor
orshouldComponentUpdate
- 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 caparable 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
- Flux- like event controller for Riot
- flux-riot framework
- Cheftjs - chinese framework for Riot
- Veronica - flux adaption for Riot
- 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 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: