Бу! Испугался? Не бойся. Angular 19 уже не за горами и представляет новый мощный примитив, называемый linkedSignal, который поможет вам управлять сложным состоянием в ваших приложениях. Это альтернатива использованию effect
для простого обновления сигнала на основе изменения другого сигнала. В прошлом мы видели, как сообщество обсуждало, чтобы избегать использования effect
и вместо этого использовать computed
для сброса сигналов на основе изменения другого сигнала.
Angular *
JavaScript-фреймворк
Новости
Front-end глазами back-end разработчика
Всем привет! После учебы попал на ферросплавный завод в 2005 году, сначала "киповцем" в цех КИПиА, а позже меня перевели в службу АСУТП. Там относительная свобода в сравнении с цехом АСУП, потому что у них там были разные корпоративные стандарты безопасности, Active Directory и другие ограничения на разработку. В нашем же цехе, хоть и была проблема с Интернет, все сервера были на тот момент ограничены внутренней сетью, но на тот момент дома почти у всех был ADSL и дома можно было искать информацию, а потом на работе ее использовать.
В итоге практика написания скриптов на VBScript (в SCADA Cimplicity был на тот момент только этот язык для написания сценариев, как и во многих других пакетах), с использованием Win32API, проект на Delphi с использованием Mutex и Semaphore, первый проект и вроде даже не один на Visual C++ MFC, поддержка и отладка проектов на Borland C++ и С++ Builder, с нуля созданный портал на PHP (спасибо коллеге Антону - это была его идея, чтобы не дописывать проект на умирающем уже на тот момент Delphi, хотя он вроде функционирует до сих пор), ну и самое главное, что появился опыт работы с MS SQL (почему-то нам его даже в университете не преподавали).
На следующем месте работы было более глубокое погружение в MS SQL, так как вся бизнес-логика была реализована на нём, и знакомство с Visual C# и .NET Framework, так как на нем был клиент написан на WinForms. Так же не первый опыт работы с OPC.
Но проект заканчивался, а новых пока там не планировалось, поэтому в следующей организации было знакомство с ASP.NET WebForms и, помимо MS SQL, уже и с Oracle DB. Всё было на примитивном уровне, опять сбор данных, хранение, отображение. Там было реализовано своеобразное хранение и отображение данных по сменам рабочих с помощью рекурсий на T-SQL.
Создание пользовательского интерфейса для модуля Webhook с помощью Angular
Cоздание таблички отображающей данные и формы для ее заполнения, интерфейсы строятся на компонентах от https://ng.ant.design, формы создаются и управляются с помощью https://formly.dev, для стилей используется https://tailwindcss.com, стейт машины нет.
Мощь CSS-масок
Декабрь 2023 года стал значимой датой в истории развития CSS-свойства mask: все современные браузеры в своих последних версиях обеспечили его полную поддержку, теперь без использования своих вендорных префиксов. А это означает, что данное свойство прочно и надолго вошло в жизнь каждого фронтенд-разработчика. Осталось лишь фронтенд-разработчикам принять его в свою жизнь и перестать его бояться!
В статье я кратко напомню основные теоретические идеи свойства и подробно расскажу о реальных примерах использования на основании опыта разработки Taiga UI.
Истории
RxJS Interop в Angular 18: основные изменения и преимущества
✏️ 🔥 Я написал новую статью об одной из интересных функций в Angular 18: RxJS Interop. В статье рассматривается, как RxJS Interop эволюционировал с Angular 16 до 18, какие новые возможности он приносит и как его можно использовать в вашем коде.
🚀 Если вы разработчик Angular и хотите улучшить свои реактивные паттерны, эта статья для вас!
✨ Основные моменты:
- 🔄 Бесшовная конвертация между Signals и Observables.
- 📉 Оптимизированная производительность для управления реактивным состоянием.
- 💡 Использование операторов RxJS напрямую с Signals для упрощения и улучшения читаемости кода.
- 🔥 Упрощение интеграции с Firestore с помощью Signals для синхронной реактивности и более простого управления состоянием.
Как использовать менеджер состояний NgRx для Angular-проектов
Всем привет! Меня зовут Ильмир, я frontend-разработчик SimbirSoft. Это моя первая статья, в которой я хотел бы разобрать тему менеджера состояний в Angular.
Тварь ли я дрожащая или право имею? Берем чужие сайты под свой контроль. Часть 1 — Chrome расширение на Angular 18
Как многие сказки начинаются с уже привычных фраз «жили‑были...» или «в некотором царстве, в некотором государстве...», так многие пет‑проекты или просто творческие эксперименты, опыты программиста начинаются с фразы «дело было вечером, делать было нечего...». Точно так же и в моем случае — появилось свободное время, так почему бы не потратить его с пользой?
Сразу предупрежу, что ничего кардинально нового в этом проекте не предвидится и я не ставил цели «отжать» пользователей у конкурентов. Просто решил поделиться опытом разработки, возможно, кому‑то будут полезны описанные нюансы и решения. Кроме того, надеюсь и сам получить пользу от ваших замечаний, комментариев и предложений.
Цель минимум — повторить базовый функционал уже существующих решений, цель максимум — добавить новый функционал и внести те изменения, которых мне не хватает. Весь процесс буду выкладывать на GitHub, проект полностью открытый и свободный.
Angular Roadmap
Немногие знают, но у Angular Team есть roadmap, в котором описаны основные цели и задачи, которые ставят перед собой разработчики. Roadmap предназначен для того, чтобы дать всем пользователям фреймворка понимание перспектив, определяемых командой сейчас, а также предоставить планы будущих релизов, чтобы улучшить пользовательский опыт других разработчиков, то есть описывает направление развития Angular.
Angular Signals Implementation
Сигнал — это значение, которое является «реактивным», то есть может уведомлять заинтересованных потребителей, когда оно изменяется. Существует множество различных реализаций этой концепции. В данной статье мы рассмотрим имплементацию команды Angular, углубимся в код и попробуем разобрать, как именно работает алгоритм сигналов изнутри.
Как улучшить производительность в Angular с помощью Memoize Pipe
Angular — это мощный инструмент для создания сложных веб-приложений. Но, как и в любом другом фреймворке, возникают свои сложности. Одна из таких проблем — это частые перезапуски тяжелых функций в шаблонах, что сильно бьет по производительности. Если приложение начинает тормозить, значит пора задуматься об оптимизации. И здесь на помощь приходит Memoize Pipe, способный спасти ваш интерфейс от лишних вычислений.
Добавляем lint-staged в NestJS и Angular приложения, включаем семантическое версионирование фронтенда
Так как версионирование через плагин nx-semantic-release
происходит путем анализа изменений по связанным Typescript
-импортам, то нам нужно минимизировать эти изменения, для этого в проект подключаем lint-staged
и добавляем строгости в Typescript
-код.
Семантическое версионирование NestJS и Angular приложений в NX-монорепозитории
Подключение и настройка nx-semantic-release
плагина для NX-монорепозитория для автоматического создания релиза с последующим деплоем приложений.
Доступ к сайту на NestJS и Angular по доменному имени c SSL — сертификатом в Kubernetes через Ingress
В Kubernetes очень легко настраивается работа с SSL, это наверное одна из главных причин почему я и начал им пользоваться, в этой статье я опишу простой сценарий его подключения.
Ближайшие события
Установка Kubernetes через MicroK8s и настройка деплоя NestJS и Angular приложений
Когда в команде нет DevOps - инженеров, но очень хочется задеплоить приложение в Kubernetes, можно легко это сделать с помощью https://microk8s.io, в данном посте я опишу как это сделать и открыть доступ к приложению на определенном порте.
Ускорение деплоя NestJS и Angular с помощью общественных Github-раннеров и создания промежуточных Docker-образов
В этом посте я настрою сборку Docker-образов: Билдер NestJS и Angular приложений; Мигратор баз данных с помощью Flyway; Тест-раннер для запуска фронтенд и бэкенд E2E-тестов; Nginx c встроенной статикой Angular приложения; NestJS приложение.
Как я сделал платформу коротких видео в Telegram Mini Apps
Недавно я поехал на море с другом. Во время пути мы узнали, что YouTube собираются блокировать (или замедлять). Тут в моей голове родилась идея: почему бы не сделать видеохостинг в Telegram? Я поспорил с другом, что сделаю его по дороге, но ноутбук сел. Поэтому мы договорились, что я сделаю это за день (спойлер: получилось, но кривовато).
Добавляем CI/CD конфиг для деплоя NestJS и Angular приложений на выделенный сервер с помощью GitHub Actions
Прописываем секретные переменные окружения в гитхаб.
Устанавливаем "GitHub Actions"-раннер на выделенный сервер.
Настраиваем workflow для "GitHub Actions".
Ручной деплой NestJS и Angular приложений на выделенном сервер через «Docker Compose» и «PM2»
Покупаем выделенный сервер и настраиваем SSH доступ к нему с локального компьютера.
Добавляем https://github.com/SteveLTN/https-portal в "Docker compose" для автоматической генерации и продления сертификатов.
Сборка приложений на NestJS и Angular и запуск их в двух вариантах: через PM2 и через «Docker Compose»
Для запуска собранных приложений в режиме PM2 фронтенд будет встроен в бэкенд в виде статичных файлов.
Для запуска в режиме "Docker Compose" бэкенд будет собран в виде Docker образа, а собранная статика фронтенда будет отдаваться через и Nginx.
База данных запускается через "Docker Compose".
Добавление Swagger документации в NestJS-mod приложение и генерация REST-клиента для Angular-приложения
Подключение генератора Swagger документации к бэкенду.
Подключение https://www.npmjs.com/package/prisma-class-generator для генерации DTO из Prisma - схемы.
Создание nx библиотеки для работы с бэкендом.
Подключение https://www.npmjs.com/package/@openapitools/openapi-generator-cli для генерации SDK для работы с бэкендом.
Вклад авторов
Waterplea 681.0MarsiBarsi 407.0tamtakoe 396.8ru_vds 352.0nsbarsukov 241.0mnemosha 179.0durovchpoknet 142.0MooooM 139.0aav 136.0splincodewd 129.0