-JOIN_CHAT_%E2%86%92-551a8b.svg?style=flat-square){kind=icon}
| Framework | Version | Minified Size (gzip) |
|---|---|---|
| Angular2 | 2 | too much |
| Ember | 2.11.0 | 131.01kb |
| Angular | 1.6.1 | 57.99kb |
| Polymer + Web Components Polyfill Lite | 1.7.0 | 50.25kb |
| React | 15.4.2 | 45.06kb |
| Web Components Polyfill | 0.7.22 | 33.68kb |
| Vue | 2.1.10 | 26.49kb |
| Riot | 3.1.0 | 10.20kb |
| Inferno | 1.2.2 | 9.17kb |
| Preact | 7.2.0 | 3.94kb |
Riot is supported by all modern browsers and it does not require any additional polyfill
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.
data- attributes.Note: * officially maintained
class={ enabled: is_enabled, hidden: hasErrors() }.render, state, or constructor.Add #{ items.length + 1 } or class="item { selected: flag }"If you are reading this it's already a good sign and we are thankful for it! We try our best working as much as we could on riot but your help is always appreciated.
If you want to contribute to riot helping us maintaining the project please check first the list of our open issues to understand whether there is a task where you could help.
Riot is mainly developed on UNIX systems so you will be able to run all the commands necessary to build and test the library using our Makefile. If you are on a Microsoft machine it could be harder to set up you development environment properly.
Following the steps below you should be able to properly submit your patch to the project
$ git clone git@github.com:riot/riot.git && cd riot
$ git checkout -b feature/my-awesome-patch
$ npm i
# To build and test riot
$ make riot
# To build without testing
$ make raw
# To build anytime you change a src file
$ make watch
# To bench riot ( it requires ctrl+c to exit )
$ make perf
dev branch making sure you have read our pull request templateRiot is made with :heart: by many smart people from all over the world. Thanks to all the contributors
It's actively maintained by:
FAQs
Simple and elegant component-based UI library
The npm package riot receives a total of 4,851 weekly downloads. As such, riot popularity was classified as popular.
We found that riot demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.