The future of FAST Components

[chrisdholt]

Hello FAST community! On behalf of the @microsoft/fast-steering-committee and the core collaborators, I want to share with you some exciting changes we will be making regarding the fast-components and provide a peek at where we are headed with the future of fast-foundation.

Evolving fast-components

fast-components have always meant to act as an example or starter kit for teams looking to build Web Component design systems. The package combines classes and templates from fast-foundation, our innovative design token architecture, and a new dynamic approach to styling with Adaptive UI. As FAST has grown as a project, we've gained insights into how people are using and extending the components. We have also received feedback on changes people would like to see or gaps in the implementation, such as responsive behaviors or prescriptive templates for cards and dialogs.

In terms of gaps in the implementation, some of these are by design. For example, as a starter kit, we don't know all of the implementations or layouts you may want to support for a dialog or card. We don't know your specific requirements for responsiveness across the page or components. Leaving those to be handled by folks leveraging fast-components made more sense than creating prescriptive approaches for the system. While our intention was always to have this serve as a customizable and extensible design system starter kit, we realize that our communication of that intent and the delivery mechanism left room for confusion and frustration.

Given the above, we're immediately changing how we deliver the fast-components starter kit. We'll be shifting our primary delivery method from NPM and CDN to a CLI in the coming days. Initially, the CLI will provide essential support for generating a mirror image of the FAST components package.

Benefits of CLI distribution

1. Provides an out-of-the-box experience for new or existing projects, with the ability to use the components outright or start customizing right away.
2. Creates an opportunity to introduce folks to web components, FAST's design token infrastructure, and Adaptive UI. The conversation around web components continues to grow, and leaf node components are a great way to start leveraging standards today, regardless of your existing front-end framework or library.
3. Enables a "build-with" approach rather than a "build-on" approach. Components are easier to extend when you have complete control as opposed to needing to constantly override defaults that exist in a black box.
4. Provides a more flexible starting point for the community to create new design systems, components, and other features for FAST.
5. Creates a starting platform for additional great features that make it easer to get started and support production scenarios with FAST; this is just the beginning of what the CLI will offer.

Evolving fast-foundation

Today fast-foundation provides a set of classes and templates for creating the typical "leaf node" components that you would need for most apps. Examples include button, tree view, slider, switch, and many more. Unfortunately, the templates of these components are not very customizable. The limited customization that is possible requires the use of awkward APIs that not only aren't very helpful but also come with a runtime cost. If you want to add a new slot, remove a slot, lock down parts, or add additional HTML of any kind, you just can't. All these scenarios require you to fork the template and take on an undesired maintenance burden.

However, with a CLI and a focus on shifting our community to a "build-with" approach, we can begin to re-imagine what fast-foundation looks like. We're pretty excited about the possibilities we've been exploring to enable full customization, governance, performance, tooling, learnability, and more. Stay tuned for an upcoming RFC that outlines a multi-phased plan for evolving fast-foundation in conjunction with the new CLI to enable greater creative potential for everyone.

FAQ

Q: Is the @microsoft/fast-components package going away immediately? A: While this package will be removed from its current location on Github, we will continue to provide updates to NPM and therefore the CDN for a period of 3 months to help support the community as they transition.

Q: How do I take advantage of new components which are added in fast-foundation? A: We will continue to update the component library in the CLI template, though the cadence of updates will be more spread out that with the current fast-components package. Additionally, the CLI has plans to support creating new components based either on an existing foundation pattern or by providing blank file templates to start from based on our recommended conventions. Lastly, fast-foundation will continue to publish nightly and you can always update and leverage the base components and updates from that package at your convenience.

Q: What happens if I encounter a bug in my project? A: For anything relating to fast-element or fast-foundation, we'll work to land a fix with the publish cadence for these packages continuing as-is. Once the fix is published, you can update the package version in your project's package.json file at your convenience. If the bug is a byproduct of the CLI template files, for example, an instance where a class is extended (Button), please file those bugs with the CLI package and we will work to fix and resolve it for future installs/updates. We will also do our best to help provide a fix you can use directly in your implementation.

Q: I primarily want to use the Adaptive UI portions of the project, do I need to install everything? A: We are planning to create a new package to support a la cart consumption of Adaptive UI features (color, density, etc). When this package is created and published you'll be able to leverage that independently in your project.

Q: What does this mean for documentation? A: While we've been working hard lately to improve documentation, this change will initially bring greater focus to fast-element and fast-foundation API's, as well as positioning our site to better represent our focus as a project. Over time, we'll also be working to improve our documentation for how best to leverage FAST when building components and creating design systems.

Thank you for your continued partnership and support. We are looking forward to sharing the next iteration of FAST with you all!

[ben-girardet]

Will the CLI distribution provides a storybook pre-configured for FAST components packages mirror ?

[EisenbergEffect]

Not sure if I'm understanding you correctly wrt "FAST components packages mirror" but...

The goal with the CLI is to have a full setup for building design systems. So, the component starter code, a test setup, Storybook, custom elements manifest, markdown documentation generation, etc. We probably won't have all of that in the first release, but that's our goal.

[yinonov]

Bravo, this really shows how fast is driven by the community! 🙏