Задание

Ревью

Сдача проектной работы 1 спринта

В этом уроке вам предстоит сдать проектную работу первого спринта. Здесь вы найдёте описание заданий и форму, в которую нужно отправить ответ. Она появится после нажатия на кнопку «Сдать работу» в конце страницы.

Желаем приятной работы!

Задание 1

Вам нужно разделить проект Mesto на несколько микрофронтендов. Самостоятельно решите, какой фреймворк будете использовать, — Module Federation или Single SPA.

Функциональность Mesto

Загрузка фотографий

Удаление фотографий

Сбор и учёт лайков под фото

Создание профиля и его редактирование

Репозиторий Mesto

🔹 Вот ссылка на репозиторий проекта:
https://github.com/Yandex-Practicum/architecture-sprint-1

Если захотите исследовать бэкенд Mesto, вам пригодятся такие инструменты:

IDE,
Postman,
MongoDB + Compass.

Что нужно сделать

Решение этой задачи состоит из трёх уровней детализации: проектирования, планирования изменений, запуска готового кода.

Уровень 1. Проектирование

Выберите фреймворк для создания микрофронтендов и опишите решение в удобном вам виде.

Уровень 2. Планирование изменений

Предоставьте структуру кода и обоснуйте своё решение в Readme.md. Вы можете создать необходимые проекты, добавить в них подкаталоги для контролов и логики, разложить код исходного проекта по ним, но запускать проекты не нужно.

Главное — верно определить, какие компоненты в какой микрофронтенд пойдут.

Уровень 3. Запуск готового кода

Настройте маршрутизацию и убедитесь, что все компоненты работают корректно.

⚠️ Чтобы вашу работу приняли, вам нужно реализовать первые два уровня. Они обязательны.

Третий уровень решения — опционален. Вы можете реализовать его, если знакомы с React или хотите глубже погрузиться в тему. На сдачу работы его отсутствие не повлияет.

Как работать над заданием

Создайте репозиторий по шаблону https://github.com/Yandex-Practicum/architecture-sprint-1.
Создайте в Git ветку sprint_1. В ней вы будете выполнять задания.
Внесите необходимые изменения, создайте и заполните файл Readme.md, сделайте пул-реквест.
Сделать второе задание и добавить ссылку на решение в файл Readme.md.
Когда сделаете оба задания проекта и опишете свои решения в Readme.md, отправьте ссылку на пул-реквест в форму для отправки задания.

Вставьте ссылку на пул-реквест во вкладке «Ревью»

А теперь — подробнее о том, что именно вам нужно сделать.

1. Детально ознакомьтесь с кодом проекта

Структура проекта:

Посмотрите, как организованы директории и файлы в проекте.
Обратите внимание на ключевые директории, такие как src, components, styles, utils.

Компоненты и модули:

Найдите основные компоненты проекта и посмотрите, как они организованы.
Обратите внимание на компоненты высшего уровня — например, App.js. Посмотрите, как они взаимодействуют с дочерними компонентами.

Маршрутизация:

Проверьте, как настроены маршруты в проекте.
Посмотрите, какие страницы и компоненты связаны с определёнными маршрутами.

Зависимости проекта:

Проверьте файл package.json, чтобы узнать, какие библиотеки (а также их версии) и пакеты используются в проекте.
Обратите внимание на библиотеки, которые управляют состояниями.

Утилиты и вспомогательные функции:

Найдите файлы с утилитами и вспомогательными функциями — например, utils.js.
Посмотрите, как эти утилиты используются в компонентах и какие общие функции они выполняют.

Стили и их организация:

Проверьте, как организованы стили в проекте.
Обратите внимание на файлы стилей, которые могут быть связаны с конкретными компонентами.

Документируйте ваши наблюдения. Создайте краткую схему, где вы опишете основные компоненты, их функции и связи.

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

2. Разделите проект на микрофронтенды и выберите паттерн декомпозиции

Чтобы в будущем проект могли развивать несколько независимых команд, декомпозируйте фронтенд проекта.

На уровне 1:

Ознакомьтесь с документацией и особенностями подходов Single SPA и Webpack Module Federation. Выберите тот подход, который, на ваш взгляд, более уместен. Используйте его для интеграции микрофронтендов с основным приложением.

На уровне 2:

Создайте новые структуры проекта для каждого микрофронтенда. Например:

JSX

/auth-microfrontend
  /src
    /components
      Login.js               // Компонент входа пользователя
      Register.js            // Компонент регистрации пользователя
    /styles
      login.css              // Стили для компонента входа
      register.css           // Стили для компонента регистрации
    /utils
      auth.js                // Утилиты для аутентификации
    index.js                 // Точка входа микрофронтенда
  package.json               // Зависимости и скрипты микрофронтенда
  webpack.config.js
/profile-microfrontend
  ...

Перенесите выбранные компоненты, стили и утилиты в соответствующие новые структуры.
Создайте и заполните Readme.md с описанием проекта. Опишите там компоненты, модули и запуск. А ещё обоснуйте своё решение — напишите, почему использовали именно этот подход и разделили фронтенд на такие микрофронтенды.

На уровне 3:

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

На что будет смотреть ревьюер

Ревьюер не примет работу, если она не будет соответствовать требованиям.

Для первых двух уровней решения требования такие:

Репозиторий с решением публичный. Перед отправкой убедитесь, что репозиторий в вашем GitHub публичный. Иначе ревьюер не сможет проверить работу.
В работе нет вопросов к ревьюеру по условиям задания. Если у вас возникнут вопросы по проектной работе, обратитесь к наставнику в Пачке — он вам поможет. Ревьюер проверяет уже готовое решение.
Если вы повторно отправляете проект на ревью, вы исправили замечания ревьюера с прошлой проверки.

Для третьего уровня решения есть дополнительные требования:

При открытии index.html в консоли возникают ошибки.
Ошибки при выполнении команд npm run build и npm run start.

Задание 2

В этом задании вам нужно декомпозировать веб-приложения на Django на микросервисы. Кодить не придётся: в этот раз вы будете работать в онлайн-редакторе draw.io.

🔹 Мы подготовили схему архитектуры монолитного решения

Вам нужно разбить её на сервисы, используя подход Domain-Driven Design.

А теперь — обо всём по порядку.

1. Запустите draw.io

Откройте редактор draw.io. Можете работать с ним онлайн или установить приложение.

2. Откройте файл со схемой в draw.io и изучите решение

Внимательно исследуйте архитектуру решения:

прочитайте легенду и комментарии,
посмотрите, какие архитектурные объекты описаны,

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

Это поможет вам на этапе проектирования.

3. Разделите монолит на компоненты

Определите явные предметные области монолитного веб-приложения на основе функций, потоков данных и самих объектов данных. Создайте новую страницу в draw.io и предложите там решение по декомпозиции.

4. Опишите каждый компонент

В сопроводительном описании своего декомпозированного решения опишите каждый компонент — добавьте короткое описание его задач и функций. Например, что делает этот сервис и какие данные он обрабатывает.

5. Добавьте на схему межсервисные взаимодействия

Покажите, как микросервисы будут взаимодействовать друг с другом. Используйте стрелки для обозначения потоков данных между сервисами. Например:

На что обратить внимание

Мы не ограничиваем вас в количестве новых объектов на диаграмме.

Главное — выделяйте границы новых объектов красным цветом. Новые потоки данных также окрасьте в красный. Вот так:

В итоге все компоненты, которые вы добавили в рамках декомпозиции, должны выделяться на схеме.

На что будет смотреть ревьюер

Весь документ с решением оформлен в едином стиле.
У нового решения есть подробное описание. Вы можете добавить его прямо в draw.io отдельной сноской.
Все потоки данных пронумерованы и описаны отдельной сноской. Например, так:

JSX

Поток 5. Запрос статуса операции.

JSX

Поток 6. Уведомление об отмене операции.

Как сдать работу

Решите оба задания. Опишите свои решения в файле Readme.md.

Описание проекта Mesto с вашей разбивкой на микрофронтенды — описание компонентов, модулей и запуска.
Ссылку на draw.io, где вы решили второе задание.

Вставьте ссылку на пул-реквест во вкладке «Ревью».

После того как отправите ссылку, не вносите изменения в проект (ни в sprint_1, ни в схему в draw.io, ни в файл Readme.md). Сдайте проект и дождитесь комментариев ревьюера.