Как стать автором
Поиск
Написать публикацию
Обновить
7.1

Angular *

JavaScript-фреймворк

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

Angular Roadmap

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

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

Читать далее

Angular Signals Implementation

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

Новый фронтенд-фреймворк?

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

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

Такие компоненты можно будет затем собирать в полноценные веб-приложения, сопоставимые с теми, что созданы с использованием React, Angular, Vue, Solid, Svelte и т.д.

Читать далее

Использование isolatedModules в Angular 18.2

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

Angular теперь поддерживает TypeScript isolatedModules начиная с версии Angular 18.2. Благодаря этой поддержке мы сможем заметить увеличение производительности до 10% во времени сборки для production на своих проектах.

Читать далее

Динамический рендеринг Angular-компонентов

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

Привет Хабр. На связи Даня, Angular-разработчик из команды Т-Бизнеса.

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

Добро пожаловать под кат!

Читать далее

Использование Signal и Model Inputs в Angular

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

Разработчики Angular постоянно работают над улучшением фреймворка, добавляя новые функциональные возможности и меняя подходы в работе с данными. Одно из наиболее ярких новшеств — Signals API и некоторые специфические части этого API.

При наличии уже устоявшихся практик и подходов этот API может показаться избыточным и даже лишним, но только на первый взгляд. Ведь часто бывает так: что‑то новое выглядит неудобным, но через время все оказывается иначе и уже даже не понимаешь, как жил без этого раньше.

В статье я расскажу о Signal и Model Inputs и о том, как они могут заменить классические декораторы Input и Output, а попутно — решить проблемы с обнаружением изменений, не прибегая к написанию дополнительного кода.

Читать далее

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

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

Создание приложения происходит через nx схематик для Angular.

Адрес сервера задается жестко в коде, в следующих постах адрес будет перенесен в переменные окружения.

Для запуска E2E-тестов используется "Playwright".

Читать далее

Представляем Taiga UI v4: еще больше компонентов и улучшений

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

Рад поделиться, что мы опубликовали первый стабильный релиз четвертой мажорной версии Taiga UI — нашей огромной библиотеки компонентов для Angular. Улучшений в нем так много, что одной статьи едва ли хватит. Расскажу про самые аппетитные из них.

Читать далее

Angular: переменная в шаблоне, хорошо или плохо?

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

Недавнее объявление о блоке @let в Angular вызвало бурное обсуждение в сообществе разработчиков, одни считают его ценным дополнением, другие видят в этом ненужное усложнение.

Читать далее