Туториал
Часть 1. На бумаге
В этом руководстве мы рассмотрим приложение Real World App, также известное как Conduit. Conduit является упрощённым клоном Medium — он позволяет вам читать и писать статьи в блогах, а также комментировать статьи других людей.
Это довольно небольшое приложение, поэтому мы не станем сильно усложнять разработку излишней декомпозици ей. Вероятнее всего, что всё приложение поместится в три слоя: App, Pages и Shared. Если нет, будем вводить дополнительные слои по ходу. Готовы?
Начните с перечисления страниц
Если мы посмотрим на скриншот выше, мы можем предположить, что по крайней мере, есть следующие страницы:
- Домашняя (лента статей)
- Войти и зарегистрироваться
- Просмотр статей
- Редактор статей
- Просмотр профилей людей
- Редактор профиля (настройки)
Каждая из этих страниц станет отдельным слайсом на слое Pages. Вспомните из обзора, что слайсы — это просто папки внутри слоев, а слои — это просто папки с заранее определенными названиями, например, pages
.
Таким образом, наша папка Pages будет выглядеть так:
📂 pages/
📁 feed/ (лента)
📁 sign-in/ (войти/зарегистрироваться)
📁 article-read/ (просмотр статей)
📁 article-edit/ (редактор статей)
📁 profile/ (профиль)
📁 settings/ (настройки)
Ключевое отличие Feature-Sliced Design от произвольной структуры кода заключается в том, что страницы не могут зависеть друг от друга. То есть одна страница не может импортировать код с другой страницы. Это связано с правилом импорта для слоёв:
Модуль в слайсе может импортировать другие слайсы только в том случае, если они расположены на слоях строго ниже.
В этом случае страница является слайсом, поэтому модули (файлы) внутри этой страницы могут импортировать код только из слоев ниже, а не из других страниц.
Пристальный взгляд на ленту
На странице ленты есть три динамических области:
- Ссылки для логина, показывающие статус авторизации
- Список тэгов, фильтрующих ленту
- Одна—две ленты статей, у каждой статьи кнопка лайка
Ссылки для логина — часть заголовка, общего для всех страниц, так что пока что отложим их.