Get moving with Microsoft’s FAST web components

It’s often hard to choose what web technology framework to use for application front ends. Do you build your own or start with technologies like Vue and React? Maybe you come in at a higher level with a web component framework like Twitter’s Bootstrap, Google’s Polymer or Salesforce’s Lightning. Their templating model is powerful, allowing you to use and customize existing components and create your own, working with custom elements and isolating functionality using the JavaScript shadow DOM.

Uptake of web components has been relatively slow compared to other HTML 5 technologies. That might be because browser support has lagged, or because familiar JavaScript libraries offer their own UI controls. Whatever the reason, the result is often complex page design that picks and chooses from many different control libraries, requiring hefty downloads and slowing sites down.

Introducing FAST

Microsoft has quietly been working on its own web component tools for a while now, launching its FAST component framework last summer. FAST is intended to provide a standards-based approach to delivering a templated, component-based, web-front-end toolkit, building on the principle of “strive to adopt open, web-standards-based approaches as much as possible.”

Back in the Internet Explorer days, Microsoft would have been most likely to build and deliver its own component model, hoping the rest of the web would follow. But when it came to technologies like dynamic HTML, Microsoft found itself stuck with supporting incompatible front-end development approaches and ended up sunsetting its own tools in favor of web standards. It’s not surprising that FAST is a standards-first approach, and its web components are built using the W3C’s Web Components standard. A page built using FAST should render the same way in Edge, Chrome, Firefox, and Safari.

The development team describes this approach as “unopinionated.” You can pick up Microsoft’s own Fluent UI components or work with the base components provided by FAST, customizing them to meet your needs and using templates to add your own styles. At the same time, you’re not limited by a choice of web development framework. There’s no need to learn anything new; if you use Vue you can continue using it with FAST, same with ASP.NET or React. You’re even able to swap out FAST packages for packages from other web component implementations, for example, using a Polymer control as part of a FAST-templated site design.

The FAST stack

FAST is built up from a set of JavaScript packages. They’re all managed in a GitHub monorepo, with links to the separate repositories for each section of the FAST stack. The four main packages are:

• fast-element, which provides the basic tools for building and using customizable web components
• fast-foundation, a set of the basic web component classes and templates which are used to construct FAST custom elements
• fast-components, which provides a library of prebuilt web components and custom elements ready for use
• a set of Fluent UI web components that implement Microsoft’s own design language in FAST.

It’s perhaps best to think of this as a stack, where web components like Fluent UI sit on top of the foundation layer. Different component libraries will implement different versions of the same basic controls, as they build on the foundation and implement their own controls and templates. Most of the code you need to implement a control (such as state management, for example) is already provided by the foundation layer, so all you need to do is add your own styles, saving a considerable amount of time and effort. At a lower level, the fast-element library allows you to create completely new web components from scratch, with enough scaffolding to manage platform-level features while still having the headroom necessary for your code and design. Usefully, fast-element is built so it removes unwanted functionality, so you don’t ship features that aren’t used. This keeps code to a minimum and reduces the size of possible attack surfaces.

Using FAST in your webpages

If you’re thinking of investigating FAST, it’s worth starting by implementing web components on your site. You can install either the standard fast-components or the Fluent UI components into your development system using either npm or yarn. Once installed you first register a component’s JavaScript class in your application bundle. Once the class is imported, you’re able to use the associated component in your code.

In your code, start by adding a design system provider as part of your page’s body. This will wrap all your web components, and you can start to add the custom element tags you plan to use. There’s no visible code for a web component; it’s all in your page’s JavaScript bundle, and FAST handles minifying it for you to keep your page size as small as possible.

Microsoft provides a Component Explorer tool to help you implement components in your content. It implements a built-in code editor you can use to build and test your own component implementation for your site. The Component Explorer includes basic guidance, and it shows the definition and schema of the component. If you’re using Visual Studio Code, recommended extensions help simplify working with FAST.

What’s perhaps most important about using a technology like FAST is that it separates design from code, keeping page content to declarative element statements. Designers can work with FAST components like any HTML element, while any front-end code treats your FAST components in a similar manner. For example, a fast-button is easy to style and implement, and is treated like any other HTML button in JavaScript or forms. Microsoft also provides tools to help you quickly switch content from light to dark modes, ensuring that pages work equally well in bright or low-light conditions.

Integrations with your web development stack

We’ve grown accustomed to picking and choosing web development stacks, standardizing on the one that works best for us. FAST’s unopinionated approach means it’s stack agnostic and able to work with your choice of web framework. Microsoft provides documentation for several popular environments, and if your choice isn’t on the list, you can work with the FAST development team through GitHub to add appropriate integrations.

One useful integration adds support for Blazor, both in client-side WebAssembly applications and in server-side Razor pages. Component support can be loaded at runtime from Microsoft’s CDN, or if you prefer to include the libraries with your code, you can use npm. Once FAST is ready for use, add a <fast-system-design-provider> component to your application’s index.html and then add the components you want to use to your pages and views.

Using the Fluent UI web components with Blazor will give your web applications a similar look and feel to any desktop Windows applications. It’s worth considering this as a way of quickly adding UI components declaratively to Progressive Web Apps as a way of distributing Windows-like applications through the web and through modern browsers like Edge.

There’s a lot to like in FAST. It’s quick and easy to use, working with familiar web frameworks while providing a well-designed and user-friendly set of user interface components. There’s no need to learn anything new, as FAST’s web components behave like any other HTML element (and often provide drop-in replacements for them). You’re not limited to Microsoft’s own designs, either, as there’s the option of going back to basics and using the lower levels of the FAST stack to add your own styles and even create your own components.