Обновить
64K+

Angular *

JavaScript-фреймворк

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

Современный Angular: Заменяем жизненные циклы на сигналы

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

Если вы пишете на Angular, то наверняка часто используете хуки жизненного цикла вроде ngOnChangesngOnInit и ngOnDestroy. С появлением сигналов и концепции Zoneless (когда Zone.js уже не обязателен) у нас появились более элегантные и читаемые альтернативы.

Давайте разберем, как современный подход позволяет упростить код и избавиться от "шумных" методов жизненного цикла.

Читать далее

Новости

Как вредоносный код переписал мой Git-коммит и заразил десятки проектов и несколько рабочих машин

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

История о том, как один странный git push оказался началом расследования, которое вывело меня не на один взломанный аккаунт, а на цепочку зараженных репозиториев и проектов.

Снаружи все выглядело почти нормально: знакомый автор, знакомый коммит, привычные файлы. Но внутри последнего коммита уже жил чужой обфусцированный JavaScript. Он прятался в конфиге, менял Git-историю и маскировался под обычную работу разработчика.

Первой версией был взлом моего GitHub, но смена ключей и паролей ничего не решила.

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

Это оказалась PolinRider-like supply chain атака, которая использует сам developer workflow как транспорт.

В статье я разбираю, какие мелкие странности помогли заметить проблему и почему им нельзя махать рукой.

Показываю реальные скриншоты, подозрительные изменения в .gitignore и payload внутри babel.config.js.

В конце оставил скрипты, которые могут помочь быстро проверить свои проекты и логи на PolinRider похожие признаки.

Читать далее

Горячо-холодно: как определить температуру бизнеса с помощью тепловой карты BPMSoft

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

Сколько не оптимизируй бизнес-процессы, в них всегда остается какое-то узкое место, которое может застопорить всю работу. Знакомая ситуация? Но самое неприятное, что этот «засор» иногда очень сложно найти. В обновлении 1.9 платформы BPMSoft, о нем мы рассказывали вот тут, появилась тепловая карта бизнес-процессов (БП). Это инструмент визуальной аналитики, позволяющий оценивать эффективность исполнения БП с помощью цветовой индикации: от «холодного» к «горячему». С его помощью можно анализировать всю ветку процесса или его отдельные элементы за выбранный период – по среднему времени выполнения, количеству ошибок и нагрузке на конкретные узлы. Я, Павел Копельман, product owner направления BPMS в компании BPMSoft (ИТ-холдинг LANSOFT) расскажу о том, как эта технология работает и где может реально помочь.

Читать далее

Reactive Forms vs Signal Forms: Эволюция сложных форм в Angular

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

Признаюсь честно что моя первая реакция на анонс Signal Forms, была: «О, нет, только не ещё один способ делать формы». Потому что у нас уже были Template-Driven (для быстрых и простых вариантов) и Reactive (для всего серьёзного). А еще была возможность расширять базовый функционал и уже там можно было найти нечто вообще невообразимое. Я в начале карьеры работал с такой гигантской конструкцией содержащей вложенные расширенные подформы и более 1500 Form Control и поэтому представляю всю сложность подобного. Но Angular команда решила что два способа это недостаточно и давайте добавим еще и третий.

Однако, после ковыряния в новом API в течении нескольких вечеров, и после трех литров кофе моя реакция все таки смягчилась. Ребята из команды Angular стараются не просто так а Signal Forms не так уж страшны. Особенно когда форма с которой ты работаешь уже давно разрослась и усложнилась и увешана гирляндами из FormArray и FormGroupи различной кастомщиной аки ёлка новогодняя.

В этой статье я постараюсь показать как строить сложные формы, включая динамические и расширенные, двумя способами: реактивным (старая добрая классика) и новым сигнальным.

Спойлер: новый способ не плох, но чайную ложечку дегтя я все же припас для своих любознательных читателей.

Читать далее

GiftsHub — из чат-бота в полноценный backend-продукт

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

Рассказываем про путь развития проекта, который помогает дарить подарки: веб-платформу GiftsHub. С ней удобно организовывать дни рождения и другие мероприятия.

Статья о том, как проект вырос от MVP для хакатона до полноценного бэкенд-приложения, об ограничениях во время работы и некоторых подробностях технического решения.

Читать далее

12 паттернов, которые приведут твой код в порядок

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

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

Читать далее

SSR и CSR в одном месте: как мы разделили рендеринг для людей и поисковых ботов

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

В современной веб-разработке SEO и производительность часто вступают в противоречие. SSR дает хорошую индексацию, но усложняет архитектуру. CSR быстрее в разработке и меньше нагружает сервер, но поисковые боты могут не понять страницу.

Мы разрабатываем продуктовый сайт на Angular 17 с микрофронтендовой архитектурой на Module Federation. Нам нужно было и хорошее SEO, и привычный CSR для пользователей. В итоге мы выбрали гибридный подход: для людей — клиентский рендеринг, для поисковых ботов — пререндеринг через доработанный сервис MTS botview.

В статье рассказываем, почему чистый SSR не подошел, как мы разделили рендеринг, что доработали в открытом решении и как отличаем ботов от людей без ошибок.

Читать далее

Как опубликовать сайт на хостинг за три команды: от статики до Node.js

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

Когда заканчиваешь работу над веб-приложением, будь то полноценный сайт или Telegram MiniApp, всегда есть желание сразу и без хлопот всё это захостить, показать друзьям, знакомым и сразу пустить в прод.

И встает вопрос: как вообще выложить это все в интернет, желательно по нормальной ссылке, с HTTPS и без тонны настроек VPS и nginx?

В этой статье я покажу способ, как публиковать сайты на PaaS-сервисах, просто привязав к ним Git-репозиторий и делая в него коммиты (или вообще просто перетягивая файлы в интерфейсе).

Читать далее

Формы в Angular: от Reactive Forms к Signal Forms

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

Привет! Меня зовут Егор Молчанов, я разработчик в компании Домклик.

В прошлой статье мы познакомились с новыми функциями input(), output() и model(), которые закладывают фундамент для будущего Angular без Zone.js. Сегодня мы поговорим о том, как эти изменения дошли до самой, пожалуй, наболевшей темы в любом приложении — работы с формами.

В Angular v21 появился новый, экспериментальный способ управления формами — Signal Forms. Он не отменяет старые добрые Reactive Forms, но предлагает совершенно иной подход, основанный на сигналах. Давайте разберёмся, как работали формы раньше, как они будут работать с Signal Forms, и что это нам даёт.

Читать далее

Cruzo — минималистичный UI-фреймворк без лишней сложности

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

Иногда возникает странное ощущение, что фронтенд уже не про решение задач.
А про поддержание сложности.

Я в разработке ещё до AngularJS и React. Тогда всё было просто: HTML и немного JavaScript — и этого хватало даже для приложений с rich UI.

Потом пришли фреймворки.
Один из первых — AngularJS — и это был вау-эффект.
Ты больше не трогаешь DOM руками. Просто описываешь, что хочешь получить.

Потом: Flux, Redux, TypeScript, Angular 2+. Фронтенд в этот момент стал высокотехнологичным, но в то же время неприятным. Нужно писать кучу обслуживающего кода, не всегда понятно, как оно работает, возникают сложности с отладкой.

Ознакомиться с Cruzo

Как я перестал вайбкодить и собрал работающий SDLC из пяти промптов

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

Хочу рассказать о конфигурации AI-агента для полного цикла разработки (SDLC), которую я обкатал на паре своих pet-проектов. Суть: цепочка из пяти команд — от черновика фичи до готового к ревью кода — где каждый этап выполняет AI, а я контролирую и корректирую результат между этапами.

За вечер (3-4 часа) в таком режиме AI выкатывает фичу, ручная разработка которой “по вечерам” занимала бы неделю (15-20 часов). Никаких откровений тут нет — всё, что описывается, обсуждалось тысячи раз. Новизна в том, что из общеизвестных кубиков получилось собрать работающий конвейер, которым удобно пользоваться каждый день.

Читать далее

UUI: Универсальная Пользовательская Дизайн-система для web

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

Как вырваться из замкнутого круга навязываемых акулами BigTech сомнительных технологий на простор устойчивого развития? Как сделать так, чтобы код внедряемой сейчас Дизайн‑системы — через пару лет опять не превратился в очередную, никому не нужную и максимально не удобную, «тыкву‑легаси»? Как выйти из дурного холивара с модными фреймворками на фронтенде и сделать библиотеку переиспользуемых компонент подходящую сразу для всех технологий и «на века»?)))

Ваша команда работает с большим количеством различных недокументированных проектов, основанном на одном визуальном языке? У вашей корпорации есть строгий брендбук и огромное количество клиентских веб‑сервисов написанных на разных фреймворках, которые по факту выглядят немного по‑разному в «одних и тех же мелочах»? Ваши фронты «пишут каждый свой фреймворк для дизайна заново каждый раз на каждом проекте»? Знакомо? UUI спешит к вам на помощь!

Мода на технологии все стремительней меняется, а браузер и простой интерфейс в нем остается. Вышел новый модный фреймворк и заказчику хочется проект именно на нем? Да пожалуйста! Легко! Так мы становимся максимально независимы от капризной и накаченной лоббированием индустрии реализуя основную задачу. Поставляя единый гайдлайн повсюду.

Читать далее

Чистые функции в html шаблонах Angular

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

Начиная с версии 21.2 Ангуляр внедрил поддержку чистых JS функций в html шаблонах. Теперь можно инлайнить функции без необходимости определения их в классе компонента. Фича, на мой взгляд, довольно противоречивая, поэтому давайте разбираться.

Читать далее

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

Angular Signal Forms: Быстрый старт

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

19 ноября 2025 года команда Angular выпустила 21 версию фреймворка. Одно из основных нововведений - сигнальные формы.

Разберем преимущества нового API и как начать с ним работу

Читать далее

Signal Forms в Angular

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

В Angular v21 у разработчиков появится новый, пока что экспериментальный, способ создавать формы: Signal Forms.

После многих лет работы с формами, управляемыми шаблоном, template-driven forms (ngModel), и реактивными формами, reactive forms (formGroup/formControl), у нас появился третий подход, целиком основанный на сигналах и доступный в пакете @angular/forms/signals.

В этой статье мы разберем основы: создание форм, обработку отправки и добавление валидации.

Разобраться в формах

react-ui-kit-forms: новая библиотека для работы на React в стиле Angular

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

Связка React+MobX хорошо себя зарекомендовала при работе с формами, в то время как за реактивность модели данных в Angular обычно отвечает библиотека RxJS. Но что делать, если вы хотите воспользоваться преимуществами Angular в React или Node.js? В этой статье речь пойдет о новой библиотеке от Cloud X, которую мы разработали для того, чтобы проложить “мостик” из мира Angular, где всё богато, но дорого в мир React, где все дешево, но скудно. В этой статье я описываю применение ядра @cloudx/react-ui-kit-forms, которое отвечает за структуру модели данных, реактивность модели данных и контроль состава данных (валидацию), позволяя “скрестить” плюсы React и Angular на одном проекте. 

Читать далее

Проектируем профессиональный фронт для мессенджера

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

Перед тем как писать наш будущий мессенджер нужно определиться с технологией на которой будем его разрабатывать. Явными фаворитами среди инструментов web разработки для SPA являются Angular и React. Я не буду акцентировать преимущества каждого из этих инструментов, а остановлюсь сразу на Angular, т.к. ранее проводил ресёрч по не классическим виртуализированным спискам и выявил, что для данной задачи он справится эффективнее, чем React.

Читать далее

Создаем формы: что делать, если вам нравится и React, и Angular одновременно

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

Когда речь идет о веб-разработке, а именно — о разработке форм, можно встретить множество мнений о том, «на чем» лучше делать проект. Очень часто React и Angular Framework рассматриваются как альтернативы друг другу. При этом выбор фреймворка — критически важный этап, который определяет дальнейшую разработку и особенности развития технологического стека компании.  

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

Читать далее

Избавляемся от утечек памяти в Angular с withExperimentalAutoCleanupInjectors

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

В версии Angular 21.1 появилась экспериментальная функция маршрутизатора withExperimentalAutoCleanupInjectors. Эта настройка для решения давней, печально известной архитектурной особенности, связанной с управлением памятью при навигации между страницами.

Читать далее

Новые реактивные формы в Angular: Signal Forms API

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

Привет! Меня зовут Незар, я фронтенд-разработчик из Т-Банка. В 21 релизе Angular команда разработчиков представила экспериментальное API для построения реактивных форм с помощью сигналов. В статье подробно его разберем. 

Тому, кто знаком с классическими Reactive Forms в Angular, новый Signal Forms API покажется эволюционным шагом: те же мощные возможности, но с сигналами — а значит, с автоматической реактивностью, полной типизацией и меньшим количеством шаблонного кода. 

Покажу, как с помощью сигналов теперь можно быстро создать типобезопасную форму, настроить валидацию с условными правилами, гибко управлять состояниями полей и легко встраивать кастомные компоненты-контролы. Сделаем код чище, а логику — прозрачнее. Присаживайтесь поудобнее, начинаем!

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