4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。

イベントディスパッチの導入

Angularは、 JSAction というライブラリを使用して、 発生したイベントをアプリケーションのルートで捕捉し、完全なハイドレーションが完了したあとに再生する 機能を導入した。この機能により、ページがインタラクティブに見えるが反応しないという問題を解決している。

例えば、クリック時に onSave() を呼び出す、以下のようなボタンがあったとする。

<!-- 例: DOM階層に含まれるボタン -->
<button (click)="onSave()">Save</button>

通常、onSave()メソッドはアプリケーションのハイドレーションが完了した後にのみ呼び出される。しかし、イベントディスパッチが有効になると、JSActionはアプリケーションのルートでイベントを捕捉し、ハイドレーション完了後にそれを 再生 する。

「反応しない」から「反応が遅れている」への改善

イベントディスパッチ機能は、ハイドレーションが完了するまでアプリが「反応しない」のではなく、「反応はするが、処理を遅延させる」というユーザー体験を実現する。
これにより、ユーザーのフラストレーションが軽減され、 怒りのクリック連打 を防ぐことにもつながる。

今後の展望: よりきめ細やかなハイドレーションを可能に

この技術的進化は、先日発表されたAngularとWizのコラボレーションに端を発するものだ。JSActionは、Wizが使用しているライブラリで、Google検索を含む数百のアプリケーションで10年以上利用されている。

WizはGoogleのプロジェクトで、リアルタイム性が求められるアプリケーションのパフォーマンス向上とレジリエンス（回復力）向上を目指している。 Wizの提供するリジリエンス機能は、ハイドレーションが遅れた場合でもユーザー体験が維持される ことを保証する。

しかし、ハイドレーションが完了するまでの待ち時間自体を短縮するには、ハイドレーションのクリティカルパスにある JavaScript の量を減らす必要がある。そのために、 遅延可能ビュー（Deferrable Views）をサーバーサイドでレンダリングしてハイドレーションできる ようにする計画もあるという。

詳細はEvent Dispatch in Angularを参照していただきたい。