Frequently Asked Questions
What's the difference between Fluent and FAST?
Fluent is Microsoft's design language, independent of any particular implementation technology. FAST is an agnostic tech stack that enables implementing web components, design systems, and apps. fast-element is the lowest level of FAST, providing core features for building performant web components. fast-foundation is layered on top of fast-element and provides primarily two things: core features for building design systems, and a core set of components that are design-system-independent. With fast-foundation you can implement any design system. For example, you could implement Fluent Design, Material Design, Lightning Design, Bootstrap, etc. Once the design system is implemented, it can connect with any component built with fast-element or fast-foundation to enable a particular component to present itself using the visual language of the chosen design system. The FAST team ships two design systems: fast-components, which provide our team's own FAST Design system, and @fluentui/web-components, located in the Fluent UI repo, which provides Microsoft's Fluent Design system. If you want to build an app or site with Fluent Design, and you want to use web components as a technology solution, you can use @fluentui/web-components to meet that need today.
Who is behind FAST?
The Microsoft FAST team builds and maintains all the @microsoft/fast-* packages as well as the @fluentui/web-components package. We are a collection of UX Engineers and Designers who are passionate about solving real-world UX challenges using web standard technologies. You can find us on GitHub.
How does fast-element compare to "Framework X"?
At this time, fast-element has a focus that's a bit different from the typical front-end framework. Rather than focusing on being a "mega SPA framework", fast-element endeavors to enable the creation of web components. As a result, you can use fast-element or any component built on fast-element in tandem with your favorite front-end framework.
What are Web Components?
"Web Components" is an umbrella term that refers to a collection of web standards focused on enabling the creation of custom HTML elements. Some of the standards that are under the umbrella include the ability to define new HTML tags, plug into a standard component lifecycle, encapsulate HTML rendering and CSS, parameterize CSS, skin components, and more. Each of these platform features is defined by the W3C and has shipped in every major browsers today.
Why does FAST have components that are already available in HTML?
Various members of our community have wondered why FAST has components that seem to mirror native elements. Examples include fast-anchor, fast-button, and fast-divider. There are several reasons for this:
- CSS Encapsulation - By using Shadow DOM, FAST is able to provide a set of styles for these elements and guarantee that they will not conflict with your site or app. Your site styles will not break FAST and FAST will not break your site.
- CSS Behaviors - Custom elements enable FAST to dynamically add/remove styles based on runtime conditions, such as toggling high contrast mode. They also enable components to hook into the design system and respond to design changes over time.
- Enhanced Anatomies - The FAST team refers to the DOM structure of a component as its "anatomy". This is an important detail of a component spec. Our research as part of OpenUI has revealed common anatomies across many design systems and component libraries that are not reflected by a single standard HTML element. We leverage this research to design the structure of our FAST components so that they are built in a way that meets real-world needs, particularly regarding composition with other components. Some basic components, such as
anchor, benefit from an expanded anatomy, based on industry usage. Through custom elements, we are able to implement this anatomy without inflicting an HTML authoring burden on our community.