Тред для вопросов к Круглому столу «State of Angular”

Привет! 👋

Мы хотели бы выразить огромную благодарность каждому из вас за участие в прошедшем Angular Meetup #23!
Благодаря вашему энтузиазму, заряженным вопросам, событие было по-настоящему живым.

Сильные выступления спикеров, интересные обсуждения, творческий нетворкинг и наполненная знаниями атмосфера - всё это делает событие отличным опытом для всех нас! 👏

Мы тщательно продумали каждую деталь и очень надеемся, что это было полезным и вдохновляющим для всех вас. Если у вас есть любые отзывы или предложения, пожалуйста, поделитесь с нами. Мы ценим ваше мнение и хотим сделать следующие мероприятия ещё лучше.

И наконец, если вы пропустили часть мероприятия или просто хотите освежить в памяти то, что было на слайдах или в дискуссиях, мы рады поделиться записью митапа:

Запись VK | YouTube

Помните, будучи частью этого сообщества, вы вносите вклад в его рост и развитие. Ещё раз спасибо за вашу активность и наблюдательность!

Оставить заявку для выступления на митапе можно на сайте
ng-meetup.ru

С нетерпением ждём нашей следующей встречи! 🚀

#blog
Крайне полезная статья-шпаргалка + таблица по Signals (составлена до релиза 19, но актуальна)

Reactivity System in Angular
1. Создание Readonly Signals: С помощью asReadonly() или используя computed().
2. Создание Writable Signals: Используется стандартная функция signal().
3. Чтение сигналов: Вызываем сигнал как функцию.
4. Computed Signals: Они отслеживают изменения других сигналов и выполняют вычисления при изменениях.
5. Effects (@developerPreview):
Механизм для отслеживания изменений в сигналах и выполнения побочных эффектов.
Бывают двух видов: Component effects и Root effects
6. Untracked:
Позволяет не отслеживать изменения некоторых сигналов внутри эффекта или вычисления.
7. AfterRenderEffect — @experimental:
Экспериментальный механизм для выполнения эффектов после того, как Angular завершит рендеринг компонента.
8. LinkedSignal — @developerPreview:
Представляет собой сигнал, который зависит от другого сигнала и сбрасывает своё значение, если изменяется исходный сигнал.
9. Resource API - @experimental:
API для работы с асинхронными данными, помогает интегрировать ресурсы с системой сигналов.

Authoring
- Signal Based Inputs: С Angular 17.1 можно использовать сигналы вместо стандартных @Input() для данных.
- Two-way Data Binding with Model Input (17.2): Новый подход для двухсторонней привязки данных через model().
- Signal Queries (17.2): Новый способ работы с запросами данных в Angular, используя сигналы вместо @ViewChild() и @ContentChild().
- Output API (17.3): Новый API для работы с событиями и выходными данными, автоматически очищает подписки.

Интеграция Angular Signals и RxJS (@angular/core/rxjs-interop)
Основные методы и утилиты
1. toSignal() — Преобразует Observable в Signal.
2. toObservable() — Преобразует Signal в Observable.
3. outputFromObservable() — Генерирует output() из Observable.
4. outputToObservable() — Преобразует output() в Observable.
5. takeUntilDestroyed() — Завершает подписку на Observable при уничтожении компонента или сервиса.
6. pendingUntilEvent() (@experimental) — Блокирует выполнение приложения до завершения Observable.
7. rxResource() (@experimental) — Использует Observable в качестве загрузчика данных вместо Promise.

Утилиты из ngxtensions
Одной из наиболее полезных утилит является derivedAsync(), которая позволяет реагировать на изменения Signal и выполнять асинхронные операции, такие как запросы к API


Статья - https://www.codigotipado.com/p/angular-signals-cheatsheet

#blog
Тем временем, вышли интересные релизы Chrome - 131 и 132.
Знаковое то, что в 131 появилась новая экспериментальная панель Ai assistance.
В ней используется чат-бот Google Gemini.

В 131 внедрили поддержку чата по CSS.
Можно выделить элемент и задать вопросы по его верстке, что в нем нужно изменить чтобы он показывался так как вам нужно.
AI сама изучит контекст его применения, верстку и предложит решение уже на этих данных.

В 132 появилась поддержка общения по сетевым запросам, исходным файлах и трассировок производительности. Gemini также примет во внимание контекст выбранного запроса, файла или действия и даст соответствующий ответ.

К сожалению, в аккаунтах Google с регионом Россия, данный функционал не поддерживаются.

https://developer.chrome.com/blog/new-in-devtools-131?hl=ru#ai-assistance
https://developer.chrome.com/blog/new-in-devtools-132?hl=ru

#blog
Пора уже заниматься подведением итогов года, и сегодня предлагаю посмотреть очень стильно оформленную статью от ChromeDev о ключевых улучшениях в CSS за 2024 год. Если тезисно пройтись по списку, получим следующее:

1. Анимации и переходы:
- Cross-Document View Transitions: анимации между страницами без необходимости превращать сайт в SPA.
- Анимация до height: auto: плавные анимации для элементов с авто-высотой с помощью interpolate-size и calc-size().

2. Интерактивные компоненты:
- Акордеоны на базе `<details>`: эксклюзивные аккордеоны с атрибутом name, чтобы при открытии одного элемента закрывались другие.
- Стилизованные <details> элементы: возможность кастомизировать <details> и <summary> с помощью display и псевдо-элемента ::details-content.
- Anchor Positioning: новый способ позиционирования элементов относительно других без сторонних библиотек через position-anchor и position-area.

3. UI-паттерны:
- Стилизация полос прокрутки: настройка ширины и цвета полос прокрутки через scrollbar-width и scrollbar-color.
- Scroll-driven Animations: анимации, синхронизированные с прокруткой страницы.
- Scroll Snap Events: новые события scrollsnapchange и scrollsnapchanging для более точного контроля за элементами при скролле.

4. Улучшения для разработчиков:
- Унаследование для ::backdrop: ::backdrop теперь наследует стили от родительских элементов, улучшая работу с модальными окнами.
- Функция light-dark(): позволяет легко адаптировать стили для светлой и темной темы.
- Регистрация свойств с @property: создание кастомных свойств с указанием типа и начального значения для использования в анимациях.
- Popover API: создание всплывающих окон с встроенной функциональностью закрытия и фокусировки.
- Эффекты при старте c @starting-style: задавайте начальные стили элементов для анимаций при их появлении.

5. Другие улучшения:
- Поддержка линейного разрыва текста в <ruby>: улучшенное выравнивание текста с аннотациями Ruby.
- Контроль порядка рисования текста с paint-order: настройка порядка рисования текста и обводки для улучшения визуальных эффектов.

Статья - https://chrome.dev/css-wrapped-2024/#paint-order

#blog Наш коллега из TaigaUI (Александр Инкин) поделился опытом применения редко используемого свойства Angular - hostDirectives.

hostDirectives появилось в Angular 15.
Оно позволяет навесить несколько директив на компонент или директиву, причем это делается внутри TypeScript класса.

Как и у любого решения, у него есть свои минусы.

В данной статье Александр приводит примеры того, как использовать силу данного инструмента и как устранить его недостатки.

Читаем статью и ставим +1 )

https://habr.com/ru/companies/tbank/articles/867276/
https://angular.dev/guide/directives/directive-composition-api

Мы в Т-Банк следим за развитием веб технологий.
На днях вышел итог State of JS 2024.
Мы даже проводим его аналог внутри нашего JS сообщества)

Результаты State of JS 2024 вы можете посмотреть по ссылке, а в комментариях - то, что нас заинтересовало в его итогах.
https://2024.stateofjs.com/en-US/

#blog
Сегодня предлагаю прочитать статью, в которой рассматриваются основные способы улучшения Core Web Vitals — показателей, влияющих на пользовательский опыт. Приведены рекомендации, которые легко применить большинству разработчиков:

1. Взаимодействие со следующей отрисовкой (INP)
Чтобы улучшить INP, важно разбивать длительные задачи на более мелкие, например с помощью Scheduler API.

2. Минимизация JavaScript
Избегайте ненужного кода, используйте разделение кода, чтобы сначала загружать только те скрипты, которые необходимы для рендеринга страницы.

3. Оптимизация рендеринга
Минимизируйте операции с DOM, используйте CSS для ленивого рендеринга скрытых элементов, а также уменьшайте размер DOM.

4. Ускорение загрузки контента (LCP)
Чтобы ускорить LCP, используйте атрибут fetchpriority для изображений, избегайте использования lazy-loading для критичных ресурсов и предзагружайте ресурсы через preload.

5. Мгновенная навигация
Используйте предварительную загрузку страниц или кэш назад/вперед.

6. Использование CDN для оптимизации TTFB
Чтобы сократить время до первого байта (TTFB), разверните контент как можно ближе к пользователям с помощью CDN.

7. Сдвиг макета
Задавайте размеры для всех изображений и элементов. Для динамичного контента используйте min-height или aspect-ratio.

Хотя оптимизация производительности может быть сложной задачей, применение базовых и наиболее эффективных рекомендаций — это первый шаг к значительному улучшению работы сайта. Сосредоточьтесь на том, что даст наибольший эффект для вашего пользователя, и результаты не заставят себя ждать!

Полный текст - https://habr.com/ru/companies/timeweb/articles/860574/

#blog
Если после новогодних праздников Вы обнаружили, что написанный в конце декабря код не работает - не беда! Почитаем статью, которая раскрывает несколько полезных инструментов для отладки фронтенда. Кратко о том, что в ней есть:
- debugger в JavaScript — один из мощных инструментов для отладки. Вместо того, чтобы просто выводить ошибки в консоль, можно использовать ключевое слово debugger, чтобы сразу остановить выполнение на нужной строке кода.
- Отладка через консоль — современные браузеры позволяют запускать отладчик прямо из консоли. Например, с помощью команды debug(functionName).
- Брейкпоинты на DOM-элементах — в Chrome и Firefox можно ставить брейкпоинты на изменениях DOM. Это полезно, когда проблемы возникают из-за манипуляций с элементами на странице.
- XHR-брейкпоинты — иногда сложно понять, какой именно запрос вызвал ошибку, особенно в крупных приложениях. Используя XHR-брейкпоинты, можно установить фильтры по подстроке в URI и отслеживать, когда происходят определенные сетевые запросы.
- Эмуляция различных условий — Chrome и Firefox предлагают инструменты для имитации разных условий, например, изменяя user agent, геолокацию или ориентацию устройства.
- Отладка CSS и HTML — инспектор элементов позволяет в реальном времени изменять DOM и стили, что помогает быстро находить и исправлять баги. Особое внимание стоит уделить проблемам с специфичностью CSS-селекторов.

Статья - https://debugagent.com/front-end-debugging-part-1-not-just-console-log

#blog
Функция Type Stripping в Node.js теперь доступна по умолчанию

Функция Type Stripping, с помощью которой можно запускать код на TypeScript без дополнительной конфигурации, теперь доступна по умолчанию. Type Stripping можно найти в версии Node.js 23.6.0, в ближайшее время команда проекта выпустит стабильный релиз.

Впервые функция Type Stripping появилась в августе 2024 года. Она удаляет из кода типовые аннотации и заменяет их на пробелы. Благодаря этому структура кода проекта не меняется, а разработчики могут не использовать source maps. Кроме того, можно полностью отказаться от сторонних решений, которые часто конфликтуют с Node.js и другими инструментами.

Уже сейчас Type Stripping можно попробовать с помощью флага --experimental-strip-types в Node.js 23.6.0.

Статья - https://satanacchio.hashnode.dev/everything-you-need-to-know-about-nodejs-type-stripping

#blog Новая статья от наших ребят о работе Playwright.
На этот раз описывается опыт применения fixtures.
Это специальные функции или объекты, которые помогают подготовить необходимое окружение для тестов.

В них есть куча настроек, например:
- fixtures сами по себе заменяют beforeEach и afterEach;
- можно использовать цепочки fixtures.

В какой-то степени это аналог Cypress.Commands, если он вам ближе.
Фича, конечно, полезная.
https://habr.com/ru/companies/tbank/articles/877292/

#blog
Короткая, но интересная новость: последний релиз Angular, 19.2.0-next.0, представляет поддержку неотмеченных строковых литералов в выражениях, что значительно улучшает гибкость темплейтов.
Ключевые варианты использования:
- Динамическое содержимое:

<p>Сообщение: {{ `Привет, ${name} - ${value} }}</p>

- Динамические классы:

<p class="{{ `foo-${postfix} }}">Пользовательский класс</p>
<p [class]=foo-${postfix}>Пользовательский класс</p>

- Интерполяции с несколькими выражениями:

<p>С интерполяциями: {{ `Привет ${name}, сейчас ${timeOfDay}! }}</p>

- Пайпы и строковые литералы:

<p>С пайпом: {{ `hello ${name} | uppercase }}</p>

- Динамические URL:

<img [src]="${base}/600x400`" />

- Циклы со строковыми литералами:

@for(n of [1,2,3]; track $index) {<br>  <button [attr.data-id]=${n}-button>{{ `Нажми ${n} }}</button>
}

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

Статья - https://medium.com/netanelbasal/enhancing-angular-templates-with-untagged-template-literals-0baa5b4f8371

#blog Вышел TypeScript 5.8 Beta
Можно выделить новую возможность - Conditional Type Checking.
Ее суть в том, что функция, в зависимости от своего аргумента, может определять возвращаемый тип.

type QuickPickReturn<S extends SelectionKind> = S extends SelectionKind.Multiple ? string[] : string;
async function showQuickPick<S extends SelectionKind>(
    selectionKind: S,
): Promise<QuickPickReturn<S>> {
    // ...
}

Пример

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-5-8-beta/

#blog
Сегодня предлагаю посмотреть очередную часть цикла статей про неочевидные фишки в CSS. О чем повествуют в этот раз:

- Псевдо-класс :not() с множеством условий:
Можно использовать псевдо-класс :not() с несколькими селекторами, разделёнными запятыми. Это позволяет задавать более сложные условия выбора элементов.

- Псевдо-класс :has() и логические операторы:
Псевдо-класс :has() позволяет применять стили к родительскому элементу на основе наличия определённых дочерних элементов. Можно использовать несколько :has() для создания логических операторов И (AND) и ИЛИ (OR).

- Повышение специфичности с помощью :has():
Псевдо-класс :has() может повышать специфичность CSS-правил, что полезно в случаях, когда нужно переопределить стили с более высокой специфичностью без изменения основного селектора.

- Свойство user-select для выделения текста:
Свойство user-select позволяет контролировать, как пользователи могут выделять текст на веб-странице. Значение all позволяет выделять весь элемент, включая его содержимое и теги.

Статья - https://habr.com/ru/companies/ruvds/articles/873348/

#blog
ESLint теперь официально поддерживает линтинг CSS. Из основных моментов:
- Встроенные правила (no-duplicate-imports, no-empty-blocks, no-invalid-at-rules, no-invalid-properties, require-baseline, use-layers)
- Поддержка алгоритма восстановления ошибок (режим tolerant)
- Поддержка пользовательского синтаксиса (опция customSyntax: at-rules, properties, types)
- Создание пользовательских правил (используя CSSTree AST формат)

Статья - https://eslint.org/blog/2025/02/eslint-css-support/

#blog
Вышел новый релиз Angular 19.2
Что можно выделить:
- Поддержка TypeScript 5.8, писали про него выше
- Дефолтное значение в resource()
- Новое свойство ресурса stream, которое позволяет возвращать несколько значений.
- Новая экспериментальная функция httpResource

https://github.com/angular/angular/releases/tag/19.2.0

#blog В Angular 19 появился новый экспериментальный эффект afterRenderEffect.
Он совмещает в себе effect и хук afterRender.
Эта штука срабатывает когда зависимый сигнал помечен как грязный, либо завершился цикл рендеринга .
По контракту он выглядит так же как и afterRender, только еще можно отслеживать изменения сигнала.

C его помощью можно разделить работу на изменение и чтение DOM , что позволяет браузеру поднять производительность рендеринга.
Подробнее в статье.
https://angular.love/get-to-know-the-afterrendereffect

#blog Команда TypeScript анонсировала порт компилятора и инструментов на Go.
Это позволяет достичь десятикратного прироста производительности, что даст:
- Предоставлять мгновенные, исчерпывающие списки ошибок по всему проекту;
- Поддерживать более продвинутые рефакторинги и обеспечивать более глубокие знания, которые ранее были слишком дороги для вычисления;
- В 8 раз улучшает время загрузки проекта;
- Позволит следующему поколению инструментов. ИИ улучшить разработку.

Данный порт выйдет в версии TypeScript 7 (native)
Версия JS будет развиваться вплоть до 6.x
https://devblogs.microsoft.com/typenoscript/typenoscript-native-port/

#blog
В Chrome 135 добавлена поддержка CSS-свойства appearance: base-select.
Что это даёт:
- Позволяет стилизовать элемент <select> без потери a11y и стандартных функций.
- Изменяет парсер HTML и внутренние состояния <select>.
- Минималистичный дизайн, оптимизированный для кастомизации.
- Дропдаун с опциями отображается в верхнем слое, как popover.
- Позиционирование опций с помощью anchor().
- Теперь можно вставлять изображения, SVG и другие HTML-элементы в <option> (в браузерах, которые это поддерживают).
- Все части base-select можно заменять, стилизовать и анимировать.
- Существующие взаимодействия с <select> остаются без изменений.

Статья - https://developer.chrome.com/blog/a-customizable-select?hl=en

#blog
Сегодня предлагаю посмотреть статью, посвященную использованию CSS-свойства content-visibility для ускорения рендеринга веб-страниц. Основные тезисы:

- Что такое CSS Containment?
CSS Containment позволяет указать браузеру, какие части страницы независимы, что помогает браузеру принимать умные решения о рендеринге.

.container {
contain: style layout paint;
}

- Как работает content-visibility?
Свойство content-visibility указывает браузеру пропускать рендеринг невидимого контента, тем самым экономить время обработки.

- Значения content-visibility
visible: Стандартное поведение.
hidden: Контент скрыт, но состояние рендеринга сохраняется.
auto: Контент рендерится только при необходимости.

- Когда использовать content-visibility?
Для контента ниже области просмотра.
Для самодостаточных элементов.
Для контента с высокой стоимостью рендеринга.

- Когда не использовать content-visibility?
Для видимого контента.
Для небольших элементов с минимальной стоимостью рендеринга.
Для элементов, влияющих на макет страницы.

- Использование contain-intrinsic-size
Позволяет указать плейсхолдерный размер для отложенного контента.

.content-section {
content-visibility: auto;
contain-intrinsic-size: auto 600px; /* Ширина и высота плейсхолдера */
}

- Понимание свойства contain
Значение content-visibility: auto применяет style containment, layout containment и paint containment.

.container {
contain: style layout paint;
}

- Поддержка браузерами
Поддерживается всеми современными браузерами, но Firefox и Safari могут иметь особенности.

Статья - https://www.debugbear.com/blog/content-visibility-api
Официальная документация MDN по content-visibility - https://developer.mozilla.org/ru/docs/Web/CSS/content-visibility