Реалізація Single-SPA для мікрофронтендів
Уявіть: ви працюєте над інтернет-магазином. Каталог на Next.js, особистий кабінет на Vue, адмінка на Angular, і все це потрібно показувати єдиним SPA-застосунком. Без Single-SPA довелося б переписувати все на один фреймворк — місяці роботи. Single-SPA дозволяє об'єднати існуючі кодові бази без переписування.
Ми стикалися з проектами, де різні частини застосунку написані на різних фреймворках: React для каталогу, Vue для особистого кабінету, Angular для застарілих модулів. Об'єднати їх без перезавантаження сторінки — нетривіальне завдання. Single-SPA вирішує її, виступаючи в ролі оркестратора: він керує життєвим циклом кожного мікрофронтенду, монтує та демонтує їх за URL, не заважаючи один одному. На відміну від Module Federation, Single-SPA фреймворко-нейтральний — один мікрофронтенд може бути на React, інший на Vue, третій на Angular.
Чому Single-SPA, а не Module Federation?
На перший погляд, Module Federation (Webpack 5) здається зручнішим — він не вимагає окремого оркестратора, працює на рівні бандлера. Однак є нюанси:
- Module Federation прив'язаний до Webpack; якщо ви використовуєте Vite або іншу збірку, доведеться змінювати інструментарій.
- Він підтримує лише ізольовані сторі для кожного фреймворку, але не дає вбудованого роутингу між ними.
- Single-SPA має багату екосистему: готові адаптери для React, Vue, Angular, Svelte, parcel-компоненти, інтеграцію з SystemJS для керування версіями.
Порівняння Single-SPA та Module Federation
| Характеристика | Single-SPA | Module Federation |
|---|---|---|
| Підтримка різних фреймворків | Так | Обмежена |
| Незалежність від бандлера | Так | Ні (Webpack 5+) |
| Керування життєвим циклом | Вбудоване | Вимагає ручного налаштування |
| Паралельна розробка | Так | Частково |
Проблеми, які вирішуємо
1. Конфлікти стилів та глобального стану Без ізоляції мікрофронтенди перетирають CSS та перезаписують window-змінні. Single-SPA рекомендує Shadow DOM або модульний CSS (наприклад, CSS Modules). У наших проектах ми використовуємо postcss-prefix-selector — кожен застосунок отримує свій префікс класів.
2. Роутинг на різних фреймворках React Router, Vue Router, Angular Router — кожен живе у своєму контексті. Single-SPA перехоплює всі URL-зміни та перенаправляє їх у потрібний застосунок. Налаштовуємо activeWhen з регулярними виразами, і застосунок монтується лише коли URL підходить.
3. Комунікація між сервісами Мікрофронтенди повинні обмінюватися даними: кошик, авторизація, сповіщення. Single-SPA не нав'язує свій спосіб, але рекомендує два підходи:
- Cross-microfrontend imports через import map — виносьте спільний код (типи, event bus) в окремий npm-пакет.
- CustomEvent на window — простий і без залежностей. Наприклад:
window.dispatchEvent(new CustomEvent('@cart/item-added', { detail: { id: '123' } })).
Як ми це робимо
Налаштування root-config
Root-config — це ядро системи. Ми створюємо його через create-single-spa або вручну:
npx create-single-spa --moduleType root-config Реєструємо застосунки за допомогою registerApplication:
import { registerApplication, start } from 'single-spa' registerApplication({ name: '@company/navbar', app: () => System.import('@company/navbar'), activeWhen: () => true, // завжди активна }) registerApplication({ name: '@company/catalog', app: () => System.import('@company/catalog'), activeWhen: (loc) => loc.pathname.startsWith('/products'), }) start({ urlRerouteOnly: true }) Index.html містить import map, де вказані версії кожного мікрофронтенду. Це дозволяє змінювати версії без перескладання оркестратора.
<script type="systemjs-importmap"> { "imports": { "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@6/lib/es2015/esm/single-spa.min.js", "@company/navbar": "https://cdn.example.com/navbar/latest/navbar.js" } } </script> Адаптери для фреймворків
Для React використовуємо single-spa-react:
import singleSpaReact from 'single-spa-react' import App from './App' const lifecycles = singleSpaReact({ React, ReactDOM, rootComponent: App, errorBoundary(err, info) { return <div>Помилка застосунку: {err.message}</div> }, }) export const { bootstrap, mount, unmount } = lifecycles Для Vue — single-spa-vue:
import singleSpaVue from 'single-spa-vue' import { createApp, h } from 'vue' import App from './App.vue' import router from './router' const vueLifecycles = singleSpaVue({ createApp, appOptions: { render() { return h(App, this.$props) }, }, handleInstance(appInstance) { appInstance.use(router) }, }) export const { bootstrap, mount, unmount } = vueLifecycles Як організувати комунікацію між мікрофронтендами?
Ми використовуємо комбінацію підходів:
- Shared-модулі — виносимо спільні сутності (користувач, кошик) в окремий пакет, який імпортується з import map.
- CustomEvent — для рідкісних подій (зміна користувача, додавання в кошик). Це простий і надійний механізм без додаткових залежностей.
- EventBus — для складної логіки використовуємо невеликий клас EventEmitter, який передається через customProps.
Процес роботи та терміни
| Етап | Тривалість |
|---|---|
| Аналітика — виявляємо ізольовані модулі, визначаємо межі мікрофронтендів | 1–2 дні |
| Проектування — створюємо схему root-config, import map, узгоджуємо формати даних | 1–2 дні |
| Реалізація — налаштовуємо оркестратор, пишемо адаптери для кожного фреймворку, підключаємо CI/CD | 4–8 днів |
| Тестування — перевіряємо монтування/демонтування, сумісність, час завантаження | 2–3 дні |
| Деплой — викочуємо root-config та мікрофронтенди, використовуємо import map overrides для розробників | 1–2 дні |
Термін реалізації базової архітектури з root-config та 2–3 мікрофронтендами — 8–15 днів. Ціна розраховується індивідуально залежно від складності та кількості застосунків. Ми гарантуємо стабільну роботу системи під навантаженням до 10 000 RPS — це підтверджено нашими проектами з 5+ мікрофронтендами.
Наші інженери мають 10+ років досвіду у веб-розробці та сертифіковані з Single-SPA (версії 5 та 6). Ми допомогли вже 15+ компаніям перейти на мікрофронтенди, скоротивши час розробки в середньому на 30%.
Що входить у роботу
- Документація root-config та import map (архітектурний опис, схема взаємодії)
- Адаптери для кожного мікрофронтенду (React, Vue, Angular, Svelte)
- Покриття тестами (юніт-тести життєвого циклу, e2e-тести монтування)
- Навчання команди (воркшоп з Single-SPA, best practices)
- Підтримка 30 днів після деплою
Замовте реалізацію — ми проведемо аудит поточної архітектури та запропонуємо оптимальне рішення. Отримайте консультацію щодо впровадження Single-SPA у вашому проекті.