Гайд по архитектуре ​

Данный гайдлайн содержит описание архитектуры и рекомендации по проектированию фронтенда на javascript (typescript) в компании "42 пикселя". Отдельные аспекты архитектуры были рождены внутри компании, отдельные являются общепринятыми в сообществе хорошими практиками.

Помимо документации репозиторий также содержит пример приложения, реализующего все ключевые идеи (см. examples/react).

Демонстрационный пример реализован на стеке React + Effector. Все листинги, приводимые ниже, также содержат код на React.

Для хорошего понимания требуется знание стейт-менеджера Effector.

Демо-приложение ​

Репозиторий с демо-приложением находится по адресу https://github.com/42-px/frontend-architecture

Демо-приложение представляет собой простой непубличный (требуется вход) каталог товаров с возможностью добавления товаров в корзину.

В качестве бэкенда используется миниатюрный мок-сервер (запускается автоматически вместе с webpack-dev-server).

Установка ​

$ git clone https://github.com/42-px/frontend-architecture
$ cd examples/react
$ npm ci
$ cp .env.example .env

Запуск webpack dev server:

$ npm run start

Сборка production-бандла:

$ npm run build

Запуск unit-тестов:

$ npm run test

Данные дла входа ​

42px
123