✨ Как ускорить render приложения в 68 раз, и при чём тут Signals
Фреймворки, построенные на Virtual DOM, достигли предела оптимизации. Даже продвинутые механики вроде React Fiber и Concurrent Mode не решают проблему.
Разница в производительности колоссальна: в тестах на обновление одного элемента из тысячи оптимизированный React.memo тратит 205 мс, в то время как Solid.js и Angular справляются за 3–14 мс.
👉 https://habr.com/ru/companies/domclick/articles/956468/
Фреймворки, построенные на Virtual DOM, достигли предела оптимизации. Даже продвинутые механики вроде React Fiber и Concurrent Mode не решают проблему.
Разница в производительности колоссальна: в тестах на обновление одного элемента из тысячи оптимизированный React.memo тратит 205 мс, в то время как Solid.js и Angular справляются за 3–14 мс.
👉 https://habr.com/ru/companies/domclick/articles/956468/
❤12🔥7👍2🥴2🤪2😁1👀1
✨ URLPattern — pattern matching, который мы ждали
Веб наконец-то получил удобный инструмент для сопоставления URL с шаблонами. Новый URLPattern API, уже доступен во всех основных браузерах, Node.js и Deno, позволяет элегантно проверять, парсить и валидировать ссылки, без боли и костылей с регулярками.
Читай статью, чтобы увидеть примеры кода, узнать о синтаксисе шаблонов и понять, как URLPattern упростит жизнь фронтенд и бэкенд-разработчикам.
👉 https://habr.com/ru/companies/tbank/articles/955984/
Веб наконец-то получил удобный инструмент для сопоставления URL с шаблонами. Новый URLPattern API, уже доступен во всех основных браузерах, Node.js и Deno, позволяет элегантно проверять, парсить и валидировать ссылки, без боли и костылей с регулярками.
Читай статью, чтобы увидеть примеры кода, узнать о синтаксисе шаблонов и понять, как URLPattern упростит жизнь фронтенд и бэкенд-разработчикам.
👉 https://habr.com/ru/companies/tbank/articles/955984/
👍7❤2🔥2
✨ Полное руководство по HTTP-кэшированию
Кэширование — одна из фундаментальных, но часто недооцененных технологий веба. Правильная настройка ускоряет сайты, снижает нагрузку и экономит бюджет, тогда как ошибки в конфигурации приводят к замедлению, лишним тратам и падениям под нагрузкой.
В статье разбираемся, как на самом деле работают заголовки Cache-Control, Expires и ETag, чем no-cache отличается от no-store и как директива s-maxage может спасти ваш CDN. Узнайте, как избежать распространенных ошибок и выстроить надежную стратегию кэширования.
👉 https://habr.com/ru/companies/timeweb/articles/954906/
Кэширование — одна из фундаментальных, но часто недооцененных технологий веба. Правильная настройка ускоряет сайты, снижает нагрузку и экономит бюджет, тогда как ошибки в конфигурации приводят к замедлению, лишним тратам и падениям под нагрузкой.
В статье разбираемся, как на самом деле работают заголовки Cache-Control, Expires и ETag, чем no-cache отличается от no-store и как директива s-maxage может спасти ваш CDN. Узнайте, как избежать распространенных ошибок и выстроить надежную стратегию кэширования.
👉 https://habr.com/ru/companies/timeweb/articles/954906/
👍7🔥3👏2❤1
✨ Самый большой секрет HTML: тег <output>
Все знают про <input>, но многие упускают его семантического партнера, тег <output>. Это нативный HTML-элемент для отображения результатов вычислений или действий пользователя, который решает важную задачу доступности: он по умолчанию сообщает скринридерам о динамическом обновлении своего содержимого.
Он сопоставим с role="status", а с помощью атрибута for его можно семантически связать с одним или несколькими полями ввода. Это идеальное решение для калькуляторов, значений слайдера или индикаторов надежности пароля, которое работает из коробки без дополнительных ARIA-атрибутов.
👉 https://habr.com/ru/articles/957618/
Все знают про <input>, но многие упускают его семантического партнера, тег <output>. Это нативный HTML-элемент для отображения результатов вычислений или действий пользователя, который решает важную задачу доступности: он по умолчанию сообщает скринридерам о динамическом обновлении своего содержимого.
Он сопоставим с role="status", а с помощью атрибута for его можно семантически связать с одним или несколькими полями ввода. Это идеальное решение для калькуляторов, значений слайдера или индикаторов надежности пароля, которое работает из коробки без дополнительных ARIA-атрибутов.
👉 https://habr.com/ru/articles/957618/
❤9👍6🤯1
✨ Я ненавижу React
В статье разбираются конкретные технические моменты: почему render() не рендерит, почему useCallback не избавляет от лишних аллокаций, зачем нужна кросс-браузерная нормализация с синтетическими событиями в 2025 году, когда стандарт событий давно единый? Отдельное внимание новому компилятору, который кеширует геттеры и меняет поведение JavaScript.
Вышел откровенный разбор проблем популярного фреймворка. Хуки, компилятор и архитектурные решения, которые вызывают вопросы.
А что думаешь ты? Поделись в комментариях: любишь React за его экосистему или уже устал от его ограничений? Может, нашел альтернативу, которая решает эти и другие проблемы? 😉
👉 https://habr.com/ru/articles/959358/
В статье разбираются конкретные технические моменты: почему render() не рендерит, почему useCallback не избавляет от лишних аллокаций, зачем нужна кросс-браузерная нормализация с синтетическими событиями в 2025 году, когда стандарт событий давно единый? Отдельное внимание новому компилятору, который кеширует геттеры и меняет поведение JavaScript.
Вышел откровенный разбор проблем популярного фреймворка. Хуки, компилятор и архитектурные решения, которые вызывают вопросы.
А что думаешь ты? Поделись в комментариях: любишь React за его экосистему или уже устал от его ограничений? Может, нашел альтернативу, которая решает эти и другие проблемы? 😉
👉 https://habr.com/ru/articles/959358/
😁27💯20👍7🔥2❤1
✨ Рефакторинг формы на Signal Form
В статье разбирается миграция на новые Signal Forms — экспериментальную фичу, которая появится в Angular 21.
В отличие от Template Driven Forms, новый API ближе к Reactive Forms, но вместо Observables использует Signals, что обеспечивает лучшую интеграцию с новой реактивной моделью Angular.
👉 https://timdeschryver.dev/blog/refactoring-a-form-to-a-signal-form
В статье разбирается миграция на новые Signal Forms — экспериментальную фичу, которая появится в Angular 21.
В отличие от Template Driven Forms, новый API ближе к Reactive Forms, но вместо Observables использует Signals, что обеспечивает лучшую интеграцию с новой реактивной моделью Angular.
👉 https://timdeschryver.dev/blog/refactoring-a-form-to-a-signal-form
✍6👍5🔥4👏2❤1
✨ Ускоряем Angular: 20 советов по оптимизации
Новая серия статей собрала 20 практических рекомендаций по четырем ключевым направлениям: рендеринг, реактивность, ассеты и стилизация, сборка и диагностика.
Среди главных советов: переход на новый синтаксис control flow, использование отложенных представлений (
👉 https://medium.com/ngconf/20-ways-to-make-your-angular-apps-run-faster-part-1-rendering-optimizations-51d16425bd0e
Новая серия статей собрала 20 практических рекомендаций по четырем ключевым направлениям: рендеринг, реактивность, ассеты и стилизация, сборка и диагностика.
Среди главных советов: переход на новый синтаксис control flow, использование отложенных представлений (
@defer), миграция на сигналы и Zoneless, оптимизация изображений через NgOptimizedImage, переход на нативные CSS-анимации вместо @angular/animations, настройка билд-системы на базе Vite и esbuild.👉 https://medium.com/ngconf/20-ways-to-make-your-angular-apps-run-faster-part-1-rendering-optimizations-51d16425bd0e
👍11🔥6❤2
✨ Angular официально выбирает Vitest
Команда Angular наконец определилась с будущим фреймворком для тестирования, положив конец спорам, что использовать в новых проектах вместо связки Karma и Jasmine.
Начиная с Angular 21, Vitest станет тестовым фреймворком по умолчанию. Самое важное в этом решении, не сам Vitest, а то, что наконец-то появилась определенность. Теперь у новых проектов есть четкий вектор развития, а это снимает головную боль при выборе инструментов. При этом возможность выбрать Karma сохранится.
👉 https://github.com/angular/angular-cli/pull/31578
Команда Angular наконец определилась с будущим фреймворком для тестирования, положив конец спорам, что использовать в новых проектах вместо связки Karma и Jasmine.
Начиная с Angular 21, Vitest станет тестовым фреймворком по умолчанию. Самое важное в этом решении, не сам Vitest, а то, что наконец-то появилась определенность. Теперь у новых проектов есть четкий вектор развития, а это снимает головную боль при выборе инструментов. При этом возможность выбрать Karma сохранится.
👉 https://github.com/angular/angular-cli/pull/31578
🔥29👍8🤪3❤2
✨ Как сделать селектор вариантов доступным для всех пользователей
Веб-доступность часто игнорируют, считая ее второстепенной. Но на практике правильная семантика HTML делает продукт лучше для всех: пользователей с особыми потребностями, разработчиков и SEO.
Статья разбирает типичный селектор вариантов, показывая, как изначальный подход на <img> ломает клавиатурную навигацию, и предлагает семантическую разметку на базе <fieldset> и радиокнопок с поддержкой клавиатуры и скринридеров.
👉 https://angular.love/case-study-building-an-accessible-variant-selector
Веб-доступность часто игнорируют, считая ее второстепенной. Но на практике правильная семантика HTML делает продукт лучше для всех: пользователей с особыми потребностями, разработчиков и SEO.
Статья разбирает типичный селектор вариантов, показывая, как изначальный подход на <img> ломает клавиатурную навигацию, и предлагает семантическую разметку на базе <fieldset> и радиокнопок с поддержкой клавиатуры и скринридеров.
👉 https://angular.love/case-study-building-an-accessible-variant-selector
❤3👍2
✨ Мощь Intl API
Интернационализация — это не просто перевод интерфейса. Это корректное форматирование дат, чисел, валют, списков и даже множественных чисел с учетом культурных особенностей пользователя.
Вместо тяжелых библиотек уже давно существует нативное решение Intl API.
Intl покрывает почти все задачи локализации:
🕒 Intl.DateTimeFormat форматирует дату и время,
💰 Intl.NumberFormat работает с валютами и единицами,
📋 Intl.ListFormat строит естественные списки,
⏳ Intl.RelativeTimeFormat выводит время “вчера” или “через 3 дня”,
🗣 Intl.PluralRules помогает в работе с множественными числами,
🔤 Intl.Collator сравнивает строки с учетом языковых особенностей,
⚙️ и многое другое.
Intl поддерживается всеми современными браузерами и позволяет избавиться от громоздких зависимостей, сохранив при этом корректное отображение данных для любой аудитории.
👉 https://habr.com/ru/companies/timeweb/articles/939690/
Интернационализация — это не просто перевод интерфейса. Это корректное форматирование дат, чисел, валют, списков и даже множественных чисел с учетом культурных особенностей пользователя.
Вместо тяжелых библиотек уже давно существует нативное решение Intl API.
Intl покрывает почти все задачи локализации:
🕒 Intl.DateTimeFormat форматирует дату и время,
💰 Intl.NumberFormat работает с валютами и единицами,
📋 Intl.ListFormat строит естественные списки,
⏳ Intl.RelativeTimeFormat выводит время “вчера” или “через 3 дня”,
🗣 Intl.PluralRules помогает в работе с множественными числами,
🔤 Intl.Collator сравнивает строки с учетом языковых особенностей,
⚙️ и многое другое.
Intl поддерживается всеми современными браузерами и позволяет избавиться от громоздких зависимостей, сохранив при этом корректное отображение данных для любой аудитории.
👉 https://habr.com/ru/companies/timeweb/articles/939690/
👍17❤5
✨ Аутентификация в Angular с помощью cookies за 10 минут
Аутентификация на основе cookies — простое и эффективное решение, если вам не нужен полностью токен-ориентированный подход.
Статья показывает, как за пару шагов настроить cookie-аутентификацию: получить CSRF-токен, настроить interceptors, обработать истекшие сессии, защитить роуты, а также разобраны нюансы работы с SSR.
Важный момент: не забудьте корректно настроить атрибут SameSite для cookies, автор, к сожалению, это упустил.
👉 https://dev.to/this-is-angular/angular-authentication-with-cookies-in-10-minutes-41m8
Аутентификация на основе cookies — простое и эффективное решение, если вам не нужен полностью токен-ориентированный подход.
Статья показывает, как за пару шагов настроить cookie-аутентификацию: получить CSRF-токен, настроить interceptors, обработать истекшие сессии, защитить роуты, а также разобраны нюансы работы с SSR.
Важный момент: не забудьте корректно настроить атрибут SameSite для cookies, автор, к сожалению, это упустил.
👉 https://dev.to/this-is-angular/angular-authentication-with-cookies-in-10-minutes-41m8
👍10🔥5❤🔥1
✨ Анонс AnalogJS 2.0
Вышел AnalogJS 2.0 — мета-фреймворк на базе Angular, Vite и Nitro.
Новая версия включает множество новых функций, среди которых: content resources, оптимизация размера установки и бандла, а также обновления экосистемы Vite.
👉 https://dev.to/analogjs/announcing-analogjs-20-348d
Вышел AnalogJS 2.0 — мета-фреймворк на базе Angular, Vite и Nitro.
Новая версия включает множество новых функций, среди которых: content resources, оптимизация размера установки и бандла, а также обновления экосистемы Vite.
👉 https://dev.to/analogjs/announcing-analogjs-20-348d
🤔9🔥5👍2❤1🥱1
✨ Краткая история JavaScript
В этом году JavaScript отмечает свое 30-летие.
За три десятилетия язык прошел впечатляющий путь: от простого скрипта, созданного Бренданом Айком в Netscape всего за десять дней, до одной из самых популярных и универсальных экосистем.
Его история полна поворотных моментов: “войны браузеров”, конкуренция с JScript от Microsoft и, конечно, появление стандарта ES2015, который определил его современный вид.
Давайте проследим, как из попытки добавить интерактивность в страницы вырос язык, на котором работает весь веб.
👉 https://habr.com/ru/companies/timeweb/articles/913894/
В этом году JavaScript отмечает свое 30-летие.
За три десятилетия язык прошел впечатляющий путь: от простого скрипта, созданного Бренданом Айком в Netscape всего за десять дней, до одной из самых популярных и универсальных экосистем.
Его история полна поворотных моментов: “войны браузеров”, конкуренция с JScript от Microsoft и, конечно, появление стандарта ES2015, который определил его современный вид.
Давайте проследим, как из попытки добавить интерактивность в страницы вырос язык, на котором работает весь веб.
👉 https://habr.com/ru/companies/timeweb/articles/913894/
🔥11❤3👍3
✨ Это будущее E2E-тестирования? Как ИИ автоматизирует браузерные тесты
Автоматизация end-to-end тестирования выходит на новый уровень. Вместо того чтобы вручную писать тесты в Playwright, теперь можно просто описать поведение приложения на естественном языке.
ИИ берет PRD (Product Requirements Document), превращает его в сценарии на Gherkin, запускает тесты через Chrome DevTools MCP и формирует подробный отчет с результатами.
В статье пошаговый пример реализации на игре "Крестики-нолики", где тестируется: от логики ходов до доступности интерфейса.
👉 https://dev.to/this-is-angular/is-this-the-future-of-e2e-testing-how-ai-automates-browser-tests-from-plain-english-requirements-1d0
Автоматизация end-to-end тестирования выходит на новый уровень. Вместо того чтобы вручную писать тесты в Playwright, теперь можно просто описать поведение приложения на естественном языке.
ИИ берет PRD (Product Requirements Document), превращает его в сценарии на Gherkin, запускает тесты через Chrome DevTools MCP и формирует подробный отчет с результатами.
В статье пошаговый пример реализации на игре "Крестики-нолики", где тестируется: от логики ходов до доступности интерфейса.
👉 https://dev.to/this-is-angular/is-this-the-future-of-e2e-testing-how-ai-automates-browser-tests-from-plain-english-requirements-1d0
💩8👍3❤2👏1
🕒 Тесты против времени
Работа со временем в юнит-тестах один из самых болезненных аспектов. Особенно когда в коде полно setTimeout, debounce и прочих асинхронных операций.
Но есть простое решение: mock-часы, которые двигают время автоматически. Это позволяет тестам выполняться быстрее и реалистичнее, без необходимости вручную тикать таймеры и ждать фиксированное время, которое в будущем может измениться. Новая функциональность уже доступна в Jasmine 5.7, а также в
👉 https://blog.angular.dev/handling-time-and-mock-clocks-in-tests-5a393b32dd30
Работа со временем в юнит-тестах один из самых болезненных аспектов. Особенно когда в коде полно setTimeout, debounce и прочих асинхронных операций.
Но есть простое решение: mock-часы, которые двигают время автоматически. Это позволяет тестам выполняться быстрее и реалистичнее, без необходимости вручную тикать таймеры и ждать фиксированное время, которое в будущем может измениться. Новая функциональность уже доступна в Jasmine 5.7, а также в
@sinonjs/fake-timers 15, используемой в Jest и Vitest.👉 https://blog.angular.dev/handling-time-and-mock-clocks-in-tests-5a393b32dd30
❤7👍4🔥2
✨Angular v21: Приключение начинается
Команда Angular анонсировала мероприятие, посвящённое релизу Angular v21, которое состоится 20 ноября на YouTube.
Что нас ждет:
🤖 Новые инструменты Angular MCP Server для улучшения рабочих процессов и генерации кода с поддержкой ИИ
🧩 Первый взгляд на Signal Forms — упрощенный подход к формам, основанный на сигналах
🧭 Интересные подробности о новом пакете Angular ARIA
И это лишь малая часть того, что готовит для нас релиз, не забудьте запастись попкорном!
Отдельное спасибо NG Stream за новость
👉 https://angular.dev/events/v21
Команда Angular анонсировала мероприятие, посвящённое релизу Angular v21, которое состоится 20 ноября на YouTube.
Что нас ждет:
🤖 Новые инструменты Angular MCP Server для улучшения рабочих процессов и генерации кода с поддержкой ИИ
🧩 Первый взгляд на Signal Forms — упрощенный подход к формам, основанный на сигналах
🧭 Интересные подробности о новом пакете Angular ARIA
И это лишь малая часть того, что готовит для нас релиз, не забудьте запастись попкорном!
Отдельное спасибо NG Stream за новость
👉 https://angular.dev/events/v21
🔥34❤10🎉8⚡1🏆1🍾1🆒1
✨ Angular v21 переходит на Zoneless
Angular v21 станет первым мажорным релизом, в котором новые приложения по умолчанию используют "бесзонное" (zoneless) обнаружение изменений.
Это означает, что мы прощаемся с zone.js. Бандлы станут меньше, стек-трейсы чище, а обнаружение изменений будет срабатывать только тогда, когда вы этого хотите.
В статье вы также найдете краткое руководство о том, как перевести ваше приложение на новый режим. Спойлер: это довольно просто.
P.S. Хотите сделать Angular еще лучше? Давайте поможем Александру Инкину. Поддержите его предложение на GitHub лайком 👍
👉 https://push-based.io/article/angular-v21-goes-zoneless-by-default-what-changes-why-its-faster-and-how-to
Angular v21 станет первым мажорным релизом, в котором новые приложения по умолчанию используют "бесзонное" (zoneless) обнаружение изменений.
Это означает, что мы прощаемся с zone.js. Бандлы станут меньше, стек-трейсы чище, а обнаружение изменений будет срабатывать только тогда, когда вы этого хотите.
В статье вы также найдете краткое руководство о том, как перевести ваше приложение на новый режим. Спойлер: это довольно просто.
P.S. Хотите сделать Angular еще лучше? Давайте поможем Александру Инкину. Поддержите его предложение на GitHub лайком 👍
👉 https://push-based.io/article/angular-v21-goes-zoneless-by-default-what-changes-why-its-faster-and-how-to
👍33🔥15❤2
✨ TypeScript: краткий гайд по дистрибуции типов
Если вы когда-нибудь удивлялись, почему string | number иногда превращается в (string | number)[], а иногда в string[] | number[], добро пожаловать в мир дистрибуции типов.
Это одно из самых мощных и часто недооцененных свойств TypeScript, которое определяет, как обрабатываются union-типы в условных выражениях и шаблонных строках.
👉 https://habr.com/ru/companies/cloud_ru/articles/883872/
Если вы когда-нибудь удивлялись, почему string | number иногда превращается в (string | number)[], а иногда в string[] | number[], добро пожаловать в мир дистрибуции типов.
Это одно из самых мощных и часто недооцененных свойств TypeScript, которое определяет, как обрабатываются union-типы в условных выражениях и шаблонных строках.
👉 https://habr.com/ru/companies/cloud_ru/articles/883872/
👍6🔥5👌2
✨ Что происходит внутри 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