Правила хорошего тона на Angular

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

0.1 Ограничения на длину файлов: 300 (исключая импорты). Если выходит больше - разбивать и использовать импортирование.

0.1.1 Ограничение на длину метода: 150 строк.

0.2 Читабельность важна: вложенность кода - не более 4 пунктов (Flat is better than nested), включая функциональную вложенность. Лучше используйте цепочки вызовов.

0.3 Не повторяйтесь. Код должен быть реюзабельным - то есть путем импортирования, а не путем копирования.

0.4 Ваш случай не настолько особенный, чтобы нарушать эти правила (Special cases aren't special enough to break the rules).

0.5 Пишите декларативный код. Не совмещайте императивный код и декларативный в одном файле.

0.6 Простой код лучше комплексного (принцип KISS)

  1. Вёрстка: 1.1 Использовать Bootstrap - подход к верстке должен быть один. 1.2 Вложенность внутри вёрстки не должна превышать 4 блока в худшем случае, в среднем 3 (повышает читабельность).

1.3 Angular шаблоны делить на: Smart и Dumb, то есть те, что используют логику и те, что только отрисовывают (и при этом стратегия обновления OnPush)

1.4 SASS лучше BEM - использовать вложенность SASS, помимо его остальных инструментов.

1.5 Использовать HTML для структуры, CSS для отображения.

1.6 Перезатирающие стили должны быть расположены в папке styles/override/*, например override-mat-btn.scss (не использовать ng-deep)

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

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

1.9 Пользуйтесь покомпонентами Angular Material.

  1. Angular

    2.1 Использовать деления на императивные и декларативные сервисы - те, что делают низкоуровневый код и те, что пользуются методами из низкоуровневой (императивной) службы.

    2.2 Вложенность кода в шаблоне, .scss и .ts файлах - не должна превышать 4-й степени.

    2.3 Измените префикс проекта в angular.json

    2.4 Пишите реюзабельные компоненты.

    2.5 Пользуйтесь резолверами.

    2.6 Мутируйте данные стрима только в пайпе.

    2.7 Модули должны лежать внутри app.

    2.8 Роуты отдельного модуля должны регистрироваться в этом модуле при помощи RouterModule.forChild

    2.9 Структура модуля на примере:

    auth/components <= для компонентов
    auth/layouts <= для комопнентов-страниц
    auth/utils <= directives, pipes, resolvers, guards
    auth/services <= для служб

    2.10 Компоненты layout именовать auth-layout.component.html, они же dumb компоненты.

  2. NgRx - желателен (очень).

3.1 NgRx debug tools позволят отследить все изменения данных.

  1. RxJS:

    4.1 Концепций всё есть stream$ - запрещено использовать subscribe (вместо этого использовать пайп async);
    setInterval заменить на пайп interval, timer, использовать пайпы перенаправления стримов.

  2. Автотесты перед коммитом.

  3. Явное лучше неявного.

    ngOnInit(){} => public ngOnInit(): void

  4. Интерфейсы должны быть читабельными - AuthResponseInterface, не public getUser(): .{name: string}

  5. Пользоваться дженериками.

  6. Минимум (а то и запретить) any в pull request.

  7. Об API:

  • API должно быть гибким.

  • Данные должны быть разделены на чанки.

  1. Расширяйте код при помощи прототипизирвоания.

  2. Использовать lodash - огромное множество методов (сортировка, обработчики, фильтры, цепочки), которые упростят разработку и повысят читабельность кода, вместо того, чтобы думать как, будем думать что.

  3. Использовать monent.js для обработки дат внутри сервисов.

  4. Git 14.0 Git Flow

    14.1 Коммиты должны быть атомарными

  5. Использовать JSDoc помимо четкого наименования свойств и методов.

Источник: https://habr.com/ru/articles/793432/


Интересные статьи

Интересные статьи

В этой статье мы поговорим о создании компонентов динамически, шаг за шагом пройдем этот путь. Помимо простого создания компонентов, мы поговорим о более продвинутых вещах, которые можно сделать в рам...
Практически в каждой компании есть корпоративная система поощрений. Но вот как прописать для неё правила, да ещё и на Битриксе, — вопрос. Делюсь личным опытом.Привет! Я full-stack веб-разработчик в IB...
Поговорим о новом (уже старом) способе управления директивами в Angular
В JavaScript мы часто используем сущности, вроде window, navigator, requestAnimationFrame или location. Некоторые из этих объектов существуют испокон веков, некоторые явл...
Spelunky 2, к сожалению, так и не вышла в 2019 году, да и дату релиза в 2020 еще не объявили. Если вы не играли в первую часть, предлагаю вам пока ознакомиться с этим примером хорошего гейм-дизай...