表題ママになりますが、Riot.jsをデイリーポータルZのリニューアルに伴い採用しました。デイリーポータルZ（以下DPZ）って何？と言う方や、リニューアル全体の裏話を知りたい方は、こちらの記事やこちらの動画（長い）を見ていただければ幸いです。
なぜ Riot.js なのか？
これには大きく分けて2つの理由があります。
DPZ はめちゃくちゃ人気がある老舗サイトである
DPZは、月間1500万PVの超人気サイト。1日に複数の記事更新があり、中にはTwitter参加型のリアルタイム性の高い企画もあります。トラフィックもすごいあります（転送量とかすごすぎて語彙力低下）。過去記事も万単位で存在し、それら全てのページのサイドバーにある新着記事や人気記事のパーツを更新していく必要があるわけです。要するに、キャッシュ（CDN）と相性が悪い。普通に考えると、サイドバーをAjaxで読み込んで来ようとなると思います。
リニューアルだけど、デザインそのまま、HTML/CSSもそのまま
トラフィックのあるメディアなら、今流行りのシングルページアプリケーションにすればいいではないか、と思うかもしれません。しかし、今回のリニューアル要件は、インフラとCMSの変更のみ。デザインも変わらなければ、HTML/CSSもそのまま。厳密には、リニューアルと言って良いのかどうかも微妙なところです。
要するに、古いjQueryが入ってるサイトで、HTML構造を変えず一部だけSPAっぽいことがしたいと言うこと。この要件であれば、Riot.js が最適だと思います。
それまでのHTMLをとりあえずそのままカスタムタグ化できる
難しいことは考えず、全く同じHTMLをカスタムタグにできる。学習曲線の小ささにも繋がっているので、新規開発の際にもおすすめできるポイントだと思います。
軽量でjQueryとの相性が良い
すでにあるサイトということは、多くの場合jQueryが入っていて、jQueryに依存するライブラリがあれこれと入っているわけです。ここに非jQuery世界観のライブラリを付け足すと、JSファイル全体の容量がえらいことになってしまいます。jQueryから離脱できない以上、jQueryと相性の良い軽量なライブラリというのはベターな選択肢ではないでしょうか。
デザインそのままなら、別にRiot.jsを入れる必要すらなかったのでは？
という疑問ももっともだと思います。ちなみに、リニューアル前はどうなっていたのか？というと、同じくサイドバーはJavascriptで更新されていましたが、document.write()でHTMLソースをえいやっとDOMに挿入する方式でした。ただ、流石にこの仕組みは残したくなかった。この方式はHTML構造の変更にめちゃくちゃ弱いです。データソースはJSON形式で取得し、表示はカスタムタグに任せる。こうしてデータと構造を分離しておけば、CMSからのデータ出力部分にはなんの変更も加えず、カスタムタグのみ変更することでデザイン変更に対応できます。今回カスタムタグ化しておくことで、将来のデザインリニューアルの際の工数の大幅な削減が期待できると判断しました。
Riot.js を導入してよかったこと
短期間のプロジェクトで期待通りに動作し、大量のトラフィックを最小構成のインフラでさばくのに貢献しています。これは大変すばらしい結果と満足しています。
さらに改善したい点
APIのエンドポイントを再考し効率化したいと思っています。パーツごとにAPIのエンドポイントが存在するのですが、その分リクエスト数が増えてしまうのが気になっています。
// ヘッドラインパーツの読み込み
$.getJSON("/api/dpz/headline", function (data) {
riot.mount('dpz-headline', { items: data }
});
SPAであれば必要なパーツのみ更新されるから良いのですが、DPZは全体としてはあくまで普通のサイト。リンクをクリックすればページ遷移してしまい、全てのパーツのAjaxリクエストからやり直しです。エンドポイント数を少なくするか、遅延読み込みするべきかと思っています。
Riot.js に改善してほしい点
簡単に導入できるし、ドキュメントも最小限で必要なものが揃っているのは良いのですが、いざ導入した後の実践的な情報となるとなかなか見つからない。今後もDPZの保守改善を行っていく予定なので、勉強会などで情報が仕入れられると嬉しいのですが…。活性化を期待したいと思います！