WEBエンジニア奮闘記

日々の業務から思ったこと、学んだことを書き連ねていきます。

Riot.jsのv4について改めてissueを追ってみた話

この記事はRiot.js Advent Calendar 2017の24日目(遅刻)になります!申し訳ないです!

qiita.com

Riot.js(以下、Riot)は非常にシンプルかつ軽量で入門の敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。 今回は、おそらく来年リリースされる(と自分は期待している)v4について、githubのissueを追ってみました。v4の議論についてはgithubで活発に行われていますが、追った内容を全部書く必要はないと思いますので、独断と偏見でいくつかピックアップした形になります。

※変な日本語訳ありましたら、ご指摘いただけると幸いです。

v4のドラフト

まずは、ドラフトについて見ていきます。『あくまでドラフトだからこれからリストを深掘りしていくよ』とのこと。


  • ソースコードをシンプルにするコンパイラの完全な書き換え。ただしソースマップも許可する
  • <yield>の使用を非推奨としている<slot>を使用したすべてのyieldのissueに対応する
  • riot-observableオプションを使用するようにする
  • タグインスタンスからthis.tagsを削除してrefを優先する #2360
  • riot.mountメソッドによるコンポーネントの自動マウントを非推奨にする
  • Shadow DOMのサポートを追加するか、少なくとも:scopeの代わりに:rootセレクタをサポートする
  • タグオプションを明示的にして、すべてのカスタムタグ属性をデフォルトで選択しないようにする
  • riot.cspの使用を避け、より簡単な解決策に賛成する
  • readmeファイルをクリーンアップして、チュートリアルや古いriotの制作物へのリンクを削除する
  • mixinロジックを簡略化して、es6クラスと関数インスタンスの使用を避ける
  • よりスマートなDOMアップデート戦略のためにshouldUpdateメソッドを削除する
  • IE9/10/11 のサポートの廃止
  • プロキシやテンプレート文字列などの新しいES6機能を使用する
  • each = {items}の使用をやめ、each = {item in item}に向ける
  • ソースコードを減らして多くのAPIをシンプルにする
  • コアメソッド引数の処理をシンプルにするようにAPIを更新する
  • 現在のオブジェクト拡張戦略に対する機能的なアプローチを推奨する

我々はここで進捗を追跡する。


個人的にはREADMEのクリーンアップ」がすごく嬉しいです。というのも、riotに関する公式のドキュメントは結構雑だなと感じていて、ユーザはそのドキュメントを見ながら開発をするので、ここはリソースを割くべきポイントでしょ!って思っています。また、mixinロジックのシンプル化」も地味に嬉しいですね。正直mixinの使いどころがわからず、結局 ES6のクラス構文を使ってますので。あとは、IEのサポートの廃止が嬉しすぎますが、これはちょっと懐疑的です(後述)。

v4のトピック

コアコミッターのGianlucaGuariniさんがあげている、トピック一覧の日本語訳版です。トピックとは言いますが、これは決定事項のようですね(^^)

一覧

  • 今後我々は{#if}{/if} {#each}{/each}のような構文は使わないだろう。これは、いまの新しいパーサーによる<if value={ foo }></if> <each value={ item in items }></each>という構文を解析するのが簡単になるべきだから
  • riotコンポーネント内の<script>タグは必須であるため、これ以上 html に js が混在することはない
  • 現在の riot ディレクティブはまだサポートされるだろう(ただし、show/hideを除く)。また riot コンポーネントの構文は同じままだろう: <my-tag>HTML<script>JS</script><style>CSS</style></my-tag>
  • conditionaleachステートメントは、実行時には(現在のvirtualの場合のように) riot によって処理されるのではなく、代わりにriot-compilerによって処理される
  • 新しいパーサには、より多くのテスト、ドキュメント、ベンチマークが必要
  • 新しいriot-compilerは非同期になり、完全に書き直される
  • コンパイラ{html、css、js、expressions、meta}を持つ単純なオブジェクトのみを返さなければならない。 metaには、コンパイラおよび/またはインポートに渡されるURLとオプションが含まれる
  • riot-parserシンタックスエラーを投げる責任を持つことになるだろう
  • riot-compilerはセマンティックエラーをスローする責任をもつことになるだろう
  • 我々はソースマップを生成するだろう!!
  • 我々はタグのロジックをriotにさらすために、export default {}ステートメントについて合意した
  • 我々はscoped cssについては、 :scopeの名前を:hostに変更する
  • 現在のriotのダーティチェックのレンダリングが遅すぎるので、我々が後ほど決定する新しいレンダリング戦略を調査しようと思っている(一度コンパイラとパーサがいわゆる安定版になったら)

大きく変わることはそれほどなさそうですが、riot-compilerは全面的に作り直されるようですね。また、riot-parserもだいぶ見直しされているようで、こちらもけっこう手が入るような気はしています。あとは、何度かissueが立っておりました、soucemapが実装されるとのことです!

TODOリスト - フェーズ毎

お次はフェーズ毎のtodoリストの翻訳です。

1st phase

  • 私はパーサーについて@aMarCruzとコラボレーションする
  • Albertoは数週間後に新しいパーサーにいくつかのパッチ(少なくとも<div if = {}>, <div each = {}>, <if><each>および export default {}ノードについて)を適用して知らせてくれる。その際、私はコードレビューをして彼を助けることができる
  • 私は、上記リンクのライブラリを使って実験する最善のレンダリング手順が何であるかを調査
  • @aMarCruzがすでに作業を開始していても、新しいriotのコンパイラはパーサが準備ができたら書き直す

2nd phase

  • コンパイラの出力を使用した結果を組み合わせて新しいレンダリング戦略を作成する
  • 新たなコンポーネントを作成するための新しいregisterメソッドを最小限で実装し、riotのコアAPIを減らすためにriotを修正してくれ1
  • ネイティブwebcomponents APIとカスタムマウントメソッドのどちらを使用するかをテストする

3rd phase

  • ユニットテストを更新
  • テンプレートの再水和2を可能にする優れたサーバサイドレンダリング戦略を実装する
  • すべてのriotのエコシステムを更新してv4で動かせるようにする

優先順位的にも、riot-compiler, riot-parserの改修が優先度高いようですね。 また、

我々はどれくらい時間をとるか決めていませんし、予定を立てることは難しい作業ですが、テストする準備ができたらすぐにpingします。

とあるように、具体的にどのフェーズがいつまでに完了するとかは明確には決めていないようですので、来年にv4がリリースされるかどうかも現時点では不明です。

IE11のサポートと、ES6について

数名の方がおっしゃってますが、現実的なことを言うと、IE11のサポートは廃止すべきではないと私も思います。下記のご意見が説得力あります。

In corporate environments, Windows 7 and 8 are still common and likely won't go away until 2020 and Edge is only available on Windows 10, so IE11 is as high as those environments can support.

 

企業環境では、Windows 7と8は依然として普及しており、2020年までは消えず、EdgeはWindows 10でのみ利用できるため、IE11はその環境がサポートできるほど高いです。

ただしサポートするのは11のみとしたいですね。過去のバージョンはもちろんのこと、IE11ですらMicrosoftがサポートやめ始めているのですから。

また、IE11対応すると言うことはES6 → ES5へのトランスパイル or コンパイルが必要ということですが、こちらはIE関係なしに必要かと思います。モバイルブラウザの50%以上がまだAndroidブラウザ4/5とiOS 9であり、ES6との互換性はほとんどありません。よってES5への変換が必要な端末を使用しているユーザが多いので、こちらは引き続きサポートしていく必要はあると思います。

Babel, Browserify, buble, gulp-riotなどたくさんのツールがあるので、これらを使えるようにv4も対応していってほしいところです。

終わりに

自分がおった感じ、色んな意見は出てますが、大筋はドラフトとトピックの内容で収束しそうに思います。それでも十分な機能改修されているので、何気にインパクトはあるのではないかなと思います。また、公式ドキュメントの内容も精査して頂きたいなと思う次第。他のライブラリと比較しても、ちょっと足りない感があります(何がと言うとまた難しいのですが)。

後は、個人的に進めているriotの公式サイト日本語訳のアップデートです。今の訳は当初v3が出たばかりのドキュメントをベースに翻訳したものですので、だいぶ古いです。いくつか参考にならない記述もありますので、こちらは年末進めていきますが、どなたかお手伝いいただけると助かります!

ではでは(`・ω・´)ゞ


  1. 原文:Rewrite riot reducing its core API to the minimum implementing a new register method to create new components

  2. re-hydratesのうまい訳がわかりませんでした。