Angular
-
Хабрахабр
Как сделать декларативный роутинг диалогов в Angular на примере Taiga UI
Привет! Я Дима, разработчик онлайн-бухгалтерии. Предлагаю на примере простой задачи разобрать два подхода к созданию модальных окон, связанных с url: императивный и декларативный. Часто на фронтенде нужно открывать модальные окна по определенному пути. Из коробки ангуляр не предоставляет такой возможности, так же как и популярные ui-kit-библиотеки. И разработчики каждый раз ищут способ, как это сделать. Условие задачи Нужно открыть по…
Читать далее » -
Хабрахабр
Архитектура front-end приложений — react, react native, angular. Обзор
Предисловие Начнем цикл статей нашей компании легко и непринужденно, с темы из мира front-end. Надеюсь, что статья будет полезна тем, кто хоть как то связан с миром front-end. Предупреждаю, что backend разработчикам может быть скучновато из-за того, что у них давно все стандартизировано 🙂 Когда я провожу собеседование на позицию React разработчика, обычно задаю общий вопрос об архитектуре - "как…
Читать далее » -
Хабрахабр
Кастомная стратегия виртуального скроллинга для просмотра pdf
Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy: всего лишь нужно прокинуть размер элемента в пикселях, проитерироваться по данным и виртуальный скроллинг готов. Но что делать, если размер элементов разный? Данную проблему можно решить кастомной стратегией виртуального скроллинга. Введение Для моей задачи требовалось реализовать просмотрщик pdf-документа. Решение pdf.js не подходило,…
Читать далее » -
Хабрахабр
Подборка материалов для погружения в Angular: выбор сотрудников Selectel
При построении веб-сервисов наши фронтенд-разработчики используют Angular — один из топ-фреймворков с высокой скоростью разработки и низким порогом вхождения. Но несмотря на последнее, во время изучения могут возникнуть трудности с потоками, отписками и другими абстракциями. Поэтому мы попросили коллег порекомендовать полезные ресурсы, которые помогут в освоении сложных тем. Подробности под катом. Зачастую для изучения фреймворка достаточно документации — она структурная,…
Читать далее » -
Хабрахабр
Год Тигра в Taiga UI
В предновогодней суете мы любим подводить итоги уходящего года. Эта хорошая традиция помогает вспомнить свои успехи и неудачи, чтобы взять верный курс в новом году. Весь год я участвовал в разработке потрясающего продукта — Taiga UI. Это библиотека компонентов на Angular, на которой построены сотни продуктов Тинькофф и много других проектов. Наша команда потратила много времени и сил — расскажу, что…
Читать далее » -
Хабрахабр
Redux в Angular. Туда и обратно
Пару лет назад из каждого утюга можно было услышать про Redux. Сейчас redux является чем-то обыденным в фронтенд разработке. На пороге 2023 года я хочу поделиться своим опытом использования redux в Angular, поговорить о разных реализациях, и рассказать к каким выводам я пришел за это время. Статья разбита на три блока: Введение, где я описываю процесс написания статьи. Все про…
Читать далее » -
Хабрахабр
(Микро)фронтенды и микросервисы с помощью Webpack
Привет! Меня зовут Максим, я фронтенд-разработчик компании Тинькофф, лид команды фронтендов, которые пилят международные проекты. Я работал как фронтом, так и бэкером — это дало мне релевантный опыт и в микрофронтендах в том числе. Статья будет о фронтендах, но сначала предлагаю немного обсудить монолиты. Они бывают разные. Зачем пилить монолит Когда есть команда, поддерживающая один большой продукт, и этот продукт…
Читать далее » -
Хабрахабр
[Перевод] Как использовать QueryParamsHandling в Angular
При создании одностраничных приложений URL часто меняется без перезагрузки страницы. Это может приводить к проблемам при попытке доступа к параметрам запроса из URL. Функция QueryParamsHandling в Angular позволяет решить эту проблему. QueryParamsHandling — это стратегия маршрутизации, позволяющая разработчикам управлять способом обработки параметров запроса при изменении URL. По умолчанию при изменении URL Angular сбрасывает параметры запроса. Однако благодаря QueryParamsHandling разработчики могут…
Читать далее » -
Хабрахабр
Разработка на Angular под SmartTV: история одной фичи
Всем привет. Меня зовут Ярослав Карманников, я разработчик команды SmartTV/Web в онлайн-кинотеатре KION МТС Digital. Это четвертая часть сериала, посвященного фиче Autoplay в нашем кинотеатре. Сегодня обсудим нюансы реализации фичи на платформе SmartTV: я расскажу о том, как мы внедряли автоплей, с какими трудностями столкнулись и как их решали. Если вы пропустили предыдущие серии – два слова о том, что…
Читать далее » -
Хабрахабр
[Перевод] Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular
Директива NgOptimizedImage в Angular отвечает за реализацию загрузки изображений, сохраняя высокую производительность. Она доступна в Angular v14. 2. 0. Директива помечена как standalone и может быть импортирована в standalone компоненты и модули. Чтобы ее использовать, мы должны заменить атрибут src Вашего изображения на rawSrc: import from '@angular/common'; @Component({ standalone: true, imports: [NgOptimizedImage], template: ` <!-- видимая область страницы --> <img…
Читать далее »