Обновить
19.13

Angular *

JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

Как использовать любой CSS-фреймворк в вашем проекте — Часть 2

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров620

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

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

Читать далее

Новости

Как ускорить render приложения в 68 раз, и при чём тут Signals

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров6K

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

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

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

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

Читать далее

Препарируем signal: непростой примитив

Уровень сложностиСредний
Время на прочтение17 мин
Количество просмотров4K

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

Читать далее

Как использовать любой CSS-фреймворк в вашем проекте — Часть 1

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.8K

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

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

Читать далее

Практическое руководство по иконкам в веб-проектах — Часть 2

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров2.9K

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

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

Читать далее

Angular signals 101

Уровень сложностиСложный
Время на прочтение40 мин
Количество просмотров5.3K

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

Начать полное погружение

Бесшовный старт в Angular или как избавиться от пустоты при старте SPA приложения

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров1.6K

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

Читать далее

Angular и память: как не создавать утечки

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2.1K

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

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

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

Читать далее

Пишем высокопроизводительный вьюпорт для мессенджера

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров1.4K

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

Читать далее

Изолируй это! Про конфликты стилей в микрофронтендах

Время на прочтение14 мин
Количество просмотров1.1K

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

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

Читать далее

Пишем переиспользуемые инпуты для реактивных форм с ControlValueAccessor + NgControl/Injector

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров747

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

Освоить CVA раз и навсегда

Push-Notifications в PWA и браузере: полная реализация без сторонних сервисов

Уровень сложностиСредний
Время на прочтение17 мин
Количество просмотров4.5K

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

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

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

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

Читать далее

Стратегия обнаружения изменений в ANGULAR 17+

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров1.8K

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

Читать далее

Ближайшие события

Angular и AI: ускоряем процесс разработки

Время на прочтение4 мин
Количество просмотров3.7K

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

Читать далее

Angular Router для начинающих: понятный гайд с примерами

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров981

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

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

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

Читать далее

Поиск на RxJS и Taiga UI

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров2.5K

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

Читать далее

История одного бага

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров9.9K

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

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

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

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

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

Читать далее

Angular Signals + RxJS: объединяем два реактивных мира в одном стейт-менеджере

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров3.2K

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

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

Читать далее

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

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров2.2K

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

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

Читать далее

Как @empty в Angular упрощает работу с пустыми коллекциями

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров1.5K

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

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

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

Читать далее
1
23 ...