WebApp/2 作ってます。HTTP/2 + ESModules は安くて速くて美味しいよ!
最近 WebApp/2 というのを作ってます。
WebApp/2 は2012年頃から温めていた「ES6 + ESModules を使い、開発初期〜中期は Bundler や Transpiler を使用せずに開発を進められるようにしたい」というアイデアを具現化したものです(細かい仕様は wiki にあります)。
作り始めて20日ほどですが、昨日までの WebApp/2 には、以下の課題や疑問が存在しました。
- WebApp/2 は一般的なトレンド
[要出典]から大きくJUMPしている。世の中には webpack, babel, browserify を前提に書かれた ES5/ES6 なコードが大量にあるが、それらを ES6+ESModulesに変換するための シンプルで将来取り外しが効くマイグレーションパスが見つかっていない - ファイルを事前結合しない場合の パフォーマンスのトレードオフがどれ位あるのか? そして、それは 許容できる範囲に収まっているのか?
- アセットパイプラインの煩わしさから開放されるというプラスの側面 と パフォーマンスのトレードオフというマイナスの側面 の存在を他の人に説明した時に、どのように受け取られるのか?
最初の課題については、rollup.js で解決できる事が分かりました。
ESModulesが存在しなかった頃の、webpack,babel,browserifyの利用を前提に書かれたES5/ES6のレガシーなコードをES6に変換して事前結合しbundle.jsを作成するrollup.jsの存在を知ったので、古い環境向けにはそちらで対応することにした
— コラーゲンたっぷりさん (@uupaa) 2017年5月30日
rollup.js がなかったら自分で同じようなのを書くとこだった
— コラーゲンたっぷりさん (@uupaa) 2017年5月30日
そして、多くの方々が気になるであろう、
パフォーマンスのトレードオフについても許容出来る範囲に収まっており、アセットパイプラインが不要という説明に対しても予想よりもポジティブな反応がありました。
お隣さんに旧来の方式(bundler)とWebApp/2(HTTP/2)のそれぞれの実際の動作を、DevToolsのNetworkタブを開いて説明した。個別にjsを読み込んでもパフォーマンスデメリットが0〜10%しかないのに、アセットパイプラインが不要というメリットを絶賛された
— コラーゲンたっぷりさん (@uupaa) 2017年5月29日
ESModules に乗っかると、bundeler も transpiler も sourceMap も minify もコンパイラも、開発初期〜中期まで必要ありません(そのまま本番にデプロイも可能です)。
従来の魔窟化したビルド環境を今後も使っていくか、HTTP/2 + ESModules のパワーを信じるかどうかはアナタ次第です。
