✨ Что происходит внутри Angular и React при решении одних и тех же задач
React и Angular часто сравнивают. Оба инструмента решают одну задачу: отрисовка и обновление UI. Но делают это совершенно по-разному. React работает через Virtual DOM, а Angular с помощью Ivy генерирует инструкции, которые эффективно обновляют DOM.
Полина Цуканова разобрала шесть типовых сценариев: от рендера компонента до управления состоянием. Хотя в статье и есть небольшие неточности, она отлично иллюстрирует фундаментальные различия в их архитектуре.
👉 https://habr.com/ru/companies/selectel/articles/965586/
React и Angular часто сравнивают. Оба инструмента решают одну задачу: отрисовка и обновление UI. Но делают это совершенно по-разному. React работает через Virtual DOM, а Angular с помощью Ivy генерирует инструкции, которые эффективно обновляют DOM.
Полина Цуканова разобрала шесть типовых сценариев: от рендера компонента до управления состоянием. Хотя в статье и есть небольшие неточности, она отлично иллюстрирует фундаментальные различия в их архитектуре.
👉 https://habr.com/ru/companies/selectel/articles/965586/
👍5🔥4😁4❤1👎1
✨ Эксперимент с MCP-сервером
Angular получил экспериментальный MCP-сервер — протокол взаимодействия между ИИ-клиентами и внешними сервисами. Он умеет подсказывать best practices, искать документацию и даже работать с локальным workspace.
Алиса Дункан проверила, насколько далеко можно зайти в создании приложений почти не касаясь клавиатуры.
P.S. В Берлине только что прошла NG-DE — комьюнити-конференция по Angular в Германии. И вот вам запись с интересным докладом.
👉 https://dev.to/angular/a-quick-vibe-code-experiment-with-angulars-mcp-server-3g2h
Angular получил экспериментальный MCP-сервер — протокол взаимодействия между ИИ-клиентами и внешними сервисами. Он умеет подсказывать best practices, искать документацию и даже работать с локальным workspace.
Алиса Дункан проверила, насколько далеко можно зайти в создании приложений почти не касаясь клавиатуры.
P.S. В Берлине только что прошла NG-DE — комьюнити-конференция по Angular в Германии. И вот вам запись с интересным докладом.
👉 https://dev.to/angular/a-quick-vibe-code-experiment-with-angulars-mcp-server-3g2h
👍4🔥3❤2😁1
✨ Signal Forms: Debouncing
В RxJS есть оператор debounceTime, который передает только последнее значение после того, как прошло заданное время бездействия. Это полезно при работе с событиями высокой частоты, такими как ввод текста пользователем.
Поскольку Angular активно развивает экосистему на основе сигналов и движется к тому, чтобы сделать RxJS опциональным во многих сценариях, возникает логичный вопрос: "Как реализовать дебаунс без RxJS? Писать свои утилиты?"
К счастью, в этом нет необходимости.
Дебаунс не добавят в сам примитив signal. Сигналы по своей природе синхронны и предназначены для хранения и синхронизации состояния. Дебаунс же — это асинхронная операция, связанная с обработкой событий.
Поэтому логику дебаунса встраивают не в сигналы, а туда, где она нужнее всего, в новые Signal Forms.
👉 https://github.com/angular/angular/pull/64929
В RxJS есть оператор debounceTime, который передает только последнее значение после того, как прошло заданное время бездействия. Это полезно при работе с событиями высокой частоты, такими как ввод текста пользователем.
Поскольку Angular активно развивает экосистему на основе сигналов и движется к тому, чтобы сделать RxJS опциональным во многих сценариях, возникает логичный вопрос: "Как реализовать дебаунс без RxJS? Писать свои утилиты?"
К счастью, в этом нет необходимости.
Дебаунс не добавят в сам примитив signal. Сигналы по своей природе синхронны и предназначены для хранения и синхронизации состояния. Дебаунс же — это асинхронная операция, связанная с обработкой событий.
Поэтому логику дебаунса встраивают не в сигналы, а туда, где она нужнее всего, в новые Signal Forms.
👉 https://github.com/angular/angular/pull/64929
👍11🔥6❤3👎3⚡1
✨ Кастомные формы в Angular
Создание кастомных компонентов форм в Angular долгое время означало борьбу с бойлерплейтом. Но с приходом Signal Forms и нового интерфейса FormValueControl этот процесс стал кардинально проще и логичнее.
На примере формы подачи доклада на конференцию, в статье наглядно демонстрируется, как Signal Forms превращают создание контролов из рутины в удовольствие.
👉 https://medium.com/p/3860dcdb5a03
Создание кастомных компонентов форм в Angular долгое время означало борьбу с бойлерплейтом. Но с приходом Signal Forms и нового интерфейса FormValueControl этот процесс стал кардинально проще и логичнее.
На примере формы подачи доклада на конференцию, в статье наглядно демонстрируется, как Signal Forms превращают создание контролов из рутины в удовольствие.
👉 https://medium.com/p/3860dcdb5a03
👍6👏1
✨ Как решать LeetCode? Легко! Нужно просто…
Знакомая ситуация: прорешал множество задач, но на интервью видишь незнакомое условие и впадаешь в ступор, не зная, с какой стороны подступиться?
Прорешав более 1500 задач, автор статьи пришел к важному выводу: успех на алгоритмическом собеседовании зависит не от того, сколько задач вы забрутфорсили, а от владения ключевыми шаблонами.
👉 https://habr.com/ru/articles/964104/
Знакомая ситуация: прорешал множество задач, но на интервью видишь незнакомое условие и впадаешь в ступор, не зная, с какой стороны подступиться?
Прорешав более 1500 задач, автор статьи пришел к важному выводу: успех на алгоритмическом собеседовании зависит не от того, сколько задач вы забрутфорсили, а от владения ключевыми шаблонами.
👉 https://habr.com/ru/articles/964104/
👍4🤮4🔥2❤1
✨ Релиз Angular v21
Команда Angular представила мажорное обновление, которое фокусируется на улучшении Developer Experience, развитии реактивной модели на базе сигналов и подготовке экосистемы к работе с AI-агентами.
Ключевые нововведения:
Экспериментальные Signal Forms — новый способ для работы с формами. Состояние полей синхронизируется через сигналы, без лишних бойлерплейтов.
Angular Aria — библиотека доступных headless-компонентов. Вы получаете готовую логику и поведение, а стилизацию настраиваете полностью под себя.
Zoneless по умолчанию в новых проектах zone.js больше не подключается автоматически.
Vitest официально стал тест-раннером по умолчанию для новых проектов.
MCP Server в CLI с инструментами для AI-агентов.
Плюс мелкие, но приятные фичи: регулярки в шаблонах, дополнительные параметры для
Также напоминаем, что Developer Event начинается через несколько часов на YouTube.
👉 https://blog.angular.dev/announcing-angular-v21-57946c34f14b
Команда Angular представила мажорное обновление, которое фокусируется на улучшении Developer Experience, развитии реактивной модели на базе сигналов и подготовке экосистемы к работе с AI-агентами.
Ключевые нововведения:
Экспериментальные Signal Forms — новый способ для работы с формами. Состояние полей синхронизируется через сигналы, без лишних бойлерплейтов.
Angular Aria — библиотека доступных headless-компонентов. Вы получаете готовую логику и поведение, а стилизацию настраиваете полностью под себя.
Zoneless по умолчанию в новых проектах zone.js больше не подключается автоматически.
Vitest официально стал тест-раннером по умолчанию для новых проектов.
MCP Server в CLI с инструментами для AI-агентов.
Плюс мелкие, но приятные фичи: регулярки в шаблонах, дополнительные параметры для
@defer, обновление CLDR и многое другое.Также напоминаем, что Developer Event начинается через несколько часов на YouTube.
👉 https://blog.angular.dev/announcing-angular-v21-57946c34f14b
🔥29❤9🤝1
✨ URL как контейнер состояния
URL — это не просто адрес ресурса, а один из самых древних и изящных инструментов для управления состоянием в веб-приложениях.
Фронтендеры часто забывают об этой функции, прибегая к сложным абстракциям наподобие глобальных сторов, в то время как URL по умолчанию дает вам возможность делиться состоянием.
👉 https://habr.com/ru/articles/962828/
URL — это не просто адрес ресурса, а один из самых древних и изящных инструментов для управления состоянием в веб-приложениях.
Фронтендеры часто забывают об этой функции, прибегая к сложным абстракциям наподобие глобальных сторов, в то время как URL по умолчанию дает вам возможность делиться состоянием.
👉 https://habr.com/ru/articles/962828/
👍8🔥3❤2
✨ Angular 21 – что нового?
Обзорный пост с главными фичами мы уже публиковали, теперь переходим к практике. Как именно новый релиз меняет ваш повседневный опыт взаимодействия с фреймворком? В статье детальный разбор того, как новые фичи выглядят в коде.
P.S. Если вы еще не посмотрели Developer Event, очень рекомендуем глянуть запись. Там не только презентация новинок, но и знакомое лицо из русскоговорящего сообщества (возможно, вы его узнаете 😉).
👉 https://angular.love/angular-21-whats-new
Обзорный пост с главными фичами мы уже публиковали, теперь переходим к практике. Как именно новый релиз меняет ваш повседневный опыт взаимодействия с фреймворком? В статье детальный разбор того, как новые фичи выглядят в коде.
P.S. Если вы еще не посмотрели Developer Event, очень рекомендуем глянуть запись. Там не только презентация новинок, но и знакомое лицо из русскоговорящего сообщества (возможно, вы его узнаете 😉).
👉 https://angular.love/angular-21-whats-new
🔥10❤2
✨ Цветовая модель OKLCH
OKLCH — современная цветовая модель, которая решает главную проблему RGB и HSL: визуальную неоднородность. Теперь цвета с одинаковой яркостью действительно выглядят одинаково, а оттенки не плывут при изменении параметров.
В основе три параметра: яркость (Lightness, 0–100%), насыщенность (Chroma, варьируется от серого до наиболее интенсивного оттенка) и оттенок (Hue, 0–360).
На практике это означает: можно создать, например, набор кнопок разных цветов, меняя только Hue и все они будут восприниматься визуально согласованно.
👉 https://habr.com/ru/articles/940800/
OKLCH — современная цветовая модель, которая решает главную проблему RGB и HSL: визуальную неоднородность. Теперь цвета с одинаковой яркостью действительно выглядят одинаково, а оттенки не плывут при изменении параметров.
В основе три параметра: яркость (Lightness, 0–100%), насыщенность (Chroma, варьируется от серого до наиболее интенсивного оттенка) и оттенок (Hue, 0–360).
На практике это означает: можно создать, например, набор кнопок разных цветов, меняя только Hue и все они будут восприниматься визуально согласованно.
👉 https://habr.com/ru/articles/940800/
👍8❤6✍1
✨ Как собрать экосистему компонентов на Angular и Nx
При масштабировании проекта поддержка множества отдельных репозиториев часто приводит к аду зависимостей, дублированию логики, компонентов и т.д.
Ильи Чубко показал, как построить единую экосистему компонентов, от организации структуры до настройки CI/CD с использованием nx affected. Отдельное внимание уделено Dependency Injection: показано, как через DI адаптировать приложение под разные среды выполнения.
👉 https://habr.com/ru/companies/k2tech/articles/960600/
При масштабировании проекта поддержка множества отдельных репозиториев часто приводит к аду зависимостей, дублированию логики, компонентов и т.д.
Ильи Чубко показал, как построить единую экосистему компонентов, от организации структуры до настройки CI/CD с использованием nx affected. Отдельное внимание уделено Dependency Injection: показано, как через DI адаптировать приложение под разные среды выполнения.
👉 https://habr.com/ru/companies/k2tech/articles/960600/
👍8🔥4❤2👎1
✨ Когда порядок решает, или почему я больше не доверяю сеттерам в Angular
Используете сеттеры с
В статье разбирается реальный кейс, когда такое поведение привело к некорректной работе компонента. Вы узнаете, почему команда Angular считает это нормой, почему не стоит перегружать сеттеры логикой и какие подходы от классического ngOnChanges до современных сигналов, гарантируют предсказуемое поведение кода.
👉 https://habr.com/ru/companies/zyfra/articles/970150/
Используете сеттеры с
@Input()? Будьте осторожны, с приходом Ivy порядок атрибутов в шаблоне стал критичным. Теперь простая перестановка может сломать инициализацию компонента, даже если код написан идеально.В статье разбирается реальный кейс, когда такое поведение привело к некорректной работе компонента. Вы узнаете, почему команда Angular считает это нормой, почему не стоит перегружать сеттеры логикой и какие подходы от классического ngOnChanges до современных сигналов, гарантируют предсказуемое поведение кода.
👉 https://habr.com/ru/companies/zyfra/articles/970150/
👍11🥴10✍2👏1🤔1🌭1
🚨 Утечка XSRF-токена в Angular HttpClient
В Angular HttpClient обнаружена уязвимость, которая может привести к утечке XSRF-токена. Проблема кроется в механизме защиты фреймворка: он некорректно обрабатывает ссылки, начинающиеся с двойного слеша.
Утечка токена полностью обходит встроенную защиту Angular от CSRF, позволяя злоумышленнику перехватить действительный XSRF-токен пользователя. Получив этот токен, атакующий может выполнять произвольные CSRF-атаки от имени сессии жертвы.
P.S. Спасибо Angular Munich за информацию.
👉 https://github.com/angular/angular/security/advisories/GHSA-58c5-g7wp-6w37
В Angular HttpClient обнаружена уязвимость, которая может привести к утечке XSRF-токена. Проблема кроется в механизме защиты фреймворка: он некорректно обрабатывает ссылки, начинающиеся с двойного слеша.
Утечка токена полностью обходит встроенную защиту Angular от CSRF, позволяя злоумышленнику перехватить действительный XSRF-токен пользователя. Получив этот токен, атакующий может выполнять произвольные CSRF-атаки от имени сессии жертвы.
P.S. Спасибо Angular Munich за информацию.
👉 https://github.com/angular/angular/security/advisories/GHSA-58c5-g7wp-6w37
🔥9🤝1
✨ Шесть способов учиться новому максимально быстро и эффективно
Обучение — процесс, который можно дебажить и оптимизировать. В статье разбираем ключевые идеи из бестселлера Барбары Оакли Learning How to Learn.
Главный тезис книги: способность быстро осваивать новые стеки, языки и технологии — это не врожденный талант, а прокачиваемый скилл.
👉 https://habr.com/ru/companies/avito/articles/953972/
Обучение — процесс, который можно дебажить и оптимизировать. В статье разбираем ключевые идеи из бестселлера Барбары Оакли Learning How to Learn.
Главный тезис книги: способность быстро осваивать новые стеки, языки и технологии — это не врожденный талант, а прокачиваемый скилл.
👉 https://habr.com/ru/companies/avito/articles/953972/
👍8❤5😁1
✨ TypeScript vs Elixir
Дэн Вандеркам (автор книги Effective TypeScript) прошел Advent of Code 2024 на Elixir и сравнил опыт разработки с привычным TS. Проделав не просто сравнение синтаксиса, а глубокий анализ того, как разные подходы к типизации и DX влияют на написание кода.
Ключевые тезисы из статьи:
Оператор |> в Elixir киллер-фича, но автор пришел к выводу, что в JavaScript без сопутствующего сахара он был бы не так удобен.
TypeScript приучил нас к тому, что поддержка IDE так же важна, как и сам компилятор. В Elixir с этим сложнее.
В Elixir внедряют систему опциональной постепенной типизации. Разработчикам на TypeScript это должно быть знакомо: TS в свое время провернул похожий трюк с JavaScript.
P.S. Advent of Code 2025 стартует уже сегодня. Планируете участвовать в этом году или, может быть, уже решали задачки прошлых лет? Делитесь в комментариях, какой язык выбрали и какие впечатления остались.
👉 https://effectivetypenoscript.com/2025/11/24/advent2024-elixir/
Дэн Вандеркам (автор книги Effective TypeScript) прошел Advent of Code 2024 на Elixir и сравнил опыт разработки с привычным TS. Проделав не просто сравнение синтаксиса, а глубокий анализ того, как разные подходы к типизации и DX влияют на написание кода.
Ключевые тезисы из статьи:
Оператор |> в Elixir киллер-фича, но автор пришел к выводу, что в JavaScript без сопутствующего сахара он был бы не так удобен.
TypeScript приучил нас к тому, что поддержка IDE так же важна, как и сам компилятор. В Elixir с этим сложнее.
В Elixir внедряют систему опциональной постепенной типизации. Разработчикам на TypeScript это должно быть знакомо: TS в свое время провернул похожий трюк с JavaScript.
P.S. Advent of Code 2025 стартует уже сегодня. Планируете участвовать в этом году или, может быть, уже решали задачки прошлых лет? Делитесь в комментариях, какой язык выбрали и какие впечатления остались.
👉 https://effectivetypenoscript.com/2025/11/24/advent2024-elixir/
❤3🤔2👍1👎1
✨ Документация Angular теперь на русском
Хорошая новость для тех, кто только начинает погружаться в Angular и предпочитает читать доки на русском языке. Участник сообщества Ефанов Михаил сделал перевод документации.
Что интересного:
✅ Полностью переведены обучающие материалы.
✅ Можно пройти туториал и экспериментировать с кодом в песочнице прямо в браузере.
Важный нюанс:
Раздел "Справочник - API" остался без перевода. Это осознанное решение автора: информация там генерируется автоматически из комментариев в коде, и это затрудняет поддержку новых версий в будущем.
🐞 Если найдете ошибки или опечатки, можете сообщить о них в репозитории проекта.
👉 https://angular-docs.ru/
Хорошая новость для тех, кто только начинает погружаться в Angular и предпочитает читать доки на русском языке. Участник сообщества Ефанов Михаил сделал перевод документации.
Что интересного:
✅ Полностью переведены обучающие материалы.
✅ Можно пройти туториал и экспериментировать с кодом в песочнице прямо в браузере.
Важный нюанс:
Раздел "Справочник - API" остался без перевода. Это осознанное решение автора: информация там генерируется автоматически из комментариев в коде, и это затрудняет поддержку новых версий в будущем.
🐞 Если найдете ошибки или опечатки, можете сообщить о них в репозитории проекта.
👉 https://angular-docs.ru/
🔥47👍14😁5🤷♂4❤3
🚨 Уязвимость Stored XSS
В Angular Template Compiler обнаружена Stored XSS уязвимость. Проблема кроется в неполной внутренней схеме безопасности, которая позволяет злоумышленникам обходить встроенную санитизацию при работе с определенными атрибутами (например, те, которые могут содержать javanoscript: URLs).
Кроме того, существует связанная уязвимость, затрагивающая элементы SVG-анимации. Атрибут attributeName у этих элементов не проходил должной валидации.
Как защититься:
Обновить версию Angular.
Убедитесь, что в уязвимые атрибуты не попадают сырые данные из недоверенных источников.
Настройте Content Security Policy (CSP).
👉 https://github.com/angular/angular/security/advisories/GHSA-v4hv-rgfq-gp49
В Angular Template Compiler обнаружена Stored XSS уязвимость. Проблема кроется в неполной внутренней схеме безопасности, которая позволяет злоумышленникам обходить встроенную санитизацию при работе с определенными атрибутами (например, те, которые могут содержать javanoscript: URLs).
Кроме того, существует связанная уязвимость, затрагивающая элементы SVG-анимации. Атрибут attributeName у этих элементов не проходил должной валидации.
Как защититься:
Обновить версию Angular.
Убедитесь, что в уязвимые атрибуты не попадают сырые данные из недоверенных источников.
Настройте Content Security Policy (CSP).
👉 https://github.com/angular/angular/security/advisories/GHSA-v4hv-rgfq-gp49
🔥5😱1
https://github.com/vercel/next.js/security/advisories/GHSA-9qr9-h5gf-34mp
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣36🌚6👻3👍2🤓2🤪2👨💻1
✨ 90% Angular-разработчиков пишут легаси
Angular быстро развивается, однако в проектах иногда сохраняются подходы, характерные для ранних версий фреймворка, которые сегодня можно заменить на более производительные и современные решения.
В статье рассматриваются моменты, на которые стоит обратить внимание для улучшения кодовой базы. Среди ключевых тем: корректное управление подписками, отказ от чрезмерного использования any, преимущества OnPush и внедрение новых @for и @if.
P.S. Метрика в 90% в заголовке статьи выглядит сомнительно и не подкреплена данными. Вероятно, это просто художественное преувеличение автора, и в реальности ситуация не такая драматичная.
👉 https://habr.com/ru/companies/ruvds/articles/967016/
Angular быстро развивается, однако в проектах иногда сохраняются подходы, характерные для ранних версий фреймворка, которые сегодня можно заменить на более производительные и современные решения.
В статье рассматриваются моменты, на которые стоит обратить внимание для улучшения кодовой базы. Среди ключевых тем: корректное управление подписками, отказ от чрезмерного использования any, преимущества OnPush и внедрение новых @for и @if.
P.S. Метрика в 90% в заголовке статьи выглядит сомнительно и не подкреплена данными. Вероятно, это просто художественное преувеличение автора, и в реальности ситуация не такая драматичная.
👉 https://habr.com/ru/companies/ruvds/articles/967016/
👍9😐5👎4
✨ Прогресс в разработке TypeScript 7
Команда TypeScript поделилась апдейтом по Project Corsa — портированию языкового сервиса и компилятора на Go.
В языковом сервисе все еще идет перенос функций и исправление мелких багов, но большая часть того, что составляет привычный опыт редактирования TypeScript, уже работает.
Компилятор также продемонстрировал значительный прогресс: он находит те же ошибки, что и TypeScript 5.9. Полная совместимость типизации подтверждена на 20 000 тестовых кейсов.
Также в него портировали такие флаги, как --incremental и --build. Это означает, что большинство проектов могут попробовать новую реализацию с минимальными изменениями.
👉 https://devblogs.microsoft.com/typenoscript/progress-on-typenoscript-7-december-2025/
Команда TypeScript поделилась апдейтом по Project Corsa — портированию языкового сервиса и компилятора на Go.
В языковом сервисе все еще идет перенос функций и исправление мелких багов, но большая часть того, что составляет привычный опыт редактирования TypeScript, уже работает.
Компилятор также продемонстрировал значительный прогресс: он находит те же ошибки, что и TypeScript 5.9. Полная совместимость типизации подтверждена на 20 000 тестовых кейсов.
Также в него портировали такие флаги, как --incremental и --build. Это означает, что большинство проектов могут попробовать новую реализацию с минимальными изменениями.
👉 https://devblogs.microsoft.com/typenoscript/progress-on-typenoscript-7-december-2025/
🔥17❤2
✨ Не делайте рефакторинг как дядя Боб
Книга «Чистый код» Роберта Мартина считается классикой, но слепое следование ее догмам может навредить.
В статье разбирается каноничный пример рефакторинга из второй главы и объясняется, почему подход Мартина в данном случае делает код не лучше, а хуже.
Вместо того чтобы упростить логику, «дядя Боб» превращает функцию в класс с лишними уровнями абстракции, получая код, в котором приходится прыгать по методам, чтобы понять суть простой операции.
P.S. Загляните в комментарии на Хабре: там предложили вариант реализации, который оказался даже лучше, чем у автора статьи.
👉 https://habr.com/ru/companies/ruvds/articles/970488/
Книга «Чистый код» Роберта Мартина считается классикой, но слепое следование ее догмам может навредить.
В статье разбирается каноничный пример рефакторинга из второй главы и объясняется, почему подход Мартина в данном случае делает код не лучше, а хуже.
Вместо того чтобы упростить логику, «дядя Боб» превращает функцию в класс с лишними уровнями абстракции, получая код, в котором приходится прыгать по методам, чтобы понять суть простой операции.
P.S. Загляните в комментарии на Хабре: там предложили вариант реализации, который оказался даже лучше, чем у автора статьи.
👉 https://habr.com/ru/companies/ruvds/articles/970488/
🔥7💯3❤2🤝2😡1