Начинаем знакомство с single-spa

JavaScript микрофронтенды

Присоединяйтесь к чату в Slack

single-spa это фреймворк, который объединяет несколько Javascript микрофронтендов в одно фронтенд приложение. Архитектура вашего приложения с использованием single-spa имеет множество преимуществ, таких как:

• Использование нескольких фреймворков на одной странице без обновления страницы (React, AngularJS, Angular, Ember, или что угодно, что вы используете)
• Разворачивание ваших микрофронтендов независимо друг от друга
• Пишите код, используя новый фреймворк, без переписывания существующего приложения
• Ленивая загрузка кода для улучшения времени начальной загрузки

Демо и примеры

Смотреть страницу с примерами.

Обзор архитектуры

Single-spa вдохновляется жизненным циклом компонентов современных фреймворков, абстрагируя жизненные циклы для целых приложений. Рожденный из желания Canopy использовать React + react-router вместо того, чтобы навечно застрять с приложением на AngularJS + ui-router, single-spa стал зрелой библиотекой, которая позволяет использовать микросервисную архитектуру на фронтенде, известную как "микрофронтенды". Микрофронтенды имеют множество преимуществ, таких как: независимое разворачивание, миграция и возможность экспериментирования, а также устойчивость приложений.

single-spa приложения состоят из следующих частей:

1. Корневая конфигурация single-spa, которая рендерит HTML страницу, и Javascript, который регистрирует приложения. Каждое приложение регистрируется с тремя вещами:

   • Имя
   • Функция для загрузки кода приложения
   • Функция, определяющая, когда приложение активно/неактивно.

2. Приложения которые можно рассматривать, как single-spa приложения упакованные в модули. Каждое приложение должно знать, как загрузиться, смонтировать и размонтировать себя из DOM. Главное отличие между традиционными SPA и single-spa приложениями в том, что они должны иметь возможность существовать с другими приложениями, поскольку у каждого из них нет собственной HTML страницы.

   Для примера, ваше React или Angular SPA приложения. Когда они активны, они могут прослушивать события маршрутизации url-адресов и помещать контент в DOM. Когда они неактивны, они не прослушивают события маршрутизации url-адресов и полностью удаляются из DOM.

Рекомендации по установке

Основная команда single-spa собрала документацию, инструменты и видео, демонстрирующие рекомендуемые в настоящее время лучшие практики работы с single-spa. Для получения дополнительной информации ознакомьтесь с этими документами.

Насколько сложно будет использовать single-spa?

Single-spa работает с ES5, ES6+, TypeScript, Webpack, System JS, Gulp, Grunt, Bower, ember-cli или любой доступной системой сборки. Вы можете установить его через npm или даже просто использовать тег <script>, если хотите.

Хотя наша цель состоит в том, чтобы сделать использование single-spa максимально простым, мы также должны отметить, что это расширенная архитектура, которая отличается от того, как обычно пишутся фронтенд приложения. Это потребует изменения существующих парадигм, а также понимания лежащих в их основе инструментов.

Если вы не начинаете свое приложение с нуля, вам придется изменить ваше одностраничное приложение чтобы стать single-spa приложением.

Single-spa работает в Chrome, Firefox, Safari, Edge, и IE11 (с полифилами).

single-spa своего рода избыточное имя?

Да.

Документация

Документация разбита по нескольким секциям:

• Начинаем знакомство
• single-spa Приложения
• single-spa Parcels
• Примеры
• Экосистема
• Contributing Guide
• Блог
• Где найти поддержку

Вы можете улучшить этот сайт по single-spa, отправив pull реквесты в single-spa.js.org репозиторий.

Быстрый старт

Чтобы помочь новичкам быстро начать работу с single-spa, мы разработали create-single-spa утилиту для генерации начального кода. Это руководство будет охватывать создание корневой конфигурации и вашего первого приложения single-spa. Давайте начнем.

Как только вы получите базовые основы, обратитесь к другим примерам single-spa, чтобы увидеть более расширенное использование.

Создание корневой конфигурации

1. Вызовите create-single-spa, чтобы сгенерировать корневую конфигурацию, запустив:

   npx create-single-spa --moduleType root-config

   Следуйте подсказкам, обратив внимание на несколько вещей, таких как:

   • single-spa Layout Engine в настоящее является необязательным, но рекомендуется, если вы планируете использовать рендеринг на стороне сервера (SSR)
   • Поле "orgName" должно быть одинаковым во всех ваших приложениях, поскольку оно используется в качестве пространства имен для включения разрешения модуля в браузере

2. После создания перейдите в созданную папку корневой конфигурации

3. Запустите скрипт start, используя ваш любимый менеджер пакетов

4. Перейдите на http://localhost:9000/ в вашем браузере

5. Теперь у вас есть работающая корневая конфигурация!

Обязательно просмотрите комментарии внутри сгенерированного кода, а также информацию в Welcome-application, даже если часть содержимого дублируется в этом руководстве.

single-spa-playground.org - это альтернативное руководство по запуску приложения без необходимости создавать свой собственный root-config.

Создание single-spa приложения

1. Вызовите create-single-spa чтобы сгенерировать a single-spa приложение, запустив:

   npx create-single-spa --moduleType app-parcel

   Следуйте подсказкам, чтобы создать single-spa приложение с использованием выбранного вами фреймворка

2. После создания перейдите во вновь созданную папку приложения

3. Запустите скрипт start, используя ваш любимый менеджер пакетов

Добавление общих зависимостей

Общие зависимости используются для повышения производительности путем совместного использования модуля в браузере через карты импорта объявленного в корневой конфигурации. Добавление их на данном этапе является условно опциональным, в зависимости от того, ожидает ли сгенерированное приложение каких-либо общих зависимостей.

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

"react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"

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

Регистрация приложения

1. Вернитесь в корневую конфигурацию и добавьте свое приложение в карту импорта в src/index.ejs

рекомендуется использовать поле name из package.json приложения

1. Зарегистрируйтесь в качестве single-spa

если не используется single-spa Layout Engine

• Откройте src/root-config.js
• Удалите код для регистрации @single-spa/welcome в качестве приложения
• Раскомментируйте пример кода registerApplication и замените его именем модуля вашего приложения

если используется single-spa Layout Engine

• Удалите существующий <application name="@single-spa/welcome"></application> элемент
• Добавьте свой собственный элемент <application name=""></application>, используя name имя модуля, используемое в карте импорта из предыдущего шага

Вот и все! Ваше первое single-spa приложение теперь должно быть запущено в вашей корневой конфигурации.

---

API

Подробнее читайте на single-spa API и API приложения.

Участие в развитии

Основная цель этого репозитория - продолжать развивать single-spa, делая его лучше и проще в использовании. Развитие single-spa и single-spa экосистемы происходит в открытом доступе на GitHub, и мы благодарны сообществу за внесение исправлений и улучшений. Читайте ниже, чтобы узнать, как вы можете принять участие в улучшении single-spa.

Кодекс поведения

Single-spa приняла Кодекс поведения, который мы ожидаем от участников проекта. Пожалуйста, прочтите полный текст чтобы Вы могли понять, какие действия будут и не будут терпимы.

Contributing Guide

Прочтите наш contributing guide, чтобы узнать о процессе разработки, как предложить исправления и улучшения, как собрать и протестировать изменения в single-spa.

Кто этим пользуется?

См. раздел пользовательских примеров.

Ваша компания или проект, использует single-spa? Дайте нам знать, отправив PR в этот раздел!