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アプリのソースコードが掲載されており、サイズだけでなく、どれだけ簡単にコードが書けるか、ということも比較されていました。
実際に、どのようにするか公式のライブデモを見てみましょう。細かい説明は、他にもたくさん記事が書かれているので今回は割愛しますが、眺めれば何となくわかると思います。
<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>
<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のコードになるので流用できる
-
日本ではあまり人気がないですが、とても使いやすいライブラリですので、一度触ってみていただきたいなと思います！