Микрофронтенды. Стабильная интеграция нескольких SPA-приложений. Часть 1

Значимый прорыв формирует отрасль ИИ: InfoWatch 19 минут назад Микрофронтенды. Стабильная интеграция нескольких SPA-приложений. Часть 1 Средний 7 мин 627 Блог компании InfoWatch Веб-разработка * JavaScript * Информационная безопасность * IT-инфраструктура * Туториал Привет, Хабр!

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

Технические детали

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

Но при этом все их нужно было интегрировать в единый UI. В то время про микрофронтенды говорили не так активно (да вообще почти не говорили), так что каких-то устойчивых паттернов на эту тему практически не было. Так что мы написали своё решение — платформу, базовое приложение, которое несёт в себе общий функционал, необходимый всем нашим продуктам.

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

Отраслевые последствия

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

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

js с основным core и vendor. js с Angular и прочими нашими внешними библиотеками. Bootstrap-модуль в рантайме загружал vendor.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.