🦊 Angular Fox 🚀 — русскогорящие новости сообщества

✨ Невероятно гибкие и переиспользуемые UI контролы

Часто встречаются случаи когда необходимо дать возможность кастомизировать контрол при этом не расширяя его изначальное API.

Александ Скоропад поделится своим подходом к созданию UI контролов который позволяет их создавать за считанные минуты.

👉 https://habr.com/ru/articles/772136/

✨ Анонс нового сайта документации

В конце этой недели будет выпущен Angular v17, включающий множество нововведений. В связи с этим был представлен Angular.dev.

Он содержит новые учебные пособия, обновленную документацию и рекомендации.

👉 https://blog.angular.io/announcing-angular-dev-1e1205fa3039

✨ Специальное мероприятие

В последнее время команда Angular усердно работала над некоторыми особенными обновлениями.

Через несколько часов пройдет презентация, на которой можно будет узнать обо всем подробнее.

👉 https://www.youtube.com/watch?v=Wq6GpTZ7AX0

Привет от онлайн-конференции для техлидов и архитекторов Podlodka Techlead Crew!

⚙️ Масштабировать сложную архитектуру по всем правилам — задачка нетривиальная. Разбираем тренды и новшества, учимся справляться с проблемами. Готовы раскрыть свежие подробности сезона, который стартует 13 ноября:

💎 Улучшим архитектуру приложения с помощью CQRS. Объясним, как сделать взаимодействие между сервисами надёжным и консистентным, повысить масштабируемость и поддерживаемость системы.
💎 Узнаем, как решить проблемы хранения и масштабирования данных в транзакционно-аналитических системах, например, YDB. Эти системы способны одновременно работать с OLTP и OLAP-нагрузками. 
💎 Рассмотрим, как развивать уже существующую архитектуру. Это будет доклад Владимира Иванова из Bolt про возможности, ограничения и способы избежать «бутылочных горлышек».
💎 Обсудим эволюцию технических метрик в контексте роста команд, компании, продукта и кода.

✨ Обновленная дорожная карта Angular

Дорожная карта Angular получила обновление. В нем упоминаются грядущие возможности, касающиеся рендеринга на стороне сервера и расширения синтаксиса шаблонов.

Также в ней затронута тема микрофронтендов.

👉 https://github.com/angular/angular/blob/main/aio/content/guide/roadmap.md

✨ Новый синтаксис потока управления

В начале ноября выйдет Angular 17, который предложит новый синтаксис в шаблонах.

В этой статье демонстрируется, как будет работать поток управления.

👉 https://dev.to/this-is-angular/new-angular-17-feature-new-control-flow-syntax-23j3

✨ Решение задачи про определение типа

На прошлой недели проходил Yandex Cup 2023. Яндекс представил 8 задачек разной сложности, которые было необходимо сделать за пять часов.

Александр Серенко написал статью, посвященную сложной типизации на примере одной из задач.

👉 https://habr.com/ru/articles/770646/

Привет, это фронтенд-команда Тинькофф и Angular Moscow

Мы обещали организовать 2й Angular meetup в этом году! Открываем регистрацию на Angular Meetup #22.

Собираемся 16 ноября в Москве в офисе Тинькофф вместе с друзьями из Skyeng. Будем обсуждать Angular@Next, неожиданные утечки памяти и новые возможности Angular Router.
И конечно же, общаться со старыми коллегами и знакомиться с новыми!

После докладов устроим неформальный нетворкинг и просто поболтаем. Уверены, что будет полезно и круто!

Кстати, для тех, кто не сможет приехать в Москву, проведем трансляцию.

Не забудьте зарегистрироваться и позвать с собой коллег:

✅ Ссылка для регистрации 🍕

✨ Создаем собственные валидаторы

Хотя Angular предоставляет множество встроенных валидаторов, часто возникают специфические требования к проверке форм, которые требуют создания собственных валидаторов.

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

👉 https://itnext.io/empowering-angular-forms-40-handcrafted-custom-validators-for-precision-2023-0951cc0a1180

✨ Как выстроить удобные процессы в работе с монорепой

Чтобы успешно разрабатывать несколько проектов одновременно, разработчикам нужно уметь эффективно запускать новые проекты, масштабировать существующие и переключаться между ними.

Андрей Кочеров рассказал, как сделать готовый к работе репозиторий, на основе методологии Trunk Based Development.

👉 https://habr.com/ru/companies/oleg-bunin/articles/735022/

✨ Очередь микрозадач + RxJS + Angular

При работе с Angular можно столкнуться со сложными механизмами, которые изначально не видны. Их понимание может существенно повысить производительность приложения.

Узнайте о взаимодействии между очередью микрозадач, RxJS и механизмом обнаружения изменений в Angular.

👉 https://dev.to/this-is-angular/microtask-queue-rxjs-angular-38ah

✨ Loop Control Flow в Angular 17

Синтаксис шаблонов часто обсуждается в последнее время. Команда Angular и сообщество предлагали свои решения, и в итоге был выбран @-синтаксис.

В статье показывается, как теперь выглядит код цикла в шаблоне после использования нового синтаксиса.

👉 https://dev.to/this-is-angular/declarative-loop-control-flow-in-angular-17-97d

✨ Новая возможность Angular v17: отложенная загрузка

В предыдущих версиях Angular мы могли лениво загружать часть приложения с помощью Router или использовать динамический импорт и ngComponentOutlet.

В Angular 17 команда Angular выводит ленивую загрузку на новый уровень. Появился управляющий блок @defer, позволяющий лениво загружать содержимое блока.

👉 https://dev.to/this-is-angular/new-angular-v17-feature-deferred-loading-41mi

✨ Микрофронтенды с современным Angular

Новая интеграция esbuild, которая будет включена по умолчанию начиная с версии 17, позволяет значительно повысить производительность сборки по сравнению с традиционным процессом на основе webpack. Однако Module Federation привязан к webpack.

Для того чтобы избавиться от привязки к webpack, был создан проект Native Federation. Он предлагает те же возможности, но работает со всеми инструментами сборки.

👉 https://www.angulararchitects.io/en/blog/micro-frontends-with-modern-angular-part-1-standalone-and-esbuild/

✨ Создание реактивной библиотеки

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

В статье показывается, как создать реактивную библиотеку самостоятельно.

👉 https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p

📺 Минко Гечев о будущем Angular

В эту пятницу мы погрузимся в будущее Angular — а именно, чего ожидать от Angular 18 и последующих версий.

Не пропустите эксклюзивную информацию.

👉 https://www.youtube.com/watch?v=2M17gRQbgfI

✨ Паттерны реактивности

Зачастую реактивность ассоциируется с фреймворками, но вы можете многому научиться, реализуя ее на чистом JavaScript.

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

👉 https://frontendmasters.com/blog/vanilla-javascript-reactivity/

✨ Feature Flags в Angular 16

Feature Flags — это отличный способ включить или отключить функции во время выполнения. Это может быть полезно для A/B-тестирования, или для включения или отключения функций для конкретных пользователей.

В этой статье показывается, как реализовать подобный функционал.

👉 https://ng-journal.com/blog/2023-09-29-feature-flags-in-angular-16/

✨ Чтение и запись DOM с помощью новых lifecycle hooks

Недавно в Angular добавили afterNextRender и afterRender.

afterNextRender — выполняется один раз и аналогичен AfterViewInit, но не выполняется при рендеринге на стороне сервера.

afterRender — выполняется после каждого обнаружения изменений.

В этой статье описывается, как использовать afterNextRender для добавления нового графика на холст и afterRender для перерисовки.

👉 https://dev.to/railsstudent/dom-reading-and-writing-with-new-lifecycle-hooks-in-angular-4n7e

✨ Начало работы с сигналами

Начиная с версии 16, команда Angular проделала огромную работу, прислушиваясь к мнению сообщества и улучшая Signals API.

Статья дает базовое представление о том, как сделать ваши приложения реактивными с помощью сигналов.

👉 https://www.danywalls.com/head-start-with-angular-signals-a-basic-overview