Правила хорошего тона на Angular13.02.2024 14:45

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:

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

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

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

4. Git 14.0 Git Flow

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

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

© Habrahabr.ru