🦊 Angular Fox 🚀 — русскогорящие новости сообщества
3.97K subscribers
1.21K photos
7 videos
1.06K links
Как костыль на реактивно-лисьей тяге 🔥🦊

Нравится канал? Подпишись на меня!
👉 twitter.com/thekiba_ru
💖 twitter.com/thekiba_io
medium.com/@thekiba
github.com/thekiba

Чаты @angular_ru @angular_jobs
Download Telegram
Внутри процесса архитектурного аудита

Компании часто сталкиваются с архитектурным коллапсом: замедление разработки, циклические зависимости, хрупкие тесты, монолит, который никто не понимает. Но это не приговор.

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

👉 https://www.angulararchitects.io/en/blog/inside-the-architecture-review-process-a-consultants-guide-to-better-software/
👍7🔥1
Улучшите пользовательский опыт вашего приложения с помощью (rx)resource

Представьте: пользователи больше не видят белый экран при загрузке, ошибки не остаются незамеченными, а данные всегда актуальны. Все это возможно с новым resource API в Angular 19.

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

👉 https://timdeschryver.dev/blog/improve-the-user-experience-of-your-application-using-rxresource
👍9🔥4
🚀 Документалка об Angular

Канал Honeypot, известный документальными историями о технологиях, представил новый фильм о невероятной истории Angular — фреймворке, который начинался как эксперимент внутри Google и прошел путь от непризнания до мировой популярности.

Вы увидите, как ошибки, инновации и упорство превратили Angular в современный гигант.

👉 https://youtu.be/cRC9DlH45lA
🔥22👍52
Как утекает память, если забыть отписаться от Observable

Ваше приложение внезапно крашится? Возможно, вы забыли отписаться.

Всего одна забытая подписка на Observable может привести к утечке памяти.

Читайте статью — узнайте, как находить и устранять такие проблемы за несколько минут.

👉 https://habr.com/ru/articles/879502/
👏6👍2
Миграция на строгий TypeScript

Знакомая ситуация: проект на TypeScript, а strict режим включить страшно? В крупных проектах часто сталкиваются с той же проблемой — годы разработки, море any типов и никаких проверок на null.

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

👉 https://habr.com/ru/companies/selectel/articles/879980/
👍3🔥2
Загрузка ресурсов

Мы уверены, что большинство уже знакомы с функцией resource().

Если же вы все еще сомневаетесь, попробуйте новый подход. Он упрощает работу с асинхронными данными в коде на основе сигналов.

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

👉 https://www.angularspace.com/loading-angular-resources-on-demand-a-progressive-guide-to-dynamic-data-fetching/
👍3👎1👏1
Исследуем режимы рендеринга маршрутов

Раньше мы вынуждены были выбирать: либо SSR для всего приложения, либо никак. Но что, если часть страниц приватные, а часть — публичные?

Теперь для каждого маршрута можно выбрать оптимальный режим — клиентский (CSR), серверный (SSR) или статическую генерацию (SSG).

Это позволяет создавать более гибкие и производительные приложения с точно настроенным рендерингом.

👉 https://dev.to/this-is-angular/exploring-routes-rendering-modes-in-angular-bjg
👍11🔥2👏1🤡1
Микрофронтенды с Angular и Native Federation

Вы когда-нибудь задумывались, как несколько команд могут работать над одним масштабным приложением, не мешая друг другу и сохраняя скорость релизов?

Микрофронтенды — секретное оружие enterprise-проектов. Они позволяют разбить монолит на автономные части, которые можно тестировать, деплоить и масштабировать независимо. Но Angular не поддерживает их из коробки. И тут на сцену выходит Native Federation.

👉 https://blog.angular.dev/micro-frontends-with-angular-and-native-federation-7623cfc5f413
🔥5👍2😁2👌1
Улучшение шаблонов Angular с помощью нетегированных шаблонных литералов

В версии 19.2.0-next.0 ввели поддержку шаблонных литералов, сделав шаблоны выразительнее.

Динамический контент, вычисляемые классы, сложные интерполяции, пайпы и даже генерация URL стали проще: теперь можно напрямую встраивать переменные в строку.

👉 https://medium.com/p/0baa5b4f8371
🔥10👍3👏1
Что такое LinkedSignal и как его использовать

Angular 19 представил функцию LinkedSignal — расширение стандартного computed, которое позволяет не только вычислять значения, но и изменять их.

Интересно, как это может упростить управление состоянием в ваших проектах?

В статье рассмотрены практические примеры использования LinkedSignal: от подсчета элементов массива до динамического управления состоянием компонентов, таких как аккордеоны и выпадающие списки.

👉 https://angular.love/what-linkedsignal-is-and-how-to-use-it
👍5🔥3
Прекратите неправильно использовать Effects

Зачем усложнять код Effects, если Angular предлагает простое решение для синхронизации состояния?

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

В статье подробно рассматривается пример с компонентом выбора товара: при смене продукта linkedSignal автоматически сбрасывает значение.

👉 https://angularexperts.io/blog/stop-misusing-effects
👍4🔥1🤩1
Простой трекер пользовательских событий

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

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

👉 https://www.angularspace.com/simple-user-event-tracker-in-angular/
👍6🔥2👎1
RxJS за пределами базового использования

Знаете, как превратить RxJS в ваш секретный инструмент для идеального кода?

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

В статье, показывается, как написать свой debounceIf оператор и создать delayedRange.

👉 https://habr.com/ru/articles/883294/
👍8🥱3👏1
Симптомы проблемного Angular-кода

Многие говорят об "антипаттернах", но в реальности их бывает сложно заметить. Возможно, вы не замечаете тревожных сигналов!

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

👉 https://www.angularspace.com/symptoms-of-an-angular-disorder/
👍166
Hawkeye — новый esbuild анализатор

Знаете ли вы, что скрывается в вашем бандле?

Даже с крутыми инструментами вроде esbuild он может незаметно распухнуть из-за иконок, библиотек или ленивого кода. А это — медленная загрузка и раздраженные пользователи.

Встречайте Hawkeye — новый инструмент для анализа бандлов. Он покажет, что именно входит в основной бандл, какие зависимости увеличивают его размер и позволит быстро выявить проблемные места.

👉 https://angularexperts.io/blog/hawkeye-esbuild-analyzer
👍18👌43🔥1
Новый httpResource

В 19.2.0-rc.0 представлен новый httpResource, который превращает загрузку данных в часть реактивного потока с помощью сигналов.

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

👉 https://www.angulararchitects.io/en/blog/learning-httpresource-with-super-mario/
🔥52👍2
Понимание Ahead-of-Time (AOT) компиляции

AOT в Angular преобразует темплейты и TypeScript код в оптимизированный JavaScript до загрузки приложения в браузере. В отличие от Just-in-Time (JIT) компиляции, которая происходит в браузере, AOT работает на этапе сборки, значительно улучшая производительность, безопасность и снижая количество ошибок.

Статья рассматривает принципы работы AOT, преимущества перед JIT, типичные проблемы и способы отладки. Также показывает эволюцию компилятора Angular от версии 2 до современного движка Ivy.

👉 https://dev.to/this-is-angular/understanding-angular-ahead-of-time-aot-compilation-2m7p
👍83
Эффективный рендеринг с декларативными шаблонами

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

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

👉 https://riegler.fr/blog/2025-02-16-incremental-dom
👍52
Resource RFC

Angular анонсировал ресурсы (Resources) — новый стандарт работы с асинхронностью.

Как вы знаете, сигналы предназначены для работы с синхронным состоянием. Каждый сигнал имеет четко определенное текущее значение. Однако не все состояния в приложениях являются синхронными.

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

Читайте RFC, чтобы глубже погрузиться в API ресурсов.

👉 https://github.com/angular/angular/discussions/60120
👍5🔥42
Dependency Injection под микроскопом

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

Статья знакомит с основами DI в Angular.

👉 https://habr.com/ru/articles/884884/
👍10🤡5🐳1