Docs/docs/frontend/index.md

Фронтенд

• Клиентское приложение (Shop PWA) — интернет-магазин для покупателей. Поддерживает каталог, поиск, карточку товара, корзину, оформление заказа, личный кабинет, отзывы и избранное.
• Административное приложение (Admin PWA) — рабочий инструмент для сотрудников. Предоставляет функции настройки функционала и конфигураций, публикация статей и новостей, модерации отзывов и работы с обращениями клиентов.

Стек

• Проект
  • TypeScript - язык разработки
  • idb - кэширование
  • @ivanlog/gs - фреймворк UI
  • @ivanlog/net - фреймворк API
• Для разработки
  • webpack - упаковка
  • scss - стилевой предпроцессор
  • TS.Codegen.OpenAPIv3ToClientTS - кодогенератор TS API клиента
  • gs.Codegen.Templates - кодогенератор GS UI-шаблонов

Структура решения

В виду большой части общего кода в обоих приложения они имеют общую кодовую базу. Разделение осуществляется через разную точку входа в код.

• frontend
  • templates [папка шаблонизатора gs]
  • site
    • bin [результаты компиляции]
    • htdocs_pm [сборка приложения магазина]
    • htdocs_admin [сборка приложения админки]
    • src [исходники]
      • appAdmin
        • controllers [контроллеры приложения]
        • states [состояния приложения]
        • config.ts [конфигурация приложения, точек доступа]
        • index.ts [точка входа]
        • AppAdmin.ts
      • appProfiMall
        • controllers [контроллеры приложения]
        • states [состояния приложения]
        • config.ts [конфигурация приложения, точек доступа]
        • index.ts [точка входа]
        • AppPM.ts
      • classes [общий код]

Структура кода

Оба приложения имеют схожую структуру, поэтому описание общее.

Код делится на 2 группы:

• общий код (classes).
• уникальный код приложения (app*).

В общий код входит:

• api - кодосгенерированная папка с набором инструментов для работы с Profimoll API OpenAPIv3 (готовый клиент и набор всех моделей для работы с API).
• appControllers - набор абстрактных контроллеров.
• com - кодосгенерированная папка с набором компонентов gs.Templates + их написанные реализации (для переопределенных компонентов).
• enums - перечисления.
• models - общие модели (не API).
• states - абстрактные состояния.
• App.ts - абстратный класс приложения.
• *Tags.ts - перечисления тэгов.
• Helper*.ts - набор хелперов.

В уникальный код входит:

• controllers - набор котроллеров приложения (GUI, корзина, избранное и так далее).
• states - набор состояний приложения, в которых и описана основная бизнес логика по состоянию.
• index.ts - точка входа в программу для компиляции.
• App*.ts - основной класс приложения, в котором проходит инициализация всех уникальных элементов приложения (подробнее см.код).

Нотации

Верстка

• Соблюдать нотации gs для разработки паков.
• Название пака - profimall, сокращение pm

Документирование

• Использование jsdoc - по усмотрению, в случаях отсутсвия строгой типизации.
• Использование понятного наименования, которые позволит корректно читать код и его функционал.
• Обязательные комментарии для сложных блоков кода.

Контроль версий

Используем Git на https://git.ivanlog.ru/

Репозитории:

• gs шаблоны - https://git.ivanlog.ru/ProfiMall/Frontend.Templates
• фронтенд - https://git.ivanlog.ru/ProfiMall/FrontEnd.App

Запрос доступа у ivanlog.

Основная ветка разработки - dev. Каждый разработчик заводит свою ветку по виду dev-имя_разработчика. В ней ведет разработку отдельный фич, после мержит в dev. Основная ветка деплоя - main.

Шаблон версий для публикации vXX.XX.XX

Технические требования

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

Назад