Frontend

NB: Перед работой необходимо установить хуки гита (выполнить yarn i в корневом проекте).

Инструменты

• Yarn v1.9.4;
• Node v8.11.1 (+ npm v5.6.0);
• Последний WebStorm или Visual Studio Code;

Настройка инструментов

Проект мультиплатформенный (должен работать на Windows, Linux и MacOS без костылей вроде Ubuntu for Windows).

Нужно установить хуки для гита.

Нужно сконфигурировать гит.

На Windows должны быть установлены windows-build-tools.

Нужно отключить safe write в IDE.

В браузере должны быть установлены react-devtools, apollo-client-devtools.

Настройка WebStorm

• Плагины:
  • IDE Settings Sync - синхронизация настроек, специфичных для пользователя;
  • Styled Components;
  • JS GraphQL;
  • .ignore - поддержка .gitignore;
  • Markdown Navigator;
  • Jenkins Control Plugin - работа с Jenkins из IDE;
  • PlantUML integration;
• Managing Tasks and Contexts:
  • Переключение между задачами с сохранением контекста и созданием веток
    • assignee = currentUser() and status in (New, Reopened) or issueKey = ORG-564 or issueKey = ORG-9 or issueKey = ORG-358 order by priority
  • Изменение статуса задач
  • Учет и загрузка времени

Настройка Visual Studio Code

NB: Раздел не завершен.

• Плагины:
  • Graphql. Валидация и подсказки в gql-тегах все равно не работают, ждем развития плагина.

Почему именно эти IDE

NB: Проект еще не настроен для VS Code

• Они больше всего используются в компании, и проект уже настроен для них (так, в WebStorm уже будут включены линтеры и FileWatcher для prettier, а также настроена валидация сообщения коммита).

Скрипты Yarn

Управление пакетами

NB: Необходимо использовать yarn i вместо yarn или yarn install

• yarn i: сокращение для yarn install --frozen-lockfile;
• yarn a: сокращение для yarn add -E -D;
• yarn r: сокращение для yarn remove.

Разработка

• yarn start: установить зависимости, запустить watcher генерации типов apollo, запустить дев-сервер и открыть браузер.
• yarn start:no-install: пропустить установку зависимостей. Использовать, если node_modules не должны изменяться (например, при использовании npm link).
• yarn analyze: Проанализировать собранный для прода бандл.

Сборка

• yarn build: собрать frontend в dist/;
• yarn build:final: также удалить все дев-файлы (запускать перед сборкой frontend-server).

Генераторы

NB: Эти скрипты включены в скрипты разработки и сборки

• generate:apollo: сгенерировать все, связанное с apollo (схему, конфиг для JS GraphQL и типы). Принимает аргумент --watch (только для типов);
• generate:apollo-types: сгенерировать типы apollo. Принимает аргумент --watch.

Prettier

NB: Prettier обрабатывает код перед коммитом.

• prettier:all: форматировать все, что возможно.

Линтеры

NB: Код проверяется перед коммитом.

• lint:js: eslint;
• lint:ts: tslint и tsc (проверка типов);
• lint:css: stylelint.

Процесс написания кода

Используется Hot Module Replacement (HMR), что позволяет писать код и сразу же видеть результат (без перезагрузки страницы). Это работает для компонентов приложения и для reducer'ов. Для остального кода страница автоматически обновится. HMR не работает для кода в конструкторе и декорированных функций (в частности, autobind). В таких случаях надо обновлять страницу вручную.

Используются source maps.

Код фронтенда пишется исключительно на typescript.

Контроль качества кода

Перед коммитом:

• staged-файлы проверяются необходимыми линтерами (tslint, stylelint, eslint);
• staged-файлы обрабатываются prettier;
• все файлы проверяются tsc (типы, неиспользуемые переменные);
• проверяется соответствие yarn.lock и package.json.
• проверяется отсутствие в package.json обычных зависимостей (все должны быть dev).

Это происходит автоматически с помощью хуков гита (lint-staged). В критических ситуациях хуки можно отключить с помощью --no-verify (использовать с осторожностью).

Почему именно так

• Практика показала, что вывод консоли часто игнорируется, и в итоге ошибки нарастают, как снежный ком.
• Линтеры и prettier выполняются только для staged-файлов.
• Предотвращаются бессмысленные коммиты AB-123: Fix linter errors.
• Ошибки можно исправлять, находясь в контексте изменений, которые их вызвали.
• Соответствие yarn.lock и package.json гарантирует, что все зависимости добавляются через yarn.

Назад | Наверх | Внутрь | Далее