Установка через CDN

Библиотека FAST Element предоставляет возможность использования компонентов веб-интерфейса без необходимости установки через менеджеры пакетов, такие как npm или yarn. Подключение через CDN позволяет сразу интегрировать функционал FAST Element в проект, используя стандартные HTML и JavaScript-файлы.

Подключение скриптов и стилей

Для работы FAST Element через CDN достаточно добавить в HTML-документ следующие теги:

<!-- Подключение FAST Element -->
<script type="module" src="https://cdn.skypack.dev/@microsoft/fast-element"></script>

<!-- Подключение FAST Components (опционально, для готовых UI-компонентов) -->
<script type="module" src="https://cdn.skypack.dev/@microsoft/fast-components"></script>

Использование атрибута type="module" позволяет импортировать модули ES и работать с компонентами напрямую в браузере без сборщиков.

Если необходимы стили и темы для компонентов, подключение может выглядеть следующим образом:

<link rel="stylesheet" href="https://cdn.skypack.dev/@microsoft/fast-components/dist/fast-components.css">

Импорт модулей

После подключения через CDN становится доступным импорт модулей в любом скрипте, который также использует type="module":

import { FASTElement, html, css } from 'https://cdn.skypack.dev/@microsoft/fast-element';
import { provideFASTDesignSystem, fastButton } from 'https://cdn.skypack.dev/@microsoft/fast-components';
  • FASTElement — базовый класс для создания реактивных веб-компонентов.
  • html и css — функции для декларативного описания шаблонов и стилей.
  • provideFASTDesignSystem и готовые компоненты (fastButton, fastCard и др.) — упрощают создание UI с готовым дизайном и темами.

Инициализация системы компонентов

Для использования готовых компонентов необходимо инициализировать дизайн-систему FAST:

provideFASTDesignSystem().register(fastButton());

Регистрация компонента делает его доступным как стандартный HTML-элемент:

<fast-button appearance="accent">Нажми меня</fast-button>

Преимущества подключения через CDN

  1. Моментальный доступ — не требуется установка через npm, можно работать сразу в браузере.
  2. Минимальная настройка сборки — идеально для прототипов и небольших проектов.
  3. Автоматическое обновление — при использовании последних версий CDN-пакетов не нужно вручную обновлять зависимости.

Особенности и ограничения

  • Для крупных проектов предпочтительнее использовать npm, так как CDN-подключение не обеспечивает контроль версий и оптимизацию сборки.
  • Импорт модулей через CDN требует поддержки ES Modules в браузере. Для старых браузеров необходимо предусматривать полифиллы.
  • Для CSS-тем и кастомизации компонентов через CDN подключение должно быть корректно синхронизировано с версией JS-библиотеки, иначе могут возникнуть визуальные расхождения.

Пример полной HTML-страницы с FAST Element через CDN

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>FAST Element через CDN</title>
  <link rel="stylesheet" href="https://cdn.skypack.dev/@microsoft/fast-components/dist/fast-components.css">
  <script type="module" src="https://cdn.skypack.dev/@microsoft/fast-element"></script>
  <script type="module" src="https://cdn.skypack.dev/@microsoft/fast-components"></script>
</head>
<body>
  <fast-button appearance="accent">Нажми меня</fast-button>

  <script type="module">
    import { provideFASTDesignSystem, fastButton } from 'https://cdn.skypack.dev/@microsoft/fast-components';

    provideFASTDesignSystem().register(fastButton());
  </script>
</body>
</html>

Этот пример демонстрирует минимальный рабочий вариант использования FAST Element и FAST Components через CDN. Компоненты сразу доступны в HTML и могут быть кастомизированы через CSS или JavaScript.

Подключение через CDN обеспечивает быстрый старт и удобную интеграцию, особенно для прототипирования и небольших приложений, где не требуется сложная сборка и управление зависимостями.

Оглавление