A React-like user interface micro-library

Custom tags • Enjoyable syntax • Virtual DOM • Tiny size

Why do we need a new UI library?

The frontend space is indeed crowded, but we honestly feel the solution is still “out there”. We believe Riot offers the right balance for solving the great puzzle. While React seems to do it, they have serious weak points that Riot will solve.

So — here’s why we need one:

1. Custom tags

Riot brings custom tags to all browsers.

<todo>

  <!-- layout -->
  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input>
    <button>Add #{ items.length + 1 }</button>
  </form>

  <!-- style -->
  <style scoped>
    h3 {
      font-size: 14px;
    }
  </style>

  <!-- logic -->
  <script>
    this.items = []

    add(e) {
      var input = e.target[0]
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>

A custom tag glues relevant HTML and JavaScript together forming a reusable component. Think React + Polymer but with enjoyable syntax and a small learning curve.

Human-readable

Custom tags let you build complex views with HTML. Your application might look something like this:

<body>

  <h1>Acme community</h1>

  <forum-header/>

  <forum-content>
    <forum-threads/>
    <forum-sidebar/>
  </forum-content>

  <forum-footer/>

  <script>riot.mount('*', { api: forum_api })</script>
</body>

HTML syntax is the de facto language of 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.

Riot tags are converted to pure JavaScript before browsers can execute them.

Virtual DOM

Close to standards

Tooling friendly

2. Simple and minimalistic

Minimalism sets Riot apart from others:

1. Enjoyable syntax

One of the design goals was to introduce a powerful tag syntax with as little boilerplate as possible:

2. Small learning curve

Riot has between 10 and 100 times fewer API methods than other UI libraries.

3. Tiny size

react.min.js – 43.62KB (gzip)

polymer.html – 42.09KB (gzip)

riot.min.js – 9.23KB (gzip)

4. Small, but complete

Riot has all the essential building blocks for modern client-side applications:

Riot is an “open stack”. It’s meant for developers who want to avoid framework specific idioms. The generic tools let you mix and match design patterns. Systems like Facebook Flux can be self-made.

I looked at the riot.js example, and it feels so clean, it’s scary. @paulbjensen

Just messed around with #RiotJS for an hour. Got it setup with Gulp, Browsesify, and Babel in no time. I like it a lot so far! @AndrewDelPrete

Today I have used #riotjs 2.0 for the first time and I could admit that It will be a long term relationship #js highly recommended. @gianlucaguarini

I liked the idea of #reactjs with #flux but I like #riotjs with #riotcontrol even better! @tscok

looking at RiotJS https://muut.com/riotjs/ — blown away by its simplicity. @defeated

Played with riot.js and like it so much more than React. Minimalistic, fast and a comprehensible API. @juriansluiman

Conclusion

Riot is Web Components for everyone. Think React + Polymer but without the bloat. It’s intuitive to use and it weighs almost nothing. And it works today. No reinventing the wheel, but rather taking the good parts of what’s there and making the simplest tool possible.

We should focus on reusable components instead of templates. According to the developers of React:

“Templates separate technologies, not concerns.”

By having related layout and logic together under the same component the overall system becomes cleaner. We respect React for this important insight.

The initial blog entry

From React to Riot 2.0