| Framework | Version | Minified Size (gzip) |
|---|---|---|
| Angular2 | 2.0.0-beta.17 | 125.29kb |
| Ember | 2.6.1 | 112.94kb |
| Angular | 1.5.7 | 56.02kb |
| Polymer + Web Components Polyfill Lite | 1.4.0 | 54.48kb |
| React | 15.2.0 | 45.49kb |
| Web Components Polyfill | 0.7.22 | 33.66kb |
| Vue | 1.0.26 | 26.66kb |
| Riot | 2.5.0 | 9.25kb |
Riot brings custom tags to all modern browsers. 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.
- 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
- 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
- electron-riot - Riot in an electron application
- An express, riot, jade, webpack simple boilerplate
- Riot.js vs React.js comparison of a simple comment box
- 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
- Using TDD with Riot+mocha+chai
- The Basics - from ground up to connected tag-networks
- Introduction
- Loops, Events and Callbacks
- Server Rendering with Node & Express
- Riot And Webpack Setup
- Riot and Redux - Part 1
- Riot and Redux - Part 2
- Riot and Redux - Part 3
- Riot and Redux - Part 4
- Riot and Redux - Part 5
- Riot and Redux - Part 6
- Flux- like event controller for Riot
- riotux - Simple Event Contoller for Riot.js
- flux-riot framework
- Cheftjs - chinese framework for Riot
- Veronica - flux adaption for Riot
- Material UI
- RiotGear Components
- RiotGear Router
- Riot Bootstrap
- iToolkit
- Riot Routehandler-(Demo)
- Riot Flipcard - (Demo)
- Riot Grid - (Demo)
- ESLint Riot Plugin
- riot-animate
- Nest UI - (Demo)
- 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
- Riot loader plugin for RequireJS
- Riot loader plugin for JSPM/SystemJS
- RiotJS Style Guide
- Riot Cheatsheet
- Riot vs React performance: (Riot version) vs (React version)
- riot (Atom Package)
- language-riot-tag (Atom Package)
- Based on Vue's official Sublime Text highlighter
- Note: Designed for html, not jade.
- sublime-tag (Sublime Text)
- riot-tag (Visual Studio)
Riot is made with ❤️ by many smart people from all over the world. Thanks to all the contributors
It's actively maintained by:
