JSConf JP

なぜ、ArkorのWebアプリは一瞬で動くのか?先読みとキャッシュの舞台裏

Sponsor sessionTrack DJapanese

たろー

動的なデータを含む画面でも、表示・遷移した瞬間から操作できるようにしたい。Arkorでは、この体験を目指してReact フレームワーク「reactive-state」を作りました。

肝となるポイントは、動的なデータを含む描画結果までキャッシュし、先読みできるようにすることです。描画時に参照したDB のデータを追跡し、変更を検知したら関連するキャッシュを無効化(purge)します。データが変わるまでは描画結果を再利用し、変わったときに取り直すことで、速さと更新への追従を両立します。

本セッションでは、動的データまで先読みするためのキャッシュ境界と、先読み結果・データ更新の順序を扱う仕組みを、実際の本番アプリのデモとコードで解説します。