MaxmaxmaximusAWS / 4panel

Админ панель

Описание скаффолдинга (каркаса)

Всё запускает 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 и нормально написать его на тайпскрипте.

TODO:

• Переписать всё на typescript.
• Добавить авто линтер, едиторконфиг и.т.п. В общем причесать.
• Настроить сборку сервера.
• Добавить webpack миддлвере на express в dev режиме чтобы експресс проксировал на вебпак, при том применяя свои правила роутинга.
• Добавить панель авторизиации.
• Добавить анимации.
• Добавить пагинацию (сейчас её ни где нет).