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-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
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
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.
Copyright © 2021 IDG Communications, Inc.