Команда JavaScript for Devs подготовила перевод статьи о том, почему веб-команды застревают на орбите фреймворков и забывают о возможностях самой платформы. Автор убеждён: браузеры развиваются быстрее, чем экосистемы вокруг них, а зависимость от React и других инструментов тормозит инновации. Пора снова смотреть на веб как на платформу, а не как на “внутренность” фреймворка.
Привет, меня зовут Дарина. Два очень увлекательных года я работала в команде разработки дизайн-системы Prizm.
Это был мой первый опыт работы над «библиотечным» проектом, и он сильно расширил мой угол зрения и представления о том, как можно работать с кодом. Ещё он подарил множество интересных открытий, которые помогают мне в ежедневной работе и сейчас.
Всем привет!
Меня зовут Илья Чубко, я — технический архитектор в направлении, которое занимается внедрением CRM-системы на low-code платформе BPMSoft для автоматизации и управления бизнес-процессами крупных и средних компаний в единой цифровой среде вендора «БПМСофт».
В статье «Как с помощью Angular доработать CRM-систему: наш опыт с BPMSoft» мы уже рассказывали, как можно создать Angular-приложение и встроить его в систему.
А что, если таких компонентов становится всё больше, они зависят друг от друга и используются как строительные блоки в архитектуре платформы и создаваемых на ней решений?
В этой статье я поделюсь опытом, как мы в К2Тех построили единую экосистему Angular-компонентов — с общей инфраструктурой, управлением зависимостями и автоматической сборкой на базе монорепозитория Nx.
Angular v21 подъехал — и это один из самых насыщенных релизов за последние годы.
Главные нововведения:
🔥 Signal Forms — реактивные формы на сигналах с полной типизацией и упрощёнными кастомными компонентами.
🎨 Angular Aria (Developer Preview) — headless-компоненты с приоритетом на доступность и вашей собственной стилизацией.
🤖 Angular MCP Server стал стабильным — теперь ИИ-агенты могут понимать ваш код, искать примеры, обновлять проект и даже обучать Angular.
🧪 Vitest — новый стабильный test runner по умолчанию.
⚡ Zone.js больше нет в новых приложениях — Zoneless теперь стандарт, что даёт меньше магии, больше производительности.
📚 Обновлённая документация: новый Signals tutorial, переработанный Routing, улучшенное DI, Material-темизация и полноценный гайд по Tailwind.
➕ Плюс десятки мелких улучшений: CLDR v47, RegExp в шаблонах, новый formatter сигналов, улучшения CDK, анимаций и DevTools.
Angular продолжает разворачиваться в сторону реактивности, AI-first разработки и отказа от лишней магии.
Если ещё не пробовали — самое время запустить ng update и посмотреть, что может v21.
Раньше глобальные изменения — обновление Angular, смена сборщика или миграции — превращались в мини-кризис: кто тестирует, кто делает ревью, релиз мог сломать всё. Теперь у нас прозрачный процесс с RFC, согласованием с лидами, SLA на ревью и тестирование, чётким планом релиза и отката.
Результат: меньше хаоса, больше прозрачности и уверенности, что глобальные изменения проходят безопасно.
React — популярная библиотека JavaScript, которая заслуженно пользуется популярностью у фронтендеров. А вот Angular часто называют избыточно усложненным и даже отчасти устаревшим. Мне довелось поработать на реальных проектах и с тем, и с другим, каждый раз проходя путь от «да как на этом вообще можно работать» до «человечество не придумало ничего лучше».
Привет! Я Полина, фронтенд-разработчик в Selectel. В этой статье я решила залезть в темные уголки React и Angular, чтобы лично посмотреть, что же там происходит. Для чистоты эксперимента я выбрала шесть типовых несложных задач, для решения которых подойдет и фреймворк, и библиотека. Подробности под катом.
Когда я только начал осваивать Angular, мне не было до конца понятно, что это за зверь такой — Pipe, и зачем вообще его использовать. Официальная документация гласит следующее:
Pipes представляют специальные инструменты, которые позволяют форматировать отображаемые значения
Да, это действительно объясняет, что делают Pipes. Но в тоже время не отвечает на вопрос, а зачем их использовать? Почему нельзя воспользоваться обычным методом класса? Pipes для меня какое‑то время был тёмной лошадкой. Но потом я узнал «страшный секрет» о Pipes, который всё расставил на свои места
Небольшой спойлер, чтобы не словить минус карму за кликбейт: речь пойдет о том, что чистые Pipes кэшируют результат трансформации (в документации это указано не так явно, как хотелось бы). В статье рассказано, как использовать эту особенность, чтобы избегать проблем во время проверки изменений (Change Detection)
Я был программистом больше 20 лет. Начинал с плюсов и геймдева, но работал и с HFT, и с мобильными играми на Java, писал под Unity и C#, трудился на банки и автоматизировал бизнес.
В конце 2023 года я конкретно выгорел и, имея на счету средства, чтобы не работать несколько лет, решил отдохнуть. Примерно в это же время начал усиливаться хайп вокруг нейросетей, к которым я всегда относился очень скептически, поскольку помнил их возможности ещё со времён универа. Для меня это была полузабытая технология из 50-х.
Первая модель, с которой я решил поиграться, — это был GPT-3.5, ретранслировавшийся в телеграм-канал. Особо ничего не ожидая, я попросил его написать код, который делит отрезок пополам. И... у меня отвисла челюсть, когда он действительно это сделал. Дрожащими руками я скопировал и вставил код небольшого контроллера и попросил его запилить в Angular-сервис. И опять он справился на отлично! Назад дороги не было. В первый же день я твёрдо решил бросить опостылевшее программирование и полностью переложить на нейросети написание кода, оставив себе только генерацию идей и тестирование (там, где это необходимо).
Аргументы, что, дескать, «тупая железяка никогда не заменит человека», меня всегда веселили. Да мне плевать, кто там и где кого заменит. Если раньше при сборке приложения вываливались непредвиденные ошибки и я, чертыхаясь, откладывал задачу, то теперь я просто на автомате копипастил код, шёл на кухню за кофе и вставлял правки, которые предлагала та самая «тупая железка».
Первый проект, на котором я решил опробовать нейросети, — это ru-ticker.com. Он много лет кормил меня, но конкуренты выросли в большие корпорации с капитализацией в миллиарды, и мне уже было не угнаться со своим пет-проектом, который принёс только несколько миллионов, но рублей. Задача была портировать его на Angular, который я знал посредственно — на уровне «поправить баги в корпоративном проекте». В итоге примерно за полтора-два месяца я полностью портировал фронт проекта, который до этого ковырял пару лет, плюс походя реализовал такие плюшки, как автоматический парсинг данных и текста с преобразованием нейросетью для лучшей индексации поисковиками.
Решил мигрировать с WebStorm на VS Code, но обнаружил, что нет поддержки автоимпорта Angular-компонентов. В WebStorm это работало из коробки — начинаешь писать <app-, IDE сразу подсказывает компоненты и автоматически добавляет импорт. В VS Code такого не было.
На первый взгляд задача выглядела несложной — пару регулярок накидать и можно сделать своё решение.
Но пока я разбирался с регулярками, Angular-разработчики выпустили официальную поддержку: добавили импорты на автокомплит и диагностику. Можно было опустить руки, но официальная реализация оказалась неидеальной, и у меня было несколько идей фич, которые позволяют сохранить актуальность проекта и приблизить опыт работы к WebStorm.
Привет, Хабр!
Каждый, работавший с формами в Angular, рано или поздно сталкивается с ситуацией, когда стандартных полей ввода недостаточно. Хочется сделать что-то свое: например, красивый рейтинг в виде звёздочек, компонент для ввода телефона с маской или даже кастомный текстовый редактор на базе contenteditable. Однако просто создать компонент недостаточно, Angular Forms не поймет, как работать с вашим контролом без дополнительных вмешательств.
Миграция с одного фреймворка на другой, например, с Angular на React, — задача, с которой сталкиваются многие команды. Причины могут быть разными: устаревший стек, проблемы с поддержкой, нехватка специалистов на рынке или потребность в более современных инструментах. Так или иначе, в какой-то момент становится очевидно: продолжать развивать проект на старом фреймворке становится дороже и рискованнее, чем перенести его на новый.
Меня зовут Александр Марченко. Я руководитель команды Frontend-разработки в ОК. В этой статье я расскажу о особенностях и способах миграции Angular приложения на React, а также поделюсь своим опытом.
Переменные 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.
