Как стать автором
Обновить
28.52

Angular *

JavaScript-фреймворк

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

linkedSignal: управлять связанным состоянием теперь ещё проще

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров908

Бу! Испугался? Не бойся. Angular 19 уже не за горами и представляет новый мощный примитив, называемый linkedSignal, который поможет вам управлять сложным состоянием в ваших приложениях. Это альтернатива использованию effect для простого обновления сигнала на основе изменения другого сигнала. В прошлом мы видели, как сообщество обсуждало, чтобы избегать использования effect и вместо этого использовать computed для сброса сигналов на основе изменения другого сигнала.

Читать далее
Всего голосов 3: ↑3 и ↓0+3
Комментарии2

Новости

Front-end глазами back-end разработчика

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2.6K

Всем привет! После учебы попал на ферросплавный завод в 2005 году, сначала "киповцем" в цех КИПиА, а позже меня перевели в службу АСУТП. Там относительная свобода в сравнении с цехом АСУП, потому что у них там были разные корпоративные стандарты безопасности, Active Directory и другие ограничения на разработку. В нашем же цехе, хоть и была проблема с Интернет, все сервера были на тот момент ограничены внутренней сетью, но на тот момент дома почти у всех был ADSL и дома можно было искать информацию, а потом на работе ее использовать.

В итоге практика написания скриптов на VBScriptSCADA 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.

Читать далее
Всего голосов 15: ↑9 и ↓6+9
Комментарии18

Создание пользовательского интерфейса для модуля Webhook с помощью Angular

Время на прочтение26 мин
Количество просмотров690

Cоздание таблички отображающей данные и формы для ее заполнения, интерфейсы строятся на компонентах от https://ng.ant.design, формы создаются и управляются с помощью https://formly.dev, для стилей используется https://tailwindcss.com, стейт машины нет.

Читать далее
Всего голосов 3: ↑3 и ↓0+7
Комментарии0

Мощь CSS-масок

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

Декабрь 2023 года стал значимой датой в истории развития CSS-свойства mask: все современные браузеры в своих последних версиях обеспечили его полную поддержку, теперь без использования своих вендорных префиксов. А это означает, что данное свойство прочно и надолго вошло в жизнь каждого фронтенд-разработчика. Осталось лишь фронтенд-разработчикам принять его в свою жизнь и перестать его бояться!

В статье я кратко напомню основные теоретические идеи свойства и подробно расскажу о реальных примерах использования на основании опыта разработки Taiga UI.

Читать далее
Всего голосов 53: ↑51 и ↓2+58
Комментарии0

Истории

RxJS Interop в Angular 18: основные изменения и преимущества

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

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

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

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

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

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

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

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

Читать далее
Всего голосов 8: ↑5 и ↓3+5
Комментарии8

Как использовать менеджер состояний NgRx для Angular-проектов

Уровень сложностиСредний
Время на прочтение14 мин
Количество просмотров1.9K

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

Читать далее
Всего голосов 4: ↑3 и ↓1+4
Комментарии4

Тварь ли я дрожащая или право имею? Берем чужие сайты под свой контроль. Часть 1 — Chrome расширение на Angular 18

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

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

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

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

Читать далее
Всего голосов 19: ↑19 и ↓0+25
Комментарии5

Angular Roadmap

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров2.1K

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

Читать далее
Всего голосов 5: ↑5 и ↓0+7
Комментарии0

Angular Signals Implementation

Уровень сложностиСложный
Время на прочтение12 мин
Количество просмотров1.6K

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

Читать далее
Всего голосов 5: ↑5 и ↓0+9
Комментарии0

Как улучшить производительность в Angular с помощью Memoize Pipe

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров958

Angular — это мощный инструмент для создания сложных веб-приложений. Но, как и в любом другом фреймворке, возникают свои сложности. Одна из таких проблем — это частые перезапуски тяжелых функций в шаблонах, что сильно бьет по производительности. Если приложение начинает тормозить, значит пора задуматься об оптимизации. И здесь на помощь приходит Memoize Pipe, способный спасти ваш интерфейс от лишних вычислений.

Читать далее
Всего голосов 3: ↑3 и ↓0+7
Комментарии9

Добавляем lint-staged в NestJS и Angular приложения, включаем семантическое версионирование фронтенда

Время на прочтение14 мин
Количество просмотров600

Так как версионирование через плагин nx-semantic-release происходит путем анализа изменений по связанным Typescript-импортам, то нам нужно минимизировать эти изменения, для этого в проект подключаем lint-staged и добавляем строгости в Typescript-код.

Читать далее
Всего голосов 1: ↑1 и ↓0+3
Комментарии0

Семантическое версионирование NestJS и Angular приложений в NX-монорепозитории

Время на прочтение4 мин
Количество просмотров524

Подключение и настройка nx-semantic-release плагина для NX-монорепозитория для автоматического создания релиза с последующим деплоем приложений.

Читать далее
Всего голосов 2: ↑2 и ↓0+4
Комментарии0

Доступ к сайту на NestJS и Angular по доменному имени c SSL — сертификатом в Kubernetes через Ingress

Время на прочтение9 мин
Количество просмотров773

В Kubernetes очень легко настраивается работа с SSL, это наверное одна из главных причин почему я и начал им пользоваться, в этой статье я опишу простой сценарий его подключения.

Читать далее
Всего голосов 4: ↑2 и ↓2+2
Комментарии2

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

7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
22 – 24 ноября
Хакатон «AgroCode Hack Genetics'24»
Онлайн
28 ноября
Конференция «TechRec: ITHR CAMPUS»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань

Установка Kubernetes через MicroK8s и настройка деплоя NestJS и Angular приложений

Время на прочтение15 мин
Количество просмотров1.2K

Когда в команде нет DevOps - инженеров, но очень хочется задеплоить приложение в Kubernetes, можно легко это сделать с помощью https://microk8s.io, в данном посте я опишу как это сделать и открыть доступ к приложению на определенном порте.

Читать далее
Всего голосов 4: ↑3 и ↓1+4
Комментарии2

Ускорение деплоя NestJS и Angular с помощью общественных Github-раннеров и создания промежуточных Docker-образов

Время на прочтение42 мин
Количество просмотров709

В этом посте я настрою сборку Docker-образов: Билдер NestJS и Angular приложений; Мигратор баз данных с помощью Flyway; Тест-раннер для запуска фронтенд и бэкенд E2E-тестов; Nginx c встроенной статикой Angular приложения; NestJS приложение.

Читать далее
Всего голосов 1: ↑1 и ↓0+3
Комментарии0

Как я сделал платформу коротких видео в Telegram Mini Apps

Уровень сложностиПростой
Время на прочтение17 мин
Количество просмотров6.7K

Недавно я поехал на море с другом. Во время пути мы узнали, что YouTube собираются блокировать (или замедлять). Тут в моей голове родилась идея: почему бы не сделать видеохостинг в Telegram? Я поспорил с другом, что сделаю его по дороге, но ноутбук сел. Поэтому мы договорились, что я сделаю это за день (спойлер: получилось, но кривовато).

Читать далее
Всего голосов 11: ↑10 и ↓1+12
Комментарии18

Добавляем CI/CD конфиг для деплоя NestJS и Angular приложений на выделенный сервер с помощью GitHub Actions

Время на прочтение9 мин
Количество просмотров822

Прописываем секретные переменные окружения в гитхаб.
Устанавливаем "GitHub Actions"-раннер на выделенный сервер.
Настраиваем workflow для "GitHub Actions".

Читать далее
Всего голосов 2: ↑2 и ↓0+6
Комментарии0

Ручной деплой NestJS и Angular приложений на выделенном сервер через «Docker Compose» и «PM2»

Время на прочтение33 мин
Количество просмотров1.1K

Покупаем выделенный сервер и настраиваем SSH доступ к нему с локального компьютера.
Добавляем https://github.com/SteveLTN/https-portal в "Docker compose" для автоматической генерации и продления сертификатов.

Читать далее
Всего голосов 1: ↑1 и ↓0+3
Комментарии2

Сборка приложений на NestJS и Angular и запуск их в двух вариантах: через PM2 и через «Docker Compose»

Время на прочтение42 мин
Количество просмотров746

Для запуска собранных приложений в режиме PM2 фронтенд будет встроен в бэкенд в виде статичных файлов.

Для запуска в режиме "Docker Compose" бэкенд будет собран в виде Docker образа, а собранная статика фронтенда будет отдаваться через и Nginx.

База данных запускается через "Docker Compose".

Читать далее
Всего голосов 2: ↑2 и ↓0+6
Комментарии0

Добавление Swagger документации в NestJS-mod приложение и генерация REST-клиента для Angular-приложения

Время на прочтение18 мин
Количество просмотров477

Подключение генератора Swagger документации к бэкенду.
Подключение https://www.npmjs.com/package/prisma-class-generator для генерации DTO из Prisma - схемы.
Создание nx библиотеки для работы с бэкендом.
Подключение https://www.npmjs.com/package/@openapitools/openapi-generator-cli для генерации SDK для работы с бэкендом.

Читать далее
Всего голосов 2: ↑1 и ↓1+2
Комментарии4
1
23 ...