Angular Meetup

#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

#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
Тем временем, вышли интересные релизы 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
Крайне полезная статья-шпаргалка + таблица по 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

Angular Meetup pinned a video

Привет! 👋

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

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

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

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

Запись VK | YouTube

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

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

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

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

Тред для вопросов к докладу Анны Ширяевой «Angular: обновить нельзя остаться»

Тред для Бинго

Всем привет!
Мы открываем регистрацию на
Angular Meetup #23 🎉

На митапе обсудим текущее состояние Angular и что нас ждет: сигналы, zoneless, гидратация, 19-я версия и другие вопросы, волнующие разработчиков. Также узнаем, сколько версий фреймворка нужно пропустить, чтобы считать свой проект устаревшим.

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

📆 Ждем 28 ноября в 19:00 в нашей штаб-квартире T-Space!
Если не сможете присутствовать офлайн, присоединяйтесь к онлайн-трансляции.

Регистрация здесь:
https://o.tbank.ru/angular-meetup-23

Messages in this channel will no longer be automatically deleted

Messages in this channel will be automatically deleted after 1 day

Channel created