🦊 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
Новые миграции для Signal Input

Signal inputs готовы к продакшену, и команда Angular представила новые инструменты миграции, которые помогут вам обновиться на новое API с использованием сигналов.

Больше информации можно найти в документации на angular.dev.

👉 https://blog.angular.dev/try-out-the-new-signal-input-migrations-80783969ac9d
👍4🔥1
Стратегия развития Angular в 2025 году

За последние два года команда Angular активно работала над улучшением опыта разработчиков и повышением производительности.

В 2025 году в центре внимания окажутся:

Переход на Zoneless: повышение эффективности обнаружения изменений и ускорение загрузки приложений.

Формы на основе сигналов: улучшение масштабируемости, типизации и унификации работы с формами.

Замена Karma: внедрение современного инструмента для тестирования.

👉 https://blog.angular.dev/angular-2025-strategy-9ca333dfc334
👍8🔥5👎2👌1
Визуализатор RxJS за 4 часа с помощью нейросети

Современные нейросети способны радикально оптимизировать рабочие процессы и снизить потребность в крупных командах.

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

С нетерпением ждем новых прорывов в сфере ИИ, а попробовать приложение можно здесь.

👉 https://www.angularspace.com/built-rxjs-visualizer-in-4-hours-with-ai-no-coding/
🥴9🔥4👍2
Динамическая инициализация сервисов

Иногда возникает ситуация, когда у вас есть несколько сервисов, каждый из которых имеет одинаковое имя метода, но разную реализацию, и вам нужно вызвать только один из этих сервисов в зависимости от условия.

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

👉 https://www.angularspace.com/dynamic-service-instantiation-in-angular-2/
👍14👎4🔥3
Как создавать промпты для AI

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

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

👉 https://vc.ru/ai/1759281-kak-sozdavat-prompty-dlya-ai-kotorye-vydayut-zhelaemyi-rezultat
👍8👎7🔥4👏1
От налогового инспектора до ведущего инженера-программиста

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

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

👉 https://www.angularspace.com/from-a-tax-officer-to-a-lead-software-engineer/
👍5🔥4👎1👏1
Рецепты Typescript: выбор одного и только одного обязательного поля в объекте

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

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

Для разминки предлагаем подумать: как можно применить такой тип и при этом не нарушить лучшие практики?

👉 https://habr.com/ru/companies/cloud_ru/articles/868762/
👍4🔥3
Сохранение состояния компонента при переходе по маршруту

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

Статья рассказывает о применении RouteReuseStrategy для сохранения состояния компонентов.

👉 https://dev.to/this-is-angular/angular-lab-preserving-component-state-across-route-transitions-3f7j
👍13👏3🔥2
Улучшаем производительность с помощью NgOptimizedImage

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

Это напрямую влияет на метрики:

Largest Contentful Paint (LCP) — время, за которое загружается самый крупный контент, например, баннер. Высокий LCP ухудшает SEO и раздражает пользователей.

First Contentful Paint (FCP) — момент появления первого элемента на экране. Медленный FCP создает ощущение "зависания" сайта.

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

👉 https://www.angularspace.com/boost-your-apps-performance-with-ngoptimizedimage
👍7👌1
Гибкость и контроль над данными: применение моков в разработке

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

Для решения этой проблемы в статье предлагается использовать MSW (Mock Service Worker), который позволяет реализовать работу с HTTP API и WebSocket прямо внутри приложения.

👉 https://habr.com/ru/companies/ntechlab/articles/869790/
🔥2👏1
TypeScript 5.8: erasableSyntaxOnly флаг

В следующем релизе TypeScript, вероятно, появится новый флаг, который будет запрещать конструкции, которые не являются "стираемыми" (erasable), такие как перечисления (enums), пространства имен (namespaces) и т.д.

Это новшество может быть связано с тем, что в Node.js 23.6.0 недавно появилась поддержка TypeScript, которая не поддерживает такие конструкции.

👉 https://www.totaltypescript.com/erasable-syntax-only
🔥12👍1
Создание пользовательских операторов RxJs

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

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

👉 https://www.angularspace.com/create-custom-rxjs-operators/
👍5🔥1
Введение в фикстуры Playwright

Устали от тонн моков и бесконечного дублирования в тестах? Знаете, что может сократить ваш код и сэкономить часы работы?

Фикстуры в Playwright — ваш секретный инструмент для чистых и эффективных тестов!

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

👉 https://habr.com/ru/companies/tbank/articles/877292/
🔥5👍3
Миграция крупного Angular-приложения на Standalone

Можно ли превратить огромный Angular-проект из лабиринта модулей в чистый и современный код?

Армен Варданян доказал — ДА! Его HR-система с 1000+ компонентов и множеством зависимостей теперь работает в разы быстрее и чище. И все это — всего за несколько часов.

Не верите, что такое возможно? Читайте статью и убедитесь сами: ваш проект тоже заслуживает апгрейда.

👉 https://www.angularspace.com/migrating-a-large-angular-application-to-standalone/
👍8🔥3
«Я делаю рефакторинг ежечасно» или как за пять минут улучшить приложение

Рефакторинг — это не про гигантские правки, а про микрошаги, которые делают ваш код чище, быстрее и устойчивее к ошибкам.

Хотите узнать, как избавиться от спагетти-кода и не выгореть?

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

А чтобы углубить свои знания, рекомендуем книгу Мартина Фаулера «Рефакторинг кода на JavaScript».

👉 https://habr.com/ru/companies/cloud_ru/articles/877762/
👍7🔥2
Внутри процесса архитектурного аудита

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

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

👉 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