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

Angular *

JavaScript-фреймворк

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

Ленивые бесконечные списки на основе Deferrable Views

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

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

В статье рассмотрим, как сделать бесконечные ленивые списки на основе Deferrable Views, недавно появившихся в Angular 17 и затронем некоторые моменты оптимизации предлагаемого подхода. Статья содержит примеры кода и демонстрационное приложение, показывающее применение Deferrable Views для решения задачи.

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

Новости

Интерфейс под один палец. Концепция ONE TOUCH

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

Сталкивались ли вы с проблемой, когда вам не хватает рук при использовании телефона? Например, у вас одна рука занята пакетами или испачкана в чипсах, а до кнопки "назад" не дотянуться.

72120
Всего голосов 17: ↑17 и ↓0 +17
Комментарии 26

Решаем ошибку при миграции на Storybook 7

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

Привет, я фронтенд-разработчик в Skyeng. При переходе с шестой версии Storybook на седьмую встретилась ошибка «Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead».

В этой статье объясняю, почему возникает баг и как его исправить.

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

Необычный RxJS

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

Всем привет! А вы знали, что RxJS содержит в себе более 100 операторов? Но если ваш проект использует эту библиотеку - скорее всего вы с трудом насчитаете у себя больше пары десятков. Интересная ситуация, да? Не знаю почему так получается, но сегодня я хочу поделиться реальными примерами использования “редких” операторов. Приступаем!

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

Истории

Директор директив. Расширяем функционал angular-компонентов красиво. Директива-контекст

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

Игнорируете кастомные директивы в Angular? Зря-зря, многое упускаете.

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

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

Бизнес-метрики в Sentry или как сделать велосипед из самоката

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

Привет! Меня зовут Врублевский Артур, и я занимаюсь frontend-разработкой на Angular в Страховом Доме ВСК. Так сложилось, что ранее, до работы в ВСК, я уже сталкивался с инструментом Sentry – занимался его настройкой на отлов ошибок. Наверно именно поэтому я был привлечен к неожиданным для меня работам, которые так же касались Sentry, его использования в необычной плоскости. Об этом и пойдет далее рассказ в 6 актах.

Стадия 1 — «Отрицание»

Думаю, многим Sentry известен как инструмент, позволяющий аккумулировать ошибки, отслеживать метрики производительности, делать тревожные оповещения о состоянии ваших приложений. И когда мне принесли задачу, звучащую как «Нам нужны продвинутые бизнес-метрики, можем ли мы это сделать в Sentry?», я сразу начал отрицать возможность такой затеи. Это казалось противоестественным действием, хотелось отправить постановщика в Яндекс Метрику, которая изначально была создана для подобных целей. Но со слов постановщика, решение Яндекса все же не давало необходимых показателей в нужном виде, нужно было больше гибкости.

Глобальная задумка состояла в том, что нужно проследить путь клиента при оформлении продукта от первого контакта, до состоявшейся оплаты и отправке документов email.

«Нам нужны продвинутые бизнес-метрики, можем ли мы это сделать в Sentry?»

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

Angular на стероидах: наращиваем производительность при помощи WebAssembly

Время на прочтение 9 мин
Количество просмотров 3.6K
В этом посте продемонстрировано, как с лёгкостью использовать WebAssembly внутри приложения, написанного на Angular. Иногда в приложении на Angular требуется выполнить задачу, которая в JavaScript завершается не слишком быстро. Конечно, можно переписать алгоритм на другом языке, например, AssemblyScript и Rust — и код станет эффективнее. Затем можно скомпилировать получившиеся фрагменты кода в файле WASM и потоком передать двоичные данные в приложение, чтобы можно было вызывать из него функции WASM. Бывает и так, что разработчику не удаётся найти в реестре NPM опенсорсные библиотеки, нужные для решения задачи. В таком случае можно написать пакет не на JS, а на каком-нибудь другом языке, затем скомпилировать этот пакет в WASM и опубликовать код WASM в реестре NPM. Angular-разработчики устанавливают новый пакет как зависимость и выполняют WASM-функции внутри приложения.

В следующем демонстрационном примере я напишу на AssemblyScript несколько функций для работы с простыми числами, а затем опубликую файл индекса в формате WASM. Затем скопирую файл WASM в приложение Angular, потоком отправлю двоичные данные через WebAssembly API и, наконец, стану вызывать эти функции, чтобы с их помощью выполнять различные действия над простыми числами.
Читать дальше →
Всего голосов 13: ↑13 и ↓0 +13
Комментарии 1

Интеграция React и AngularJS через Webpack Module Federation

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

Переходите с AngularJS на React без стресса и суеты. В этой статье я поделюсь с вами способом, как оживить ваш проект, плавно встроив элементы React в структуру, построенную на добром старом AngularJS. Мы все знаем, что рефакторинг или полная смена фреймворка может пугать, особенно когда вложены годы труда. Но не волнуйтесь, я покажу, как использовать микрофронтенды и Module Federation для того, чтобы дать вашему приложению свежее дыхание, сохраняя при этом все то хорошее, что было накоплено за годы.

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

Правила хорошего тона на Angular

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

0.1 Ограничения на длину файлов: 300 (исключая импорты). Если выходит больше - разбивать и использовать импортирование.

0.1.1 Ограничение на длину метода: 150 строк.

0.2 Читабельность важна: вложенность кода - не более 4 пунктов (Flat is better than nested), включая функциональную вложенность. Лучше используйте цепочки вызовов.

0.3 Не повторяйтесь. Код должен быть реюзабельным - то есть путем импортирования, а не путем копирования.

0.4 Ваш случай не настолько особенный, чтобы нарушать эти правила (Special cases aren't special enough to break the rules).

0.5 Пишите декларативный код. Не совмещайте императивный код и декларативный в одном файле.

0.6 Простой код лучше комплексного (принцип KISS)

Обоснованная критика приветствуется.

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

Использование возможностей Angular. Часть 1

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

Добрый день. Меня зовут Юрик и я angular-разработчик. Остальные в комнате у психиатра:

- Здравствуй Юрик, мы рады тебя видеть.

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

Причины говнокода во фронтенде. Мнение мимокрокодила

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

Мне не раз попадались такие проекты, от кода которых берет оторопь. Такое чувство, что сами авторы не смогут объяснить - почему у них все выглядит именно так. В этот момент у меня возникает вопрос: как так получилось? Если вас он тоже волнует, то могу пожелать лишь приятного чтения.

Читать
Всего голосов 77: ↑65 и ↓12 +53
Комментарии 118

Вопросы и ответы для собеседования на позицию frontend-разработчик. Часть 2

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

Всем привет! В этой статье (части) рассмотрим вопросы, связанные с великим и могучим TypeScript'ом, которые задают на собеседованиях. Если вы не читали прошлую статью, где описаны вопросы по JS, вот ссылочка. Пожалуйста, не заучивайте вопросы, это вредно для вашего здоровья!)

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

Пишем веб-приложение вместе с ChatGPT и Stable Diffusion

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

Всем привет! Ни для кого не секрет, что ChatGPT 4, получившая развитие в прошлом году, уже активно внедряется в обиход разработчиков. Во время новогодних каникул я решил испытать новинку, и попробовать разработать совместно с ботом небольшое веб-приложение на базе Angular 17. Что из этого вышло, читайте далее.

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

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

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн

Как создать веб-приложение на базе Telegram Mini Apps

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

Telegram Mini Apps — отличная возможность выйти за пределы обычных ботов и попробовать себя в создании более интересных интерфейсов приложений. На базе этого инструмента можно создать магазин или даже сервис для заказа шавермы.

В этой статье познакомимся с Telegram Mini Apps и попробуем создать простое приложение. Сделаем это с использованием обновленного Angular 17 и telegraf, а в конце — задеплоим проект на виртуальный сервер.
Читать дальше →
Всего голосов 30: ↑30 и ↓0 +30
Комментарии 6

Фронтенд-дайджест 2023

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

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

Открыть дайджест
Всего голосов 19: ↑16 и ↓3 +13
Комментарии 1

Taiga UI: итоги 2023 года

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

Заканчиваются рабочие дни уходящего года, а значит, самое время подводить итоги наших трудов. За 2023 год у проекта Taiga UI появилось более пятидесяти релизов, больше двух тысяч вмерженных PR-ов и свыше пятисот закрытых issue.

Taiga UI — это огромный Angular UI Kit, который активно используется в сотне продуктов компании Тинькофф и популярен за ее пределами. Разработка проекта много лет идет в Open Source, собирая свою аудиторию по всему миру.

Продолжу ежегодную традицию и напомню пользователям библиотек о самых интересных изменениях за последний год.

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

Всегда нужен CHAT GPT в вашем проекте (РУСЫ + API chat GPT)

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

Сгенерировать свою историю: ССЫЛКА

Недавно я делал обновления для своего приложения под НГ 2024. Где на основе написанных заметок пользователя за год, chat gpt придумывает небольшой рассказ (выдуманную историю).

В ходе интеграции своего приложения с чатом гпт, я немного преисполнился. Нашёл для себя кучу вариантов, как чат может сделать лучше почти любой проект. Более того, я считаю, что не только можно, но и нужно внедрять чат ГПТ в ваш проект уже сегодня. Он сделает ваш продукт сильно конкурентнее других подобных.

жесть
Всего голосов 9: ↑2 и ↓7 -5
Комментарии 6

План «Барбаросса» от Vue.js

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

После выхода крайней и достаточно революционной в плане добавления Composition API версии Vue 3.0 более чем три года назад, каких-либо серьезных изменений от команды Evan You в самом фреймворке больше не было. Только стандартные багфиксы, оптимизация и робкие попытки стать с TypeScript ближе. Основное внимание переключилось на экосистему - Vite, Nuxt, VitePress, Pinia и другие.

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

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

Динамическое создание компонентов Angular на лету

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

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

Углубиться
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 7

Улучшаем производительность с RxJS

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

Всем привет! Сегодня я хочу поделиться приемами улучшения производительности фронтенда путем оптимизации RxJS стримов.

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

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

Работа