Все потоки
Поиск
Написать публикацию
Обновить
17.45

Angular *

JavaScript-фреймворк

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

Отложенное применение функционала директив в Angular

Время на прочтение4 мин
Количество просмотров4.4K
Недавно мне надо было решить задачу по смене старого механизма для вывода всплывающих подсказок, реализованного средствами нашей библиотеки компонентов, на новый. Я, как всегда, решил не заниматься изобретением велосипеда. Для того чтобы приступить к решению этой задачи, я занялся поисками опенсорсной библиотеки, написанной на чистом JavaScript, которую можно было бы поместить в директиву Angular и в таком виде использовать.



В моём случае, так как я много работаю с popper.js, я нашёл библиотеку tippy.js, написанную тем же разработчиком. Для меня такая библиотека выглядела как идеальное решение задачи. Библиотека tippy.js обладает обширным набором возможностей. С её помощью можно создавать и всплывающие подсказки (элементы tooltip), и многие другие элементы. Эти элементы можно настраивать с помощью тем, они быстры, строго типизированы, обеспечивают доступность контента и отличаются многими другими полезными возможностями.
Читать дальше →

Observable сервисы в Angular

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

Всем привет, меня зовут Владимир. Я занимаюсь фронтенд разработкой в Tinkoff.ru.


В Ангуляре для передачи данных внутри приложения или для инкапсуляции бизнес-логики мы привыкли использовать сервисы. Для управления асинхронными потоками отлично подходит RxJS.


Ангуляр в сочетании с RxJS позволяет писать в декларативном стиле, коротко и ясно. Но иногда мы сталкиваемся со сторонними библиотеками или API, которые используют коллбэки, промисы, тем самым подталкивают нас отступить от привычного стиля и писать императивно.


Цель статьи — показать на примере подобных API, как с помощью RxJS их можно без проблем обернуть в Observable-сервисы. Это поможет достичь удобства использования в Ангуляре. Начнем с Geolocation API.


Читать дальше →

Русскоязычная документация по Angular

Время на прочтение2 мин
Количество просмотров20K
Русская версия документация Angular теперь доступна для всех на сайте angular24.ru

image

Это результат 6 месяцев работы, нескольких безуспешных попыток написать все необходимые remark плагины, кастомного парсера и цепочки из двух Magic Strings, позволяющих делать перевод Markdown файлов без потери форматирования.
Читать дальше →

Svelte, исчезающий фреймворк, который уже не исчезнет

Время на прочтение19 мин
Количество просмотров29K
Когда на днях в наш уютный чатик @sveltejs в телеграм запостили ссылку на очередную «разоблачающую» статью про Svelte, я очень обрадовался, предвосхищая интересный технический батл или хотя бы увлекательное чтиво чужого практического опыта. Кроме того, что это всегда интересно и полезно, определенное стечение обстоятельств — плановый отпуск и карантин — заставляют меня скучать дома, а подобная статья могла бы несколько разнообразить мой день. Каково же было мое разочарование, вы даже представить себе не можете… но давайте по делу.


Читать дальше →

Svelte, исчезающий фреймворк, что всё никак не исчезал

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

Когда я вижу очередную статью о Svelte:


RE: Боль и слёзы в Svelte 3
Svelte 3: Переосмысление реактивности
Почему SvelteJS возможно лучший фреймворк для новых веб-разработчиков
Легенда о Фреймворке Всевластия
Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp»
Исчезающие фреймворки


Меня переполняет восхищение от наглости писавших её. С серьёзнейшим видом эти люди приходят и начинают рассказывать что их фреймворк в принципе может рассматриваться как альтернатива большой тройке: Angular, React, Vue. Первый раз я подумал, что автор из-за своей неопытности на полном серьёзе рассматривает Svelte как вменяемую production-ready альтернативу устоявшимся фреймворкам. Второй раз я подумал, что автор испытывает творческий кризис и его так тошнит от большой тройки, что ему хочется писать на чём угодно, но только не на ней. В последующие разы меня преследовало чувство, что кто-то просто строчит заказные посты.


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


Читать дальше →

Чистим код в Angular. Готовим ESLint, codelyzer, stylelint, husky, lint-staged и Prettier

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

Если вам не приходилось работать в команде, то, возможно, вы еще не используете эти вещи, а кто-то даже не знает про них. Работая один, вы сами себе хозяин.


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


Читать дальше →

Безумные логи

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

А туда ты не ходил так давно, что раздало файл с логами аж до 100 мб. или до 500 мб. Черт! А может и до 10 Гб (*). И лежат драгоценные улики где-то там среди 10 737 418 240 байтов, что надо срочно пробежать, дабы выяснить, что ж вообще происходит, меж тем как кофе уже остывает.

А может к рапорту прицепом шёл и архив с двумя сотнями файлами (скажем по 5 Мб каждый) разбитых логов и надо их как-то клеить, а потом смотреть, копать и думать.

Знакомо?

В общем все мы так или иначе сталкиваемся с необходимостью анализа «следов жизнедеятельности» наших творений и хорошо если файл весит пару Мб, потому как открыть лог в 1 Гб блокнотом, да ещё и попытаться поиск сделать — занятие весьма сомнительное.

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

А ещё приглашу к разработке присоединиться.

И да, будет много интересных картинок.
Читать дальше →

Angular для Vue разработчиков

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

Сейчас во фронтенде среди фреймворков есть три явных лидера: Angular, React и Vue. Думаю, мы можем судить о любви разработчиков к проекту по количеству звезд на GitHub. На момент написания данной статьи у Vue уже 161 тысяча звезд, на втором месте находится React с 146 тысячами, а на третьем месте — Angular со своими скромными 59.6 тысячами.


С первого взгляда может показаться, что Angular не настолько популярный, как другие фреймворки, но если обратиться к результатам исследования статистики с портала Tecla, то мы увидим, что Angular занимает довольно большую долю рынка. Например, по данным исследования Angular работает на более чем 400 тысячах сайтов, в то время как Vue — на 100 тысячах. Предлагаю в этом разобраться. Рассмотрим, за что разработчики любят Vue, почему много приложений написаны на Angular и какие выгоды может получить разработчик при использовании фреймворка от Google конкретно для себя.


Читать дальше →

Пишем Ретровейв на Angular

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

Web Audio API существует уже давно, и про него есть немало статей. Поэтому про сам API много говорить не будем. Расскажем, что Web Audio и Angular могут стать лучшими друзьями, если их правильно познакомить. Давайте сделаем это!


Читать дальше →

Знакомимся с defer

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

В прошлой статье мы рассмотрели как создавать свои операторы RxJS. Сейчас я хочу поговорить о малоизвестном операторе создания — defer — и объяснить как можно использовать его для некоторых ситуаций

Читать дальше →

Декларативный шопинг в интернете с помощью Payment Request API и Angular

Время на прочтение5 мин
Количество просмотров5.5K
Как давно вы платили на веб-сайте в один клик с помощью Google Pay, Apple Pay или заранее заданной в браузере картой?

У меня такое получается редко.

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

Это не очень удобно. Особенно когда знаешь об альтернативе: в последние пару лет стандарт Payment Request API позволяет легко решать эту проблему в современных браузерах.

Давайте разберемся, почему его не используют, и попробуем упростить работу с ним.


Читать дальше →

3 способа рендеринга больших списков в Angular

Время на прочтение6 мин
Количество просмотров20K
В 2020 году фронтенд-фреймворки стали лучше, эффективнее и быстрее. Но, даже учитывая это, рендеринг больших списков без «замораживания» браузера всё ещё может оказаться сложной задачей даже для самых быстрых из существующих фреймворков.

Это — один из тех случаев, когда «фреймворк является быстрым, а код — медленным».



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

Автор статьи, перевод которой мы сегодня публикуем, хочет исследовать существующие способы вывода больших списков на веб-страницах и поговорить о сферах их применения.
Читать дальше →

Прокачиваем работу с событиями в Angular

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

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


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


Читать дальше →

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

Angular: еще один способ отписываться

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

Подписок в коде компонента следует избегать, перекладывая эту задачу на AsyncPipe, однако не всегда это возможно. Есть разные способы завершать подписки, но все они сводятся к двум — ручная отписка или использование takeUntil.


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

Читать дальше →

Чему меня научил мой коммит в Angular

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

Сегодня я расскажу, как попал в контрибьюторы Angular. Оказалось, это совсем не сложно и весьма увлекательно! Получилась драма с четырьмя актами и одной моралью. Вот, как всё было.

Читать дальше →

Отладка Angular Schematics с помощью Visual Studio Code

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

Посмотрим как работает Angular Schematic изнутри с помощью отладчика VS Code.


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

Читать дальше →

Настало ли время покинуть виртуальный дом [React'a]?

Время на прочтение4 мин
Количество просмотров11K
Аудио версия на русском (яндекс.музыка) / iTunes

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

Картинка в посте, смысловой нагрузки не несёт
Читать дальше →

Проекция контента в Angular или затерянная документация по ng-content

Время на прочтение5 мин
Количество просмотров47K
При изучении Angular очень часто упускают или уделяют недостаточное внимание такому понятию, как проекция контента. Это очень мощный инструмент для создания гибких и переиспользуемых компонентов. Но в документации о нем упоминается лишь пару абзацев в разделе Lifecycle hooks. Попробуем исправить данное упущение.


Читать дальше →

Angular: создание кастомного элемента формы и передача в него состояния формы

Время на прочтение11 мин
Количество просмотров9K
Разнообразные формы в наших веб-приложениях нередко строятся из одинаковых кирпичиков-элементов. Компонентные фреймворки помогают нам избавиться от повторяемого кода, и сейчас я хочу рассмотреть один из таких подходов. Так, как это принято в Angular.
Читать дальше →

Когда JavaScript-фреймворк не нужен

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

Фото — Maria Teneva, площадка Unsplash

Иногда React, Angular, Vue.js и т. д. — это лишнее

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

Вернемся в эпоху jQuery


Помните, было время, когда JQuery использовали для всего! JQuery то, jQuery сё — повсюду легкий аромат jQuery. На любом веб-сайте и в каждом веб-приложении — jQuery.

В чем причина популярности этой библиотеки?

Простой JavaScript казался слишком сложным в применении. К тому, же между браузерами было много отличий.

Но пришло спасение — библиотека jQuery избавила сообщество JavaScript от этой головной боли. Правда, большинство из нас в результате стали лениться, поскольку перестали понимать, что происходит «под капотом».

Я прозрел, когда появился этот сайт.

Читать дальше →