Как стать автором
Обновить
6.21
Рейтинг

Angular *

JavaScript-фреймворк

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

Ускоряем разработку в VSCode

Node.JS *Angular *ReactJS *VueJS *
Из песочницы

Привет, Хабр! Это моя первая публикация и хотелось бы начать с чего-то полезного для сообщества. С места в карьер… Я запилил расширение для VSCode, которое поможет автоматизировать создание файловой структуры компонентов.

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

Читать далее
Всего голосов 20: ↑16 и ↓4 +12
Просмотры 12K
Комментарии 10

Новости

Ловушка приоритетов Angular Guards

Разработка веб-сайтов *Angular *TypeScript *

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

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

Разработка Angular-приложений и построение их архитектуры

Блог компании SimbirSoft Разработка веб-сайтов *JavaScript *Angular *

Привет! Меня зовут Самат, я frontend-специалист компании SimbirSoft.

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

Но если после подключения разработчик заходит в уже выстроенную систему, и его задачи редко связаны с архитектурой, то в разработке с нуля ситуация обстоит иначе, даже если на первый взгляд кажется, что вопросов не возникнет. Они появятся позже, когда окажется, что нельзя легко и просто внести важную фичу или безопасно изменить часть приложения, так как она тесно связана с другой частью. А компоненты приложения, которые мы сами же и писали, покажутся незнакомыми и сложными.

Цель этой статьи – познакомиться с темой построения архитектуры Angular-приложений. Я расскажу о том, как разработать приложения таким образом, чтобы специалист любого уровня при наличии знаний Angular мог легко разобраться в коде и структуре приложения. И как избежать проблем масштабирования.

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 3.4K
Комментарии 4

Простая масштабируемая структура Angular приложения

JavaScript *Angular *
Из песочницы

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

Первое время разработка идет бодро, добавлять новые функции легко и приятно, приложение работает быстро, все просто и понятно. Но с ростом количество модулей, компонентов, сервисов скорость разработки падает, как и скорость работы приложения. Задач на рефакторинг появляется в спринте все больше. Кроме прочего, команда разработчиков может регулярно меняться (одни увольняются, другие приходят), что не добавляет порядка. Со временем может показаться, что проще все снести и написать заново.

Читать далее
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 4.7K
Комментарии 13

Как не проиграть с производительностью в длительном скроллинге

Блог компании Bimeister Разработка веб-сайтов *Программирование *Angular *TypeScript *
Tutorial

Меня зовут Михаил Кириченко. Я разрабатываю клиентскую часть в компании Bimeister.

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

Читать далее
Всего голосов 11: ↑10 и ↓1 +9
Просмотры 2.5K
Комментарии 6

Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular

JavaScript *Angular *TypeScript *
Перевод

Директива NgOptimizedImage в Angular отвечает за реализацию загрузки изображений, сохраняя высокую производительность. Она доступна в Angular v14.2.0. Директива помечена как standalone и может быть импортирована в standalone компоненты и модули.

Чтобы ее использовать, мы должны...

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

Через Git и бэк — в фулстек: что мы узнали из опроса фронтендеров

JavaScript *Программирование *Angular *Исследования и прогнозы в IT *
Мегапроект

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

Мы также попросили прокомментировать выводы Максима Орехова, руководителя центра компетенций по разработке веб-приложений ПСБ: картина была бы неполной без взгляда со стороны бизнеса.

Читать далее
Всего голосов 18: ↑18 и ↓0 +18
Просмотры 20K
Комментарии 22

Vue, React или Angular: какой стек используют в России. Проанализировал 180 сайтов

JavaScript *Angular *ReactJS *VueJS *

Благодаря лени узнал, какие фреймворки используют компании на российском рынке. Проанализировал e-comm, банки, интернет-магазины, сайты застройщиков, стриминговые сервисы, телекоммуникации и другие сферы. В конце статьи ссылка на таблицу.

Читать далее
Всего голосов 20: ↑15 и ↓5 +10
Просмотры 11K
Комментарии 54

Vue здорового pragmatica. Как правильно делать выбор между React и Angular

JavaScript *Angular *ReactJS *Читальный зал VueJS *
Из песочницы

Хочешь устроить очередной… кхм… спор о том, какой фреймворк лучше и прослыть хайпожором — напиши статью «фреймворк ХХХ кулл, остальных на кол». Но когда твой выбор влияет на стек всей компании, объясняться все равно приходится — с коллегами, заказчиками, подрядчиками. Чтобы не повторять сто раз одно и то же, запишу аргументы в этой статье. Так что приглашаю к обсуждению самих «пострадавших» и поехали!

Смотреть битву фреймворков
Всего голосов 16: ↑12 и ↓4 +8
Просмотры 9.5K
Комментарии 25

PrimeNG + NestJS = CRM — часть 1

Разработка веб-сайтов *CRM-системы *Angular *TypeScript *

Решили in-house разработать CRM систему. По ходу разработки встречались интересные моменты, которые постараюсь описать в нескольких статьях. В статьях постараюсь избежать банальностей типа: скачал, распаковал, запустил, и вот глядите, swagger из коробки. Таких статей, как и видео на Ютубах, уже очень много. Постараюсь поделиться просто интересными деталями, которые встречались по ходу разработки. Забегу вперед — систему настроили и запустили.

Читать далее
Всего голосов 5: ↑2 и ↓3 -1
Просмотры 2K
Комментарии 2

Лучшие практики безопасности Angular

Angular *
Из песочницы
Перевод

Angular - это популярный front-end framework, созданный компанией Google. Как и другие популярные front-end фреймфорки, он использует архитектуру, основанную на компонентах для структурирования компонентов.

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

Читать далее
Всего голосов 3: ↑0 и ↓3 -3
Просмотры 1.8K
Комментарии 1

Server side Form. Управление веб-формами на стороне сервера

Блог компании Мир Plat.Form (НСПК) Java *Angular *
☕️ Cезон Java
Tutorial

Хабр, привет!

 Как человек, побывавший по ту (фронт) и по эту (бэк) стороны разработки, я хочу рассказать о Server Side Form - «Управлении веб-формой на стороне сервера».

Что это такое и зачем это нужно - читайте под катом!

Читать далее
Всего голосов 16: ↑15 и ↓1 +14
Просмотры 2.8K
Комментарии 11

Как Computed Properties в Angular помогают пропускать титры

Блог компании МТС JavaScript *Angular *

Привет, Хабр! Меня зовут Алексей Охрименко, я TechLead вертикали Ai/Voices онлайн-кинотеатра KION в МТС Digital, автор русскоязычной документации по Angular и популярного плагина для рефакторинга Angular-компонентов.   

Мой коллега Алексей Мельников уже рассказывал про фичу пропуска титров в KION, про ее бизнес- и tech-составляющие. Я же остановлюсь на том, какие у нас проблемы возникли в процессе реализации фичи и как мы их решили с помощью Computed Properties в Angular*. Добро пожаловать под кат!

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

Верни мне мой 2007: как изменилось представление о фронтенд-разработке за последние годы [опрос]

JavaScript *Программирование *Angular *TypeScript *
Мегапроект

Рынок разработчиков прагматичен и суров. Он лишён сентиментальности и далёк от благотворительности. Иначе как объяснить, что он требует от фронтенд-разработчика знать и С, и последние фреймворки? Хорошо это или плохо? Всегда ли так было? Так ли сильно отличается современный фронтендер от себя же в прошлом? Давайте разбираться.

Итак...
Всего голосов 19: ↑15 и ↓4 +11
Просмотры 20K
Комментарии 34

Вышел Angular 14

Блог компании SkillFactory Разработка веб-сайтов *JavaScript *Программирование *Angular *
Перевод

Благодаря RFC о строго типизированных реактивных формах закрыта проблема на GitHub №1, а RFC автономных API представил упрощённый способ создания приложений Angular. Подробностями делимся к старту курса по Frontend-разработке.

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

Не отписался — без памяти остался

Разработка веб-сайтов *Angular *TypeScript *
Из песочницы

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

Да, да, этот базовый момент может упускаться разработчиком, и это в свою очередь может привести к утечке памяти — об этом далее.

Читать далее
Всего голосов 11: ↑10 и ↓1 +9
Просмотры 7.4K
Комментарии 4

Три слоя градиента одного слайдера

Блог компании TINKOFF JavaScript *Accessibility *Angular *TypeScript *

Мы в Тинькофф разрабатываем библиотеку Taiga UI: в ней сотни полезных компонентов, директив и сервисов. При разработке нам важно уделять внимание вопросу поддерживаемости кода, поэтому мы стараемся не писать лишнего кода и искать решения, работающие на нативных рельсах браузеров.

В статье поговорим про одно из таких решений — написание Angular-компонента Slider с помощью встроенных инструментов  браузеров и с минимальным использованием Javascript. Расскажу про доступность, интересное решение с многослойным градиентом, немного CSS-хитростей и даже чуть-чуть про Change Detection в Angular.

Читать далее
Всего голосов 21: ↑18 и ↓3 +15
Просмотры 4.7K
Комментарии 10

Как мы перевели операторов на единую платформу и стали закрывать по 240 тысяч задач в месяц

Блог компании Skyeng PHP *Angular *Управление проектами *Управление персоналом *

Так масштабировался сервис с марта 2020. Каждый цвет — группа операторов.

В Skyeng есть несколько отделов, которые сопровождают учеников. Например, отделы, отвечающие за входящую телефонную линию и техподдержку в чате на сайте. Есть группа Awake, работающая с учениками, которые брали перерыв в обучении. Есть группа Quality Control — она проверяет кейсы качества: например, что-то случилось на уроке и ученик оставил жалобу.

Путь обработки задачи для групп операторов одинаковый: взять задачу, выполнить, закрыть. Интерфейс взятия новой задачи идентичен: одна кнопка и большая автоматизация под капотом.

Но так было не всегда. Расскажу, как мы прошли путь от «завязанности» на ручном перетаскивании карточек задач и ручном выставлении приоритетов до единого сервиса, который экономит ресурсы операторов и разработки.

О жизни с внешними сервисами


Для работы с обращениями мы использовали такие системы как Usedesk, Omnidesk и Google Sheets. Это накладывало ограничения:

  • Операторам и менеджерам приходилось вручную создавать задачи. Такая рутина забирала много времени. Ошибиться проще простого.
Читать дальше →
Всего голосов 22: ↑22 и ↓0 +22
Просмотры 4.4K
Комментарии 0

Как разработать фронтенд, чтобы не ночевать на заводе

Блог компании ГК ЛАНИТ Клиентская оптимизация *Angular *

Компания Datana занимается разработкой цифровых решений для оптимизации производственных процессов черной металлургии (подробнее в нашем блоге). Сейчас мы расскажем об опыте повышения стабильности и отказоустойчивости фронтендов наших систем или о том, как мы избавились от необходимости ночевать в цехе завода, чтобы вовремя нажать F5.

Читать далее
Всего голосов 66: ↑66 и ↓0 +66
Просмотры 9.2K
Комментарии 20

Вклад авторов

Работа