Микрофронтенды Wippy
Фронтенд-код Wippy выполняется внутри границы изоляции Web Host. Есть два вида артефактов, которые можно собрать: приложения-микрофронтенды и веб-компоненты. Оба являются независимыми проектами Vite, оба общаются с платформой через @wippy-fe/proxy, и оба объявляются бэкенду записью реестра в _index.yaml. Разница в том, как они отрисовываются и для чего пригодны.
Приложение-микрофронтенд против веб-компонента
Приложение-микрофронтенд (view.page) |
Веб-компонент (view.component) |
|
|---|---|---|
| Отрисовывается как | Полный iframe, изолированный browsing context | Пользовательский элемент в Shadow DOM, внутри страницы |
| Имеет собственный URL / пункт навигации | Да — заявляет mountRoute на бэкенде |
Нет — встраивается в другую страницу или артефакт чата |
| Внутренняя маршрутизация | Да — vue-router с memory history |
Нет — один компонент, без маршрутизатора |
| Управляет viewport | Да | Нет — размер задаёт окружающая вёрстка |
| Переиспользуется на разных страницах | Нет — один URL, одно место | Да — любая страница может встроить тег |
| Принимает типизированные props | Нет — читает AppConfig |
Да — HTML-атрибуты, объявленные схемой |
| Испускает типизированные события | Нет — общается через proxy API | Да — CustomEvent, объявленные схемой |
| Изоляция CSS | Граница iframe | Shadow DOM (полная инкапсуляция) |
Быстрое правило: если нужен vue-router, выделенный URL или владение всем viewport — это приложение-микрофронтенд. Если нечто встраиваемое, переиспользуемое и самодостаточное — это веб-компонент.
В случае сомнений начинайте с веб-компонента. Продвинуть его до приложения-микрофронтенда позже проще, чем сделать обратное.
Что читать дальше
Спешите? В Быстром старте есть минимальные сквозные примеры и для приложения-микрофронтенда на Vue, и для веб-компонента на Vue, со ссылками на публичный репозиторий app.
Собрать приложение-микрофронтенд:
- Приложение-микрофронтенд — каркас, блок wippy в
package.json, конфигурация Vite, последовательность запуска, синхронизация маршрутизатора - Система сборки —
@wippy-fe/vite-plugin,wippy-meta.json, внешние зависимости - Proxy API — справочник
@wippy-fe/proxyдля общения с хостом - Темизация → Темизация: приложения-микрофронтенды — каталог CSS-переменных, затем как получить его через proxy-инъекции
Собрать веб-компонент:
- Веб-компонент — каркас,
WippyVueElement, props, события, CSS в shadow DOM - Система сборки — тот же инструментарий Vite, другой плагин и формат вывода
- Proxy API — тот же API, импортируется напрямую из
@wippy-fe/proxy - Темизация → Темизация: веб-компоненты — каталог CSS-переменных, затем как получить его через границу shadow DOM
Для обоих:
- Режим без хоста — разработка и тестирование без запуска полного Web Host
- Указатель правил соответствия — канонические владельцы правил и детерминированные гейты
- Отладка — руководство по симптомам для самых частых сценариев сбоя
Предварительные требования
- Модуль бэкенда Wippy с объявленной зависимостью
wippy/views(см. Views) wippy/facadeдля точки входа Web Host (см. Точка входа фасада)- Node.js 22 или новее и Vite 7, как объявлено выбранным исходником Web Host; перепроверяйте его пакет при смене целевого релиза