Get Started Using Web Components: A Microsoft FAST Tutorial

The ability to compose software into smaller parts has always been the main concern of software design. This allows developers to reuse and even share software components, and is the main driving force of the majority of open source software projects.

Web components are the standardized approach to compose web pages into smaller components using HTML and JavaScript. Although the adoption of this standard hasn't been very fast along web developers at first, but it has recently grown in popularity and many tools and frameworks have adopted this technology to make developers more productive using it in their web projects.

Microsoft's FAST framework is one of the technologies that offers production-ready web components and even tools to help you build your own design system if you need to. The main advantages offered by FAST is the built-in support for dark mode and the integration capabilities with existing web frameworks such as Angular and Vue.js.

In this example, we will integrate FAST with an Angular web app. You can follow this tutorial to generate a simple Angular app (npm required).

Add the required npm dependencies to your project (using explicitly @microsoft/fast-components with the major version 1) :

npm install @microsoft/fast-components@1 @microsoft/fast-element

Add to the src/main.ts file the following code:

import {
  FASTButton, FASTCard, FASTDesignSystemProvider
} from '@microsoft/fast-components';

/*
 * Ensure the components are not removed from the bundle.
 */
FASTDesignSystemProvider;
FASTCard;
FASTButton;

Replace the app/app.component.html file's content with the following to use the FAST web components:

<fast-design-system-provider use-defaults>
  <fast-card style="padding:20px;">
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Etiam dapibus tortor vel nulla eleifend, id varius elit sollicitudin. Integer a orci viverra, feugiat eros at, efficitur ligula. Pellentesque placerat id leo suscipit semper. Aliquam sed vulputate quam. Vestibulum dolor odio, hendrerit vulputate varius non, suscipit a erat. Vivamus eu lorem vitae ipsum condimentum faucibus. Sed nec purus quam. Fusce sit amet ornare nunc. Duis placerat ipsum vel tempor consectetur. Curabitur tortor turpis, feugiat ac vehicula at, tincidunt et lorem. Praesent ut mollis diam.</p>
    <fast-button appearance="accent" onclick="alert('World!')">Hello</fast-button>
  </fast-card>
</fast-design-system-provider>

You will probably get a warning saying "xxx is not a known element", this is normal because Angular doesn't allow non-Angular elements by default. Open the app/app.module.ts file and replace the content with the following:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Finally run ng serve to build and serve your web app. The end result:

The code can be found on this GitHub repository.

The official documentation can be found here.

All the available components are listed on the Components section.

You can also try out all the components with a code editor using the explore page.

More details about FAST components are presented in the API Reference.