角度除去Zone.js新しいゾーンレスソリューションの探求

クズども · 2024年12月30日 11:02:42に投稿

最近、Angularは独立した「体験型」開発機能「Zone.js」をリリースしました。この機能はまだ実験段階ですが、Angularチームはこの重要な革新に長く取り組んできました。レスポンシブプリミティブは開発者にとってますます重要になっており、Angularが新たな時代に突入していることを示しています。角度依存関係SignalsとRxjsの利点はさらに顕著で、依存する変化を常に聞く必要がなくZone.js開発中の仲介役としての役割を果たすことになりました。

Angularは今後も大胆で強力なフレームワークであり続け、新たな変革を始めるでしょう。

まず第一に、私の記事は誰かに何かを教えるためのものではありません。読者の皆さんがそんなに受け身でいられると感じていなければいいのですが。できるだけ自分の経験や学びを共有し、議論にオープンに接するようにしています。共に議論し、アイデアを交換し、批判的思考に基づいて評価することが大切です。特にこの記事で議論している技術がまだ体験段階にあるため、変更検出メカニズムでさえAngularのコアチーム内で混乱を引き起こす可能性があることを忘れてはなりません。

Zone.jsとは何で、何をするのでしょうか?

Zone.jsは、2010年にブライアン・フォードによって「Zones」という名前で開発された小さなライブラリで、JavaScriptでの非同期作業を管理するためのものです。 ErlangやDartのような言語に触発され、JavaScriptのシングルスレッド環境に構造化された並行性をもたらすことを目指しています。 AngularチームはAngular 2でZonesを変化検出メカニズムとして採用したことで勢いを増し、Zone.jsの形で貢献を始め、より広範なコミュニティ参加とさらなる開発を可能にしました。今日では依然としてAngularと密接に結びついていますが、Zone.js非同期タスクの監視や介入に強力なツールとみなされ、パフォーマンス分析、エラー処理機能、そして多くの疑わしい機能を可能にします。

では、なぜAngularはZone.jsを見捨てたのでしょうか?

AIが私たちの想像上の画像を簡単に絵に変える能力を活用し、「ベッドの下のスポンジ」という比喩を用いて、わかりやすいビジュアルを作りました。

上の画像のベッドを想像してください。床ではなく大きなスポンジの上に置かれています。 Zone.js Angularアプリケーションではスポンジのようなものです。このスポンジは、ベッドが快適で支えのあるベースの上に置かれ、寝る人にも相対的な快適さを提供します。スポンジはベッドの動きをすべて吸収し、ベッド内の動きが外部に反射するのを防ぎます。

Zone.jsのMonkeyパッチは、イベント、コミットメント、observables、setTimeout、setIntervalなど、ブラウザ内のすべての非同期APIを受信します。

これらを受信することで、Angularアプリケーションは変更を検知し、ユーザーインターフェースを更新できます。実際、スポンジサポートベッドのように、Angularアプリケーションがスムーズに動作することを可能にしますZone.js。この場合、非常に大規模なプロジェクトでは感じないパフォーマンスの問題が発生することがあります。

一方で、この複雑な構造が、時間をかけて特定の変化を認識することを妨げているように見えます。これまでの各特徴や発展、そしてそれ自身の内部的な発展や変化するニーズが、次の発展や発展の障害となるのです。

スポンジを足元から引き抜くと、ベッドが地面に直接触れているため、自然な自由な動きが現れ始めます。スポンジの快適さを制限する効果が摩耗し始めると、ベッドの上の動きが直接地面に反射されることを意味します。

このような比喩は、スポンジが快適な場所を提供し、比較的快適な睡眠を提供することを意味します。 Zone.jsこのスポンジのように、表面の変化をすべて感じ取れる真剣な快適ゾーンを提供してくれます。しかし、時間が経つにつれて、この複雑な構造が特定の変化を認識することを妨げることもあります。腰痛はスポンジを下から引き抜いたときに起こり、これらの痛みや不快感は人工の地面から自然な地面へと降りたことを示しています。この移行の過程は少し痛みを伴うかもしれませんが、最終的には背筋を伸ばし、快適な睡眠と血行の改善、そして健康的な身体的・精神的鋭敏さをもたらします。ゾーンフリー、つまりスポンジなしで寝ることによる背中や関節の痛みに切り替えるのは、人工の地面から自然の地面に切り替える良い兆候です。この移行の過程は少し痛みがありますが、腰が元の自然な状態に再形成され、血行が改善されると移行の痛みも消えます。ここでの遷移例は、Angular v18で聞いた実験的なZonelessに対応しています。

Zone.jsはasektronの操作を追跡し、呼び出し、イベント、エラーなどのAngular検出機構に渡すため、追加の負荷が増すと考えられています。今日、Angularのパフォーマンスに関しては、ここでの追加負荷を感じたり感じたりすることはほとんどありません。 Zone.jsさらに発展させたり、デバッグの問題を解決したりは可能ですが、ここでの基盤はAngularのロードマップです。 Angular自身が開発したSignal反応プリミティブZone.js、今やAngularの将来の計画の妨げになっていることがわかります。 Signals構造は検出機構の面で非常に有用であり、性能面でも優れており、使いやすく強力ですが、Zone.jsもはや必要ありません。ただし、一晩で放棄できるライブラリではありません。

Angularは夢を制限したくなく、中間プロセスをできるだけ排除することで、より柔軟で信頼性の高いアプリケーションと自立したフレームワークを構築したいと考えています。 Angularはより実用的な状態へと移行し、将来的に再び上昇トレンドに入る機会を掴もうとしていると見ています。残念ながら、現在のStateofJSの調査からはそのような傾向とは言えませんが、Angularはあらゆるイノベーションに開かれていることもわかります。

Angular 18でゾーンレスモードに切り替えるにはどうすればいいですか?

Angular 18にはゾーンフリーモードに切り替えてスポンジを取り除くステップが付いています。以下に示すように、ブートストラップフェーズのノーゾーン変更検出メカニズムを用いてこの体験を提供できるようになりました。

ログインが見えます。

上記の関数をプロバイダーに追加したことで、npm uninstall zone.jsコマンドを使って、下のポリフィル配列で定義されたzone.jsをangular.jsonから削除できます。

ログインが見えます。

これでAngular Zonelessが使えます!

ゾーンレスの利点は何ですか?

Zonelessは、不要な盗聴操作を排除することで、アプリケーションにより効率的なエコシステムを提供します。これにより、レンダリングの速度、高いパフォーマンス、ページの読み込み速度、パッケージサイズの縮小、デバッグの容易さが実現します。

クラシックなテストで、ボタンをクリックしてカウンターを追加し、ボタンを押すときにその数値を増やしたいとします。この場合、各関数がトリガーされるたびに変化した値がレンダリングされ、HTML上でその値が変化することがわかります。すでに関数であり、直接トリガーしているので、ここでレンダリングされます。しかし、もし外部の影響でこの価値が変化し、手動でトリガーせずに価値が変わるのを見たいとしたらどうなるのでしょうか? Zone.jsがあれば、常にすべての変更を受信し、代わりにAngularに通知します。しかし現時点でそのような仕組みがないため、非同期操作後に変化検出機構をトリガーするか、SignalsやRxJSを直接使用してこの反応性による変化を直接検出する必要があります。

スポンジの失踪は、消えるのはZone.jsだけでなく、「快適ゾーン」でもあることを教えてくれます。

Zone.jsを生のJavaScriptでモジュールとして使うと、このような形になります。

ログインが見えます。

Angularでは、こうした状況に対処する必要はありません。 ngZoneでは、これらの操作はすでに検知機構と連動して動作しています。

例えば、ダイレクトDOM、イベントリスナー、観測可能やコミットメント、HTTPリクエスト、同期制御フローの場合、非同期操作のために変更検出メカニズムを手動でトリガーする必要があります。

ログインが見えます。

SignalsやR xjsは自動的に変更を検出するため、変更検出メカニズムをトリガーする必要はありません。

信号例:

ログインが見えます。

では、ZonelessとAngularの変更検出メカニズムをテストするアプリケーションを作成し、どのように機能するか見てみましょう。

上記の標準区間を開始すると動作は始まりますが、DOMは更新されず、変更も反映されません。信号開始間隔を使うと、Angularの変化検出機構をトリガーせずに動作することがわかります。ご覧の通り、クリックイベントと信号間隔が始まると、Angularは変化に気づき、標準間隔の変化を即座にキャプチャし、その後リリースします。

変数の値を親コンポーネントに送ると、プッシュとデフォルトの両方で異なる認識が見られます。

左側の入力を割り当てると、面積がない場合に変化が反映され、同様に、約束によってクリック後に変化が反映されるのが見えます。

ここでは、HTTPコールで変更を検出せずに変更が反映されず、手動でトリガーした場合にのみ変更が反映されることがわかります。もちろん、Signalsは新規プレイヤーを望む画面に簡単に反映させます。コードの一部は以下の通りです:

app.component.ts

ログインが見えます。

change-detection-demo.component.ts

ログインが見えます。

アプリはStacklibitzで公開されており、他のテストもチェックできます。 UIのコードを通じて結果を追跡することもできます。

スタックブリッツ:ハイパーリンクのログインが見えます。

GitHub:ハイパーリンクのログインが見えます。

また、Angularの変更検出メカニズムがどのように動作するかを示すサンプルアプリケーションも以下に掲載しており、そこから試すことができます。

ハイパーリンクのログインが見えます。

リージョンフリーモードに切り替える際に考慮すべき点

名前が示す通り、ExperimentalZonelessChangeDetectionはまだ実験的なものであることに注意が必要です。

テストを行っているうちに、変化検出の仕組みにいくつかの奇妙な点があることに気づきました。例えば、手動でトリガーされていない変更があると、DOMに変化がなく、状態も更新されません。しかし、変化検出機構の外で他のシグナルや反応変数が動作しDOMが更新される場合、以前に更新されていなかった状態も同時に更新されることが観察できます。

この機能を既存のプロジェクトに実装したい場合は、すべてのアクションとアプリケーションの動作を慎重にテストする必要があります。特に、サードパーティのライブラリはZone.jsに依存しているため、エラーやレンダリングの問題が発生することがあります。

翻訳元：ハイパーリンクのログインが見えます。

クズども · 2024年12月30日 11:04:13に投稿

Angular 18では領域変化検出なし
ハイパーリンクのログインが見えます。

AngularとTSCONFIG Target ES2017のasync/awaitは動作しませんzone.js
ハイパーリンクのログインが見えます。

クズども · 2025年5月29日 14:20:06 投稿

ハイパーリンクのログインが見えます。
ハイパーリンクのログインが見えます。
ハイパーリンクのログインが見えます。

[角] 角度除去Zone.js新しいゾーンレスソリューションの探求

関連記事

閲覧したセクション