clean architecture front end
1.0.0
Здравствуйте, вот репозиторий, чтобы отправить вам мое видение чистой архитектуры (сначала спереди, затем на спине) в разных версиях.
Я написал статью, чтобы поддержать примеры этого проекта: https://www.hexa-web.fr/blog/hexagonal-architecture-front-end, чтобы понять чистую архитектуру, вы также можете прочитать мою статью о инверсии зависимости в Front-indersion-wornt-frontsion-wornt-frontsion-web.
Для этих примеров я решил использовать Next.js на основе React, но весь смысл этой архитектуры заключается в том, чтобы использовать его независимо от используемых структур и библиотек (внешние зависимости).
Чтобы получить простой пример, я выбрал простой предмет: список TODO!
Чтобы увидеть задачи, которые еще необходимо выполнить в проекте, перейдите в файл /докса/todo.md
Если у вас есть какие -либо вопросы, предложения или что -то еще, не стесняйтесь обращаться ко мне! И если этот репозиторий помог вам, рассмотрите возможность поделиться им со своими знакомыми.
Во -первых, установите зависимости:
npm install
# or
yarn install-
Затем запустите сервер разработки:
npm run dev
# or
yarn devОткройте http: // localhost: 3000 с вашим браузером, чтобы увидеть результат.
-
Чтобы начать модульные тесты:
jest-
Чтобы проверить приложение онлайн: https://front-end-clean-architecture.netlify.app/
Гексагональная архитектура или архитектура, основанная на портах и адаптерах, представляет собой архитектурный шаблон, используемый в области дизайна программного обеспечения. Он направлен на создание систем на основе компонентов приложений, которые слабо связаны и которые могут быть легко подключены к их программной среде с помощью портов и адаптеров. Эти компоненты являются модульными и взаимозаменяемыми, что усиливает согласованность обработки и облегчает автоматизацию тестов.
В чистой архитектуре есть три части: часть применения (основные порты и адаптеры), домен (варианты использования, модели доменов и т. Д.) И часть инфраструктуры (вторичные порты и адаптеры).
Эта архитектура основана на шаблоне порта / адаптера и принципе инверсии зависимости.
Документируя вас на чистую архитектуру (или шестигранную архитектуру). Вы найдете разные имена для этих частей. Имена, выбранные здесь, являются личными, цель - то, что они понятны.
Использование случаев определяет действия ваших пользователей. Цель состоит не в том, чтобы использовать какую -либо структуру или библиотеки в этих элементах (чтобы держать логику, не связанную с этими инструментами).
На фронте они могут быть представлены функцией, классом, написанным в JS или TS. При React можно использовать Redux для этой части.
В случае использования Redux, действия-это CASES, состояние является одной из моделей, и селекторы используются для картирования.
Основной порт используется для установления договора между первичным адаптером и вариантами использования. Для этого может быть создан интерфейс. На практике вариант использования также считается основным портом.
Затем реализация этих интерфейсов используется для диалога с доменом: первое - это то, что мы называем первичными адаптерами. Их цель - вызвать выполнение вариантов использования. Например, на передней части эти адаптеры могут быть компонентами React, которые выполняют триггеры действие (Redux или нет).
Вторичный порт используется для установления контракта между вторичным адаптером и вариантами использования. Для этого мы обычно создаем интерфейс. Этот интерфейс используется непосредственно в варианте использования.
Советы: Вы можете использовать инъекцию зависимостей для этого, некоторые библиотеки управления государством позволяют вам сделать это. Например, с помощью Redux-Thunk и Redux, подлежащего поддержке, можно передать «экстраргументы», которые будут непосредственно доступны в действиях Redux. В «ванили» также есть инверсификация.
Вторая реализация интерфейсов (портов) называется вторичными адаптерами. Они называются вариантами использования. Например, впереди эти адаптеры могут быть HTTP-запросами, доступ к данным, присутствующим в локальном хранилище и т. Д.
По-английски :
По -французски:
