以前の Angular v15 では、Angular チームはスタンドアロン API を開発者プレビューから安定版にアップグレードすることで、Angular のシンプルさと開発者エクスペリエンスの大きなマイルストーンに到達しました。今日、Angular はその勢いを維持しており、Angular の最初のリリース以来最大のバージョン アップデートのリリースにより、リアクティブ性、サーバー側レンダリング、およびツールが大きく前進しています。
反応性の再考
v16 リリースの一部として、Angular は新しい Reactivity モデルの開発者プレビューを提供します。これにより、パフォーマンスと開発者エクスペリエンスが大幅に改善されます。
現在のシステムとの完全な下位互換性と相互運用性があり、次のことが可能です。
- 変更検出中の計算数を減らすことで、実行時のパフォーマンスを向上させます。
- より単純なメンタル モデルを Reactivity にもたらし、ビューの依存関係とアプリケーションを介したデータ フローを明確にします。
- きめ細かい反応性を有効にします。将来のリリースでは、影響を受けるコンポーネントの変更のみを確認できるようになります。
- 将来のリリースでは、モデルが変更されたときにシグナルを使用してフレームワークに通知することで、Zone.js をオプションにします。
- 各変更検出サイクルで再計算せずに計算されたプロパティを提供します
- RxJS との相互運用性の向上を実装
サーバー側のレンダリングとハイドレーションの強化
Angular の年次開発者調査によると、サーバー側のレンダリングは、Angular の最大の改善領域です。過去数か月間、Angular は Chrome Aurora チームと協力して、ハイドレーションとサーバー側レンダリングのパフォーマンスと DX を改善してきました。今日、Angular は完全なアプリケーションの非破壊ハイドレーションの開発者プレビューを提供します。
新しい完全なアプリケーションの非破壊的なハイドレーションでは、Angular はアプリケーションを最初から再レンダリングしなくなりました。代わりに、フレームワークは既存の DOM ノードを探し、内部データ構造を構築する際にそれらのノードにイベント リスナーをアタッチします。
これを行う利点は次のとおりです。
- エンド ユーザーにとって、ページのコンテンツがちらつくことはありません。
- 場合によっては Web Core Vitals の改善
- アーキテクチャの将来性を保証し、今年後半にローンチするプリミティブを使用してきめ細かいコードの読み込みを可能にします。
- わずか数行のコードで既存のアプリケーションと簡単に統合
- 手動の DOM 操作を実行するコンポーネントの場合は、テンプレートの
ngSkipHydration属性ハイドレーションを徐々に採用します。
サーバー側の新しいレンダリング機能
v16 リリースの一部として、Angular は Angular Universal も更新しましたng add schematics。これにより、スタンドアロン API を使用してサーバー側のレンダリングをプロジェクトに追加できます。インライン スタイルでは、より厳格なコンテンツ セキュリティ ポリシーのサポートも導入されました。
個々のコンポーネント、ディレクティブ、およびパイプラインの改善されたツール
Angular は、多くのミッション クリティカルなアプリケーションのために何百万人もの開発者が使用するフレームワークであり、重大な変更を真剣に受け止めています。Angular は数年前に独立した API の調査を開始し、1 年以上にわたってフィードバックを収集して API を反復した後、Angular はこれらの API のより広範な開発者の採用を促進したいと考えています。
アプリケーションをスタンドアロン API に移行する開発者をサポートするために、Angular は移行図とスタンドアロン移行ガイドを作成しました。プロジェクト ディレクトリに移動したら、次を実行します。
ng generate @angular/core:standalone
この計画により、コードが変換され、不要なNgModulesクラスが、最終的にプロジェクトのブートストラップ構造が別の API を使用するように変更されます。
スタンドアロン ng 新しい
Angular v16 の一部として、新しいプロジェクトを最初からスタンドアロンで作成できます。スタンドアロン モードで開発者プレビューを試すには、Angular CLI v16 を使用していることを確認して、次を実行します。
ng new --standalone
なしで、より単純なプロジェクト出力が得られますNgModules。さらに、プロジェクト内のすべてのジェネレーターは、独立したディレクティブ、コンポーネント、およびパイプラインを生成します。
詳細については、https: //github.com/angular/angular/releases/tag/16.0.0をご覧ください。