фронтенды

Кто этот парень?

Артём Халецкий

Главный разработчик в Иннотех

• other 10 лет опыта;
• пишу на React для веба;
• на React Native для мобилок;
• и на C# .Net Core для бека;
• еще делал OrelJS...

План на сегодня

1. Что такое микрофронтенды?
2. Зачем они нам?
3. Обзор возможных решений
4. Webpack Module Federation
5. Demo
6. Полезные ссылки

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

Зачем они нам?

Если над проектом работает один разработчик или одна команда

НЕЗАЧЕМ

Если параллельно работают
несколько команд, тогда есть плюсы:

• Слабая связанность, как команд так и кода
• Меньше кодовая база - проще поддерживать даже новичкам
• Быстрая сборка и деплой
• Проще тестировать (независимо от других команд)

• Изоляция ошибок - приложение не падает полностью
• Легко делать частичный релиз или проводить A/B тестирование
• Каждый сервис можно писать на разных фреймворках и языках

Есть одно НО, о котором нужно помнить.

У микрофронтендов нет полной изоляции: общий DOM и CSS, события, event loop, адресная строка.

Обзор возможных решений

• iframe
• SSI (Server Side Includes)
• Linked Spa Pages (NextJS Multi Zones)
• Single SPA like Frameworks (Piral, Frint, Ragu)
• Webpack Module Federation
• Что-то своё (долго, дорого, ох... как хорошо)

Webpack Module Federation

Кто использует?

В чем фишка?

• Минимум настроек и бейлерплейта
• Переиспользование общих библиотек
• Lazy-loading модулей
• Сборка прямо в браузере

Диаграммы

Как начать использовать?

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

Remote - микрофронт, который предоставляет модули, но так же как и Host, может подключать модули из других Remote.

Remote config

							
								new webpack.container.ModuleFederationPlugin({
									name: 'app1',
									filename: 'remoteEntry.js',
									exposes: {
										'./Button': './src/components/Button.js',
									},
									shared: {
										react: { singleton: true },
										'react-dom': { singleton: true },
									},
								}),
							
						

Host config

							
								new webpack.container.ModuleFederationPlugin({
									name: 'host',
									remotes: {
										app1: 'app1@http://localhost:3001/remoteEntry.js',
										app2: 'app2@http://localhost:3002/remoteEntry.js',
									},
									shared: {
										react: { singleton: true, eager: true },
										'react-dom': { singleton: true, eager: true },
									},
								}),
							
						

Подключение модуля

							
								import React, { Suspense } from "react";
								const RemoteButton = React.lazy(() => import("app1/Button"));

								const App = () => {
									return (
										
											
										
									)
								}
							
						

Полезные ссылки

Видео про микрофронтенды:

• от Яндекс
• от Тиньков
• от МТС
• на модулях и веб-компонентах
• на Kubernetes

Примеры кода:

• Single SPA
• Webpack Module Federation

Дополнения для Webpack Module Federation:

• CLI для создания приложений
• Dashboard

Альтернативные реализации Module Federation:

• Vite Federation
• Rollup Federation