微软UX架构和工具主管Rob Eisenberg最近在.NET社区论坛上介绍了FAST框架。开发人员可以用FAST来创建自己的设计系统和Web组件库（通过自定义样式和属性）。 FAST使用了一种自适应颜色系统，满足了可访问性对比度需求，支持颜色主题，并提供了一个跨不同背景色的统一UI——开发人员只需要给定少量输入。FAST预置了一个Fluent UI组件库。

微软用一系列问题解释了推出FAST的动机，这些问题总结了FAST框架的主要好处：

你是否曾经需要一组可重用的UI组件，可以直接将它们加入应用程序，并获得惊人的体验？[…]
你是否曾经创建自己的组件并在公司里分享，包括那些使用不同前端框架的团队？[…]
你是否曾经要实现品牌体验或设计语言，比如微软的Fluent UI或谷歌的Material Design？[…]
你是否曾经想要缩短应用程序的启动时间、提升渲染速度或减少内存消耗？[…]
你是否想过基于原生Web组件构建应用程序，而不受现代JavaScript前端环境的影响？

FAST是一组JavaScript包。fast-element包包含实现 Web Components API的核心类。fast-foundation包是一个包含Web组件类、模板和其他辅助程序的库，设计系统(例如 Fluent Design或 Material Design)打算将它们组合到注册Web组件中。这个包不导出自定义元素，而是实现无样式的语义和可访问的标记和行为，这些标记和行为可以进一步组合成样式化的自定义元素。因此，开发人员可以通过应用CSS样式和重用内置行为来实现自定义设计语言。

fast-components包导出了一个Web组件库，使用符合FAST设计语言的样式表组成了fast-foundation的基础。fast-components包注册了自定义元素。fast-components-msft是另一个基于fast-foundation构建的Web组件库，但这次支持微软的Fluent设计语言。

fast-colors包公开了支持各种颜色空间(例如 CIELAB或 CIELCH)的函数和辅助程序(例如混合两种颜色、计算对比度或在颜色空间之间转换)。

开发人员和设计人员可以定义自己的设计系统，在FAST上下文中可以被理解为属性( CSS变量)和值的集合，这些属性和值表示组件的视觉设计语言。FAST设计系统是通过 DesignSystemProvider自定义元素实现的，它列出了组件样式表要使用的自定义属性。

正如Scott Tolinski在一次演讲中所解释的，CSS自定义属性可以用于配置和以编程的方式更新设计系统的关键部分：颜色、类型、间距等。例如，FASTDesignSystemProvider提供了一个类型渐变，可以通过18个属性配置各种字体大小和高度。

FAST还提供了一些属性，实现了满足 WCAG(Web内容可访问性指南)对比度要求的自适应颜色系统。这些属性让开发人员和设计人员不仅可以实现暗色模式或亮色模式，还可以实现介于两者之间的任意模式，只要确保跨不同背景色的UI在视觉上是一致的。今年早些时候，Adobe开源了一个自适应可访问调色板生成器，实现了类似的效果。

创建、调整和维护颜色系统以确保跨色觉缺陷的可访问性阈值是设计师的一个痛点。FAST努力通过大量使用算法颜色来解决这个问题，这些颜色是通过使用基本色作为输入而计算得出的一系列结果。默认情况下，FAST组件利用 neutralPalette和 accentPalette基于基本色创建调色板。其他的(例如前景、轮廓和分隔符)则使用配置的背景色属性，以确保他们创建的颜色是可访问的，并满足对比度要求。每个组件都获得一组可用于实现目标设计系统的关联方法(轮廓、分隔符、切换符等)。

微软体统了一个在线演示：

与其他Web组件库(如Stencil或Lit-Element)一样，基本的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装饰器提供了响应式系统的基础。微软以其优越的性能为傲，它避开了基于虚拟DOM的框架所使用的DOM和解阶段（比如React），而是对真实的DOM执行细粒度的更新(比如像 Svelte或 Solid所做的那样)：

模板中使用的箭头函数绑定和指令可以让fast-element模板引擎通过只更新实际变化的DOM部分来智能地做出反应，而不需要虚拟DOM、VDOM扩散或DOM调节算法。这种方法支持顶层的初始渲染时间、业界领先的增量DOM更新和超低内存占用。

我们可以使用css模板字面量来自定义组件样式。进一步的自定义功能可以通过标准的Web API来实现： CSS自定义属性、 CSS Calc或 CSS Shadow Parts。

FAST组件文档非常详尽，提供了组件库与Webpack和其他框架集成的例子，包括但不限于Angular、Aurelia、React、Blazor或ASP.NET。

开发人员可以通过在线组件浏览器查看 FAST组件库。

原文链接 ：

Accessible Adaptive Design Systems with Microsoft’s New FAST Framework

创作场景

微软推出 FAST 框架，支持创建自适应设计系统