React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル

今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。
知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。

これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。
ドキュメントも兼ねてアウトプットしていきます。

Riot.jsとは

Riot.jsは今流行りのReact.jsに似た仕組みを持っている、それで非常に軽量なJavaScriptライブラリーです。
最近GitHubのリポジトリが/muut/riotjsから/riot/riotにお引っ越しして、これからがより注目なライブラリーです。

詳しくはこちら↓

Riot公式
Riot.js 2.0 情報まとめ
GitHub

捨てることを前提としたライブラリー選定

最初は今ブームの２大フレームワークとなっている『AngularJS』と『React』を試していましたが、不採用になりました。

AngularJSは2.0の懸念があり、ReactはFluxが人によって言ってること違ったり、
そしてReactに関してはでかい、jQueryよりもでかい、スマホにこれ読ませるの？、viewだけなのに・・・
という感じで本末転倒な気がしてやめました。

AngularJSにしてもReactにしても、本当に欲しい機能は一部だけで、今回はそんなに大きいものは不要でした。

きっと半年も経てば別のライブラリーが席巻していると思うので、
どうせその頃になったらまた全部コード書き直したくなってるはず。

なので、いつでも捨てられるように小さなパーツを組み合わせてやれるようにしました。
GAMYではriot.jsに加えajax通信用にsuperagentを入れています。

riot.js - 12KB
superagent - 10KB

さようならjQuery - 84KB

コンポーネントで設計しやすい

riot.jsの最大の長所は、divタグを１つ書いておけば、
勝手に読み込んで出力してくれるお手軽なところにあります。

例えばarticlesという名前のコンポーネントの場合

<div riot-tag="articles"></div>

この１行をHTMLに追加すると、自動的にコンポーネントが読み込まれます。
こんな感じでページが分割されているので、Riot.jsがそれぞれ表示してくれるようになっています。

このおかげでサーバーサイドが必要最低限のコードのみになり、とても見通しが良くなりました。

さらに最初に読み込む内容が減らせたため、サーバーのレスポンスタイムがだいたい1/6まで下がりました。

リリース直後のグラフ（１６時にリリースした）

MVCっぽく分割して作りやすい

基本的なコンポーネントの構造はAjaxでデータを取得して、それを出力するだけなのでAPIのJSONスキーマをModelとして扱います。
なので『Modelはサーバーサイドが持つべき』という考えで実装しています。

riot.jsではコンポーネントを構成するカスタムタグの中身は、普通のHTMLのように記述し処理はscriptタグ内に書きます。

<articles>
  <h3>{title}</h3>

  <ul>
    <li each={items}>
      <a href="{url}">{text}</a>
    </li>
  </ul>

  <script>
    this.title = "記事一覧"
    this.items = ajax.get(...)
  </script>
</articles>

なのでHTML部分をView、script部分をController、Ajax部分がModelとなり、コンポーネント毎にMVCっぽい形に綺麗に分割できました。

Riot.jsの短所

アニメーションが弱い

Reactにも言えることですが、基本的にコンポーネント毎に設計をしていくためアニメーションが苦手です。
画面全体でグリグリアニメーションさせたい場合には不向きだと感じました。

けっこうバグを踏む

実装中に何度かバグを踏みました。再帰処理でエラーがでたり、updateをかけているのに反映されなかったり
しかし他に似た症状がないかissueを調べると、大抵は報告済みでmasterにマージ済みでした。
なので発展途上ですが、ちゃんと開発されているのでバージョンアップで直りました。

それと中身は正規表現でのパースが多用されているので、怪しいコードは書かない方が無難です。
最近はバグを踏むようなことはなくなりました！

ドキュメントが少ない

これはしょうがないんですが、ドキュメントが少ないが少なく検索してもヒットしないので躓きます。そういう時はしょうがないので実装されているコードを読むことになります。
ライブラリーのコードとか難しそうですが、コード量も少ないのでわりと読めます。
解説記事もカフェのマスターがQiitaに書いてくれていますので、僕みたいなひよっこエンジニアでもわかりやすい。

Riot.js ソースコード完全解説

viewまわりのテストコードも書かれているので実装のやり方を知りたい場合にはそちらを見るのがおすすめです。

エディターのシンタックスがデフォルトで反応しない

拡張子が.tagなので。gulpに頑張ってもらっても良いんですがなんだかな〜・・・
拡張子をpugにしても読み込めるようになった！

まとめ

ReactとかAngularJSとか流行ってるけど、正直今までjQueryだけで作ってたようなサイトに、そんな大げさなフレームワーク必要ないし、新しく覚えること多いし大変でしょ
Riot.jsなら簡単で綺麗に書けるしオススメだよ。

もっとRiot.jsが流行ったら嬉しいな
そんなお話でした。