Riot.js 2.2 情報まとめ

Riot.js 2.2 情報まとめ

とりあえず、気付いたものをメモしていきます。随時更新。

## 本家

- [公式ドキュメント(英語)](http://riotjs.com/)
- [**公式ドキュメント(日本語)**](http://riotjs.com/ja/)
- [GitHub リポジトリ](https://github.com/riot/riot)
- [From React to Riot 2.0](https://muut.com/blog/technology/riot-2.0/) - 背景説明のブログ記事
- [Gitter](https://gitter.im/riot/riot)
- [公式フォーラム](https://muut.com/riotjs/forum/)
- [サンプル集(準備中)](https://github.com/riot/examples)

![riot960x.png](https://qiita-image-store.s3.amazonaws.com/0/1858/4ec11960-8cc8-afb0-798c-9ecacfaf7565.png "riot960x.png")


## 開発情報

### インストール

`riot`はツールごとにリポジトリが分かれていません。

- ブラウザ用のライブラリ
- コンパイラ
- CLIツール

の3つが一緒くたになっています。各人のスタイルに合わせて、インストールしましょう。(追記・次のv2.3に向けて、サブモジュール化が進んでいます)

#### ライブラリとして

CDNから最新版。他のパターンは[こちら](https://muut.com/riotjs/download.html#content-delivery-networks)。

- コンパイラなし: `https://cdn.jsdelivr.net/riot/2.2/riot.min.js`
- コンパイラあり: `https://cdn.jsdelivr.net/g/riot@2.2(riot.min.js+compiler.min.js)`

`npm`経由で。Browserifyを使う場合など。

```bash
$ npm install --save riot
```

`bower`経由で。

```bash
$ bower install --save riot
```

#### CLIツールとして

コマンドラインから、 `riot`を使う場合は、グローバルにインストール。

```bash
$ npm install riot -g
```

使い方は次の通り。

```bash
# 同一フォルダ内にコンパイル
$ riot some.tag

# 他のフォルダにコンパイル
$ riot some.tag some_folder

# 他のフォルダにファイル名を指定してコンパイル
$ riot some.tag some_folder/some.js

# 特定フォルダ内のファイルをすべてコンパイル (個別に)
$ riot some/folder path/to/dist

# 特定フォルダ内のファイルをコンパイルしてひとつに結合
$ riot some/folder all-my-tags.js
```

### コンパイル

#### ビルドツールで

- [gulp-riot](https://github.com/e-jigsaw/gulp-riot) - gulpプラグイン
- [grunt-riot](https://github.com/ariesjia/grunt-riot) - Gruntプラグイン
- [riotjs-loader](https://github.com/esnunes/riotjs-loader) - WebPack用のモジュールローダ

#### APIで

```javascript
var riot = require('riot');

var js = riot.compile(source_string);
```

#### Browserifyの場合

Browserifyのトランスフォームがあるので、これを使います。

- [riotify](https://github.com/jhthorsen/riotify)

こんな感じのJavaScriptのファイルがあったとして...

```javascript
// src/app.js
var riot = require('riot');
require('./components/custom-form.tag');
require('./components/custom-list.tag');

riot.mount('custom-form', { opt1: 'aaa', opt2: 'bbb' });
riot.mount('custom-list', { opt1: 'ccc', opt2: 'ddd' });
```

gulp経由でBrowserifyを使う際の `gulpfile` ↓

```javascript
// gulpfile.js
var gulp       = require('gulp');
var browserify = require('browserify');
var riotify    = require('riotify');
var source     = require('vinyl-source-stream');

gulp.task('browserify', function(){
  browserify({ entries: ['src/app.js'] })
  .transform(riotify, { template: 'jade' }) // pass options if you need
  .bundle()
  .pipe(source('app.js'))
  .pipe(gulp.dest('dist/'))
});
```

CoffeeScriptやJadeを使う場合は、`riotify`にオプションを渡す必要があります。

- CoffeeScript: `{ type: 'coffeescript' }`
- Jade: `{ template: 'jade' }`
- 両方: `{ type: 'coffeescript', template: 'jade' }`

あと、実際に使用する場合は、`uglify`と`sourcemaps`も必要になるはず。(上記の`gulpfile`は説明のためにかなり単純化しているので)


### テスト関連

- [karma-riot](https://www.npmjs.com/package/karma-riot)

### ベンチマーク

裏を取ってないですが、こんな感じという投稿あり。

Mithril < Vue < Backbone = Riot < React << Angular < Ember

- [Issueでの議論 "Add a todomvc example to tastejs"](https://github.com/muut/riotjs/issues/186)
- [Virtual DOM Benchmark](http://vdom-benchmark.github.io/vdom-benchmark/) - まだRiotはなし


## 各種情報

### サンプル

- [Simple TODO](https://muut.com/riotjs/dist/demo/) - 本家のデモ
- [TodoMVC](http://txchen.github.io/feplay/riot_todo/) - TodoMVCのRiot.js版。[ソースはこちら](https://github.com/txchen/feplay/tree/gh-pages/riot_todo)
- [Multi TODO](http://plnkr.co/edit/UZ2BfP?p=preview)
- [Timer](http://jsfiddle.net/gnumanth/h9kuozp5/) - タイマー
- [Flux- like event controller for Riot](https://github.com/jimsparkman/RiotControl) - Todoとルーティングのデモ
- [Multi- selector](http://plnkr.co/edit/NmcxgZ?p=preview)
- [Riot.js Example Project](https://github.com/baer/riot-example) - Todoアプリをgulpでビルドする例
- [絵文字検索](https://github.com/jgsme/emo) - [デモサイト](http://emo.jgs.me/)
- [Markdown Editor](https://github.com/txchen/feplay/tree/gh-pages/riot_vue) - vue.jsのデモっぽいやつ
- [Riot.jsで通貨コンバータを作る](http://qiita.com/cognitom/items/8c801a23faea4c61534d) - Browserifyする例として
- [Riot.jsでタグエディターのサンプルを作ってみた](https://hnakamur.github.io/blog/2015/02/28/riot-tag-editor-example/)

そのほか、本家の[README](https://github.com/muut/riotjs#demos)の最後に掲載されるようになりました。

### チュートリアル

- [RiotJS Example](http://www.robertwpearce.com/blog/riotjs-example/) - シンプルなタブの実装を例に、丁寧に紹介
- [無謀にもJavaScriptなしでやってみる! Riot.js入門](http://qiita.com/cognitom/items/8010e0779950df574cc9) - HTML/CSSコーダー向け、Riot.js入門

### Q & A

- [Stack Overflow](http://stackoverflow.com/questions/tagged/riot.js) - まだ情報がない...

### 紹介記事

- [Riot – Reactライクな軽量UIライブラリ](http://www.moongift.jp/2015/02/riot-react%E3%83%A9%E3%82%A4%E3%82%AF%E3%81%AA%E8%BB%BD%E9%87%8Fui%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA/) - Moongift
- [Riot.js 2.0 を触ってみた — まだReactで消耗しているの?](http://qiita.com/cognitom/items/fb1295f3f93911e9e92d) - 深夜二時クオリティ...
- [Riotjsのいいところ](http://qiita.com/jgs/items/afa7bca6d4d88812b7e4) - jgsさんによる紹介
- [Riot.js試してみた](http://qiita.com/mizchi/items/cc0b0e6056b6390e380e) - mizchiさんによる辛口レビュー
- [Riot.js ソースコード完全解説](http://qiita.com/cognitom/items/eb6d56485fe517ccd9ee) - 全部コード読んで把握できる量でした。
- [HTMLのタグ属性に配列やオブジェクトを指定する](http://qiita.com/cognitom/items/b057f438ed64c7be5915) - Riotでタグに属性を渡す方法各種