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

Помните лет 20 назад был комикс, на котором оратор спрашивал у людей “Кто может починить интернет без google и stackoverflow”? Помогите найти.

✨ TypeScript WTF

Думаешь, что знаешь TypeScript? А вот и нет! Оказывается, даже опытные разработчики регулярно натыкаются на поведение, которое заставляет воскликнуть "WTF?!" или по-русски "Какого...?!"

Читай полную статью с разбором 5 самых неожиданных особенностей TypeScript и сохрани себе, чтобы не попасться на эти грабли в продакшене!

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

✨ От Аристотеля до Тьюринга: что такое функциональное программирование

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

В статье тимлид Avito Марат Зимнуров раскрывает суть ФП: от математических основ (теория категорий, функторы, монады) до практических примеров.

👉 https://habr.com/ru/companies/avito/articles/926544/

✨ Экстремально большие списки

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

Концепция проста: рендерим только элементы во вьюпорте + буферная зона. В DOM всегда остается фиксированное количество элементов, а производительность не страдает даже на 100k записей.

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

✨ Angular без @angular/animations

Мы уже писали, что команда Angular рекомендует отказаться от использования @angular/animations и вместо него перейти на CSS-анимации.

Это логично: пакет весит 60 кБ, а современным браузерам он уже не нужен. Но есть одно но: как анимировать удаление элементов из DOM, если Angular пока не поддерживает состояние :leave без этого пакета?

Хорошая новость в том, что в Taiga UI эту проблему уже решили. Давайте посмотрим, как это реализовано.

👉 https://www.angularspace.com/how-to-get-rid-of-angular-animations-right-now/

✨ Введение в WebRTC

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

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

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

✨ Animation In and Out

Команда Angular планирует отказаться от пакета @angular/animations. Причина — современные возможности CSS делают его устаревшим, а сам пакет тормозит развитие: он тяжелый, не использует аппаратное ускорение и ограничивает разработчиков.

На смену придут новые функции animate.in и animate.out, которые упрощают работу с CSS-анимациями и сторонними библиотеками вроде GSAP и Anime.js.

Также команда подготовила руководство по миграции, где пошагово показано, как перейти с @angular/animations на нативные CSS-анимации.

👉 https://github.com/angular/angular/discussions/62212

✨ Spot the F-ups: Story Points, Days, and Planning

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

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

👉 https://www.angularspace.com/spot-the-f-ups-story-points-days-and-planning/

✨ Скрытые части Angular: ViewProviders

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

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

👉 https://www.angularspace.com/hidden-parts-of-angular-view-providers/

✨ Angular теперь встроен в Chrome DevTools

Команды Angular и Chrome объединили усилия, чтобы интегрировать Angular-специфичные данные в панель производительности Chrome DevTools.

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

👉 https://blog.angular.dev/the-angular-custom-profiling-track-is-now-available-0f9d8d36218a

✨ Zoneless Angular

Zone.js годами незаметно управлял обнаружением изменений в Angular, но скоро он будет заменен на Zoneless подход. Начиная с Angular 20, данный функционал больше не считается экспериментальным и официально переведен в стадию Developer Preview.

В статье рассматриваются распространенные сценарии, сравнивается их поведение в режимах Zone.js и Zoneless, а также отмечаются возможные подводные камни.

👉 https://angularexperts.io/blog/zoneless-angular

✨ Все о DDD для фронтенд‑архитектур

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

Заимствование подходов из Domain-Driven Design (DDD), может улучшить ситуацию.

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

👉 https://www.angulararchitects.io/en/blog/all-about-ddd-for-frontend-architectures-with-angular-co/

✨ Понимание Angular Deferrable Views

Если вы пропустили появление Deferrable Views в Angular 17–18, сейчас отличная возможность наверстать упущенное.

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

👉 https://www.angularspace.com/understanding-angular-deferrable-views/

✨ Почему я исправляю баги бесплатно и как это изменило мою карьеру

Участие в Open Source — это не только исправление кода, но и мощный буст для ваших навыков и карьеры.

Егор Горбачёв рассказал, как погружение в исходники учит понимать библиотеки изнутри, писать тесты и оптимизировать код.

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

✨ Реактивность в Angular

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

Он разбирает, в чем преимущества Signals перед Observable, как стратегия OnPush и zoneless-подход избавляют от “грязных” проверок.

👉 https://medium.com/p/844444741c7e

✨ Почему мы до сих пор пользуемся QWERTY

QWERTY — раскладка, придуманная не для скорости, а чтобы пишущие машинки XIX века не заклинивало. Тем не менее, именно она стала глобальным стандартом, несмотря на устаревшую эргономику и не самую высокую скорость набора.

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

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

А если ты уже пробовал альтернативные раскладки, поделись в комментариях. Было ли сложно переучиться? Стало ли удобнее?

👉 https://habr.com/ru/companies/selectel/articles/915820/

✨ Инкрементальная гидратация в Angular (Часть 2)

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

Во второй части речь идет о том, почему эта технология имеет большое значение для производительности и пользовательского опыта. Особое внимание уделяется ее влиянию на ключевые метрики: LCP, INP и CLS.

👉 https://push-based.io/article/the-game-changing-impact-of-incremental-hydration-in-angular-part-2

✨ Промпты для LLM и настройки AI IDE

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

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

Спасибо @summon_the_coder за новость.

👉 https://angular.dev/ai/develop-with-ai

✨ Из браузера в приложение: внутренняя кухня WebView

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

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

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