Angularとは｜確認を1割に減らす方式でも、最も多い1回は全部確認するのと同じだった

出発点は「木を全部たどる」

変化を知らせる記述はありません。代わりに、全部を見て違いを探す作りから始まります。

Angularの変化の見つけ方は、木の走査です。出典はこう述べています。

Angularは、データ構造の最新の状態が画面に反映されていることを確かめるために、部品の木の全体にわたって変化の検出を走らせるという記述です。

「全体にわたって」が出発点です。どこが変わったかを知らないまま、全部を見に行きます。

この作りの利点

1. 知らせる記述が要らない。普通の代入で足りる
2. 取りこぼしがない。全部見るので見落とさない
3. どんな書き方でも動く。値の持ち方を選ばない
4. 回数が読める。値の数の掛け算で上限が出る

2番目が大きいものです。画面が更新されないという不具合が原理的に起きません。

代償は回数です。部品400個・1部品あたり5箇所なら、1回の出来事につき2000回の確認になります。

上限は先に計算できる

この2000回という値は、部品の数と値の数を掛けるだけで出ます。測る前に分かります。

小さい画面なら問題になりません。効いてくるのは一覧が長い画面と、出来事が頻繁に起きる画面です。

確認を1割に減らす方式でも、最も多い1回は全部確認するのと同じだった

平均は9.4%まで落ちます。ただし根の近くで出来事が起きると、まったく減りません。

Angularは条件を満たす枝を飛ばせます。出典は新しい入力を受け取っていない、印のついた部品を根とする子孫の枝を、Angularは飛ばすと述べています。

どれだけ飛ばせるのかを数えました。出来事の起きる場所は木の中で無作為としています。

3つの方式で確認回数を数える

部品 400個の木。1部品が画面に出している値は 5個。出来事 2000回
出来事のたびに、変化した値を見つけるための確認回数を数える

やり方              1回あたりの確認  全体に対する割合  最も多かった1回
全部確認する                        2000回            100.0%           2000回
印の道だけ確認する                    188.7回              9.4%           2000回
読んだ値だけ確認する                     3.0回              0.2%              5回

平均は2000回から188.7回へ落ちます。10.6分の1です。

ところが右端の列は2000回のままです。減っていません。

減らないのはどこか

この方式が見るのは出来事の起きた部品から根までの道と、その部品より下の全部です。

根の近くで出来事が起きると、「その部品より下」がほぼ木全体になります。だから減りません。

実務では、根の近くに絞り込みの条件や画面全体の状態が置かれます。そこが動くたびに全部確認が走ります。

つまり効き目は出来事がどこで起きるかに依存します。平均だけを見ていると、この依存が見えません。

値の側から知らせる作りに替えると、確認は3.0回になる

探しに行くのをやめて、知らせてもらう向きに変えます。木の形に左右されなくなります。

Angularには、値の側から知らせる仕組みもあります。出典は信号とは、値を包むものであり、その値が変わったときに、関心のある受け手へ知らせると定めています。

向きが逆になっています。探しに行くのではなく、知らせてもらう形です。

回数がどう変わるか

前の計測の3行目です。確認は平均3.0回、最も多い1回でも5回でした。

全体の0.2%です。印の道だけ確認する方式の188.7回と比べても63分の1になります。

大きいのは最大値のほうです。木のどこで出来事が起きても5回で、位置に依存しません。

代わりに払うもの

知らせるためには、誰が読んでいるかの記録が要ります。その記録は動かしている最中に作られます。

記録の量そのものはVueの記事で測っていて、値300個・処理120個で644件でした。

もう1つの代償は書き方です。普通の代入では知らせが飛びません。値を包む形に直す必要があります。