Riot.js

(2016/10/11〜2016/11/22)
  • 軽量さが売りのVDOMライブラリ
  • それ、PHPじゃね?って思ってる
  • 悪くないけど巨大SPAは崩壊する予感
  • コンポーネントは.tag拡張子でHTMLライクに書く
  • tagコンポーネントのライフサイクル

  • http://riotjs.com/guide/#tag-lifecycle
  • ハマりどころ

  • 子タグへのoptsの渡し方
  • <custome clickMoge={ moge }></custom>で渡すとopts.clickmogeで参照される
  • 全て強制的に小文字になる。キレそう
  • Qiita:riot.jsでattribute経由でoptsに渡されるプロパティ名について
  • イベントハンドラでupdateをキャンセルする
  • xml
  • <custome_button onClick={ handleClick } />
  • javascript
  • this.hadleClick = event => {
  • // これでupdateがキャンセルされる
  • event.preventUpdate = true;
  • }
  • 使ってみての所感

  • よいなと思うこと
  • tagが読みやすい
  • 完全にHTML
  • 制約がほぼない
  • Reactだとめっちゃ怒られるけどそういうのない
  • CSSのスコープがtag内で収まる
  • 地味便利
  • 気に食わないこと
  • タグのマウントやVDOM更新を外部から実行できない
  • 例えばStoreのリスナーにタグ自身のアップデートを登録する、というのをtagファイルに書かなければいけない
  • tagに必要な変数が分かりづらい
  • 親コンポーネントもしくはmount元から受け取る変数はすべてoptsという変数にぶら下がっている
  • 必要な変数を洗い出したかったら参照してるopts.*を全部洗い出すことになる
  • クソでは?
  • Reactならクラスベースコンポーネントなのでコンストラクタで受け取れる
  • グローバル変数が多すぎる
  • これは正直好みの問題
  • tagファイル上で参照できる暗黙の変数の値が多い
  • tagファイルのlintができない
  • tag内にscript書く前提だがそこに対してESLintだと--fixオプションが効かない
  • 公式が対応してない。辛み
  • エラーがわかりづらい
  • Reactに慣れてるとこのうえなくつらい
  • consoleに何も出さずに内部的に処理が死んでることが多々ある
  • GitHubがtagファイルのシンタックスハイライトに対応していない
  • アンチパターンが生まれやすい

  • 実際にRiotのSPA開発で目にしたアンチパターン
  • タグ自身のStateをoptsで管理してしまう
  • props的な扱いしないと何が何だかわからない
  • DOMを直接操作する
  • refs的なものがないのでidかname経由でないと管理できない
  • 総括

  • Web Component的な使い方ならあり
  • タグファイルが3つ以上だともうVueかReactにしてほしい
  • 複数人開発や中規模以上のSPAには間違いなく向かない
  • 制約が弱い
  • ひたすら汚く書ける
  • そもそも前提がWeb Component指向
  • RiotのまともなFlux設計のコードがGitHubとかで見当たらないのがいい証拠だと思う
  • javascript SPA Web Component

Related(2)

general(396)