chapter eight

8 FAST toolkit

 

This chapter covers

  • How FAST simplifies creation of web components
  • FAST bindings, decorators, directives, and helper functions
  • Event handling
  • Sharing state between FAST web components

FAST is Microsoft’s web component toolkit for building reusable, accessible, design-system-ready UI components on top of native browser standards. Instead of asking you to buy into a full application framework, FAST gives you the pieces to define custom elements, manage templates and reactive state, style components with design tokens, and compose them into a coherent design system that can work across plain JavaScript, React, Angular, or whatever else your app happens to use.

@microsoft/fast-element is the core library for defining custom web components, much like Lit, Stencil, and wrec. It stays close to standard web component APIs, so it is easy to learn. At the time of writing, this library is the third most popular way to create web components, behind Lit and Stencil.

Note

The name FAST used to stand for "Functional, Adaptive, Secure, Timeless", but it’s no longer considered an acronym.

FAST may be a superior choice over Lit or Stencil for web applications that need to support not just standard light/dark modes, but highly granular, user-customizable color themes (e.g., enterprise dashboards or multi-tenant white-labeling).

With that high-level view in place, let’s look more closely at the fast-element pieces you will use to build FAST components.

8.1 Deeper into fast-element

8.2 Project creation

8.3 Bindings

8.4 Decorators

8.5 Directives

8.6 Helper functions

8.7 twoWay directive

8.8 Event handling

8.9 Radio group

8.10 Reactive CSS

8.11 State

8.12 Sortable table

8.13 Summary