Angular *

✏️ 🔥 Я написал новую статью об одной из интересных функций в Angular 18: RxJS Interop. В статье рассматривается, как RxJS Interop эволюционировал с Angular 16 до 18, какие новые возможности он приносит и как его можно использовать в вашем коде.

🚀 Если вы разработчик Angular и хотите улучшить свои реактивные паттерны, эта статья для вас!

✨ Основные моменты:

- 🔄 Бесшовная конвертация между Signals и Observables.

- 📉 Оптимизированная производительность для управления реактивным состоянием.

- 💡 Использование операторов RxJS напрямую с Signals для упрощения и улучшения читаемости кода.

- 🔥 Упрощение интеграции с Firestore с помощью Signals для синхронной реактивности и более простого управления состоянием.

Всем привет! Меня зовут Ильмир, я frontend-разработчик SimbirSoft. Это моя первая статья, в которой я хотел бы разобрать тему менеджера состояний в Angular.

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

Сразу предупрежу, что ничего кардинально нового в этом проекте не предвидится и я не ставил цели «отжать» пользователей у конкурентов. Просто решил поделиться опытом разработки, возможно, кому‑то будут полезны описанные нюансы и решения. Кроме того, надеюсь и сам получить пользу от ваших замечаний, комментариев и предложений.

Цель минимум — повторить базовый функционал уже существующих решений, цель максимум — добавить новый функционал и внести те изменения, которых мне не хватает. Весь процесс буду выкладывать на GitHub, проект полностью открытый и свободный.

Немногие знают, но у Angular Team есть roadmap, в котором описаны основные цели и задачи, которые ставят перед собой разработчики. Roadmap предназначен для того, чтобы дать всем пользователям фреймворка понимание перспектив, определяемых командой сейчас, а также предоставить планы будущих релизов, чтобы улучшить пользовательский опыт других разработчиков, то есть описывает направление развития Angular.

Сигнал — это значение, которое является «реактивным», то есть может уведомлять заинтересованных потребителей, когда оно изменяется. Существует множество различных реализаций этой концепции. В данной статье мы рассмотрим имплементацию команды 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, а попутно — решить проблемы с обнаружением изменений, не прибегая к написанию дополнительного кода.