人気のシングル・ページ・アプリケーション（SPA）フレームワークであるAngularは、この頃バージョン17をリリースし、宣言型ブロックテンプレート構文を導入して、フレームワークのドキュメントとロゴを一新した。
宣言型ブロックテンプレートとは、Angularテンプレートエンジンによって導入された新しいコマンドセットのことで、次のような形式を共有する。
@command {
<component>
}
最初の実装であるビルトイン制御フローはfor/switch/if文の使用を単純化する。
現在のAngularブロックテンプレートの構文は簡潔で、HTML内にステートメントを隠してしまうため、見逃しやすく、新しい開発者を混乱させることが多い。
<div [ngSwitch]="expression">
<component-one *ngSwitchCase="valu1"/>
<component-two *ngSwitchCase="value2"/>
<default-component *ngSwitchDefault/>
</div>
それに比べ、新しい構文では条件文がコンポーネントから分離され、より簡単になった。
@switch (expression) {
@case ('value1') { <component-one/> }
@case ('value2') { <component-two/> }
@default { <user-dashboard/> }
}
新しいブロック・テンプレート構文は、人間工学に基づいた単純な改良のように見えるかもしれないが、より優れた型チェック、バンドル・サイズの縮小、forループを使用した場合の大幅なパフォーマンス向上も実現している。
組み込みのコントロール・フロー機能は、コンテンツ・プロジェクションにまだギャップがあるため、まだ開発者プレビューの段階だ。プロジェクトでこの機能を有効にするには、CLIで以下のコードを実行する。
ng generate @angular/core:control-flow
宣言的ブロックテンプレート構文を使用して導入された2つ目の機能は、deferableビューだ。
deferableビューは、@deferタグを使用してテンプレートの一部を延期する宣言の方法を提供することで、ViewContainerRefに代わるシンプルな機能を提供する。
@defer {
<deferred-component />
} @placeholder {
<div>Loading...</div>
}
defer コマンドは、遅延されたコンポーネントがいつロードされるかを決定するオプションのトリガーを受け付ける。おそらく最も有用な戦略である'on viewport'は、コンポーネントが表示されたときにレンダリングする。
@defer (on viewport) {
<deferred-component />
} @placeholder {
<div>Loading...</div>
}
一方、'on idle'ストラテジーは、ブラウザがアイドル状態の時にコンポーネントをフェッチする。これがデフォルトの動作だ。
@defer (on viewport; prefetch on idle) {
<comment-list />
} @placeholder {
<div>Loading...</div>
}
ドキュメンテーションの面では、AngularチームはAngularのブランディングとドキュメンテーションサイトの最初の大幅なオーバーホールを行った。
Angularのブランディングは、AngularJS 2012のオリジナルリリースからあまり変わっておらず、リブランディングが必要だった。新しいカラフルなブランディングは、古いロゴにモダンなひねりを加えている。
新しいブランドは、よりシンプルなオンボーディング・プロセスと新しい双方向的なチュートリアルとプレイグラウンドを提供する、全く新しいドキュメント・サイトの一部である。既存の開発者は、再度方向性を確認する必要があるかもしれないが、全体的な体験は旧サイトよりもスムーズになっているようだ。
変更点の全リストは、Angular Githubリポジトリの公式リリースノートを参照されたい。AngularはMITライセンスの下で利用可能なオープンソースソフトウェアである。