Riot.js（以下、Riot）は非常にシンプルかつ軽量で入門の敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。筆者はRiotが好きでよく使っていますが、今日はなるべく客観的にRiotがどれくらい有用なライブラリかを振り返って見たいと思います。ポエム形式、かつ長めの記事ですのでご了承ください。

※ 筆者は下記のフレームワーク・ライブラリの中で、Backbone以外は触ってはいますが、実案件で導入したことはないため、あまり知見がありません。ですので後学のため、なにかご指摘いただけると助かります。

tl;dr

tl:drと言いながらちょっと長いです…🙇

それぞれの評価
- Backbone
  - 古参のフレームワーク
  - だいぶ枯れている
  - 更新はバグフィックスが主で、あまり機能拡張はない
- Angular
  - Google謹製
  - 現在もっともフレームワークらしいフレームワーク
  - TypeScriptを採用している
  - 開発にはほぼangular-cliが不可欠
  - 学習コストは結構高い
  - ng-japanというslackチャンネルがとても活発
- Ionic
  - AngularをベースにしたUIフレームワーク
  - ハイブリッドでスマホアプリ + Webアプリ作りたい場合に有効
  - 始めるだけなら、Angularの知識ほとんどなくても始められる
  - こちらも、開発にはほぼionic-cliが不可欠（デフォルトでインストールされる）
  - 裏はCordovaなので、躓く時は根が深かったりする
  - 2018年1月に日本語の本が出るよ！
- Vue.js
  - 近年もっとも人気なフレームワーク
  - github starもめっさ多い
  - のにも関わらず、issuesがめっさ少ない
  - 学習コストも低い
  - ライト（容量も軽い）
  - エコシステムも充実している
- jQuery
  - 説明は不要なくらい有名なライブラリ
  - フレームワークではないが、そうカテゴライズしても良いくらい強い
  - なんだかんだみんな使ってる
- React
  - 言わずと知れたFacebook謹製のコンポーネントベースのUIライブラリ
  - UIに関するフレームワーク・ライブラリの先駆け的存在
  - github starもかなり多く、npmのダウンロード数ならjQueryを超えた
  - エコシステム、記事もかなり充実している
  - 設計力は問われると思う
  - react-create-appは使えない
Riotについて
- コンポーネントベースのUIライブラリの一つ
- 従来のフロントエンドの開発の流れをそのまま活かす形
  - デザイナーさんでも触りやすいと思う
- かなり軽量かつ、学習コストも低い
- .tagというファイル拡張子でカスタムタグを作って管理
- 昔はパフォーマンスが悪かったが、今は劇的に改善された
- 比較対象はReact（と思っている）
  - 以前は公式サイトにREACT- LIKEと記載されていた
Riotの総評
- Reactで苦労しているならRiotは良いよ
- 大規模開発には向かない
- 双方向データバインディングないのは…
  - でも簡単に実装できるのでそれほど問題ではない
- 結論：　
  - ライトなライブラリで、サクッと開発するような案件なら有用
  - 一部のコンポーネント、一部の機能で完結しているものを作るのにも有用

Popularity

まずは数字の比較をしてみます。

フレームワーク

name	version	star	issues	last commit
Backbone	1.3.3	26,891	36	2017/12/05
Angular	5.1.1	31,064	1,792	2017/12/15
Ionic	3.9.2	32,647	1,018	2017/12/15
Vue.js	2.5.10	76,762	59	2017/12/15

ライブラリ

name	version	star	issues	last commit
jQuery	3.2.1	47,411	83	2017/12/12
React	16.2.0	83,455	343	2017/12/14
Riot.js	3.7.4	12,608	34	2017/12/07

※2017/12/15(JST) 現時点

上記の数字を見てわかるように、ReactとVue.jsが群を抜いてstarを獲得しています。ただし、jQueryはnpmからインストールする方も多いですが、それ以上にCDNから利用されている方も多いので、実際の利用者はこの中では最も多く利用されているライブラリかなと思います（ちなみにnpmのダウンロード数では、 jQueryよりReactの方が上です）。ここで凄いのは、Vue.jsの「issuesの少なさ」です。Angularと比較するとだいぶライト（軽量）とは言え、フレームワークとうたっているもので、この少なさは素晴らしいです。

Backboneは古参のフレームワークです。バグフィックスなどちょこちょこ更新はされていますが、機能拡張などは行われていないようですね。

そもそも（ちょっと余談）

昨今、フロントエンドで何のフレームワークを使うかの議論になった時、ReactとVue.jsの比較の話をよく耳にしますが、そもそもこの二つはフレームワークとUIライブラリの比較に他ならないため、比較対象ではないと思っています。というのも、Reactはあくまで「UIライブラリ」だからです。

「jQueryはフレームワーク」とカテゴライズする方も多いですが、確かにjQueryは頑張れば大抵のことはできる強いツールのため、フレームワークといっても差し支えないですが、あくまでライブラリです。しかしこの子は、他のものと比較というより導入するかしないか、で議論することが多いのかなと思います。（そして導入している印象）

Riotについて

Simple and elegant component-based UI library　
（公式サイトより）

とありますように、コンポーネントベースのUIライブラリです。ものすごくライト（軽量）かつ、シンプルなライブラリですが、基本的な機能はそろっているため、とてもパワフルでもあります。「Riotの何が良いのか？」という疑問につきましては、公式サイトのTOPページご覧ください！また、少し前のバージョンまではパフォーマンスが懸念でしたが、現在は劇的に改善されました！（手前味噌ですが）

また、以前は

A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY

とあるように、Reactとの比較が強調されていました。公式サイトのTOPページにも、ReactとRiotのtodoアプリのソースコードが掲載されており、サイズだけでなく、どれだけ簡単にコードが書けるか、ということも比較されていました。

実際に、どのようにするか公式のライブデモを見てみましょう。細かい説明は、他にもたくさん記事が書かれているので今回は割愛しますが、眺めれば何となくわかると思います。

index.html

<html>
  <head>
    <title>Hello Riot.</title>
  </head>
  <body>
    <!-- bodyタグ内にカスタムタグを設置 -->
    <sample></sample>

    <!-- tagを読み込む -->
    <script type="riot/tag" src="sample.tag"></script>
    <!-- riot.js本体を読み込む -->
    <script src="https://cdn.jsdelivr.net/npm/riot@3.7/riot+compiler.min.js"></script>

    <!-- タグをマウント -->
    <script>riot.mount('sample')</script>
  </body>
</html>

sample.tag

<sample>
  <h3>{ message }</h3>
  <ul>
    <li each={ techs }>{ name }</li>
  </ul>

  <script>
    this.message = 'Hello, Riot!'
    this.techs = [
      { name: 'HTML' },
      { name: 'JavaScript' },
      { name: 'CSS' }
    ]
  </script>

  <style>
    :scope { font-size: 2rem }
    h3 { color: #444 }
    ul { color: #999 }
  </style>
</sample>

ダイジェストでいうと、

カスタムタグを作って、htmlに設置
- タグ名はhtml標準の名前は避ける
別途.tagファイルを作成し、そこでhtml, css, jsを書く
- スコープはその中で閉じている
riot.mount('hoge')でマウントする

です。この流れが基本です。
どうですか？最近のJSのフレームワークやライブラリと違って、ものすごく既視感ありません？w

Riotの欠点

こちらもダイジェストで。

かなり設計力を問われる
- かなりライトな分、jQueryのようにカオスなコードになりかねない
mixinの使い所が難しい
双方向データバインディングがない
アニメーションが弱い
.tagだとエディタのシンタックスハイライトが効かない
ループ周りのバグが多め
タグのマウントのライフサイクルと、onload時のjsの処理のタイミングがバッティングする可能性がある

Riotとその他の比較

▼cliについて

Name	version	generater	Overview
`angular-cli`	1.5.5	あり	いわゆるフレームワークのCLI。devサーバー起動、ビルド、各コンポーネントの作成など必要なものは全て備わっている。
`ionic-cli`	3.19.0（※1）	あり	angular-cliと同等の機能を備えつつ、各プラットフォームへのビルドやIonic社独自のサービスとの連携機能も実装されている。
`create-react-app`	1.4.3	なし	プロジェクトの雛形作成のみ。
`vue-cli`	2.9.2	なし	プロジェクトの雛形作成のみ。（※2）
`riot-cli`	3.0.4	なし	tagファイルのコンパイルに関する機能のみ。

やっぱりフレームワークのCLIは、CLIもセットでフレームワークといった印象ですので、かなり優秀です。ただし、Vue.jsはフレームワークとうたってますが、ライブラリに近い形ですので、vue-cliはちょっと機能が足りないです。create-react-app, riot-cliは単機能のcliですので、これらも正直機能不足です。

※1: ionic-cliはいくつかのライブラリに分けられており、公式としてはIonic Frameworkのバージョンと同じとしているようです。
※2: helpを見るとbuildは削除された模様。このコマンドを削除することで初期インストールを最適化しスリムにしたとのこと。

▼学習コストと周辺ドキュメント

Name	Learning cost	JP Docs	Slack
`Backbone`	触ったことないのでわかりません	割と多い	`backonejs`: 入ってないのでわかりません
`Angular`	高い	かなり多い	`ng-japan`: かなり活発で、質問のレスも早い
`Ionic`	高い	かなり少ない	`ionic2`: それほど活発ではないが、質問のレスが早い
`Vue.js`	割と低い	かなり多い	`vuejs-jp`: チャンネルによっては活発で、質問に関しては公式のvur-forumに移行した模様
`jQuery`	かなり低い	かなり多い	`jquery`: 入ってないのでわかりません
`React`	低い	かなり多い	`react-japan`: それほど活発ではないが、ちょこちょこ投稿あり
`Riot`	低い	割と少ない	`riot-jp`: あまり活発ではなく、質問のレスもそれほど早くない

学習コストについては、やはりAngular, Ionicは高いなと思います。Vue.jsは、公式ドキュメントのチュートリアルも充実していることもあり、割と低いのかなと感じました。ライブラリに関しては基本的にどれもライトなので、学習コストは低く、簡単に始められる印象ですが、Riotに関しては「ヒューマンリーダブル」かつ「APIの数が少ない」ため、他のライブラリよりはコストはさらに低いのかなと思います。

日本語ドキュメントはgithub starの数にだいたい似ていますが、Ionic, Riotはあまり日本で導入されている事例が少ないため、ドキュメントも少ないです。

上記以外のslackのワークスペースをご存知の方は、コメントで教えていただけると嬉しいです！

▼周辺モジュール

Name	Router	Observer	Store(flux)
`Backbone`	Bacbone.Router	Backbone.Events	-
`Angular`	@angular/router	RxJS	-
`Ionic`	-	RxJS	-
`Vue.js`	vue-router	-	Vuex
`jQuery`	-	-	-
`React`	react-router	-	Flux / Redux
`Riot`	riot-router	riot-observable	RiotControl / riotx

意外にも、Vue.jsやReactにはObserverモジュールが存在しないんですね。ただし、VuexやFlux, Reduxを導入すれば、それらが役割を果たしてくれます。

Riotには、公式にriot-observableが用意されており、それを利用して作られたRiotControlを利用することで、Fluxを実現することもできます。

▼その他

書きやすさ、パフォーマンスにつきましては、自分が作ったアプリではそんな大差はないのかなと思います。ただし、PWAを考慮するのであれば、スマホアプリの開発をサポートするツールということもあって、Ionicが一歩抜きん出ていると思います。また、ルーティングにつきましては、Reactだとバージョンアップ時に苦労した、という噂を耳にしていますが、基本的な書きやすさはどのツールもそれほど変わらないのかなと思います。

上記のツールの中でRiot（とBackbone）のみ存在しない機能があります。それは、アニメーション機能です。他のフレームワーク・ライブラリには標準でアニメーション機能が実装されているか、その機能を持ったモジュールが用意されていますが、Riotには存在しません。。。（自分はいつもjQueryさんを利用しています）

Riotの総評

自分の経験上、以下のような場面では有用なのかなと思います。

とにかく早く書き始めたい
Reactで苦労していて、他のものに乗り換えたい
小規模での開発
- 一部のコンポーネント、一部の機能のみで完結しているなど
設計についてはしっかり決まっている
最悪捨てることができる
- .tagはコンパイル後は普通のjsのコードになるので流用できる

日本ではあまり人気がないですが、とても使いやすいライブラリですので、一度触ってみていただきたいなと思います！

改めてRiot.jsをその他のFW・ライブラリと比較して客観的に評価した