DOCSEARCHbyAlgolia
Submit Docs

FAST Documentation

website·Indexed 35 days ago

https://www.fast.design

API reference for the FAST framework, including @microsoft/fast-element. Covers dependency injection (DI) with ResolverBuilder and Factory, context management, DOM policies, and hydration controllers across versions 2.x and 3.x.

Tokens
408.1K
Snippets
3.1K
Records
4.3K
Agent score
69%

What's inside FAST

  1. Overview of the FAST framework

    FAST is a collection of technologies built on Web Components and modern W3C Web Standards. It is designed to help developers build website and application designs efficiently. Because it adheres to open web standards and does not create a proprietary component model, FAST components function like native HTML elements and can be used without a framework or in combination with any existing framework or library.

  2. Overview of Web Components standards

    Web Components is an umbrella term for W3C web standards that allow the creation of custom HTML elements. These standards enable developers to define new HTML tags, utilize a standard component lifecycle, encapsulate HTML rendering and CSS, parameterize CSS, and skin components. These features are supported across all major modern browsers.

  3. Overview of the FAST tech stack

    FAST is a collection of technologies built on W3C Web Component standards. It is designed to be framework-agnostic, meaning components built with FAST function like native HTML elements and can be used with any framework or library. The stack is divided into three layers based on the level of customization needed: high-level ready-made components, foundational building blocks for design systems, and a low-level library for custom component creation.

  4. Overview of the FAST framework

    FAST is a collection of technologies built on Web Components and modern Web Standards. It is designed to help developers tackle common website and application design challenges. Because it is built directly on W3C Web Component standards and does not create its own proprietary component model, FAST components function like native HTML elements. They can be used without a framework or in combination with any existing framework or library.

  5. Overview of Declarative HTML templates in FAST Element

    FAST Element provides a declarative authoring model using <f-template> elements. Unlike the imperative model (which uses JavaScript tagged template literals), declarative templates are plain HTML parsed at runtime. This allows templates to be rendered by any server-side technology (e.g., Rust, Go, .NET) without requiring the FAST Element client runtime on the server, enabling stack-agnostic server-side rendering (SSR). Hydration and client rendering occur in the browser Window.

  6. Use the Splice class to represent array transformations

    The Splice class in @microsoft/fast-element represents how a previous array of items was transformed into a new array. It functions as a list of tuples consisting of (index, removed, addedCount).

    • index: The position in the array where the change occurred.
    • removed: The sequence of items that were removed at that index.
    • addedCount: The number of items added starting from that index.

    This is used to track changes between array states, allowing for efficient updates rather than full array resets.

    import { Splice } from '@microsoft/fast-element';

// Example: At index 2, 1 item was removed and 2 items were added
const splice = new Splice(2, [removedItem], 2);

  7. Use TemplateParser to convert declarative HTML to ViewTemplate data

    The TemplateParser class from @microsoft/fast-element/declarative.js is used to convert declarative HTML template markup into the strings and values arrays consumed by ViewTemplate.create().

    Key architectural characteristics:

    • Stateless: The class is stateless across invocations; mutable state is managed on the call stack or within the TemplateResolutionContext.
    • Synchronous: The parsing pipeline is fully synchronous and does not allocate promises during template resolution.
    import { TemplateParser } from '@microsoft/fast-element/declarative';

// Example usage context:
// const parser = new TemplateParser();
// const { strings, values } = parser.parse(innerHTML, schema);

  8. Use UpdateQueue to synchronize DOM writes

    The UpdateQueue interface from @microsoft/fast-element acts as a work queue designed to synchronize writes to the DOM. It allows developers to schedule updates and control when they are processed to avoid excessive reflows and repaints.
    import { UpdateQueue } from '@microsoft/fast-element';

// Example usage of the interface
const queue: UpdateQueue = { /* ... implementation ... */ };

  9. Understand the purpose and scope of fast-element

    Unlike "mega SPA frameworks," fast-element is specifically designed to enable the creation of web components. Because of this focused scope, fast-element and components built with it can be used in tandem with other front-end frameworks rather than replacing them.

  10. FAST project planning and release cadence

    The FAST team uses a hybrid planning model to manage the project backlog:

    • Quarterly Planning: Focuses on large-scale themes, strategic work, and OKRs (e.g., SSR support).
    • Weekly Planning: An agile process where the team selects the most impactful bugs, features, and documentation tasks from the backlog for the current iteration.
    • Release Schedule: Minor and patch changes merged to the main branch are published Sunday through Thursday evenings (Pacific Time).

  11. Frameworks with native FAST support

    The following frameworks and tools natively support FAST web components and require no additional configuration: ASP.NET, Ember, Svelte, Vite, Vue, and Webpack.

  12. Use ResolverBuilder to register dependencies in FAST

    The ResolverBuilder<K> class is a utility used to construct and register resolvers for a dependency injection container in the @microsoft/fast-element/di.js package. It allows developers to define how dependencies are instantiated and managed throughout their lifetime.
    import { ResolverBuilder } from '@microsoft/fast-element/di.js';
// Usage depends on the container implementation