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

微软 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