Microsoft’s strategy has been incredibly effective over the years: Be late to the party but choose the right party. Once there, invest a lot and become a leader (or, in this analogy, simply take over as the host!). It worked with DirectX (winning with OpenGL and even consoles) and with Internet Explorer. More current examples include Github and Visual Studio Code, which actually took over the open-source developers’s IDE segment. Will the Microsoft FAST framework be in the same category?
What is the Microsoft FAST framework?
The Microsoft FAST framework is an open-source, extendable, and customizable UI framework for building the enterprise applications. Or, more accurately, it’s a set of tools, documentation, and examples gathered into a single Github’s mono repo, which are deployed as a number of npm packages, thus making it easy to use and deploy.
Quoting the Github readme – you can use FAST to:
- Create reusable UI components based on web component standards
- Use a standard library of pre-built web components in apps
- Choose between two adaptive design systems: Fluent Design and FAST Frame
- Build your own design system without re-implementing component logic
- Integrate with any front-end framework or build system
Because the FAST has abstracted base components from their style, you get a headstart on your design system by building on top of tried and true base components and style libraries like our offerings for color, animation, and elevation.
By default, it supports two design systems (including Fluent UI and FAST Frame), but there shouldn’t be any problem using Google Material Design or Salesforce Lightning.
What makes the Microsoft FAST framework unique?
FAST is based on a Web Components W3C standard. That means the UI implemented with FAST can be integrated with plain JavaScript or with any popular framework on the market (most of them support custom elements and Web Components by default).
“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 browser today.
www.fast.design
In other words, by using Web Components you can define your own custom HTML elements that elegantly integrate into a DOM (Document Object Model).
Actually, the Microsoft FAST framework consists of two key libraries – @microsoft/fast-element that’s a library for helping you create custom web components and @microsoft/fast-component which is a ready-to use set of components.
The components can be customized in many different ways, by using the component slots, templates, or CSS styles. It is a quite similar approach to the one we took with the Storefront UI framework. Moreover, the library provides developers with tools for state management and observable properties. The features are already known from fully fledged frameworks like React or Vue.
Ready-made components
Microsoft’s strategy for web development is seemingly based on Web Standards and the Web Components are a vital part of the specification. With FAST, you can leverage other libraries that are based on this standard including Microsoft Fluent UI. You can check the Components Explorer to get the idea and play with the standard components provided.
How can FAST be integrated with other frameworks?
It’s rare that you build an application in plain JavaScript. I think this is one of the best features of the FAST: by leveraging the Web Components standard, it can be used with any framework the developer chooses. This is what we aimed at with Storefront UI support for Vue, React (and, potentially, other frameworks in the future). Our approach was a little different but the intention was the same.
Angular 8.2.14
Angular works great with Microsoft FAST framework due to its binding system’s support for setting both attributes and properties on custom elements.
ASP.NET
FAST works naturally with ASP.NET server-side development. Start building immediately by adding a script tag and using the custom HTML elements.
React
While the React team works to fully support custom elements in v17, they provided integration support for v16.x.x.
Vue
Vue fully supports custom elements and, by default, passes all data to them as attributes. The framework also provides a special syntax to bind properties. Check how easily you can integrate with Vue.
Microsoft FAST framework: Alternatives and downsides
The Web Components approach to the UI development was first popularized by another UI framework – Polymer from Google. When we’re about to start the Vue Storefront implementation, it was something we were seriously considering as the project’s foundation, particularly as they had a truly awesome e-shop demo based on Polymer.
In the end, we decided we’d like to do something Vue-optimized. We discussed the performance, looking at how you can’t use Vue.js Virtual DOM with the WebComponents. However, the decided factor for us was that we wanted to become a part of the Vue.js ecosystem and community, something we couldn’t have achieved without being native.
General purpose or domain-specific framework?
Two years ago we felt that there was a real need for a domain-specific, optimized framework. This was the idea that sparked the Storefront UI framework.
Storefront UI is an independent, Vue.js-based library of UI components such as buttons, galleries, search bars, etc., which enables businesses to build storefronts fast, efficiently, and without looking over their shoulder at the backend. Moreover, it is 100% customizable; every single UI component, complex module, or even the whole design system, can be flexibly adjusted to the personal preferences of a specific brand.
It was created as a complementary product to Vue Storefront but the general idea was always in line with the open-source spirit of broad accessibility. Therefore, Storefront UI can be used not only in Vue Storefront but in any Vue (and potentially React) project.
The Microsoft FAST framework is a general-purpose framework which focuses on customization and developer experiences. That also makes it a great foundation for building your own custom frameworks.
Find out more about frontend frameworks
We recently released an eBook on designing custom, enterprise-grade frameworks, which you can download for free now. FAST is a great candidate for the UI layer of the framework we’re building across this eBook.
Check out the full publication here and start building a better framework.
Published September 30, 2020
