← Назад ко всем вопросам

Какие подходы к композиции микрофронтов ты знаешь

1️⃣ Как кратко ответить

Существуют три основных подхода к композиции микрофронтов: клиентская композиция, серверная композиция и композиция на уровне CDN. Клиентская композиция выполняется в браузере, серверная — на сервере, а композиция на уровне CDN происходит на уровне сети доставки контента.

2️⃣ Подробное объяснение темы

Микрофронты — это архитектурный подход, который позволяет разбивать фронтенд-приложение на более мелкие, независимые части, которые могут разрабатываться и деплоиться отдельно. Это похоже на микросервисы в бэкенде, но применимо к фронтенду. Композиция микрофронтов — это процесс объединения этих отдельных частей в единое целое. Рассмотрим три основных подхода к композиции микрофронтов.

Клиентская композиция

Клиентская композиция происходит в браузере. Это означает, что различные части приложения загружаются и объединяются на стороне клиента.

  • Преимущества:

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

  • Недостатки:

    • Более длительное время загрузки, так как все части загружаются отдельно.
    • Потенциальные проблемы с производительностью из-за большого количества HTTP-запросов.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Micro Frontends</title>
</head>
<body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
​
    <script>
        // Загрузка и вставка микрофронта для хедера
        fetch('/header.html')
            .then(response => response.text())
            .then(html => document.getElementById('header').innerHTML = html);
​
        // Загрузка и вставка микрофронта для контента
        fetch('/content.html')
            .then(response => response.text())
            .then(html => document.getElementById('content').innerHTML = html);
​
        // Загрузка и вставка микрофронта для футера
        fetch('/footer.html')
            .then(response => response.text())
            .then(html => document.getElementById('footer').innerHTML = html);
    </script>
</body>
</html>

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

Серверная композиция

Серверная композиция происходит на сервере. Сервер объединяет различные части приложения и отправляет их как единое целое в браузер.

  • Преимущества:

    • Более быстрое время загрузки, так как браузер получает уже собранную страницу.
    • Меньше HTTP-запросов, что улучшает производительность.

  • Недостатки:

    • Меньшая гибкость в обновлении отдельных частей.
    • Более сложная серверная логика для объединения частей.

Пример:

const express = require('express');
const app = express();
​
// Серверная логика для объединения микрофронтов
app.get('/', (req, res) => {
    const header = '<div>Header Content</div>';
    const content = '<div>Main Content</div>';
    const footer = '<div>Footer Content</div>';
​
    // Объединение частей в единое HTML-документ
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Micro Frontends</title>
        </head>
        <body>
            ${header}
            ${content}
            ${footer}
        </body>
        </html>
    `);
});
​
app.listen(3000, () => console.log('Server running on http://localhost:3000'));

В этом примере сервер объединяет части приложения и отправляет их в виде единого HTML-документа.

Композиция на уровне CDN

Композиция на уровне CDN происходит на уровне сети доставки контента. CDN может объединять различные части приложения и кэшировать их для более быстрой доставки.

  • Преимущества:

    • Высокая производительность за счет кэширования и географического распределения.
    • Снижение нагрузки на серверы.

  • Недостатки:

    • Сложность настройки и управления.
    • Ограниченная гибкость в динамическом обновлении контента.

Пример:

CDN может использоваться для объединения статических ресурсов, таких как CSS и JavaScript, и их кэширования. Например, с помощью Edge Side Includes (ESI) можно динамически вставлять части контента на уровне CDN.

Каждый из этих подходов имеет свои преимущества и недостатки, и выбор подхода зависит от конкретных требований и ограничений проекта.

Тема: Архитектура, FSD и микрофронтенды
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки