Vue

FAST Element — это современная библиотека для создания веб-компонентов на чистом JavaScript с использованием декларативного синтаксиса. Она позволяет строить высокопроизводительные, реактивные и настраиваемые элементы интерфейса, полностью совместимые со стандартом Custom Elements.

В основе FAST Element лежит класс FASTElement, который расширяет стандартный HTMLElement. Для создания компонента необходимо наследовать этот класс и описать шаблон и реактивные свойства.

import { FASTElement, html, css, customElement, observable } from "@microsoft/fast-element";

@customElement({
  name: 'my-element',
  template: html`<p>${x => x.message}</p>`,
  styles: css`p { color: blue; }`
})
class MyElement extends FASTElement {
  @observable message = 'Привет, FAST!';
}

Шаблоны и привязка данных

HTML-шаблоны в FAST Element определяются через функцию html. Шаблон может содержать:

  • Привязку свойств (${x => x.property}) — реактивно обновляется при изменении значения свойства.
  • События (@event=${x => x.handler()}) — позволяет напрямую обрабатывать DOM-события.
  • Условные блоки (when) и итерации (repeat) для динамического отображения данных.

Пример итерации массива:

import { repeat } from "@microsoft/fast-element";

@customElement({
  name: 'list-element',
  template: html`
    <ul>
      ${repeat(x => x.items, html`<li>${x => x}</li>`)}
    </ul>
  `
})
class ListElement extends FASTElement {
  @observable items = ['Элемент 1', 'Элемент 2', 'Элемент 3'];
}

Стилизация компонентов

FAST Element поддерживает инкапсулированные стили, используя стандартные CSS-переменные и css из библиотеки. Можно подключать глобальные темы или создавать локальные стили.

const styles = css`
  :host {
    display: block;
    padding: 10px;
    background-color: var(--background, #f0f0f0);
  }
  p {
    font-size: 16px;
    color: var(--text-color, black);
  }
`;

Стили можно применять как в декларации @customElement, так и динамически изменять через реактивные свойства.

Реактивность и наблюдаемые свойства

С помощью декоратора @observable создаются наблюдаемые свойства, которые автоматически вызывают перерисовку шаблона при изменении:

@observable count = 0;

increment() {
  this.count += 1;
}

FAST Element поддерживает события изменения свойств через метод propertyChanged, позволяя реагировать на обновления и синхронизировать состояние с другими элементами:

countChanged(oldValue, newValue) {
  console.log(`Count изменился с ${oldValue} на ${newValue}`);
}

Работа с событиями

Для обработки событий используется синтаксис @event внутри шаблона. Это позволяет привязывать методы класса напрямую к DOM-событиям:

template: html`
  <button @click=${x => x.increment()}>Нажми меня</button>
  <p>Счёт: ${x => x.count}</p>
`

Контейнеры, слоты и композиция

FAST Element поддерживает слоты и композицию компонентов, что позволяет создавать сложные интерфейсы с переиспользуемыми блоками.

@customElement({
  name: 'card-element',
  template: html`
    <div class="card">
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  `,
  styles: css`
    .card { border: 1px solid #ccc; padding: 10px; border-radius: 5px; }
  `
})
class CardElement extends FASTElement {}

Компонент можно использовать так:

<card-element>
  <h3 slot="header">Заголовок</h3>
  <p>Основное содержимое</p>
  <footer slot="footer">Подвал</footer>
</card-element>

Паттерн ViewModel

FAST Element реализует подход ViewModel, когда все данные и методы компонента сосредоточены в одном классе. Это упрощает управление состоянием и интеграцию с другими компонентами.

Подключение к DOM и жизненный цикл

Компоненты FAST Element используют стандартные методы жизненного цикла Custom Elements:

  • connectedCallback — вызывается при вставке в DOM.
  • disconnectedCallback — вызывается при удалении из DOM.
  • adoptedCallback — при переносе элемента в другой документ.
  • attributeChangedCallback — при изменении атрибута элемента.

FAST Element автоматически связывает наблюдаемые свойства с атрибутами, если они объявлены с attribute: true в конфигурации.

Производительность и оптимизация

FAST Element использует виртуальный DOM-lite, минимизируя обновления DOM и выполняя диффинг шаблонов на уровне свойств. Это обеспечивает высокую производительность даже при большом количестве компонентов и данных.

Для динамических списков рекомендуется использовать repeat с ключами:

${repeat(x => x.items, html`<li>${x => x.name}</li>`, {key: x => x.id})}

Интеграция с другими библиотеками

FAST Element легко интегрируется с любыми библиотеками и фреймворками через стандартные события и свойства. Можно использовать его внутри Vue, React или Angular как кастомный элемент, сохраняя реактивность и стилизацию.

FAST Element сочетает в себе удобство декларативного синтаксиса, реактивность и гибкость веб-компонентов, позволяя создавать сложные, масштабируемые интерфейсы с минимальным количеством кода и максимальной производительностью.

Оглавление