Всем привет!
Мы открываем регистрацию на
Angular Meetup #23 🎉
На митапе обсудим текущее состояние Angular и что нас ждет: сигналы, zoneless, гидратация, 19-я версия и другие вопросы, волнующие разработчиков. Также узнаем, сколько версий фреймворка нужно пропустить, чтобы считать свой проект устаревшим.
В конце вас ждет афтепати в лучших традициях: настолки, задачи на написание кода и неформальный нетворкинг с единомышленниками.
📆 Ждем 28 ноября в 19:00 в нашей штаб-квартире T-Space!
Если не сможете присутствовать офлайн, присоединяйтесь к онлайн-трансляции.
Регистрация здесь:
https://o.tbank.ru/angular-meetup-23
Мы открываем регистрацию на
Angular Meetup #23 🎉
На митапе обсудим текущее состояние Angular и что нас ждет: сигналы, zoneless, гидратация, 19-я версия и другие вопросы, волнующие разработчиков. Также узнаем, сколько версий фреймворка нужно пропустить, чтобы считать свой проект устаревшим.
В конце вас ждет афтепати в лучших традициях: настолки, задачи на написание кода и неформальный нетворкинг с единомышленниками.
📆 Ждем 28 ноября в 19:00 в нашей штаб-квартире T-Space!
Если не сможете присутствовать офлайн, присоединяйтесь к онлайн-трансляции.
Регистрация здесь:
https://o.tbank.ru/angular-meetup-23
🔥5
Тред для вопросов к докладу Анны Ширяевой «Angular: обновить нельзя остаться»
Forwarded from Pavel Kondakov
This media is not supported in your browser
VIEW IN TELEGRAM
Привет! 👋
Мы хотели бы выразить огромную благодарность каждому из вас за участие в прошедшем Angular Meetup #23!
Благодаря вашему энтузиазму, заряженным вопросам, событие было по-настоящему живым.
Сильные выступления спикеров, интересные обсуждения, творческий нетворкинг и наполненная знаниями атмосфера - всё это делает событие отличным опытом для всех нас! 👏
Мы тщательно продумали каждую деталь и очень надеемся, что это было полезным и вдохновляющим для всех вас. Если у вас есть любые отзывы или предложения, пожалуйста, поделитесь с нами. Мы ценим ваше мнение и хотим сделать следующие мероприятия ещё лучше.
И наконец, если вы пропустили часть мероприятия или просто хотите освежить в памяти то, что было на слайдах или в дискуссиях, мы рады поделиться записью митапа:
Запись VK | YouTube
Помните, будучи частью этого сообщества, вы вносите вклад в его рост и развитие. Ещё раз спасибо за вашу активность и наблюдательность!
Оставить заявку для выступления на митапе можно на сайте
ng-meetup.ru
С нетерпением ждём нашей следующей встречи! 🚀
Мы хотели бы выразить огромную благодарность каждому из вас за участие в прошедшем Angular Meetup #23!
Благодаря вашему энтузиазму, заряженным вопросам, событие было по-настоящему живым.
Сильные выступления спикеров, интересные обсуждения, творческий нетворкинг и наполненная знаниями атмосфера - всё это делает событие отличным опытом для всех нас! 👏
Мы тщательно продумали каждую деталь и очень надеемся, что это было полезным и вдохновляющим для всех вас. Если у вас есть любые отзывы или предложения, пожалуйста, поделитесь с нами. Мы ценим ваше мнение и хотим сделать следующие мероприятия ещё лучше.
И наконец, если вы пропустили часть мероприятия или просто хотите освежить в памяти то, что было на слайдах или в дискуссиях, мы рады поделиться записью митапа:
Запись VK | YouTube
Помните, будучи частью этого сообщества, вы вносите вклад в его рост и развитие. Ещё раз спасибо за вашу активность и наблюдательность!
Оставить заявку для выступления на митапе можно на сайте
ng-meetup.ru
С нетерпением ждём нашей следующей встречи! 🚀
🔥7❤1🏆1
#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
Основные методы и утилиты
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
Крайне полезная статья-шпаргалка + таблица по 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
Codigotipado
Essential Angular Signals Cheatsheet: Boost Your Daily Productivity
This is a full guide about Angular Signals. You can check it everytime you need something about Signals. Take it as your daily check list because soon or later your company will tell you to migrate.
🔥10
#blog
Тем временем, вышли интересные релизы Chrome - 131 и 132.
Знаковое то, что в 131 появилась новая экспериментальная панель
В ней используется чат-бот 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
Тем временем, вышли интересные релизы 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
Chrome for Developers
Что нового в DevTools, Chrome 131 | Blog | Chrome for Developers
Отлаживайте CSS с помощью Gemini, комментируйте результаты и получайте ценную информацию на панели «Производительность», выявляйте чрезмерные сдвиги макета и некомпонованную анимацию и многое другое.
🔥6