50 ФИШЕК ANGULAR ДЛЯ ПРОФИ

0:00 Начало
1:26 Юзать селектор для required поля или {required:true}
3:11 Писать везде модификаторы доступа
4:28 Везде писать readonly
5:22 Отписываться с помощью DestroyService или takeUntilDestroyed
9:04 Фишка с inject чтобы не писать всегда @Self
21:44 Инжект всегда с помощью функции inject
24:50 Standalone компоненты вместо scam
26:52 Любое приложение генерить на NX
29:28 Использовать ngrxLet и ngrxPush
31:15 Следить чтобы каждый Action вызывался только один раз (NgRx)
33:45 Использовать кастомные провайдеры или inject, и убирать логику из компонента
35:58 лучше использовать типы вместо интерфейсов
43:30 Везде юзать тип Readonly
44:28 При объявлении всех объектов и массивов дописывать as const
45:43 Юзать угловые скобки вместо as
46:53 Заменить any на unknown + type guard
50:17 Деление сущностей на DTO, entity, VM
53:45 Написание адаптеров для преобразования
55:20 Использовать smart/dumb компоненты
56:24 Про разницу Enum и const Enum
59:57 Что лучше использовать вместо Enum
1:01:12 Не подписывайтесь через subscribe без надобности
1:02:22 Всегда юзайте {providedIn: ‘forRoot’}
1:03:21 Присваивайте значения полям сразу, а не в конструкторе или ngOnInit
1:05:10 Не стройте архитектур в стиле /services, /components
1:06:20 Если кода больше 300 строк думайте о разделении
1:07:27 Используйте /lazy-load
1:10:02 Юзать или фасады или контейнеры
1:11:31 Использовать компонент стор
1:13:18 trackBy
1:14:20 Отдавать subject как asObservable
1:15:26 Использовать fetch и optimistic updates из nx
1:16:46 Использовать ngOptimizedImg для картинок
1:17:22 Собирать приложение с помощью esbuild или vite
1:18:22 Используйте фрактальную архитектуру
1:21:19 Используйте композицию директив
1:22:58 Пишите всегда private
1:23:46 Удалите cli глобально и юзайте npx
1:25:07 Юзайте source-map-explorer чтобы чекнуть bundle size
1:25:49 Юзайте angular dev tools
1:29:04 Три подхода к shared модулям
1:31:19 Юзайте ngrx вместо самописных сервисов
1:34:05 Добавьте -o чтобы проект сам открывался при сборке
1:34:58 Проекты для изучения angular
1:40:13 Скорее обновляйте Angular до последних версий
1:41:40 Изучайте zoneless - это будущее Angular
1:44:19 Как генерить форму из конфига
1:47:54 Как стартовать приложение с APP_INITIALIZER и не только
1:50:08 Обновляйте Angular через nx migrate
1:51:45 Эффекты могут быть вызваны не только экшенами
1:52:41 Не импортируйте никогда фасад в эффекты
1:54:43 Используйте viewModel для шаблонов
1:56:18 Поймите higher order observables
1:58:36 Поймите виды subjects
2:00:16 Заключение

[shortcuts]

0:42 В angular.json настроить onPush
1:26 Юзать селектор для required поля или {required:true}
3:11 Писать везде модификаторы доступа
4:28 Везде писать readonly
5:22 Отписываться с помощью DestroyService или takeUntilDestroyed
9:04 Фишка с inject чтобы не писать всегда @Self
21:44 Инжект всегда с помощью функции inject
24:50 Standalone компоненты вместо scam
26:52 Любое приложение генерить на NX
29:28 Использовать ngrxLet и ngrxPush
31:15 Следить чтобы каждый Action вызывался только один раз (NgRx)
33:45 Использовать кастомные провайдеры или inject, и убирать логику из компонента
35:58 лучше использовать типы вместо интерфейсов
43:30 Везде юзать тип Readonly<>
44:28 При объявлении всех объектов и массивов дописывать as const
45:43 Юзать угловые скобки вместо as
46:53 Заменить any на unknown + type guard
50:17 Деление сущностей на DTO, entity, VM
53:45 Написание адаптеров для преобразования
55:20 Использовать smart/dumb компоненты
56:24 Про разницу Enum и const Enum
59:57 Что лучше использовать вместо Enum
1:01:12 Не подписывайтесь через subscribe без надобности
1:02:22 Всегда юзайте {providedIn: ‘forRoot’}
1:03:21 Присваивайте значения полям сразу, а не в конструкторе или ngOnInit
1:05:10 Не стройте архитектур в стиле /services, /components
1:06:20 Если кода больше 300 строк думайте о разделении
1:07:27 Используйте /lazy-load
1:08:42 Делать файлы index.ts
1:10:02 Юзать или фасады или контейнеры
1:11:31 Использовать компонент стор
1:13:18 trackBy
1:14:20 Отдавать subject как asObservable
1:15:26 Использовать fetch и optimistic updates из nx
1:16:46 Использовать ngOptimizedImg для картинок
1:17:22 Собирать приложение с помощью esbuild или vite
1:18:22 Используйте фрактальную архитектуру
1:21:19 Используйте композицию директив
1:22:58 Пишите всегда private
1:23:46 Удалите cli глобально и юзайте npx
1:25:07 Юзайте source-map-explorer чтобы чекнуть bundle size
1:25:49 Юзайте angular dev tools
1:29:04 Три подхода к shared модулям
1:31:19 Юзайте ngrx вместо самописных сервисов
1:34:05 Добавьте -o чтобы проект сам открывался при сборке
1:34:58 Проекты для изучения angular
1:40:13 Скорее обновляйте Angular до последних версий
1:41:40 Изучайте zoneless - это будущее Angular
1:44:19 Как генерить форму из конфига
1:47:54 Как стартовать приложение с APP_INITIALIZER и не только
1:50:08 Обновляйте Angular через nx migrate
1:51:45 Эффекты могут быть вызваны не только экшенами
1:52:41 Не импортируйте никогда фасад в эффекты
1:54:43 Используйте viewModel для шаблонов
1:56:18 Поймите higher order observables
1:58:36 Поймите виды subjects
2:00:16 Заключение

[bukanaka]

16. Деление сущностей на DTO, entity, VM - 50:18
17. Написание адаптеров для преобразования - 53:45
18. Использовать smart/dump компоненты - 55:20
19. Про разницу Enum и const Enum - 56:22
20. Что лучше использовать вместо Enum - 59:56
21. Не подписывайтесь через subscribe без надобности - 1:01:10
22. Всегда юзайте {providedIn: ‘forRoot’} - 1:02:22
23. Присваивайте значения полям сразу, а не в конструкторе или ngOnInit - 1:03:20
24. Не стройте архитектур в стиле /services, /components - 1:05:09
25. Если кода больше 300 строк думайте о разделении - 1:06:20
26. Используйте /lazy-load - 1:07:26
27. Делать файлы index.ts - 1:08:40
28. Юзать или фасады или контейнеры - 1:10:00
29. Использовать компонент стор - 1:11:30
30. trackBy - 1:13:18
31. Отдавать subject как asObservable - 1:14:17
32. Использовать fetch и optimistic updates из nx - 1:15:25
33. Использовать ngOptimizedImg для картинок - 1:16:45
34. Собирать приложение с помощью esbuild или vite - 1:17:20
35. Используйте фрактальную архитектуру - 1:18:22
36. Используйте композицию директив - 1:21:19
37. Пишите всегда private - 1:22:56
38. Удалите cli глобально и юзайте npx - 1:23:47
39. Юзайте source-map-explorer чтобы чекнуть bundle size - 1:25:07
40. Юзайте angular dev tools - 1:25:48
41. Три подхода к shared модулям - 1:29:03
42. Юзайте ngrx вместо самописных сервисов - 1:31:18

[bukanaka]

19-я фишка. Иногда, конечно, хочется сразу присвоить, но когда у тебя функция на 10-20 строк или обзёрвабл с пайпой, у которого несколько операторов выглядит неочень чисто среди свойств класса и думаешь, что это место объявления функций, но с другой стороны можешь сразу дописать модификатор readonly.

[alexshubin]

Категорическое спасибо за видео! Пару лет назад не решился юзать NGRX из-за громоздкости кода, делал на NGXS. А на последнем проекте юзал NGRX Signals - и ничего, зашли как родные. Похоже скоро все на сигналах будет, ну кроме запросов с бэка и каких нибудь хитрых обработок пользовательского ввода. А насчет zone-free пока что утопией кажется. Это же сколько надо времени чтобы все разрабы UI переписали на zone-less!

[YusupOzdoyev]

40:24 поэтому у нас в компании принято именовать интерфейсы IUser.

[benchik]

насчет 10 пункта. когда логику переносим из компонента, используя функции inject() -созданный файл get-user.ts будет храниться в папке компонента или это специальная папка (core/utils например). спасибо!

[bukanaka]

14-я фишка. угловые скобки вместо as, вроде, устаревший синтаксис

[vladwolf]

Зачем навязывать NX? Очень специфичный инструмент, который в большинстве не нужен от слова совсем, стандартного CLI более чем достаточно

[benchik]

5) для отписки - если в ngOnInit, т.е. outside of an injection context