Angular ESLint больше не страшно

Как же я люблю статические анализаторы кода и результат их работы: порядок в коде, форматирование, отсортированные импорты, единообразие в порядке ключей объектов (да, и такое люблю!) и много чего еще.
Но как же я не люблю все это настраивать. Да, конфиги более-менее повторяются, но все равно приходится что-то допиливать руками.
А с новым flat-конфигом ESLint я до сих пор не подружился — использовал настройку по наитию, и пока все работает. Меня очень спасает ESLint Config Inspector, но умеет работать только с flat-конфигами. В общем, настройка проекта для меня — это всегда маленькая паника. 😳

Для страдающих, хороший стартовый ESLint шаблон: NG Best Practices: Prettier & ESLint

Для Angular есть отдельный пакет angular-eslint, который предоставляет специфичные для фреймворка правила — отдельно для шаблонов и для TypeScript-компонентов.
В Nx уже есть базовая преднастройка angular-eslint с рекомендованными правилами. Но и здесь иногда нужно, или даже приходится, подкрутить гайки: добавить или убрать какое-то правило. И тогда приходится лезть в репозиторий angular-eslint и внимательно читать, что за что отвечает и какие настройки есть. Максимально фрустрирующе! ☔️

Господи, мои молитвы были услышаны — ребята из Angular Courses выпустили новый инструмент: GUI для настройки ESLint под Angular.
Правила разбиты на группы: общие, компоненты, Typescript, RxJS и т.д. Можно выбрать нужные чекбоксы или просто нажать кнопку «Сделать все по красоте» aka «Выбрать все».
Для каждого правила есть сниппеты кода, показывающие, как оно работает. А еще — значок, указывающий, что правило рекомендовано официальным style guide’ом.
На выходе можно экспортировать конфиг в виде markdown-файла с примерами кода (например, чтобы вставить в вики проекта) или сразу как готовый .eslint.config.js.

Все, вот так просто! 🕺
Конфигуратор пока еще в альфа версии, будем следить за обновлениями. Пожалуй, мой самый любимый инструмент среди разрастающегося тулинга Angular. Хотелось бы все настраивать таким образом, но пока это мечты.

🌟 Настроить Angular ESLint

@summon_the_coder | chat$.subscribe()

#angular #eslint #bestpractice

Angular 21 - Http клиент поселился в root

Мы молились и прочитали все молитвы дважды, попутно стерев все колени, и наконец-то в 21 версии Angular не нужно будет из коробки провайдить HttpClient в настройках приложения. Клиент будет использовать root-инжектор по умолчанию и попадать в бандл, когда нам это нужно: при inject(HttpClient) или использовании httpResource. Ручное добавление провайдера останется для случаев, когда нужно что-то настроить: переключить на fetch, докинуть интерцептор и т.д.
Никогда не понимал этой особенности с ручным провайдером для клиента, иными словами где вы видели фронтенд без запросов к серверу?

🔘 Подсмотрел новость здесь.
🔘 Закрытый pull request с фичей.
🔘 Полюбоваться кодом клиента с root-инжектором.

@summon_the_coder | chat$.subscribe()

#angular #httpclient

Бумеры на месте?

В конце 2024 года команда Angular открыла RFC для обсуждения обновленного стайлгайда. Один из пунктов предлагает отказаться от суффиксов в названиях файлов и классов. То есть вместо привычных .component, .service, .pipe, .directive рекомендовано использовать осмысленные имена файлов. А в классах убрать «Component/Service/Directive» и писать просто App, Home и т. п. Идея команды - сконцентрироваться на «говорящих» именах, условный user.service.ts действительно не дает полного понимания того, что именно делает класс (и да, отчасти это правда).
Предложение ожидаемо вызвало недоумение у разработчиков, которые много лет работают с Angular и привыкли к устоявшимся соглашениям.

Я сам недавно вплотную столкнулся с новым неймингом: стартовал пару боевых проектов и сделал несколько учебных демок на Angular 20. Первые впечатления - даже немного радостно: имена короче, standalone-компоненты можно создавать без участия CLI, сделал button.ts, и готово. Раньше, конечно, тоже можно было, но «соглашение — есть соглашение».

Однако как только в проектах начала разрастаться бизнес-логика, а сервисы и директивы множиться, пришли первые сомнения. Над именами уже приходилось думать и «напрягать макушку». В голове возникло два рабочих и очевидных варианта:

1️⃣ внутри модуля/фичи выделять слайсы (читай директории) и тонко работать с импортами, чтобы избегать коллизий имен (прощай flat структура)

2️⃣ вносить в имя файла роль/назначение сущности, чтобы оно было по-настоящему осмысленным (прямо по заветам RFC)

С первым пунктом вопросов нет, это обычный рабочий флоу во многих современных проектах. Со вторым же пунктом пришлось повозиться и заглушить привычки, чтобы начать писать именно нормальный нейминг, а не скатываться в привычные *.service.ts файлы.

Для тех, кто пока не готов отходить от наработанных паттернов, есть путь попроще. Можно настроить схематики, чтобы новые сущности создавались по старому шаблону, с привычными суффиксами и именованием классов.

{
   "@schematics/angular:component": { "type": "component" },
   "@schematics/angular:directive": { "type": "directive" },
   "@schematics/angular:service": { "type": "service" },
   "@schematics/angular:guard": { "typeSeparator": "." },
   "@schematics/angular:interceptor": { "typeSeparator": "." },
   "@schematics/angular:module": { "typeSeparator": "." },
   "@schematics/angular:pipe": { "typeSeparator": "." },
   "@schematics/angular:resolver": { "typeSeparator": "." }
}

Ну а для совсем ленивых, ну то есть для всех разработчиков (хе-хе), есть пакет с забавным названием ngx-boomer, который добавляет настройки для схематиков автоматически. Запускаем без установки через npx и сидим кряхтим, что раньше было лучше! Ведь было же!?

🌟 вернуть все как было

@summon_the_coder | chat$.subscribe()

#angular #styleguide #schematics

Находчивое напряжение или Остроумный саспенс (перевод by AI)

На gitnation.com вышел доклад Minko Gechev, техлида в Google, где он сравнивает подходы к отложенной загрузке, префетчингу и гидрации компонентов в Angular (Deferrable Views) и React (Suspense).
Главная мысль — не существует «хороших» или «плохих» технологий — есть те, что быстрее, удобнее и дешевле решают именно вашу задачу, нужно найти подходящий компромисс. Поэтому не стоит строго «играть» за одну команду, пробуйте больше инструментов и подходов, чтобы находить лучшее решение под конкретный контекст. Особенно актуальна эта мысль в эру ИИ, когда технологии можно щупать без каких либо проблем.
Ну а где код получился декларативнее и понятнее, спойлерить не буду. 👋

▶️ смотреть доклад "Resourceful Suspense"

@summon_the_coder | chat$.subscribe()

#angular #react #deferrableviews

🚨 Alert! 20 (двадцать!) дней до митапа

Осень, как обычно, богата на различные мероприятия — конференции, митапы, сходки. А еще есть основная работа, работа в эдтехе, сторонние проекты, чуть-чуть менторства. И во всем этом круговороте нужно еще и пожить успеть, и про себя не забывать.
Но одно предстоящее мероприятие — самое-самое. И именно подготовка к нему забирает почти все силы и время. Сделать интересный, технически дотошный и просто нескучный доклад это целая наука (кто бы знал да). Для большинства спикеров это будет «самый первый раз», поэтому мы вмногером практически каждую неделю делаем прогоны, делимся мнениями и стараемся конструктивно предлагать улучшения.

Немного приоткрою завесу над своим докладом — «Сигналы в Angular». Из названия не совсем понятно, а что там еще можно рассказать про сигналы? Кажется, все уже и так все знают. Тем более, название пока в статусе черновика, но, чувствую, таким оно и доедет до митапа. 🙈
Моя главная цель — донести до слушателей идею о том, что сигналы — это не просто очередная модная игрушка для разработчиков, а сдвиг устоявшихся парадигм, новый способ мыслить о данных. Я расскажу, с чего все начиналось, к чему пришло, какие бонусы и какие трейд-оффы мы получили. Будет очень интерестинг!
Если сомнения еще одолевают, а 21 ноября в календаре является свободным слотом и намекает на какую-нибудь активность, то выход есть: Centi Conf.

Буду рад всех видеть и пообщаться лично! ❤️

🌟 купить билет и поднять уровень в одиночку знаний

P.S. А еще 20 ноября будет мероприятие (возможно и сразу релиз) про 21 версию angular. Так что на митапе можно будет обсудить наисвежайшие новости.

@summon_the_coder | chat$.subscribe()

#angular #meetup #centiconf