A React-like user interface micro-library

カスタムタグ • 楽しい文法 • 仮想DOM • コンパクトな実装

なぜ新しいUIライブラリが必要なのか

フロントエンドの世界には、ライブラリが溢れてはいるものの、正直なところソリューションはまだ「そこにない」と感じています。私たちは、この大きなパズルを解くために、Riotという最良のバランスを見つけました。Reactが果たしかけたかに見えたものの、重大な弱点を残している点、それをRiotは解決します。

だから——私たちには新しいライブラリが必要なのです。

1. カスタムタグ

Riotは全てのブラウザで、カスタムタグを実現します。

<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>

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

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

</todo>

カスタムタグは、関連するHTMLとJavaScriptをくっつけて再利用可能なコンポーネントとしてまとめます。React + Polymerに、”楽しい”文法と小さな学習曲線が一緒になった、とイメージしてください。

ヒューマンリーダブル

カスタムタグはHTMLで複雑なビューの構築を可能にします。あなたのアプリケーションはこんな感じになるでしょう:

<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の文法はWebの デファクト 言語であり、ユーザインターフェースを構築するためにデザインされています。文法はシンプルで明確、入れ子構造が備わっていて、属性はカスタムタグにオプションを提供するための簡潔な方法です。

メモ Riotタグは、ブラウザで実行する前に、純粋なJavaScriptに 変換されます

仮想DOM

標準に近い

他のツールと相性がいい

2. シンプルでミニマリスト

ミニマリズムが、Riotを他のライブラリと一線を画すものにしています。

1. 楽しい文法

デザインのゴールの一つは、できる限り最小の”boilerplate”で使える、強力な文法を導入することです。

2. 小さな学習曲線

Riotは他のUIライブラリと比較して、APIの数が10分の1か、100分の1。

3. サイズが小さい

polymer.min.js – 49.38KB

react.min.js – 46.45KB

riot.min.js – 10.02KB

4. 小さくて、必要十分

Riotはモダンなクライアントサイドのアプリケーションを作るための、基本的な構成単位をすべて備えています。

Riotは「オープンスタック」です。つまり、フレームワーク特有のイディオムを避けたい開発者向けです。一般的であることで、好きなデザインパターンを適用したり、混ぜたりすることができます。Facebook Fluxのようなシステムをつくることも可能です

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

まとめ

Riotは誰でも使えるWeb Componentsです。React + Polymerから無駄を省いたものを想像してください。ごく自然に使用でき、すごく軽い。それを今日から使えます。車輪の再発明をするのではなく、これらのツールの良いとこ取りで、可能な限りシンプルにしました。

私たちは、テンプレートではなく、再利用可能なコンポーネントにフォーカスするべきです。Reactの開発者曰く:

「テンプレートは、問題ではなく、技術を分けるだけだ」

同じコンポーネントの中で、レイアウトとロジックを一緒に持てば、全体のシステムはより簡潔になります。この重要な洞察について、Reactに敬意を示したいと思います。

最初のブログエントリー

From React to Riot 2.0