Миграция с других библиотек

FAST Element — современная библиотека для создания веб-компонентов на JavaScript, построенная на стандартных возможностях платформы Web Components. Переход с других библиотек, таких как React, Vue или Angular, требует понимания различий в подходах к созданию компонентов, управлению состоянием и связыванию данных.

Структура компонента FAST Element

Компонент в FAST Element состоит из трёх ключевых частей:

  1. Класс компонента Определяется с помощью наследования от FASTElement и содержит логику компонента.

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

const template = html<MyComponent>`
  <div>${x => x.message}</div>
`;

const styles = css`
  div {
    color: blue;
  }
`;

export class MyComponent extends FASTElement {
  message = "Привет, FAST!";
}

MyComponent.define({
  name: "my-component",
  template,
  styles
});

  2. Шаблон HTML FAST Element использует собственный DSL для шаблонов, основанный на tagged templates (`html``). Динамические выражения связываются через стрелочные функции.

  3. Стилизация Стили задаются через `css`` и интегрируются напрямую в компонент, обеспечивая инкапсуляцию стилей.

Сравнение с React и Vue

  • JSX vs FAST HTML DSL В React JSX предоставляет декларативный синтаксис, а FAST использует функции-шаблоны. Перенос JSX выражений требует переписывания их в стрелочные функции.

    // React
<div>{message}</div>

// FAST
html`<div>${x => x.message}</div>`

  • Props и Observables FAST Element использует реактивные свойства класса. Любое поле, объявленное в классе компонента, автоматически отслеживается при использовании в шаблоне. В отличие от React, нет необходимости вручную вызывать setState.

  • События FAST Element работает с DOM-событиями напрямую через директиву @event.

    html`<button @click=${x => x.handleClick()}>Нажми</button>`

    В Vue аналогично используется v-on, а в React — onClick. Основное отличие в том, что FAST Element не создает виртуальный DOM, а напрямую управляет элементами.

Работа с состоянием и реактивностью

FAST Element реализует реактивность на уровне свойств класса. Любое изменение свойства автоматически обновляет связанные с ним части шаблона.

export class Counter extends FASTElement {
  count = 0;

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

const template = html<Counter>`
  <div>Счётчик: ${x => x.count}</div>
  <button @click=${x => x.increment()}>+1</button>
`;

Особенность подхода — обновляется только та часть DOM, которая зависит от измененного свойства, без повторного рендера всего компонента.

Работа с условной логикой и списками

Для условных выражений используется встроенный <template> с директивами if.bind и repeat.bind.

html`
  <template :if="${x => x.isVisible}">
    <div>Видимый блок</div>
  </template>

  <template :repeat="${x => x.items}">
    <li>${item => item.name}</li>
  </template>
`;

Это отличается от React, где используется тернарный оператор, и от Vue с v-if/v-for.

Интеграция с существующим кодом

  1. Встраивание компонентов FAST в HTML/JSX Компоненты FAST — полноценные кастомные элементы, поэтому их можно использовать в любом HTML или JSX-коде:

    <my-component></my-component>

  2. Передача данных через атрибуты и свойства FAST позволяет связывать данные через свойства компонента или через HTML-атрибуты. Для сложных объектов рекомендуется использовать свойства.

    const comp = document.createElement('my-component');
comp.message = "Новая строка";
document.body.appendChild(comp);

  3. Событийная интеграция События, объявленные в компоненте, могут быть обработаны стандартным addEventListener.

    comp.addEventListener('custom-event', e => console.log(e.detail));

Миграция жизненных циклов

FAST Element имеет собственные хуки жизненного цикла, аналогичные React:

  • connectedCallback() — выполняется при добавлении компонента в DOM.
  • disconnectedCallback() — при удалении из DOM.
  • propertyChanged(name, oldValue, newValue) — вызывается при изменении наблюдаемого свойства.

Перенос логики из componentDidMount, useEffect или mounted требует переноса кода в connectedCallback() и работу с реактивными свойствами через propertyChanged.

Работа с формами и двусторонней связью

Для двусторонней связи с формами используется директива bind.

html`
  <input type="text" :value="${x => x.text}" @input="${x => x.text = x.event.target.value}">
  <p>Текст: ${x => x.text}</p>
`;

Это заменяет v-model в Vue и useState + onChange в React.

Преимущества FAST Element при миграции

  • Нативные веб-компоненты, совместимые с любым фреймворком.
  • Лёгкий и минимальный runtime без виртуального DOM.
  • Полная реактивность через свойства класса, простая интеграция с существующим кодом.
  • Удобное управление стилями и шаблонами без сторонних библиотек CSS-in-JS.

Заключение

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

Оглавление