Коротко о себе

1. Работаю в Альфе 4 года.
2. В вебе 8 лет. В основном пишу Фронт, но увлекаюсь DevoOps практиками.
3. Преподаю на проекте GetMentor (имел опыт работы в других онлайн школах)

Творчесво

1. DAI - dependency-aging-index - выдаст ошибку если зависимости сильно устарели
2. статьи на medium - иногда пишу заметки
3. web-handbook.ru - список и описание html тегов

Webpack Module Federation

Что будет в докладе?

1. Проблемы фронтенда
2. Что такое микрофронтенды?
3. Существующие решения
4. Описание Module Federation
5. Архитектура Module Federation
6. Демо
7. Проблемы
8. Советы - Полезные ссылки

1. Проблемы фронтенда

Проблемы фронтенда

1. Несколько команд пилят одно большое приложени, что приводит к конфликтам и долгой поставке.
2. Один и тот же компонент нужен в двух приложениях.
3. Вынести в либу можно, но дорого и долго обновлять во всех приложениях.
4. Перезагрузка страницы при переходе между приложениями.
5. Большой размер бандла.

Распиливаем фронт на части

Какие проблемы хотим решить?

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

2. Что такое микрофронтенды?

Для начала что такое микросервисы?

Microfrontends – аналогичный архитектурный паттерн для фронтенда, в котором независимо доставляемые клиентские компоненты в браузер объединяются в единое целое.

⚠️ Но! Зрелость методов и технологий гораздо ниже, чем у микросервисов.

Что дают микрофронтенды?

Упрощение координации задач

– Команды более сфокусированы на своих предметных областях, четкая зона ответственности.

Возможность независимого развертывания

– Позволяет командам быть более автономными.

Сокращение цикла поставки

– Более быстрая сборка и тесты. Как нового функционала, так и исправления ошибок.

Снижение сложности

– Отдельные части меньше и легче для понимания, чем большой сложный монолит.

Изоляция ошибок

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

microservices VS microfrontends

3. Существующие решения

Server Side Fragment Composition

Очень древняя технология когда вебсервер собирает из разных блоков сервисов в единую html.

✔️ SSR

❌ это не SPA

Iframes

• ✔️ работает на клиенте - позволяет вставлять блоки по URL (интерфейсы могут общаться postMessge)
• ❌ боль с модальными окнами
• ❌ проблема выпадающих менюшек
• ❌ проблема SEO для поисковиков
• ❌ проблема с производительностью - одни и теже либы грузятся много раз.

Web Components

Веб стандарт 11-13 годов.

• ✔️ позволяют определять и регистрировать динамические настриваемые элементы в инкапсулированной области.
• ❌ проблема с SSR - вебкомпонеты связаны с DOM API.
• ❌ поможет инкапсулировать компонент, но не помогает сделать единое SPA приложение.

Linked Pages & SPAs

Подход, при котором load-балансировщик согласно адреса страницы отдает то или иное SPA-приложение. На одном адресе только одно приложение.

• ✔️ роутинг внутри SPA-приложения дешевый и быстрый.
• ❌ при таком подходе переход между приложениями будет дорогим для пользователя - потому что приложение перезагрузится и все ресурсы загрузятся полностю

Single-spa

Один из самых популярных фреймворков на данный момент для SPA (since 2016). Тонкий слой оркестровки, который согласно URL запускает тот или иной микрофронтенд, "выключая" предыдущий.

• ✔️ Клеим что хотим – React, Angular, Vue, Svelte
• ❌ Погружаемся в systemjs и мапперы, что-то костылим с подгрузкой ассетов css, fonts, images
• ❌ Одни и те же библиотеки загружаются несколько раз

Свой велосипед

• ✔️ Свобода решений
• ❌ Cвое обычно бывает очень дорогим (время, поддержка, погружение)
• ❌ Одни и те же библиотеки загружаются несколько раз

4. Описание Module Federation

© Module Federation invented and prototyped by Zack Jackson

История появления

История появления

• Ресерч и прототипирование началось в середине 2017
• Первое обсуждение в декабре 2018 github issue #8524
• Первый анонс в виде статьи в октябре 2019 года, medium
• Это "адское" обсуждение в 389 комментов, 61 участник с 7 февраля по 7 октября 2020 issue #10352
• Зарелизили в октябре 2020 как core-плагин к Webpack 5

Module federation позволяет одному Webpack-приложению динамически подгружать код из другого Webpack-приложения.

MF это webpack-plugin, который позволяет импортировать chunk'и из стороннего webpack bundle в рантайме.

Все что может сбандлить Webpack (css, images, fonts, ...) с MF может быть зашарено между микрофронтендами.

Грубо говоря, MF позволяет смерджить в рантайме два Webpack manifest'а. И заставить их работать вместе, как будто вы их скомпилировали с самого начала. (https://webpack.js.org/concepts/manifest/)

✔️ MF может шарить между собой общие зависимости, если совпадает semver.

К примеру если React уже загружен, то он не будет повторно грузиться со стороннего webpack приложения.

✔️ MF могут быть развернуты на разных доменах и деплоиться независимо.

✔️ "Сборка" происходит на лету при запуске приложения в браузере.

Цели приследуемые при разработке MF

• Нет перезагрузкам страниц при переходе между MFE
• Не грузить vendor code, который уже предоставлен другой Webpack-сборкой (например React)
• Каждый MFE может быть standalone (без внешних зависимостей).
• Не нужно пересобирать основное приложение, если поменялся shared-модуль (например навигация)
• Оркестрация должна происходить на стороне пользователя, позволяя загружать чанки без "умного сервера" (чтоб спокойно раздаваться с CDN и не только).

Резюме

• ✔️ у каждого микрофронтенда может быть свой репозиторий
• ✔️ независимые билды и деплои
• ✔️ микрофронтенд может быть запущен как standalone SPA
• ✔️ в браузере всё работает как монолит

5. Архитектура Module Federation

Терминология

• Host - (consumers) – бандл который первый инициализировался во время загрузки страницы (корень)
• Remote - (consumable) – другой бандл, чьи некоторые части может импортировать "host" (лист)
• Omnidirectional host – бандл, который одновременно может быть и "host", и "remote" (внутренний узел)

Terminology

• Exposed modules – модули которые будут доступны другим приложением для импорта
• Shared modules – модули которые могут быть общими для всего приложения (vendor eg React)

Как вебпак резолвит модули и scope?

            
import action from './other-module.js';

var value = action();

export default value;
            
        

            
(function(module, exports, WEBPACK_REQUIRE_METHOD) {
    'use strict';
        
        var action = WEBPACK_REQUIRE_METHOD(1);
        var value = action();
    
        exports.default = value;
});
            
        

            
[
    /* 0 module */
    function() {},
    /* 1 module */
    function() {},
    /* n module */
    function() {}
]
            
        

Архитектура - ссылки

• 🔶 Отличная статья обьяснение как работатет WMF
• 🔶 видео от Зака

6. Демо

Ссылки на репы потренироваться

• 🔶 Host приложение
• 🔶 Remote приложение

7. Проблемы

Проблемы

• ⚠️ возможен vendor lock
• ⚠️ слезы и нервы при разработке/дебаге/поставке
• ⚠️ (С тестированием пока все сложно) Если поменяете интерфейс выставленного модуля, то ваше приложение сломается. Последствия изменений точно такие же, как если бы вы поменяли схему своего REST API
• ⚠️ Можно увлечься и наимпортировать вагон интерфейсов и библиотек
• ⚠️ SSR есть, но он tricky

8. Советы - Полезные ссылки

SSR?

Асинхронный запуск (bootstrap file)

TypeScript

Fallback as npm package

Как готовить шареные модули

Дашбоард

Еще много полезных ссылок

• Module Federation
• ModuleFederationPlugin
• База примеров MF
• Микрофронтенд Книга

Голосование