Simple and elegant component-based UI library

Custom tags • Enjoyable syntax • Elegant API • Tiny size

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

フロントエンドの世界にはライブラリが溢れてはいるものの、正直なところソリューションはまだ「他にある」と感じています。私たちは、この大きなパズルを解くために、Riot.jsが最良のバランスを提供すると信じています。

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

1. カスタム要素

Riot.jsはポリフィルを使用せずにすべての最新ブラウザにカスタム要素をもたらします!

<todo>
  <!-- layout -->
  <h1>{ props.title }</h1>

  <ul>
    <li each={ item in state.items }>{ item }</li>
  </ul>

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

  <!-- style -->
  <style>
    :host {
      padding: 16px;
    }
  </style>

  <!-- logic -->
  <script>
    export default {
      state: {
        items: []
      },
      add(e) {
        e.preventDefault()
        const input = e.target.todo

        this.state.items.push(input.value)
        this.update()

        input.value = ''
      }
    }
  </script>
</todo>

カスタム要素は関連する HTML と JavaScript を結合し再利用可能なコンポーネントを形成します。Webコンポーネント API がネイティブであることを望むすべてのものを提供するように設計されています。

ヒューマンリーダブル

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

<body>
  <h1>Riot.js application</h1>

  <my-header class="js-component"/>

  <main>
    <my-articles class="js-component"/>
    <my-sidebar class="js-component"/>
  </main>

  <my-footer class="js-component"/>

  <script>
    riot.mount('.js-component', { store: createApplicationStore() })
  </script>
</body>

HTML の構文は web の 事実上の 言語であり、ユーザーインターフェースを構築するために設計されています。その文法は明示的、ネストは言語固有のもの、そして属性はカスタムタグにオプションを与える明確な方法を提供します。

Riot.js のタグはブラウザに実行される前に素の javascriptに コンパイル されます。

パフォーマンスと予測性

標準に近い

他ツールとの相性が良い

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

Riot.js はミニマリズムであるということが他のライブラリと一線を画しています:

1. 楽しい文法

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

2. 小さな学習曲線

Riot.jsは他の UI ライブラリと比較して API メソッドの数が 10分の1 から 100分の1ほどです。

3. サイズが小さい

4. 小さいが必要十分

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

Riot.js は一つの”オープンスタック”です。つまり、フレームワーク固有のイディオムを避けたい開発者のためのもの、を意味します。一般的なツールを使用して、あなたの最も好みのデザインパターンを組み合わせることができます。

パワフルかつモジュラーなエコシステム

Riot.js のエコシステムは完全にモジュール化しており、必要なものを個別に選択できるように設計されています:

まとめ

Riot.js は誰でも使えるWeb Components です。React + Polymer から無駄を省いたものを想像してください。Vue.js にインスピレーションを受けたその API は豊富で、それでいて現代のフロントエンドプロジェクトを構築するために、最低限必要なもののみを含んでいます。ごく自然に使用でき、とても軽い。そして、今日から使えます。車輪の再発明をするのではなく、むしろそこにあるものの良いとこ取りをし、可能な限り最もシンプルなツールにしました。

Riot.js は Tim Peters 氏の The Zen of Python という思想(哲学)から駆動し、設計されました。それが我々のマントラです:

Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.
Special cases aren’t special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.
In the face of ambiguity, refuse the temptation to guess.
There should be one– and preferably only one –obvious way to do it.
Although that way may not be obvious at first unless you’re Dutch.
Now is better than never.
Although never is often better than right now.
If the implementation is hard to explain, it’s a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea – let’s do more of those!