Как стать автором
Обновить
48.72
Mindbox
Автоматизация маркетинга

Новый микрофронтенд за 20 минут вместо часа: как работает система автоматической сборки

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров4.6K

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

Чтобы ускорить сборку, разработали систему из шаблона и CLI утилиты. Теперь новый микрофронтенд со всей обвязкой создается за 20 минут. В статье — подробное решение для тех, кто захочет повторить.

Как поняли, что пора шаблонизировать микрофронтенды

Пока микрофронтендов было немного, над скоростью их создания не задумывались: такие задачи поступали раз в несколько месяцев, и не страшно было потратить лишний час. Наши микрофронтенды имеют базовую структуру каталогов, повторяющиеся настройки, например, тулинг и линтинг, и предустановленные библиотеки, записанные в package.json (подробнее о том, как устроен пайплайн поставки микрофронтендов на продакшен, рассказали в отдельной статье). Чтобы создать новый микрофронтенд, мы копировали старый, удаляли ненужные библиотеки и куски кода и переименовывали шаблонные строки, например _template_frontend_name_ — затем можно было работать.

Но когда в месяц стали запускать по микрофронту, тратить время на его создание стало утомительно. Тогда мы задумались над тем, чтобы оптимизировать работу. Можно было бы создать шаблон микрофронтенда, в котором будет все нужное, но тогда все равно требовалось бы переименовывать шаблонные строки. Мы пошли дальше и разработали решение, которое помогает пропустить и этот этап. 

Как работает система автоматической сборки из шаблона и утилиты 

Наше решение состоит из двух частей: 

  • Шаблонного микрофронтенда. Это репозиторий в GitHub, для которого выставлена настройка Template repository. Он включает все, что требуется для нового микрофронтенда: стандартную структуру каталогов; стандартные файлы конфигураций для тулинга (.releaserc.js, commitlint.config.js, .eslintrc.js) и package.json с вписанными заранее зависимостями и парочкой specific полей.

  • CLI утилиты, которая создает новый микрофронтенд из шаблона. Она написана на Node.js и поставляется в виде NPM-библиотеки, которую можно запустить командой npx, не устанавливая на локальный компьютер.

Чтобы создать новый микрофронтенд, нужно:

  1. Открыть страницу шаблона в GitHub.

  2. Нажать «Use this template» → «Create a new repository».

  3. Указать имя нового микрофронтенда.

  4. Склонировать созданный репозиторий на компьютер.

  5. В корне репозитория запустить CLI.

CLI выполнит определенные действия, и микрофронтенд будет готов к работе.

Стоп, что за «определенные действия»?

В каждом микрофронтенде есть места, в которых должно быть вписано его название. В нашем шаблоне в этих местах выводится шаблонная переменная через Handlebars:

Откуда взялись теги <% и %>

Это кастомный вариант замены template-тегов {{ и }}. Для этого есть причина — символы { и } стандартные для Mustache и Handlebars, если будем использовать их для template-тегов, все смешается. Поэтому для переменных внутри файлов используем теги <% и %>

Мы также хотим использовать переменные в названиях файлов, но символы < и > зарезервированы в Windows, поэтому для переменных в названии файла используем символ _

Так получился набор template-тегов:

  • <% и %> для переменных внутри файла,

  • _% и %_ для переменных в пути файла.

При запуске CLI задает вопросы, чтобы понять, какие переменные подставить в шаблон. Опрос реализован с помощью Enquirer. Например, CLI запрашивает название namespace — это техническое название микрофронтенда в Mindbox:

В шаблоне эта переменная может использоваться в любом месте, даже в названии файла. Например:

Перед названием переменной есть модификатор camelCase. Он позволяет модифицировать её во время рендера:  в нашем случае приводит переменную namespace в формат camelCase. CLI проходится по всем файлам в будущем микрофронтенде, находит и рендерит шаблонные переменные через шаблонизатор. 

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

CLI в репозитории frontend-awesome с настройкой namespace: "awesome" выдаст такой результат:

Итоговый код
import React, { FC, useCallback } from 'react';
import { RouteComponentProps } from '@reach/router';
import { useErrorLogger } from '@mindbox-cloud/frontend-error-logging';
import { Button, GridItem, PageWrapper } from '@mindbox-cloud/ui-components';
import { trl } from '@mindbox-cloud/frontend-i18n';

export const ErrorLoggingScreen: FC<RouteComponentProps> = () => {
  const logger = useErrorLogger();

  const handleSendInfoToErrorLoggingSystem = useCallback(() => {
    logger.info('frontend-awesome message', (scope) => {
      scope.setTag('source', 'frontend-awesome');
      scope.setExtra('is_test', true);
    });
  }, [logger]);

  return (
    <PageWrapper>
      <GridItem>
        <h1>Error logging screen</h1>
      </GridItem>

      <GridItem>
        <Button type="primary" onClick={handleSendInfoToErrorLoggingSystem}>
          {trl('awesomeFrontend:SendMessageToErrorLoggingSystem')}
        </Button>
      </GridItem>
    </PageWrapper>
  );
};

CLI и автозамена позволяют создать микрофронтенд за 20 минут, на который при копировании ушел бы час. 

Если копировать файлы

С помощью Ctrl+Shift+R прошлись по всему проекту, нашли строку _template_frontend_name_ и вписали название микрофронтенда. 

Повторили с остальными переменными.

Учли, что переменные могут быть написаны в разных форматах, и вручную привели переменные к нужному формату. Например, формат camelCase используется в свойствах объектов, а формат PascalCase — в названиях компонентов.

Готово!

С CLI и автозаменой

Запустили CLI в проекте, указали в нем namespace: "my-awesome".

Готово!

Почему с микрофронтендом можно работать сразу после создания

При работе с любыми шаблонными решениями могут возникать проблемы. Например, шаблон создан на старой версии Node.js со старыми версиями зависимостей, и при запуске на новой версии Node.js зависимости оказываются несовместимы с ней. Или кто-то поменял шаблонный код, сломал типизацию — микрофронтенд не запустится.

Чтобы предотвратить эти проблемы, в репозитории нашего шаблона есть несколько команд, которые проверяют наличие ошибок в типизации, скриптах и стилях. Эти статические проверки гарантируют, что с вероятностью 99% с шаблоном всё в порядке и новый микрофронтенд запустится без проблем.

Несколько команд для проверки:

Чтобы поддерживать актуальные версии зависимостей, у нас реализован непрерывный процесс обновления зависимостей через Renovate. Он регулярно проходится по репозиторию шаблона и пытается автоматически обновить минорные (1.X.0) и патч-версии (1.0.X) зависимостей: создает Pull Request и, если обновление успешно установлено, мерджит его в main ветку. Если Pull Request с обновлением упал с ошибкой, то разработчику придётся прийти и самостоятельно её поправить. Подробнее, что такое Renovate и как он работает, можно узнать на официальном сайте

Статическая проверка кода и автоматическое обновление зависимостей гарантируют, что с микрофронтендом можно работать сразу после его создания.


Чтобы полностью подготовить к продакшену микрофронтенд, мало только преднастроить репозиторий. Всегда остаются ручные действия: нужно создать проект в системе мониторинга ошибок и системе поставки микрофронтенда на разные окружения, выдать права в репозитории, настроить защиту веток. Часть этих шагов также можно автоматизировать, и мы стараемся это сделать по мере возможности. Возможно, скоро вернемся со статьей, как оптимизировать еще больше действий ;-)

А сейчас можете посмотреть исходный код CLI, который мы используем.

Теги:
Хабы:
Всего голосов 6: ↑6 и ↓0+7
Комментарии4

Публикации

Информация

Сайт
www.mindbox.ru
Дата регистрации
Дата основания
2006
Численность
201–500 человек
Местоположение
Россия

Истории