Rob Eisenberg, principal UX architecture and tools lead at Microsoft. recently introduced the FAST Framework during the .NET Community Standup. FAST allows developers to create their own design system and web component libraries by customizing styles and properties. FAST uses an adaptive color system that meets accessibility contrast requirements, supports color theming, and provides a perceptually uniform UI across different background colors – with little input from developers. FAST comes with a premade Fluent UI component library.
Microsoft explained the motivation behind FAST with a series of questions that summarize the key alleged benefits of the FAST framework:
Have you ever needed a reusable set of UI components that you could drop into your app and have an amazing experience? […]
Have you ever needed to create your own components, and share them across your company, including across groups that use different, incompatible front-end frameworks? […]
Have you ever needed to implement a branded experience or a design language like Microsoft’s Fluent UI or Google’s Material Design? […]
Have you ever wanted to improve your app’s startup time, render speed, or memory consumption? […]
Have you ever wanted to […] build your […] app on a native web foundation that’s immune to the shifting sands of the modern JavaScript front-end landscape?
FAST comes as a collection of JavaScript packages. The fast-element package contains the core class implementing the web components API. The fast-foundation package is a library of web component classes, templates, and other utilities intended to be composed into registered web components by design systems (e.g. Fluent Design, or Material Design). The package does not export custom elements but rather implements un-styled semantic and accessible markup and behaviors that can be further composed into styled custom elements. Developers can thus implement their custom design language by applying CSS styles and reusing the included behaviors.
The fast-components package exports a library of web components that composes the fast-foundation base with style sheets aligning to the FAST design language. The fast-components package registers custom elements. The fast-components-msft is another web component library built with the fast-foundation base but this time supporting Microsoft’s Fluent design language.
The fast-colors package exposes functions that support various color spaces (e.g. CIELAB, or CIELCH ) and utilities (e.g. blending two colors, computing contrast ratios, or converting between color spaces).
Developers and designers may define their own design system, understood in a FAST context as a collection of properties (CSS variables) and values that inform the visual design language of the components. A FAST design system is implemented by a DesignSystemProvider custom element that lists the custom properties to be consumed by component stylesheets.
As explained in a talk by Scott Tolinski, CSS custom properties can be leveraged to configure and programmatically update the key parts of a design system: color, type, spacing, and more. The FASTDesignSystemProvider for instance provides a type ramp where miscellaneous font sizes and heights can be configured through 18 properties.
FAST also provides properties that implement an adaptive color system that implements the WCAG (Web Content Accessibility Guidelines) contrast requirements. The properties enable developers and designers to implement not only a dark mode or light mode, but anything in between, by ensuring a perceptually uniform UI across different background colors. Previously this year, Adobe open-sourced an adaptive, accessible color palettes generator that accomplishes similar results.
Creating, tweaking, and maintaining a color system that guarantees an accessibility threshold across color vision deficiencies is a designer pain point. FAST strives to solve it by making heavy use of algorithmic colors, i.e. colors that are computed through a series of recipes using base colors as inputs. By default, FAST components leverage the neutralPalette and the accentPalette recipes to create color palettes from a base color. Other recipes (e.g. foreground, outline, and divider recipes) use the configured background color property to ensure that the color they create is accessible and meets contrast requirements. Every component gets its associated set of recipes (outlines, dividers, toggles, and more) that can be used to implement a target design system.
Microsoft provided an online demonstration:
As with other web components libraries like Stencil, or Lit-Element, the base FAST element has its own conventions and DSL to implement rendering and state management concerns. Templates are defined with template tags, with the template dynamic parts specified with arrow functions:
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';
}
The template syntax includes the use of directives. @attr and @observable decorators provide the base for FAST reactivity system. Microsoft boasts superior performance by eschewing the DOM reconciliation phase used in virtual-DOM-based framework like React, instead performing fine-grained updates on the real DOM (like Svelte or Solid do):
The arrow function bindings and directives used in templates allow the
fast-elementtemplating engine to intelligently react by only updating the parts of the DOM that actually change, with no need for a virtual DOM, VDOM diffing, or DOM reconciliation algorithms. This approach enables top-tier initial render time, industry-leading incremental DOM updates, and ultra-low memory allocation.
Component styling can be customized with the css template literal. Further customization abilities may be provided by leveraging standard web APIs: CSS Custom Properties, CSS Calc, or CSS Shadow Parts.
FAST components’ documentation is thorough and provides examples of integrations of the component library with Webpack and miscellaneous frameworks, including, but not limited to, Angular, Aurelia, React, Blazor, or ASP.NET.
Developers can review the FAST component library online with the provided component explorer.