# Фронтенд

* Клиентское приложение (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 год).

[Назад](/index.md)