Описание проектной работы 1 спринта

В этом уроке вы познакомитесь с проектной работой первого спринта. Это поможет вам оценить её сложность и распланировать своё время.
В проектной работе вас ждёт два задания:
  • В первом задании вы декомпозируете монолитный фронтенд реального проекта. Вам нужно будет выбрать фреймворк для создания микрофронтендов, реализовать своё решение и обосновать его.
  • Второе задание будет посвящено декомпозиции монолитного бэкенда. С помощью draw.io вы проанализируете архитектуру монолита и разделите его на микросервисы.
🔍 Обратите внимание: вам не нужно выполнять эти задания прямо сейчас.
В конце спринта будет ещё один урок с проектной работой. Там мы повторим описание заданий, а ещё дадим форму, куда нужно отправить ваши решения.
Мы предлагаем вам посмотреть на задания заранее, чтобы вы могли распланировать своё время. Но делать это необязательно. Если вы хотите сначала изучить теорию, пропустите этот урок и переходите к следующему.

Задание 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 или хотите глубже погрузиться в тему. На сдачу работы его отсутствие не повлияет.

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

Когда начнёте работать над заданием, вам нужно будет:
  1. Создать репозиторий по шаблону https://github.com/Yandex-Practicum/architecture-sprint-1.
  2. Создать в Git ветку sprint_1. В ней вы будете выполнять задания.
  3. Внести необходимые изменения, создать и заполнить файл Readme.md, сделать пул-реквест.
  4. Сделать второе задание и добавить ссылку на решение в файл Readme.md.
  5. Отправить ссылку на пул-реквест в форму для отправки задания.
Форма будет в конце спринта — в уроке «Проектная работа первого спринта». Она выглядит так:
А теперь — подробнее о том, что вам нужно сделать в первом задании.

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, что реализовали все три уровня решения.
Если вы не работали с React, но хотите реализовать третий уровень
Освоение новых технологий требует много времени и даётся непросто. Но это важный навык для специалистов, которые работают с архитектурой ПО. Многие вещи приходится изучать с нуля уже в процессе работы над задачей.
Мы разработали рекомендации, которые помогут вам выполнить задание на уровне запуска кода.

1. Изучите Quick Start для React и туториал по Module Federation

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

2. Разработайте прототип

На основе изученных технологий можно сделать небольшой прототип приложения. Например, простой бэкенд-сервис или UI, который предназначен для авторизации пользователей.
Можете взять и какой-то другой знакомый пример. Главное, чтобы вы хорошо знали предметную область и могли реализовать базовый вариант прототипа за пару вечеров. Так вам не придётся тратить время на выдумывание бизнес-требований. Вы сможете сфокусироваться на новой технологии.
💡 Такой подход позволит быстро понять границы применимости технологии и основные проблемы, которые могут встретиться на пути. Ещё так вы сможете сравнить новую технологию с уже известными вам.

3. Если технология подходит, примените её в реальной жизни

В нашем случае «примените в реальной жизни» означает «теперь вы готовы, можете решить задание на третьем уровне детализации».
Мы рекомендуем выполнять работу таким способом:
  1. Сделайте пару простых проектов с контролами-заглушками. Необязательно делать что-то сложное, можно сделать простой контрол с текстовым полем и контрол для вывода введённого текста. Затем свяжите эти проекты и убедитесь, что они работают так, как нужно. Так вы сможете настроить конфигурации с минимальным влиянием ошибок в коде.
  2. Сделайте промежуточный Commit. Если что-то пойдёт не так, вам будет проще вернуться к рабочему состоянию проекта.
  3. Шаг за шагом добавляйте в эти проекты код и контролы из репозитория задания. В процессе наполнения вам придётся создавать новые проекты для новых микрофронтендов. При этом пригодится промежуточный Commit. Вы можете копировать из него нужный проект с новым именем, менять настройки и добавлять его к решению. Это упростит первоначальную настройку новых проектов.
Либо вы можете сделать сразу две копии проекта из репозитория задания, добавить в них библиотеки, которые нужны Module Federation, и дальше дорабатывать решение на этой основе. Но мы не рекомендуем этот подход, если у вас нет опыта работы с React. Этот путь может оказаться более трудным из-за имеющихся зависимостей.

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

Ревьюер не примет работу, если она не будет соответствовать требованиям.
Для первых двух уровней решения требования такие:
  • Репозиторий с решением публичный. Перед отправкой убедитесь, что репозиторий в вашем 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. Разделите монолит на компоненты, используя подход Domain-Driven Design

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

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

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

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

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

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

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

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

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

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

Решите оба задания. Опишите свои решения в файле Readme.md.
🔍 Файл должен содержать:
  1. Описание проекта Mesto с вашей разбивкой на микрофронтенды — описание компонентов, модулей и запуска.
  2. Ссылку на draw.io, где вы решили второе задание.
Вставьте ссылку на пул-реквест во вкладке «Ревью» в уроке «Сдача проектной работы 1 спринта».