Главная
АИ #39 (169)
Статьи журнала АИ #39 (169)
Исследование архитектуры микрофронтенда: инструменты и рекомендации для использо...

10.5281/zenodo.8394227

Исследование архитектуры микрофронтенда: инструменты и рекомендации для использования

Автор(-ы):

Шогенов Алим Музаринович

29 сентября 2023

Секция

Информационные технологии

Ключевые слова

информационные технологии
веб-разработка
микросервис
микрофронтенд

Аннотация статьи

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

Текст статьи

Что такое микрофронтендная архитектура

Микрофронтенды представляют собой концепцию, которая переносит идеи микросервисов из сферы серверных технологий в область графических пользовательских интерфейсов. На рисунке ниже иллюстрируется эволюция архитектурных подходов от монолитной структуры к сочетанию микрофронтендов и микросервисов. Важно отметить, что будущее, о котором идет речь, наступает уже сейчас [1].

Рис. Эволюция архитектурных подходов

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

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

Важнейшие преимущества микрофронтендов включают в себя:

  1. Улучшенную масштабируемость.
  2. Более быструю разработку благодаря возможности работы над частями приложения независимо друг от друга. Однако это преимущество полностью реализуется только в случае больших проектов с несколькими командами разработчиков интерфейса.
  3. Независимость в процессе непрерывной интеграции и непрерывной доставки (CI/CD) [2]. Обновление микрофронтенд-компонентов не влияет на функциональность всего приложения, а затрагивает только конкретные бизнес-процессы, за которые они отвечают.
  4. Упрощенную возможность обновления частей пользовательского интерфейса, что делает процесс более гибким.
  5. Большую вероятность стабильности других частей приложения в процессе разработки новых функциональных возможностей, так как микрофронтенды независимы и изменения в одном из них не затрагивают всё приложение.
  6. Управляемые и более компактные кодовые базы.
  7. Упрощенное тестирование, так как тестируются только отдельные функциональные элементы.

Технологические средства разработки

Как Angular, так и React.js являются популярными и замечательными инструментами для разработки фронтенда. В обоих есть множество преимуществ, но основываясь на представленном ниже сравнении (таблица) и статистических данных, становится ясно, что React.js представляет собой более эффективное и широкоиспользуемое решение, которое продолжает развиваться и оставаться в тренде. Кроме того, данная библиотека пользуется огромной поддержкой и вниманием со стороны разработчиков сообщества [3].

Таблица

Критерий

React.js

Angular

Производительность

Виртуальный DOM – каждый раз, когда DOM изменяется, создается новый виртуальный DOM по сравнению с предыдущим, и в «реальном» DOM обновляются только различия [4].

Инкрементный DOM – когда создается новый DOM, он сравнивает его с предыдущим и применяет различия к «фактическому» DOM, выделяя память только при необходимости.

Компонентная архитектура

С использованием React мы можем создавать компоненты, которые имеют свое собственное состояние и сочетать их в сложные пользовательские интерфейсы. React предлагает простой и понятный подход, но для полного раскрытия его возможностей может потребоваться интеграция с дополнительными инструментами, такими как Redux, например [5].

Angular – это полноценный фреймворк, обладающий множеством готовых функций и инструментов, включая RxJS, Angular CLI и Angular Universal. Он предлагает все необходимое для разработки, управления структурой проекта и создания универсальных приложений [6].

Размер приложения

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

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

Обратная совместимость

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

Переход с Angular 2.0 на 7.0 требует последовательной установки промежуточных обновлений между версиями. Если наша цель поэтапное улучшение проекта с добавлением новых функций, то лучшим выбором будет React. Эта библиотека обеспечивает абсолютную обратную совместимость, что позволяет нам без проблем интегрировать ее в существующий код и постепенно расширять функциональность.

Масштабирование

React активно использует в своей экосистеме инструменты от сторонних разработчиков (библиотеки), которые вносят значительный вклад в его функциональность и расширяемость.

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

Использование React.js оказывается более выгодным по сравнению с Angular, благодаря его реализации виртуального DOM и оптимизации рендеринга. Миграция между версиями React.js является относительно простой, поскольку нет необходимости устанавливать обновления последовательно, как в случае с Angular. Кроме того, React.js предлагает множество готовых решений, которые разработчики могут использовать, что значительно сокращает время разработки и минимизирует количество ошибок. Важно отметить, что в случае ограниченных ресурсов разработчиков команда может смешивать Angular и React.js или использовать их вместе, особенно в контексте разработки полиглотных приложений (разработанных на разных языках). Это является одним из преимуществ микрофронтендной архитектуры [7].

Организация кодовой инфраструктуры

Монорепозиторий – это как один дом, где живут несколько проектов, а мультирепозиторий – это как несколько домов, где каждый хранит свои собственные проекты.

Использование монорепозитория может эффективно решить некоторые распространенные проблемы в микрофронтендной архитектуре:

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

Монорепозиторий может помочь решить эти проблемы, объединив все компоненты приложения в одном месте. Это упрощает совместное использование кода, обеспечивает согласованность между микроинтерфейсами и облегчает масштабирование приложения [8].

Преимущества использования монорепозиториев для микрофронтендов:

  1. Общий код и видимость: Монорепозиторий позволяет легко повторно использовать код для тестирования, компонентов пользовательского интерфейса и других целей. Это упрощает разработку и обслуживание приложения.
  2. Согласованные изменения: Монорепозиторий упрощает согласование изменений между микрофронтендами. При изменении одной части приложения все связанные с ней микрофронтенды автоматически обновляются.
  3. Мобильность разработчиков: Монорепозиторий обеспечивает согласованный способ создания и тестирования приложений, написанных с использованием различных инструментов и технологий. Это упрощает работу разработчиков и помогает им быстро адаптироваться к новым проектам.
  4. Единый набор зависимостей: Монорепозиторий позволяет использовать единую версию всех сторонних зависимостей. Это упрощает управление зависимостями и снижает риск конфликтов.

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

Дополнительные преимущества монорепозиториев:

  • Упрощение управления версиями: Монорепозиторий упрощает управление версиями приложения. Все изменения отслеживаются в одном месте, что облегчает отслеживание изменений и их откат в случае необходимости.
  • Повышение производительности: Монорепозиторий может повысить производительность приложения за счет уменьшения количества запросов к серверу. Когда все микрофронтенды находятся в одном месте, им не нужно загружать общий код и ресурсы при каждом запросе.

Ограничения монорепозиториев:

  • Большой размер репозитория: Монорепозиторий может стать очень большим, если приложение состоит из большого количества микрофронтендов. Это может усложнить управление репозиторием и его обслуживание.
  • Сложность развертывания: Развертывание приложения с использованием монорепозитория может быть более сложным, чем развертывание приложения с использованием традиционной архитектуры. Это связано с тем, что все микрофронтенды необходимо развернуть вместе.

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

Выводы

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

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

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

Список литературы

  1. Шиленков Александр. Объяснение микрофронтендов. URL: https://habr.com/ru/articles/661079/ (дата обращения: 26.09.2023).
  2. Всё о CI/CD. URL: https://unity.com/ru/solutions/what-is-ci-cd (дата обращения: 26.09.2023).
  3. Angular или React: что выбрать в 2023 году. URL: https://worksolutions.ru/useful/angular-ili-react-chto-vybrat/ (дата обращения: 27.09.2023).
  4. DOM-дерево. URL: https://learn.javascript.ru/dom-nodes (дата обращения: 28.09.2023).
  5. Redux. URL: https://ru.hexlet.io/courses/js-redux/lessons/redux/theory_unit (дата обращения: 28.09.2023).
  6. Angular и RxJS. URL: https://angdev.ru/archive/angular9/angular-and-rxjs/ (дата обращения: 28.09.2023).
  7. Понин Ф. Н. Возможности объектно-ориентированного программирования в задачах созданий цифровой экосреды // Актуальные исследования. 2022. №38 (117). С. 20-26. URL: https://apni.ru/article/4637-vozmozhnosti-obektno-orientirovannogo-program (дата обращения: 28.09.2023).
  8. Михельсон О. Ю. Инфраструктура как код: обзор и применение // Актуальные исследования. 2023. №20 (150). Ч.I. С. 57-59. URL: https://apni.ru/article/6228-infrastruktura-kak-kod-obzor-i-primenenie (дата обращения: 28.09.2023).

Поделиться

404

Шогенов А. М. Исследование архитектуры микрофронтенда: инструменты и рекомендации для использования // Актуальные исследования. 2023. №39 (169). Ч.I.С. 24-28. URL: https://apni.ru/article/7083-issledovanie-arkhitekturi-mikrofrontenda

Похожие статьи

Другие статьи из раздела «Информационные технологии»

Все статьи выпуска
Актуальные исследования

#24 (206)

Прием материалов

8 июня - 14 июня

Остался последний день

Размещение PDF-версии журнала

19 июня

Размещение электронной версии статьи

сразу после оплаты

Рассылка печатных экземпляров

28 июня