Всё запускает Docker Compose, и есть один микросервис на NodeJS + express, он, в зависимости от юзер агента, отдает либо мобильную версию, либо десктопную. Мобильная и десктопная версии представленны в виде статических файлов, без серверного рендера.
- Код хранится в папке
/admin/src
, общие компоненты и логика вынесены в папкуsrc
, а каждое конкретное приложение (в данном случае десктоп и мобайл версия) лежат в папкеsrc/apps
, все общие штуки рекомендуется выносить в папкуsrc
, а спецефические для конкретного приложения в папкуapps/APP_NAME
. - Рендер:
React
- Для управления состоянием используется:
mobx
- Все компоненты рекомендуется делать функциональными и использовать хуки, не лениться и оборачивать их в mobx observer, даже если вы не используете данные из mobx внутри них,
observer
меморизует компонент что уменьшает зерно реактивности и ускоряет рендер. - В качестве препроцессора используется
Stylus
, он обратно совместим с css, но позволяет не ставить скобочки, точки с запятой и.т.п. Он используется с библиотекойnib()
, которая добавлет новые css свойстваsize
,absolute top left
и.т.п. Что она конкретно добавляет можно погуглить.
apps
- Приложения (мобильная и компьтерная версия, таблет версия, версия для приставок, версия для старых браузеров и.т.п.)components
- React компонентыcontrollers
- Это DataLayer. Тут хранятся всякие контроллеры, коннстанты, глобальное состоянине mobx, информация о том открыто или закрыто меню и.т.п.filters
- Это фильтры, они используются для преобразования данных при рендере, напримерtoDate()
красиво форматирует дату,toMoney()
добавляет словоруб
в конце и.т.п.graphql
- Тут схема, query и мутации. Схема сама себя не обновляет, интроспекцию делаем пока вручную, выкачивая схему с эндпойнта когда андрей скажет =)hooks
- Хуки, даже если какой-то хук не используется, пусть лежит, пусть будут хуки на все случаи жизни и папка пополняется =)lib
- Всякий хлам который не подошел под другие папки, настройки Apollo, компоненты высшего порядка, index.html шаблон, в общем по хорошему эту папку бы назвать etc, но назвали пока lib =).res
- Картинки, шрифты, звуки, в общем ассеты. Папка res сделана глобальным алиасом в webpack, чтобы к ней легко было получать доступ из стилей напримерbackground-image: url(~res/images/bg.png)
styles
- Глобальные стили, всякие css ресеты, дизайн скроллбаров, шрифты и.т.п. Они применяются сразу ко всем приложениям и автоматически добавляются вебпаком. Например если мы хотим чтобы все h1 имели красный цвет, мы делаем это именно в этой папке, если же мы хотим чтобы h1 были красными только на телефоне, мы делаем это в apps:apps/Mobile/Mobile.styl
. В styles же лежат буквально глобальные штуки, и применяются автоматически к каждому прилжоению, чтобы их в каждое прилжоение вручную не добавлять. Если какой-то фреймворк или либа на React тберует css, добавляем его именно сюда.lib/index.html
Это глобальный шаблон, который применяется для каждого приложения. Именно тут мы подключаем всякие внешние<script>
, яндекс метрики, и всё такое.
server.js
- Это сервер express, он не собсирается вебпаком, и пока толком не настроен, не работает в режиме разработки с вебпаком и.т.п. В общем надо нормально настроить сборку сервера и создать папкуserver
и нормально написать его на тайпскрипте.
- Переписать всё на typescript.
- Добавить авто линтер, едиторконфиг и.т.п. В общем причесать.
- Настроить сборку сервера.
- Добавить webpack миддлвере на express в dev режиме чтобы експресс проксировал на вебпак, при том применяя свои правила роутинга.
- Добавить панель авторизиации.
- Добавить анимации.
- Добавить пагинацию (сейчас её ни где нет).