Simple and elegant component-based UI library

カスタムタグ • 楽しい文法 • 明解なAPI • コンパクトな実装

なぜ新しい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 ref="input">
    <button>Add #{ items.length + 1 }</button>
  </form>

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

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

    add(e) {
      e.preventDefault()
      var input = this.refs.input
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>

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

ヒューマンリーダブル

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

<body>

  <h1>Acme community</h1>

  <forum-header/>

  <div class="content">
    <forum-threads/>
    <forum-sidebar/>
  </div>

  <forum-footer/>

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

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

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

テンプレート変数バインディング (DOM Expressions biding)

標準に近い

他のツールと相性がいい

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

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

1. 楽しい文法

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

2. 小さな学習曲線

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

3. サイズが小さい

polymer.min.js – 49.38KB

react.min.js – 34.89KB

riot.min.js – 10.38KB

4. 小さくて、必要十分

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

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

@riotjs_ Thanks for creating a library that allows me to make a simple SPA in plain JS without needing to download 13k NPM packages. @coussej

Switched my site from #BackboneJS to #RiotJS. Other than compile/mount not blocking for DOM render, it’s great! #JavaScript @riotjs_ @richardtallent

Like all people fed up with the status quo and the development of the world, I’m voting RiotJS <3 Love you baby @plumpNation

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

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

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に敬意を示したいと思います。