Webpack 5 Module Federation — Зак Джексон — CityJS Conf 2020

В течение многих лет мы не могли использовать или совместно использовать модули из других автономных приложений. Ближайшим вариантом были внешние модули или DLL-плагины. Оба варианта не масштабируемы и неустойчивы в крупномасштабных системах. Те, кто создавал микрофронтенд-стеки, вероятно, понимают эти проблемы. Представляем Module Federation — функцию, которую я добавил в Webpack 5. Она позволяет импортировать код так же, как и в монолитной системе. Никаких накладных расходов, никаких сложностей в освоении и никаких существенных отклонений от стандартных инженерных практик. Мы создали универсальную систему для разработчиков, позволяющую использовать модули других приложений во время выполнения. Будь то сервер или клиент. Эта архитектура считается революционной для JavaScript и изменит подход к разработке приложений в будущем. Биография Главный инженер, специализирующийся на масштабируемой архитектуре распределенных приложений Главы / Отрывки: Начало [00:00:00] Введение [00:00:40] Таким образом, Module Federation призвана решить некоторые проблемы, существующие в индустрии JavaScript в целом. Контекст о федерации модулей [00:02:48] Допустим, у нас есть приложение, которое выглядит примерно так. Допустим, каждая часть этих квадратов — это отдельное федеративное приложение, или даже просто цвета отображаются отдельно. Существующие варианты [00:06:54] У нас есть нативный ESM. Некоторые преимущества заключаются в том, что нет необходимости в сборке для связывания частей, кодирование выполняется нативно, но с другой стороны, нет очистки кода (tree shaking). Это работает только с ESM. Следующий шаг в архитектуре JavaScript [00:10:07] Итак, мы искали что-то с хорошей репутацией, производительностью сборки, хорошей производительностью веб-приложений и решением для совместного использования зависимостей. Терминология [00:10:35] Давайте разберемся с терминологией: федерация модулей — по сути, она есть. Название происходит от Graph QL Federation от Apollo. Что такое федерация модулей [00:16:30] Итак, что такое федерация модулей? Что именно? Она позволяет нам импортировать код из других сборок во время выполнения, мы можем динамически обмениваться кодом сторонних разработчиков во время выполнения. Пример [00:19:23] Итак, давайте рассмотрим более подробный пример. Допустим, у нас есть команда AB и некоторые зависимости. Подробный анализ плагина контейнера [00:26:56] Да. Давайте немного углубимся в наш плагин контейнера. Он предоставляет модули, которые он, по сути, создает, а также предоставляет модули, которые... Пример в масштабе [00:32:36] Я также могу использовать выпадающее меню «Импорт из», и я могу просто использовать его как обычный синхронный модуль. Демонстрационное видео [00:33:34] Прикладная архитектура [00:35:05] Итак, прикладная архитектура: где или что мы можем в итоге федеративно объединить? Другой пример [00:35:38] Децентрализованная маршрутизация [00:38:29] Итак, это делается с помощью федеративной оболочки. Несовместимость с Webpack [00:40:41] Панель управления федерацией [00:41:12] Узнать больше [00:42:25] Вопросы и ответы [00:43:17] _________________________________________________________________ О Pusher Sessions: Мы переносим встречи разработчиков к вам. С помощью Sessions вы можете смотреть записи лучших докладов с встреч разработчиков — где угодно и когда угодно. Встречи — это отличный способ учиться у коллег и быть в курсе последних тенденций и технологий. Будучи сами разработчиками, мы в Pusher хотели предоставить этот замечательный контент большему количеству людей… Поэтому мы создали Sessions. На Sessions вы можете посмотреть интересующие вас доклады и подписаться на уведомления о добавлении нового контента. Если вы организуете встречу и хотите принять участие, пожалуйста, свяжитесь с нами. _________________________________________________________________ О Pusher: Pusher — это хостинг-сервис с API, инструментами для разработчиков и библиотеками с открытым исходным кодом, которые значительно упрощают интеграцию функциональности в реальном времени в веб- и мобильные приложения. Pusher автоматически масштабируется по мере необходимости, избавляя от всех сложностей настройки и поддержки безопасной инфраструктуры реального времени. Pusher уже пользуется доверием тысяч разработчиков и компаний, таких как GitHub, MailChimp, Financial Times, Buffer и многих других. Начать работу можно всего за несколько секунд: просто зайдите на pusher.com и создайте бесплатный аккаунт. Удачного программирования!