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

✨ Эти CSS-техники устарели

CSS развивается быстро, и многие полезные техники проходят мимо нас. Например, вместо длинных стеков системных шрифтов достаточно одного system-ui.

В новой статье разбираются 7 устаревших техник, которые можно заменить современными решениями.

👉 https://habr.com/ru/companies/ruvds/articles/917204/

✨ Angular style guide

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

Если вы давно его не просматривали, сейчас самое время это сделать.

👉 https://angular.dev/style-guide

✨ Инкрементальная гидратация в Angular

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

Эта технология целенаправленно создана для оптимизации ключевых метрик Core Web Vitals: LCP, INP и CLS.

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

👉 https://push-based.io/article/incremental-hydration-in-angular-introduction-part-1-3

✨ От кнопки до продакшена: как мы делаем Telegram Mini Apps

Думаете, что создать полноценное приложение внутри Telegram сложно? Оказывается, Mini App можно разработать быстрее, чем мобильное приложение, и при этом получить доступ к миллионам пользователей.

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

👉 https://habr.com/ru/companies/doubletapp/articles/917286/

✨ Расшифровка ДНК кода

Многие знают, что за работой инструментов вроде ESLint, Babel и даже Prettier стоит Abstract Syntax Tree (AST). Но как это все устроено на самом деле?

Самый простой способ разобраться, увидеть AST своими глазами. Например, с помощью ASTExplorer.

👉 https://push-based.io/article/unlocking-codes-dna-what-you-need-to-know-about-abstract-syntax-trees

✨ Без неудач не бывает успеха

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

В статье рассказывается:

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

- Как идеальный на первый взгляд пет‑проект может уйти в минус без бизнес‑стратегии.

- Чем может обернуться излишнее доверие к технологиям (GraphQL, NgRx) без достаточной подготовки.

- И как умение вовремя попросить помощи и принять свои ограничения спасает проект и нервы.

👉 https://www.angularspace.com/the-need-of-failing-before-succeeding/

✨ Настройка Prettier и ESLint

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

В этом посте разбирается, как грамотно связать Prettier и ESLint, чем отличается их роль, и какие настройки действительно стоит включить.

👉 https://www.angulararchitects.io/en/blog/best-practices-prettier-eslint/

✨ Юнит-тестирование в Angular

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

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

👉 https://habr.com/ru/companies/otus/articles/916166/

✨ Как перейти от позиции сеньора к роли тимлида

Ты крут в коде, решаешь сложные задачи и давно на позиции сеньора, но дальше роста нет. Знакомо? В какой-то момент просто писать код становится недостаточно.

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

👉 https://www.angularspace.com/how-to-grow-from-senior-to-a-lead-role/

✨ Обработка ошибок в Angular

Твое Angular-приложение крашится? Что если бы вместо этого оно показывало красивое сообщение об ошибке? Или автоматически предлагало повторить попытку?

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

👉 https://www.angularspace.com/angular-error-handling/

✨ Современное E2E тестирование с помощью Playwright

Хотите выпускать фичи без багов и с уверенностью? Тогда Playwright — ваш новый лучший друг.

В статье рассказывают, как Playwright делает E2E-тестирование в Angular надежным и максимально приближенным к реальному пользовательскому опыту.

👉 https://angular.love/modern-e2e-testing-for-angular-apps-with-playwright

✨ Angular Can I Use

Знакомая ситуация? Работаешь над проектом, а используемая функция неожиданно оказывается экспериментальной в твоей версии Angular?

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

👉 https://www.angular.courses/caniuse

✨ Angular 20: Большое обновление для современного веба

Помните, мы уже рассказывали об Angular 20? Сегодня снова погружаемся в новые возможности фреймворка.

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

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

✨ Эволюция Angular с колокольни UI-Kit-разработчика

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

Барсуков Никита рассказал, как менялся Angular с версии 10 по 20, через призму мейнтейнера библиотек.

👉 https://habr.com/ru/companies/tbank/articles/914260/

✨ Google I/O

На недавней конференции Google I/O представили свежий взгляд на настоящее и будущее Angular.

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

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

✨ Анонс Angular 20

Ключевые новинки: стабилизация effect, linkedSignal и toSignal, продвижение zoneless, улучшения SSR с инкрементальной гидратацией, интеграция с Chrome DevTools для отладки и даже... поддержка разработки с использованием ИИ.

А еще выбор официального маскота — примите участие!

👉 https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301

✨ Идеальная настройка проекта на Angular

А что, если бы ваш код в Angular был организован так, что ошибки сводились к минимуму, а команда работала как единый механизм?

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

👉 https://www.angulararchitects.io/en/blog/the-perfect-project-setup-for-angular-structure-and-automation-for-more-quality/

✨ NgRx получил крутое обновление Event API

Новый Event API в NgRx SignalStore добавляет возможности управления состоянием на основе событий, позволяя более эффективно создавать масштабируемые приложения.

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

👉 https://www.angulararchitects.io/en/blog/the-new-event-api-in-ngrx-signal-store/

✨ Эволюция программирования: как парадигмы украли нашу свободу

Задумывались ли вы, почему программирование из приключения превратилось в строгую инженерию? За 70 лет мы перешли от диких хакеров к архитекторам по ГОСТу. Раньше код писали на салфетках, сейчас по священным канонам SOLID.

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

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

✨ Анонс TypeScript Native Previews

Устали ждать, пока ваш TypeScript-проект соберется? Microsoft выпустила TypeScript Native Previews — революционную версию компилятора, переписанную на Go с использованием параллелизма.

В комплекте идет расширение для VS Code и npm-пакет @typescript/native-preview с новым CLI-инструментом tsgo. Правда, пока это превью без некоторых фич (отсутствует --build), но скорость впечатляет.

Реальный пример: проект Sentry с миллионом строк кода теперь проверяется за 6,7 секунды против 72 секунд на обычном TypeScript.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-native-previews/