マイクロソフトのUXアーキテクチャのプリンシパルおよびツールリーダであるRob Eisenberg氏。先頃、.NET Community Standupで、FASTフレームワークが導入した。FASTを使用すると、開発者はスタイルとプロパティをカスタマイズして、独自のデザインシステムとWebコンポーネントライブラリを作成できる。FASTは、アクセス可能なコントラスト要件を満たし、カラーテーマをサポートし、さまざまな背景色にわたって知覚的に均一なUIを提供する適応性のあるカラーシステムを使用しています。開発者からの入力はほとんどありません。FASTには、既成のFluent UIコンポーネントライブラリが付属している。
マイクロソフトは、FASTフレームワークの主な主張されている利点を要約する一連の質問で、FASTの動機を説明した:
アプリにドロップして素晴らしいエクスペリエンスを提供できる、再利用可能なUIコンポーネントのセットが必要になったことはありませんか？[…]
独自のコンポーネントを作成し、異なる、互換性のないフロントエンドフレームワークを使用するグループを含め、会社全体でそれらを共有したいと思ったことはありませんか？[…]
MicrosoftのFluent UIやGoogleのMaterial Designなどのブランドエクスペリエンスやデザイン言語を実装することが必要になったことはありませんか？[…]
アプリの起動時間、レンダリング速度、またはメモリ消費を改善したいと思ったことはありませんか？[…]
最新のJavaScriptフロントエンド環境の変化に影響されない[…]ネイティブWeb基盤上に[…]アプリを構築したいと思ったことはありませんか？
FASTはJavaScriptパッケージのコレクションとして提供される。fast-elementパッケージには、WebコンポーネントAPIを実装するコアクラスが含まれている。fast-foundationパッケージは、デザインシステム (Fluent Design、Material Designなど) によって登録されたWebコンポーネントで構成されるWebコンポーネントクラス、テンプレート、およびその他のユーティリティのライブラリである。パッケージはカスタムエレメントをエクスポートせず、スタイルなしのセマンティックとアクセス可能なマークアップおよび動作を実装する。これらはさらにスタイル付きのカスタムエレメントに構成できる。したがって、開発者はCSSスタイルを適用し、含まれている動作を再利用することにより、カスタムデザイン言語を実装できる。
fast-componentsパッケージは、FASTデザイン言語に合わせたスタイルシートでfast-foundationベースを構成するWebコンポーネントのライブラリをエクスポートする。fast-componentsパッケージは、カスタムエレメントを登録する。fast-components-msftは、fast-foundationベースで構築された別のWebコンポーネントライブラリだが、今回はMicrosoftのFluentデザイン言語をサポートしている。
fast-colorsパッケージは、さまざまな色空間（CIELABまたはCIELCHなど）とユーティリティ（2色のブレンド、コントラスト比の計算、色空間の変換など）をサポートする関数を公開している。
開発者とデザイナは、独自のデザインシステムを定義できる。これは、FASTのコンテキストでは、コンポーネントの視覚的なデザイン言語を通知するプロパティ（CSS variables）と値のコレクションとして理解される。FASTデザインシステムは、コンポーネントのスタイルシートで使用されるカスタムプロパティをリストするDesignSystemProviderカスタムエレメントによって実装される。
Scott Tolinski氏の講演で説明されているように、CSSカスタムプロパティを利用して、デザインシステムの主要な部分（色、タイプ、間隔など）を構成し、プログラムで更新できる。たとえばFASTDesignSystemProviderは、18のプロパティを通じてさまざまなフォントサイズと高さを構成できるタイプランプ(type ramp)を提供する。
FASTは、WCAG (Webコンテンツアクセシビリティガイドライン) のコントラスト要件を実装する適応性のあるカラーシステムを実装するプロパティも提供する。このプロパティを使用すると、開発者とデザイナは、異なる背景色全体でUIを知覚的に均一にすることで、ダークモードやライトモードだけでなく、その間のあらゆるものを実装できる。以前アドビは同様の結果を達成する適応性のあるアクセス可能なカラーパレットジェネレーターをオープンソース化していた。
色覚障害のアクセシビリティのしきい値を保証するカラーシステムを作成、調整、維持することは、デザイナの悩みの種だ。FASTは、カラーのアルゴリズム、つまり、基本色を入力として使用する一連のレシピを通じて計算される色を多用することにより、その解決に努めている。デフォルトでは、FASTコンポーネントは、neutralPaletteとaccentPaletteレシピを利用して、ベースカラーからカラーパレットを作成する。他のレシピ (フォアグラウンド、アウトライン、ディバイダーのレシピなど) は、構成された背景色のプロパティを使用して、作成する色にアクセスでき、コントラスト要件を満たしていることを確認する。すべてのコンポーネントは、関連する一連のレシピ（アウトライン、ディバイダー、トグルなど）を取得する。これらは、ターゲットデザインシステムの実装に使用できる。
Microsoftはオンラインデモを提供した:
StencilやLit-Elementなどの他のWebコンポーネントライブラリと同様に、基本のFAST要素には独自の規則とDSLがあり、レンダリングと状態管理の関心事を実装する。テンプレートはテンプレートタグで定義され、テンプレートの動的パーツはアロー関数で指定される:
import { FASTElement, customElement, attr, html } from '@microsoft/fast-element';
const template = html<NameTag>`
<div class="header">
<h3>${x => x.greeting.toUpperCase()}</h3>
<h4>my name is</h4>
</div>
<div class="body">TODO: Name Here</div>
<div class="footer"></div>
`;
const styles = css`
:host {
display: inline-block;
contain: content;
color: white;
background: var(--background-color);
border-radius: var(--border-radius);
min-width: 325px;
text-align: center;
box-shadow: 0 0 calc(var(--depth) * 1px) rgba(0,0,0,.5);
}
:host([hidden]) {
display: none;
}
`
@customElement({
name: 'name-tag',
template,
styles
})
export class NameTag extends FASTElement {
@attr greeting: string = 'Hello';
}
テンプレートの構文には、ディレクティブの使用が含まれます。@attrおよび@observableデコレータは、FASTリアクティブシステムの基盤を提供する。Microsoftは、Reactなどの仮想DOMベースのフレームワークで使用されるDOM調整フェーズを避け、実際のDOM (SvelteやSolidが行うように) で細かい更新を実行することにより、優れたパフォーマンスを誇っている。
テンプレートで使用されるアロー関数のバインディングとディレクティブにより、高速エレメントテンプレートエンジンは、仮想DOM、VDOM差分、またはDOM調整アルゴリズムを必要とせずに、実際に変更されるDOMの部分を更新するだけでインテリジェントに反応できます。このアプローチにより、最上位の初期レンダリング時間、業界をリードする増分DOM更新、および超低メモリ割り当てが可能になります。
コンポーネントのスタイル設定は、cssテンプレートリテラルを使用してカスタマイズできる。標準のWeb API (CSSカスタムプロパティ、CSS Calc、CSSシャドウパーツ) を活用することで、さらにカスタマイズ機能を提供できる。
FASTコンポーネントのドキュメントは詳細で、コンポーネントライブラリとWebpackおよびその他のフレームワーク（Angular、Aurelia、React、Blazor、ASP.NETなどを含むが、これらに限定されない）の統合の例を提供する。
開発者は、提供されているコンポーネントエクスプローラを使用して、FASTコンポーネントライブラリをオンラインで確認できる。