Рекомендации по архитектуре front-end проектов на Vue.js

Стандарты написания кода

Принципы проектирования

Использовать общепринятые принципы проектирования кода:

• Clean Code
• DRY
• KISS
• YAGNI
• SOLID

Статический анализ и форматирование

Для предотвращения ошибок в коде использовать линтеры:

• CommitLint (пример конфигурации)
• ESLint (пример конфигурации)
• HTMLLint (пример конфигурации)
• MarkdownLint (пример конфигурации)
• NPMLint (пример конфигурации)
• Stylelint (пример конфигурации)

Стандартизировать код-стайл:

• Prettier (пример конфигурации)

Пример пакета, объединяющего в себе все вышеперечисленные линтеры: lint-kit.

Поддержка браузеров

Для явного указания поддерживаемых браузеров использовать Browserslist.

Пример конфигурации .browserslistrc:

> 5%

last 3 years

not Baidu > 0
not Explorer > 0
not KaiOS > 0
not OperaMini all
not UCAndroid > 0
not dead

Предпочитаемые технологии

Общее

• TypeScript - типизированный ЯП

• Nuxt.js - фреймворк для разработки универсальных приложений

  Полезные расширения для nuxt:

  • apollo
  • auth
  • axios
  • content
  • i18n
  • image
  • sitemap

  Официальный список расширений:

  • modules.nuxtjs.org

Работа с API

• Apollo Client - REST/GQL клиент
  • apollo-link-rest - расширение Apollo для работы с REST API

либо

• Vue Query - библиотека для работы с асинхронными данными во Vue

Тестирование

• Vitest - юнит-тестирование

Файловая архитектура проекта

Исходники хранятся в директории src и группируются по слоям.

Пример структуры:

[scripts] # npm скрипты (.sh)
[src]
    [api] # слой работы с API
    [assets] # ресурсы используемые при компиляции
    [components] # компоненты
    [layouts] # шаблоны страниц
    [locales] # словари локализации
    [middleware] # функции выполняемые перед переходом по страницам
    [pages] # страницы
    [plugins] # плагины Vue.js и их конфиги
    [router] # маршрутизатор
    [static] # статические ресурсы (robots.txt, иконки и т.д)
    [store] # модули состояния приложения
    [utils] # утилиты
...конфиги

Нейминг папок и файлов - kebab-case.

Компоненты

Файловая архитектура

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

Пример:

[components]
    [my-component]
        my-component.component.vue # код компонента
        my-component.interfaces.ts # интерфейсы
        my-component.spec.ts # тесты
        my-component.store.ts # локальный стор
        ...
        index.ts # экспорт компонента, констант, интерфейсов и т.д.
        [components]
            [my-component-partial] # дочерний компонент
                my-component-partial.component.vue # код компонента
                ...
                index.ts # экспорт
        [images]
            logo.svg # изображение, уникальное для текущего компонента (my-component)
            ...
    [my-another-component]
    ...

Этот же принцип применяется и к остальным слоям - utils, plugins и т.д.

Синтаксис

Применять script setup.

Стилизация

• Инкапсуляция: Scoped CSS либо CSS Modules
• BEM - методология Yandex для построения масштабируемых интерфейсов (1 компонент - 1 блок)
• SCSS - CSS препроцессор
• При разработке кастомного UI-кита использовать Open Props

Применение фреймворков типа Bootstrap, Tailwind и т.д. крайне нежелательно.

API

Разделение по сущностям с принципом 1 файл - 1 метод. Пример:

[api]
    [user]
        get-user.query.gql
        update-user.mutation.gql
    [auth]
        check-auth.query.gql
        ...
    index.ts # экспорт API-методов

Хранилище данных

Использовать Pinia.

Рекомендуется использовать стор только в случае крайней необходимости, все стандартные взаимодействия между компонентами решать основным способом: параметры вниз / события наверх, provide / inject, слоты и т.д.

Локализация

Стандартный пакет Vue I18n.

Структура файлов локализации плоская, имена ключей в CONSTANT_CASE с префиксом, пример:

{
  "I18N_GOODBYE": "Пока",
  "I18N_HELLO": "Привет"
}

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

Работу с ветками репозитория осуществлять по модели GitFlow, для коммитов использовать стандарт Conventional Commits.

Перед коммитом автоматически выполнять проверку кода линтерами на наличие ошибок.