FAST

The FAST Element template binding system follows a five-stage pipeline to transform HTML templates into reactive DOM views:

1. Template Authoring: Using the html tagged template to collect binding expressions and build HTML with placeholder markers.
2. Compilation: The compiler parses the HTML into a DocumentFragment, walks the DOM tree, and records the target locations for each binding.
3. View Creation: The compiled result clones the fragment and creates a targets object that maps each binding's unique ID to its specific DOM node.
4. Binding (First Render): Factories create behaviors that attach to target nodes, such as adding event listeners, setting attributes, or observing expressions.
5. Reactive Updates: When observed data changes, one-way binding observers notify their directive, which re-evaluates the expression and pushes the new value to the DOM via a "sink" function.

The Schema and Observer Map architecture in @microsoft/fast-element enables automatic observation of complex, nested data objects (objects, arrays, and primitives) within FAST HTML templates.

Key Components

• Schema Class: Generates JSON schemas describing the structure and binding paths of data objects based on template analysis or manual registration.
• Observer Map Class: Uses the schema to automatically define observable properties and create proxies for deep observation of nested objects.
• f-template Integration: Automatically populates schemas and configures observer maps during template compilation.

Supported Data Types

• Objects: Nested structures with observable properties.
• Arrays: Arrays with observable mutations and nested elements.
• Primitives: String, number, and boolean values.

Limitations

This system does not handle:

• Function bindings: Event handlers (e.g., @click="{handleClick()}") are treated as functions, not observable data.
• Context paths: Bindings using the $c prefix (e.g., $c.parent.showNames) resolve from the ExecutionContext and are not part of the data model.
• Computed expressions: Complex expressions evaluating to non-data values.

Web Components, the foundation of the FAST library, offer several advantages for application development:

• Performance: Web Components typically provide faster startup times, better paint performance, lower memory usage, and smaller bundle sizes compared to many popular JavaScript frameworks (e.g., React, Angular, Vue).
• Interoperability: Because every Web Component inherits from HTMLElement, they work seamlessly with any library or framework that interacts with the DOM, including React, Angular, Vue, and jQuery. This allows for a consistent design system across diverse application architectures.
• Incremental Adoption: You can integrate Web Components into existing applications without a full rewrite. They function as custom extensions of the HTML palette and can be used alongside existing elements.
• Future Compatibility: Web Components are part of the official HTML specification. Using them ensures compatibility with evolving web standards and platform improvements in the DOM and CSS.
• Extensibility: Building an ecosystem or plugin model around Web Components allows users to choose their own preferred JavaScript framework, preventing framework lock-in.
• Accessibility for Non-JS Developers: Web Components can be used by developers without deep JavaScript proficiency, as they can be manipulated using standard HTML patterns.