Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sprint 1 #100

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Prev Previous commit
Next Next commit
закончено обоснование первого задания
  • Loading branch information
Anton Bryzgin committed Dec 5, 2024
commit 0137cc17fe22554c5a5f93d65b128b65930b38ff
95 changes: 95 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -264,4 +264,99 @@
## 6. Стили и их организация
`blocks` — содержит стили компонентов, организованные по методологии БЭМ (Блок, Элемент, Модификатор). Здесь каждая папка соответствует отдельному блоку, а внутри находятся стили этого блока.

# Разбиваем монолитный фронтенд на микрофронтенды
## Выполняем шаги согласно [схеме](https://code.s3.yandex.net/software-architect/Как%20разбить%20монолитный%20фронтенд%20на%20микрофронтенды.pdf)
## 1 этап. Предварительный анализ.
**Оценка сложности и масштаба приложения**

Проект представляет собой фронтенд-приложение "Mesto" на React с функциональностью социальной сети:
- Загрузка фотографий.
- Удаление фотографий.
- Сбор и учёт лайков под фотографиями.
- Создание и редактирование профиля пользователя.
- Аутентификация и авторизация пользователей.
- Отображение списка фотографий от разных пользователей.

Приложение разделено на компоненты, утилиты, контексты и стили, организованные по методологии БЭМ и структурированы в папке `src`.

Приложение имеет умеренную сложность с несколькими ключевыми областями функциональности, но при дальнейшем расширении может стать более сложным для поддержки одной командой.

**Формулирование цели перехода**

- **Цель**: Разделить монолитное фронтенд-приложение на несколько микрофронтендов, чтобы:

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

**Оценка опыта команды**

- **Технический опыт**:

- Команда имеет опыт работы с React и понимает принципы построения компонентной архитектуры.
- Знакома с паттернами проектирования, такими как Domain-Driven Design (DDD).
- Имеет опыт работы с инструментами для реализации микрофронтендов (Single SPA).

## 2 этап. Определение бизнес-функций для разных команд.

Используя стратегию **«Изоляция»**, разделим приложение на микрофронтенды, которые могут существовать и обновляться независимо друг от друга.

1. **Микрофронтенд "Auth"**

- **Функциональность**: Аутентификация и авторизация пользователей.
- **Компоненты и файлы**:
- `Login.js`
- `Register.js`
- `InfoTooltip.js`
- Утилита `auth.js`
- **Маршруты**:
- `/signin` — страница входа.
- `/signup` — страница регистрации.
- **Особенности**: Полная изоляция логики аутентификации, независимость от других частей приложения.

2. **Микрофронтенд "Profile"**

- **Функциональность**: Создание и редактирование профиля пользователя.
- **Компоненты и файлы**:
- `EditProfilePopup.js`
- `EditAvatarPopup.js`
- Контекст `CurrentUserContext.js`
- **Маршруты**:
- `/profile` — страница профиля пользователя.
- **Особенности**: Управление данными пользователя, возможность независимого обновления профиля.

3. **Микрофронтенд "Gallery"**

- **Функциональность**: Загрузка, отображение и управление фотографиями.
- **Компоненты и файлы**:
- `Main.js` (части, связанные с галереей)
- `Card.js`
- `AddPlacePopup.js`
- `ImagePopup.js`
- `PopupWithForm.js`
- Утилита `api.js` (в части, связанной с фото)
- **Маршруты**:
- `/` — главная страница с галереей.
- **Особенности**: Независимое управление фото, возможность обновления без влияния на другие микрофронтенды.

4. **Общие компоненты ("Shared Components")**

- **Функциональность**: Общие элементы интерфейса и стили.
- **Компоненты и файлы**:
- `Header.js`
- `Footer.js`
- Стили из папок `blocks`, `vendor`
- Изображения из папки `images`
- **Особенности**: Общие компоненты могут быть вынесены в отдельный микрофронтенд или библиотеку, доступную всем остальным микрофронтендам.

## 3 этап: Выбор методов реализации, композиции и инструментов для создания микрофронтендов

1. **Метод интеграции микрофронтендов**: **Run time**

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

2. **Метод композиции микрофронтендов**: **Клиентская композиция**

- Используем клиентскую композицию, где браузер отвечает за динамическую загрузку каждого микрофронтенда.
- Инструменты и техники при таком методе композии: **Single SPA**.