Сигнал — это значение, которое является «реактивным», то есть может уведомлять заинтересованных потребителей, когда оно изменяется. Существует множество различных реализаций этой концепции. В данной статье мы рассмотрим имплементацию команды Angular, углубимся в код и попробуем разобрать, как именно работает алгоритм сигналов изнутри.
Angular — это мощный инструмент для создания сложных веб-приложений. Но, как и в любом другом фреймворке, возникают свои сложности. Одна из таких проблем — это частые перезапуски тяжелых функций в шаблонах, что сильно бьет по производительности. Если приложение начинает тормозить, значит пора задуматься об оптимизации. И здесь на помощь приходит Memoize Pipe, способный спасти ваш интерфейс от лишних вычислений.
Так как версионирование через плагин nx-semantic-release происходит путем анализа изменений по связанным Typescript-импортам, то нам нужно минимизировать эти изменения, для этого в проект подключаем lint-staged и добавляем строгости в Typescript-код.
Подключение и настройка nx-semantic-release плагина для NX-монорепозитория для автоматического создания релиза с последующим деплоем приложений.
В Kubernetes очень легко настраивается работа с SSL, это наверное одна из главных причин почему я и начал им пользоваться, в этой статье я опишу простой сценарий его подключения.
Когда в команде нет DevOps - инженеров, но очень хочется задеплоить приложение в Kubernetes, можно легко это сделать с помощью https://microk8s.io, в данном посте я опишу как это сделать и открыть доступ к приложению на определенном порте.
В этом посте я настрою сборку Docker-образов: Билдер NestJS и Angular приложений; Мигратор баз данных с помощью Flyway; Тест-раннер для запуска фронтенд и бэкенд E2E-тестов; Nginx c встроенной статикой Angular приложения; NestJS приложение.
Недавно я поехал на море с другом. Во время пути мы узнали, что YouTube собираются блокировать (или замедлять). Тут в моей голове родилась идея: почему бы не сделать видеохостинг в Telegram? Я поспорил с другом, что сделаю его по дороге, но ноутбук сел. Поэтому мы договорились, что я сделаю это за день (спойлер: получилось, но кривовато).
Прописываем секретные переменные окружения в гитхаб.
Устанавливаем "GitHub Actions"-раннер на выделенный сервер.
Настраиваем workflow для "GitHub Actions".
Покупаем выделенный сервер и настраиваем SSH доступ к нему с локального компьютера.
Добавляем https://github.com/SteveLTN/https-portal в "Docker compose" для автоматической генерации и продления сертификатов.
Для запуска собранных приложений в режиме PM2 фронтенд будет встроен в бэкенд в виде статичных файлов.
Для запуска в режиме "Docker Compose" бэкенд будет собран в виде Docker образа, а собранная статика фронтенда будет отдаваться через и Nginx.
База данных запускается через "Docker Compose".
Подключение генератора Swagger документации к бэкенду.
Подключение https://www.npmjs.com/package/prisma-class-generator для генерации DTO из Prisma - схемы.
Создание nx библиотеки для работы с бэкендом.
Подключение https://www.npmjs.com/package/@openapitools/openapi-generator-cli для генерации SDK для работы с бэкендом.
В этой статье я расскажу о том, как разрабатывать веб-компоненты с использованием библиотеки Fusor и преимуществах данного подхода.
Такие компоненты можно будет затем собирать в полноценные веб-приложения, сопоставимые с теми, что созданы с использованием React, Angular, Vue, Solid, Svelte и т.д.
Angular теперь поддерживает TypeScript isolatedModules начиная с версии Angular 18.2. Благодаря этой поддержке мы сможем заметить увеличение производительности до 10% во времени сборки для production на своих проектах.
Привет Хабр. На связи Даня, Angular-разработчик из команды Т-Бизнеса.
У меня для вас статья по работе с динамическими компонентами. Мы подробно рассмотрим процесс создания этих компонентов, будут детальные примеры кода и пошаговое руководство всего процесса создания. Я добавил комментарии и описания, чтобы прояснить важные моменты и улучшить понимание концепций.
Добро пожаловать под кат!
Разработчики Angular постоянно работают над улучшением фреймворка, добавляя новые функциональные возможности и меняя подходы в работе с данными. Одно из наиболее ярких новшеств — Signals API и некоторые специфические части этого API.
При наличии уже устоявшихся практик и подходов этот API может показаться избыточным и даже лишним, но только на первый взгляд. Ведь часто бывает так: что‑то новое выглядит неудобным, но через время все оказывается иначе и уже даже не понимаешь, как жил без этого раньше.
В статье я расскажу о Signal и Model Inputs и о том, как они могут заменить классические декораторы Input и Output, а попутно — решить проблемы с обнаружением изменений, не прибегая к написанию дополнительного кода.
Создание приложения происходит через nx схематик для Angular.
Адрес сервера задается жестко в коде, в следующих постах адрес будет перенесен в переменные окружения.
Для запуска E2E-тестов используется "Playwright".
Рад поделиться, что мы опубликовали первый стабильный релиз четвертой мажорной версии Taiga UI — нашей огромной библиотеки компонентов для Angular. Улучшений в нем так много, что одной статьи едва ли хватит. Расскажу про самые аппетитные из них.
Недавнее объявление о блоке @let в Angular вызвало бурное обсуждение в сообществе разработчиков, одни считают его ценным дополнением, другие видят в этом ненужное усложнение.
Сигналы - новый реактивная модель для фреймворка Angular, который предлагает улучшение производительности, а также более простой подход к написанию реактивного кода.
Для многих моих коллег сигналы стали чем-то мистическим. С одной стороны, код с ними стал выглядеть элегантнее, с другой была обнаружена проблема с пониманием внутренних механизмов их работы. В частности, загадочно выглядели computed сигналы, в которых в отличие от хуков React не прописываются зависимости напрямую. Также возникали вопросы связанные с детекцией изменений. В отличие от Observable и async pipe, который использует напрямую ChangeDetectorRef, сигналы могут вызываться в шаблоне, вызывая, при этом, его изменения.
В этой статье мы погрузимся в исходный код сигналов и разберем детально их работу.
