Angular *

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

В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.

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

React стал символом этой модели. Благодаря Fiber и Concurrent Mode он действительно стал быстрее, но его архитектура по‑прежнему опирается на дерево компонентов и диффинг виртуального DOM. Даже с умным планировщиком React всё ещё «пересчитывает дерево», а не конкретные зависимости данных.

И вот на этом фоне появилась Signals — архитектура, которая предлагает другой путь.
Не оптимизировать старую модель, а избавиться от неё, сделав обновления атомарными и точечными. Без VDOM, ререндеров и догадок.

В этой статье мы разберём, чем «сигнальная реактивность» отличается от компонентной, и на реальных примерах из Solid.js и Angular Signals посмотрим, где именно проходит граница между «умным диффом» и «fine‑grained реактивностью».

Всем привет! Меня зовут Кулаев Сергей, я — Angular-разработчик в ПСБ. В этой статье я поделюсь с вами внутренним устройством примитива signal (сигнал). В Angular уже достаточно давно появилась возможность обрабатывать изменения данных через этот примитив, и большинству людей он уже знаком, но мало кто понимает, как он устроен под капотом. В ходе статьи мы разберём, что из себя представляет сигнал, в каких библиотеках он встречается, а также напишем свою собственную наивную реализацию сигнала и на её основе детально разберём принцип его работы. Статья будет полезна тем, кто при изучении технологий любит построить свой «велосипед», чтобы разобраться, как это работает на пальцах.

При интеграции CSS-фреймворков или UI-библиотек часто подключают готовые сборки, но такой подход ограничивает возможности кастомизации и увеличивает размер проекта.

В этой статье я покажу, как использовать исходный код Bootstrap (SCSS), настроить модульную структуру и подключить только те компоненты, которые действительно нужны. Результат — чистая архитектура стилей, меньший размер сборки и удобный фундамент для будущей дизайн-системы.

Иконочные шрифты — лучшие!

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

Angular Signals 101 Это не поверхностный обзор, а полное погружение в мир сигналов. Мы разберем всё: от публичного API до внутреннего устройства планировщика в Zoneless.

Белый экран при загрузке SPA — типичная боль. Пользователь открывает приложение, ждёт пока загрузится приложение, а экран пуст. А если качество связи оставляет желать лучшего а размер чанков не может похвастаться оптимизацией(да это отдельная тема для обсуждений, но все же)? Я часто сталкиваюсь с этим в реальных проектах и вот наконец то появилось время и силы сделать так, чтобы у пользователя никогда не было пустоты на экране.

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

Но даже в самом аккуратном коде могут появляться утечки памяти. Утечка памяти возникает, когда объекты, которые больше не нужны, остаются в памяти, потому что на них ещё есть ссылки. Для браузера они живы, сборщик мусора их не трогает.

Для Angular‑разработчика это важно, потому что:

В данной статье будет предоставлена детальная информация по реализации высокопроизводительного вьюпорта мессенджера на Angular, который обеспечит высокую и плавную скорость работы и низкое потребление ресурсов с применением инструмента виртуализированных списков ng-virtual-list. А также представлен порт на React.

Всем привет! Меня зовут Александр Битько, я фронтенд-разработчик в ПСБ. Сегодня поговорим об одной из частых болей в работе с микрофронтенд-архитектурой — поиске баланса между независимостью микрофронтов и согласованным UI. Когда независимые микрофронты используют разные подходы к стилям (CSS-фреймворки, методологии вроде BEM или CSS-in-JS, глобальные стили), возникают конфликты с визуальной несогласованностью в приложении. Красная кнопка вдруг становится зелёной, шрифты начинают прыгать и так далее. 

Что с этим делать? В этой статье я расскажу о конфликтах стилей: какими они бывают, как с ними бороться и какие стратегии лучше подходят для приложений в разных случаях. И приведу примеры, как это работает на Angular и на React с использованием наиболее популярных библиотек Angular Matherial и MUI. Поехали.

ControlValueAccessor - это то, что отделяет профессиональную дизайн‑систему от набора костылей. Но как грамотно связать его с состоянием контрола (invalid, touched), не создав циклических зависимостей? Эта статья - не просто «ещё один туториал». Это пошаговое руководство по созданию универсального инпута на современном стеке: Signals, OnPush и безопасный инжект NgControl. Разбираем раз и навсегда.

Полная реализация push-уведомлений в PWA без сторонних сервисов

Разбираем архитектуру: Service Worker, Push API, VAPID ключи и Notifications API. Показываем, как настроить PWA для работы на всех платформах, включая iOS.

В статье:
• Теория всех компонентов системы
• Готовый код Service Worker и клиентской части
• Backend на Express с отправкой уведомлений
• Настройка PWA для iOS 16.4+
• Детекция платформы и предложение установки

Все работает из коробки! 🎯

Привет, Хабр! Меня зовут Игорь Поляков, работаю веб-программистом технологических приложений ВЕРТИКАЛЬ. В данной статье расскажу о стратегии обнаружения изменений в Angular с учетом обновлений фреймворка версии 17 и выше. Если вас беспокоит вопрос производительности и вы желаете разрабатывать оптимизированные приложения, добро пожаловать! 🚀

Как многие знают, Angular сделал большой шаг к тому, чтобы улучшить опыт использования AI. Но эта попытка затерялась на фоне куда более серьезных фичей, которые приковали к себе всё внимание коммьюнити (я имею в виду signals и zoneless). Тем не менее, на мой взгляд, Angular задал интересный тренд в мире фреймворков, который не стоит обходить стороной. Я попробовал воспользоваться новыми возможностями данного фреймворка в области использования AI, и в этой небольшой статье хотел бы поделиться своим опытом и первыми впечатлениями

Представьте, что вы делаете сайт-визитку или интернет-магазин на Angular. У вас есть главная страница, страница «О нас» и страница с товарами. Логично, что при клике на ссылки пользователь должен переходить между этими страницами

В классических сайтах это решается просто: при каждом клике браузер запрашивает у сервера новую HTML-страницу. Но в современных SPA (Single Page Applications) всё работает иначе — приложение загружается один раз, а дальше мы просто подменяем содержимое внутри него

Именно за это отвечает Angular Router.

Привет, Хабр! Я Антон Марченко, разработчик в Т-Банке. Поделюсь интересной задачей по работе с потоками на RxJS, которую мы однажды решали. Представьте платформу внутренних продуктов и сервисов, на которой реализован поиск по статьям и постам. Нам предстояло внедрить на сайт несколько внешних поисков: по пользователям, ссылкам и исходникам. А еще предусмотреть скелетоны и обработку ошибок и заложить возможность добавлять новые внешние источники поиска динамически, не дорабатывая каждый раз пользовательский интерфейс.

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

Так и тут. Прилетает мне баг от тестировщика с описанием:

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

Естественно, у меня ни разу не воспроизвелось. Ну и как с этим работать?

Дальше расскажу о, возможно, самом странном баге в моей карьере.

Angular долгое время ассоциировался с RxJS. Даже слишком: многие разработчики ощущали, что без Observable ничего не работает. Но вот в Angular 17 появляются Signals — синхронная реактивность прямо из коробки. В 17+ — они становятся мейнстримом. Возникает вопрос: а что делать с RxJS? Выбрасывать?

Signals и RxJS — не конкуренты, а два мощных инструмента для решения разных задач. И если их правильно сочетать, можно построить удобную, масштабируемую и эффективную архитектуру.

Как инкрементальная гидратация в Angular помогает сделать приложения действительно быстрыми

Если вы когда-либо запускали SSR в Angular, вы наверняка сталкивались с этим парадоксом: страница вроде бы загружается молниеносно, но ощущается медленной. Контент есть, кнопки на месте — а кликаешь по ним, и в ответ тишина. Почему? Потому что браузер всё ещё «оживляет» интерфейс — запускает JavaScript, подключает обработчики, восстанавливает состояние. Это и есть гидратация, и в классическом исполнении она не так уж и быстра.

Пустые состояния (Empty States) — это незаметные, но критически важные элементы интерфейса. Что видит пользователь, когда список задач пуст, поиск не дал результатов или дашборд ещё не содержит данных? Пустой экран? Бесполезный спиннер? Или продуманное сообщение, которое помогает сориентироваться?

С появлением декларативного управления потоками (declarative control flow) в Angular обработка пустых состояний стала проще и элегантнее. Одна из ключевых возможностей — директива @empty, которая делает код чище, а интерфейс — дружелюбнее.

Давайте разберёмся, как это работает.