Обновить
16K+

Angular *

JavaScript-фреймворк

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

withComponentInputBinding: уменьшаем связанность, инвертируем зависимости

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели9.1K

В Angular проектах часто можно увидеть использование routed-компонентов, выполняющих оркестрирующую роль для своего роута. Они инжектят ActivatedRoute, достают из него параметры и по ним выполняют инициализацию с помощью доменных сервисов. Это кажется естественным и такой компонент принято считать smart container, «умным».

Но действительно ли ему необходимо знать про ActivatedRoute и про конкретный сервис?

В статье рассказываю, как с помощью фичи withComponentInputBinding и резолверов можно инвертировать зависимости для routed-компонентов и уменьшить их связанность.

Читать далее

Новости

Как мы внедрили Knip в Angular-проект: от настройки до CI/CD

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели9.3K

Привет! Я Незар, фронтенд-разработчик в Т-Банке. Наш Angular-проект достаточно крупный, и со временем в нем накопился неиспользуемый код. Это замедляет разработку, усложняет рефакторинг и вводит в заблуждение новых членов команды. А ручная очистка такого «мертвого» кода требует огромных трудозатрат и быстро перестает быть эффективной.

Поэтому мы решили автоматизировать этот процесс с помощью Knip — статического анализатора для TypeScript. В статье я расскажу, как мы его настроили, интегрировали в pre‑commit и CI/CD и какие результаты получили.

Читать далее

Как DevSpace ускорил проверку микрофронтендов

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

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

В статье рассказываю, как оставил всё окружение в Kubernetes, а локальную сборку начал синхронизировать прямо в pod через DevSpace.

Читать далее

Centrifugal. Fluid UI для создания standalone веб‑приложений

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

Всем привет! Меня зовут Евгений, я фронтенд‑инженер с большой экспертизой в разработке современных веб‑приложений. Сегодня хочу рассказать про свой очередной open‑source проект для построения веб‑приложений на основе Angular.

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

Итак, встречайте Centrifugal. Посмотрите официальный сайт проекта, там очень много крутых примеров использования!

Проект разрабатывался изначально, чтобы создать набор высокопроизводительных, гибких инструментов и компонентов для построения веб‑приложений. Но на одной из итераций разработки я решил обеспечить поддержку для построения All‑in‑One интерфейсов, то есть добавил режим standalone‑приложений с отображением собственной виртуальной клавиатуры, которую можно полностью кастомизировать. Тем самым обеспечил полноценную поддержку создания пользовательских интерфейсов, например, под киоски самообслуживания и тому подобное.

Читать далее

JavaScript и TypeScript в OpenIDE: Node.js, React, Angular, Git и работа с API

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

Если вы пишете на JavaScript или TypeScript, выбор инструмента обычно начинается с двух знакомых вариантов: VSCode или WebStorm.

Сегодня расскажу вам про третий вариант: OpenIDE. Это готовая IDE на базе той же платформы, которую использует WebStorm.

Философия также схожа: вам не нужно собирать рабочий инструмент из десятка расширений. В одном дистрибутиве комфортно и легко настроить и менять версии Node.js, npm, yarn и pnpm, TypeScript, React и Angular, линтеров, Git и HTTP-клиенты. Можно открыть проект и сразу заниматься делом.

Читать далее

Playwright для компонентных CAT-тестов в проекте на angular

Уровень сложностиСредний
Время на прочтение32 мин
Охват и читатели3.5K

Когда говорят «у нас есть тесты на Playwright», обычно представляют классический e2e-сценарий: тест открывает приложение, проходит авторизацию, переходит по нескольким страницам и работает с настоящим или почти настоящим backend.

Мы используем Playwright немного иначе.

Основной пласт UI-автоматизации в нашем Angular-проекте — это CAT-тесты. CAT в данном случае расшифровывается как component autotest. Мы поднимаем отдельный компонент или целую бизнес-форму в Storybook, открываем её в настоящем Chromium, выполняем пользовательские действия, управляем HTTP-ответами и сравниваем интерфейс с эталонными снимками.

Получается тест, который находится между unit и e2e:

Читать далее

DI во фронтенде: от Context API к Composition Root

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели5.6K

Современные веб-приложения содержат сложную бизнес-логику, которая ранее традиционно располагалась на бэкенде. С ростом сложности возникает необходимость в эффективном управлении зависимостями для поддержания тестируемости, модульности и слабого зацепления этих модулей в приложении. Принцип Инверсии зависимостей (Dependency Inversion, DIP) и его реализация в лице механизма Внедрения зависимостей (Dependency Injection, DI) становится ключевым инструментом для решения этих задач.

Читать далее

Как мы превратили API-контракт в отдельный артефакт и сократили генерацию клиента с 15 минут до нескольких секунд

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

Привет! Я Дмитрий, старший Angular-разработчик в команде Klecks — платформы для разметки данных AI-Центра Т-Банка.

Последние годы мы жили с NSwag: один api.ts на 13 000 строк, Docker-сборка бэкенда и ожидание по 15—17 минут каждый раз, когда менялся контракт. В рамках одной из задач мы решили перейти к модели, где OpenAPI-файлы лежат в репозитории, а клиент генерируется через ng-openapi-gen. Расскажу, какие проблемы мы пытались решить, что пробовали на стороне ASP.NET Core и какой workflow получился в итоге.

Читать далее

Флешбэки адового 2020 года, который в 2026 уже не кажется таким страшным

Время на прочтение9 мин
Охват и читатели7.1K

Спойлер: нет, я не про пандемию

Всем привет! На связи Саша Петрушин, я руковожу группой разработки в центре разработки и машинного обучения компании «Инфосистемы Джет».

Недавно я нашёл старый черновик статьи, которую так и не опубликовал с 2020 года — про фронт личного кабинета крупного портала. Перечитал и вспомнил, насколько это было круто и адово.

Дисклеймер: в этой статье – теория, как проект мог измениться в 2026 году. ИИ-агенты — это другие требования к информационной безопасности. Используйте их разумно.

В марте, в разгар локдауна, я пришёл в команду пятым разработчиком: Angular 1.4 с Backbone, переписывание на React, виджеты, 2400+ сценариев подачи заявлений. Потом мы расширили команду до двадцати фронтендеров.

В общем, поностальгировал по команде и ощущению «мы же это реально сделали».

А после задался двумя вопросами.

Как бы я решал ту же задачу сейчас?

И что вообще изменилось в реальной экономике поставки продукта за последние пять с лишним лет?

Читать далее

«Почему мы снова говорим про архитектуру?»

Уровень сложностиСложный
Время на прочтение13 мин
Охват и читатели7.7K

Разработчик интерфейсов уверен, что выбранный им фреймворк автоматически решает за него вопросы структуры и организации кода. Он искренне верит, что если взять React, Angular, Vue, да тысячи их, то получает в руки серебряную пулю, которая закроет все проблемы разработки. Достаточно следовать документации фреймворка, и с проектом все будет хорошо в долгосрочной перспективе. И я сам долгое время рассуждал точно так же, я воспринимал только Angular, потому что там есть хоть какой-то структурный подход. На практике это оказывается большим заблуждением.

Что делать и кто виноват?

1823 коммита за четыре месяца в четыре руки с LLM: что получилось, а что чуть не убило проект

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели8.6K

Четыре месяца, 1823 коммита и около 200 000 строк кода: мобильное приложение для изучения английского, почти целиком написанное через LLM-агента. Я формулировал задачи, ревьюил и принимал архитектурные решения, но код руками набирал редко.

Статья не про то, как здорово, что нейросети пишут код. Она про два места, где эта схема ломается насмерть. Первое — энтропия: локально агент пишет аккуратный код, но через двести коммитов в проекте три способа поднять модалку и четыре файла с константами анимаций. Второе — физическая реальность и невысказанные инварианты: 109 коммитов ушло на одно движение шторки над клавиатурой, а на то, чтобы «забудь» в памяти питомца работало честно, понадобилась отдельная спецификация.

Внутри: конституция проекта в CLAUDE.md, четыре слоя храповиков (включая обёртку над git, которая не даёт обойти хуки), разбор пяти причин, почему анимация рвалась на реальном Android, и слоистая память на pgvector с локальными эмбеддингами.

Читать далее

Фронтенд никогда не умрёт

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

Каждые пять лет я слышу одно и то же: фронтенд больше не нужен, ему остался последний год. Сначала говорили про визуальные конструкторы - Wix, Tilda, все дела. Потом, когда ИИ выстрелил, начали хоронить разработчиков под флагом «AI напишет тебе кнопку за секунду». А сейчас новая мода - фулстекеры. Приходят такие ребята и говорят: «Да зачем нам отдельный фронт, я сам и бэк, и фронт на коленке соберу, проект сэкономит, все будут счастливы».

Давай просто выдохнем и разберемся, что на самом деле происходит, без паники и хайпа.

Читать далее

Ленивая загрузка — не лекарство: почему ваш main.js всё равно весит 2 МБ

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели13K

Вы разбили Angular‑приложение на ленивые модули, включили production‑сборку и всё равно получили main.js весом почти 2 МБ. Причина часто скрывается в общих модулях, тяжёлых зависимостях и импортах, которые мешают tree‑shaking.

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

Читать далее

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

Как связать symfony 8 и Angular 22?

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели7.9K

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

В данной статье будет описан процесс реализации архитектуры веб‑приложения с удобной системой докер контейнеров. Здесь не будет обсуждаться CI/CD, исключительно development‑side процесса разработки.

Я использую самый свежий на момент написания PHPStorm 2026.1.4 от Jetbrains, но абсолютно не важно какой IDE вы пользуетесь. В теории можно и в блокноте писать хороший код.

Читать далее

Виртуальные Scroll-контейнеры

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

Всем привет, на этот раз хочу провести обзор инструмента ng-virtual-scroll-view.

В предыдущей статье я делал обзор на универсальные виртуализированнные списки, которые "под капотом" использовали одноосевой виртуальный scroll-контейнер. Из проекта ng-virtual-list решил вырастить ещё один инструмент, двухосевой виртуальный scroll-контейнер ng-virtual-scroll-view. Инструмент также поддерживает версии Angular с 14 по 22.

С API и примерами использования можно ознакомиться в документации.

Читать далее

TypeScript 7 перенесли на Go. Проверяем, действительно ли он быстрее в десять раз

Время на прочтение12 мин
Охват и читатели9K

Есть одно предложение, которое за последние месяцы перепечатали, кажется, все. Вот оно, в переводе с блога TypeScript:

📣 Заявка. «Проверка типов проекта VS Code (около 1,5 млн строк) ускорилась с 77.8 с до 7.5 с». Итог, который команда вынесла в заголовок, — «примерно в 10 раз быстрее».

Это не обзор релиза. Это попытка воспроизвести один график — не на кодовой базе Microsoft, а на монорепо, которое я собрал специально под замер, двумя компиляторами на одной машине, с показом каждой цифры и с репозиторием, где любую из них можно получить командой pnpm bench.

Сразу спойлер: да, TS7 быстрее, и заметно. Но „в десять раз“ живёт в одном конкретном месте, испаряется в другом, а кое-что важное в 7.0 пока не вошло — и это „кое-что“ важнее скорости.

Главная мысль:

«10×» — это про чекер на большом проекте, а не про весь ваш день. TS7 радикально ускоряет проверку типов и режет память, и замеры это подтверждают. Но в 7.0 отсутствует стабильный программный API — а с ним из сборки выпадают кастомные трансформеры, tsserver-плагины и типизированный линтинг. Поэтому вопрос миграции — не «стало ли быстрее», а «завязана ли ваша сборка на этот API».

Читать далее

Жизненный цикл API-токенов: От генерации до компрометации

Уровень сложностиСложный
Время на прочтение11 мин
Охват и читатели11K

JWT не защищает от кражи. Подпись гарантирует, что токен не подделан, но не мешает злоумышленнику использовать его, если тот оказался в чужих руках. В 2026 году утечки токенов через XSS, логи и CDN-атаки входят в тройку самых частых векторов компрометации, а медианное время обнаружения такой кражи составляет 43 дня.

В этой статье разбираем полный жизненный цикл токена — от выдачи до отзыва. Сравниваем хранение в localStorageHttpOnly-куках и BFF-прослойке. Объясняем, почему Refresh Token Rotation — это must-have, а не опция, и как детектировать кражу еще до того, как злоумышленник успеет навредить.

Читать далее

Детектор копипасты для TypeScript, Vue, Svelte и Angular

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

Копипаста редко выглядит как копипаста. После переименования переменных, строк и чисел два одинаковых блока спокойно проходят ревью как разный код. Я написал clone-alert, чтобы находить такие совпадения в TypeScript, JavaScript и шаблонах Vue, Svelte и Angular.

Читать далее

Нужен ли здесь useEffect? «хороший» React-вариант и мол-вариант здесь один и тот же код

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

На Хабре вышла хорошая статья «Нужен ли здесь useEffect?»: 12 сценариев из code review, в которых эффект либо не нужен, либо нужен не такой.

Я пишу на $mol и читал её как этнограф. в моле нет API эффектов. Во что превратятся все 12 демо, если их переписать ? Посмотрите ?. Сделал страницу с демками.

Спойлер: чек-лист из 12 строк в конце схлопнулся в …

Узнать про useEffect в $mol

Angular против React: зарплаты, кризис в IT и почему корпорации остаются на Angular

Уровень сложностиСредний
Время на прочтение30 мин
Охват и читатели11K

Angular часто воспринимают как тяжёлый корпоративный фреймворк «из прошлого»: сложный вход, много правил, меньше хайпа, чем у React. Но за последние годы фреймворк заметно изменился: появились сигналы, обновился SSR, стало проще начинать, а экосистема перестала быть закрытым «котлом» только для энтерпрайза.

Я, Александр, автор телеграм-канала «Shulepov Code», поговорил с Олегом Щёголевым — frontend-разработчиком, преподавателем, ментором и специалистом по Angular автором Telegram-канала «SUMMON_THE_CODER».    

В этом выпуске мы разбираем путь в профессию, реальные проекты, ситуацию на рынке труда, зарплаты, использование нейросетей в разработке, статус GDE, современный Angular, сигналы, SSR, CLI, директивы, модули и главный вопрос: почему React популярнее, но крупные компании всё равно продолжают выбирать Angular.

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