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

Angular *

JavaScript-фреймворк

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

Что будет в Angular 18?

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

Angular, один из ведущих фреймворков для создания веб-приложений. Фреймворк стабильно развивается, чтобы соответствовать требованиям современной веб-разработки. С каждой новой версией он приносит новые функции, оптимизации и улучшения. Пользовательское сообщество с нетерпением ждет выпуска Angular 18, и вот какие нововведения мы можем ожидать от этой следующей версии.

Планируется, что Angular 18 будет выпущен в мае 2024 года, и уже есть несколько подтвержденных функций для включения в предстоящую версию, которые мы рассмотрим в данном материале.

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

Новости

Скрытый потенциал функции inject в Angular

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

Привет! В этой заметке покажу, как можно использовать функцию inject на сто процентов.

Обычно ведь как: если функцией inject и пользуются, то только для того, чтобы заменить инжект через конструктор. Удобно, конечно. Но что, если я скажу, что это не всё, на что способна функция inject? Давайте посмотрим на паре примеров, как ещё её можно использовать.

Читать далее
Всего голосов 12: ↑14.5 и ↓-2.5+17
Комментарии7

Поверхностный анализ работы DOM на библиотеках JavaScript

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

Приветствую Вас, дорогие читатели Хабр! В данной статье мы рассмотрим работы DOM на таких библиотеках JavaScript, как Vue, React, Angular. Материал поможет понять принцип работы, конечно, самый лучший способ разобраться в той или иной теме — это практика. В этой статье будут приведены несколько примеров для лучшего понимания материала.

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

Статический анализ мультиязычности Angular приложения c помощью ngx-translate-lint

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

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

Предлагаю вашему вниманию практическое руководство по внедрению статического анализа мультиязычности Angular приложения с помощью ngx-translate-lint (подразумевается, что для локализации Angular приложения уже используется пакет @ngx-translate/core).

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

Истории

PrimeNG + NestJS + Yandex = речевая аналитика

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

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

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

Кастомные декораторы в Angular приложениях

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет, я фронтенд-разработчик в 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».

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

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

Необычный RxJS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Время на прочтение9 мин
Количество просмотров3.8K
В этом посте продемонстрировано, как с лёгкостью использовать 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

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

One day offer от ВСК
Дата16 – 17 мая
Время09:00 – 18:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн
Антиконференция X5 Future Night
Дата30 мая
Время11:00 – 23:00
Место
Онлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область

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

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

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

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

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

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

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

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

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

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

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 и ↓70
Комментарии31

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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