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

Angular *

JavaScript-фреймворк

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

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

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

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

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

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

Новости

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

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

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

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

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

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

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

В статье рассмотрим, как сделать бесконечные ленивые списки на основе 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 мин
Количество просмотров704

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Встречаем Angular 17

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

В прошлом месяце исполнилось 13 лет с момента появления "красного щита" Angular. AngularJS стал отправной точкой для новой волны JavaScript-фреймворков, появившихся для поддержки растущей потребности в богатом веб-опыте. Сегодня с новым внешним видом и набором перспективных функций мы ведем всех в будущее с версией 17, устанавливая новые стандарты производительности и удобства для разработчиков.

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

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

Fusor vs React

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

Mortal Kombat - Vs Screen (MKX version) Fan art by LukenStruken CC BY-SA 3.0

Моя работа состоит в написании кода на React. Несмотря на то, что мне нравится React, при разработке на нем я столкнулся с некоторыми его недостатками. В связи с этим, я решил создать свою библиотеку, Fusor, чтобы исправить эти недостатки и вот что из этого получилось.

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

Внедрение pet-проекта в реальный бизнес или как в одиночку написать ERP-систему для общепита

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

Всем добра! Данную статью меня побудило написать сильное желание, во-первых, зафиксировать некоторые результаты своего профессионального развития и личного опыта помимо основной работы, а также впервые на столь широкой сцене как Хабр, рассказать вам о нюансах развития своего небольшого pet-проекта, который впоследствии стал частью автоматизации сети заведений. Чтобы статья несла практический смысл и не выглядела как реклама, в ней не будут упомянуты ни название проекта, ни ссылки на его сайт и прочие сервисы.

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

Taiga UI: больше чем UI kit

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

Taiga UI — огромная библиотека UI-компонентов для Angular, на которую стоит взглянуть. Но она только вершина айсберга. Мы разрабатывали ее более пяти лет, начав еще на Angular 4. И, будучи любителями декомпозиции, мы создали несколько отдельных независимых проектов, которые помогают нам писать крутые Angular-приложения. 

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

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

Типизированные формы в Angular

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

Всем привет! В июне 2022 года наша фронтенд команда наконец-то дождалась строго типизированных форм от разработчиков Angular! Через какое-то время мы заметили что не все работает так, как интуитивно ожидаешь. Позже я создал небольшой внутренний документ с “фишками”, которые явно не описаны в официальных доках. И подумал: “А почему бы мне не выложить наш небольшой гайд на Хабр?”. И вот, выкладываю.

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

Standalone компоненты и tree-shaking

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

Уже сложно представить наши приложения без такой оптимизации, как tree shaking.
Tree-shaking — «встряхивание дерева», удаление неиспользуемого кода из бандла приложения.

А причем тут standalone компоненты в названии статьи?

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

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

Нарушая правила: как я выбросил 10-месячный проект после 2 месяцев в должности

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

Когда я принял управление командой, её участники находились на 8-м месяце реализации 3-месячного проекта по перезапуску коммерческого сайта компании. Спустя два месяца ведения этой команды, я решил отказаться от всего достигнутого и начать сначала. Это история о том, почему я это сделал, как, и что в итоге получилось.
Читать дальше →
Всего голосов 76: ↑64 и ↓12+52
Комментарии23

Angular в картинках

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

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

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

Рисовал я все это в PowerPoint.

Читать далее
Всего голосов 16: ↑15 и ↓1+14
Комментарии6
1
23 ...