Sign up

Profile

Posts 11

Comments 33

Bookmarks

  • Как писать хорошие библиотеки под Angular
    5
    +2
    Спасибо на добром слове! В данном случае основное отличие в том, что Attribute доступен в конструкторе, в то время, как значения из инпута придут только когда Ангуляр начнёт цикл проверки изменений (ngOnChange/ngOnInit). Так как нам эти значение нужны уже в конструкторе подходит только атрибут или DI. Второе отличие, которое я могу придумать — так не создаётся байндинг и Ангуляру не придётся за ним следить, но я сомневаюсь, что оно хоть как-то мало-мальски значимо сказывается на производительности.
  • Нативный способ покрасить SVG-иконки
    22
    –4
    Весь код можно скопировать из примера на StackBlitz в конце статьи.
  • Нативный способ покрасить SVG-иконки
    22
    0

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

  • Нативный способ покрасить SVG-иконки
    22
    0

    Для оптимизации ещё могу kraken.io посоветовать, но вы, наверное, уже про него знаете :-)

  • Нативный способ покрасить SVG-иконки
    22
    0
    Да, сам в своё время фильтрами накручивал подобие HSL, но не сказал бы, что оно удобнее :)
  • Нативный способ покрасить SVG-иконки
    22
    0
    Интересный вариант, спасибо. Таким способом не получится сделать двухцветную иконку, но для многих кейсов хорошо подойдёт.
  • Нативный способ покрасить SVG-иконки
    22
    0
    Да, я тоже часто качаю с flaticon. Если у тебя SVG иконка-кнопка, например, и при наведении ты хочешь поменять её цвет, то нужно как-то уметь это делать через CSS. В статье описано, как это можно сделать, не прибегая к шрифту из иконок.
  • Лабаем на MIDI-клавиатуре в Angular
    7
    +1
    Ну я на слух говорю. Померил через console.time — время, между регистрацией события и запуском аудио буфера на воспроизведение (т.е. накладные расходы от ангуляра с его байндингами, RxJS и декларативного веб аудио) обычно порядка 5мс:
    image
    Так что остальное — input latency, обусловленное реализацией Web MIDI API в Chromium. А сколько там его я затрудняюсь померить :)
  • Лабаем на MIDI-клавиатуре в Angular
    7
    0
    Да, что-то вроде того. На самом деле, довольно быстро привыкаешь. Эта задержка сравнима с задержкой, скажем, в игре Rocksmith, если слышали о такой. Профессиональных музыкантов напрягает, обычно от 20-30мс, тут уж ничего не поделаешь.
  • Отложенное применение функционала директив в Angular
    12
    0
    Тоже ниже вопрос по производительности поднял. Списался и c автором оригинальной статьи, в итоге добавил в свою библиотеку поддержку одного обзёрвера на много элементов, так что можно подключать и юзать :)
    github.com/ng-web-apis/intersection-observer
  • Кастомный скроллбар в Angular
    12
    0
    Только что немного обновил код, вынеся логику в директиву. А что не так с динамическим созданием? Можешь показать пример с кодом, где это нужно и как оно нужно?
  • Кастомный скроллбар в Angular
    12
    0
    Ну тут без работы со свойствами nativeElement никак. Мне кажется довольно прозрачно и наглядно получилось, в целом немного императива. Вообще я думал, что через директиву будет запутаннее для статьи, поэтому не стал её делать, но сейчас переписал на директиву и стало совсем классно (через один аутпут из fromEvent):
    stackblitz.com/edit/angular-scrollbar-component-directive?file=src/app/scrollbar/draggable.directive.ts
    Спасибо за коммент :) Добавлю в статью.
  • Кастомный скроллбар в Angular
    12
    0
    Честно говоря, не очень понимаю, в чём преимущество тянуть ползунок, по сравнению с тянуть контент на телефоне, но поскольку это кастомный скроллбар, тут, как раз, такое поведение вполне можно реализовать, просто задачи такой не стояло. Возможно достаточно будет заменить события мышки на тачи и, соответственно, координаты будут браться по другому. Возможно как-то иначе. В любом случае, это просто DIV`ы, на которых слушаются события и сделать можно всё, что хочется.
  • Отложенное применение функционала директив в Angular
    12
    +1
    Пользуясь случаем чуток прорекламирую наш опенсорс. Мы пилим легковесные обёртки над нативным API под Angular и у нас есть как раз Intersection Observer, обёрнутый в Observable сервис:
    github.com/ng-web-apis/intersection-observer

    Отлично подойдёт для подобного кейса. Интересно ещё, насколько выгоднее иметь 700 обзёрверов против 700 ивент листенеров. Можно было бы эту тему оптимизировать, ведь параметры одинаковые — можно в одном обзёрвере отслеживать все 700 элементов и эмитить наружу какие элементы сейчас видимы. Ну и сделать из этого сервис, доступный всем элементам.
  • Observable сервисы в Angular
    19
    0

    Конфигурация через DI хороша там, где оно не меняется. Через параметры вызова там, где меняется часто. Можно и совмещать эти два подхода. Что-то типа persistent config с возможностью переопределить в отдельных случаях. Пример такого подхода можно увидеть у нас в ng-dompurify — либы для использования DOMPurify в качестве санитайзера Angular:
    https://habr.com/ru/company/tinkoff/blog/459396/

  • Observable сервисы в Angular
    19
    +1

    В ТС, кончено, всё точно так же. Код этот написан так, просто чтобы кратко показать, что оно работает на коллбэках. Автору статьи, уверен, и в голову не пришло, что кто-то станет читать статью про Ангуляр и обзёрваблы не зная, как работает this в таких ситуациях. Это всё равно, как докопаться, что там в коде функция doSomething в итоге глобальная, а значит либо оно совершенно бесполезное, либо адовый сайдэффект.

  • Observable сервисы в Angular
    19
    0
    Мы традиционно пишем Inject всегда, так как хуже от него не будет. В Ivy, наверное, это делать уже не нужно, но изначально пошло вроде вот почему. В старых версиях Angular чтобы это дело работало без Inject в JIT при локальной разработке надо было делать emitDecoratorMetadata: true. При этом он записывал типы параметров и клал их реально в код. Это ломало Angular Universal, в котором на бэке не было всех этих классов и при SSR оно падало с каким-нибудь reference KeyboardEvent is undefined. Надо будет эту тему освежить, как раз сейчас занимаюсь созданием пакета под Angular Universal.
  • Observable сервисы в Angular
    19
    +1

    Это пример того, как работает НАТИВНЫЙ API.

  • Observable сервисы в Angular
    19
    +2
    Поскольку везде, где этот сервис будет использоваться его можно типизировать, как Observable, тут как раз зависимость «is a», а не «has a», поэтому принципы ООП наследование не нарушает и под BaseBean не подпадает.
  • Angular для Vue разработчиков
    32
    0
    Ты не путаешь с AngularJS? :)
  • Angular для Vue разработчиков
    32
    0
    Буду рад подсказать, если что-то знаю, если опишешь подробнее почему это нужно. Если, конечно, хочется это обсудить )
  • Angular для Vue разработчиков
    32
    0
    Ну разделение на изолированные компоненты с входными данными, инкапсуляция стилей, то, как лучше всего внутреннюю организацию компонентов сделать, шаблоны и кастомизация внешнего вида. Я работаю над библиотекой UI компонентов и если добавить в веб компоненты DI и проверку изменений, то практически всё, что я делаю можно без особого труда в них перенести не сильно меняя код.

    У меня, тогда, встречный вопрос:
    Если не нужно что-то такое, о чём разработчики ангуляра не подумали за вас. И да, если вы развиваетесь так, как они придумали и всегда можете объяснить бизнесу «вот эта штучка противоречит политике фреймворка, так что нет»

    Можете привести пример штук, противоречащих политике фреймворка? Я бы сказал, чо разработчики Ангуляр подумали за нас только в очень глобальных вопросах, скажем, в роутинге, в остальных же случаях они оставили нам полную свободу действий и я не могу сходу назвать ситуацию, которую вы озвучили.
  • Angular для Vue разработчиков
    32
    +1
    Ангуляр очень близок к нативным веб компонентам по принципу работы, так что не соглашусь тоже. Большая часть хороших практик работы с Ангуляром актуальна для всего с компонентным уклоном.
  • Angular для Vue разработчиков
    32
    0
    Тогда можно Angular Material и Angular CDK к Ангуляру приписать, как «из коробки» )
  • Резюме глазами интервьюера
    106
    +14
    На гитхабе можно запинить несколько репозиториев. Мне кажется, хороший вариант.
  • Компоненты-агностики в Angular
    6
    +1
    По массе причин:
    1) ng-content не имеет контекста, не получится передать в компонент меню в контент какое-то содержимое и размножить его на каждый пункт, передавая пункт как контекст.
    2) У компонента может быть больше одной кастомизируемой «ячейки» — у того же меню это пункты меню и шаблон для отображения «Ничего не найдено». На практике таких мест часто 2-3.
    3) Не всегда кастомизация задаётся через шаблон, например содержимое для модального окна у нас тоже передаётся в виде такого гибкого контента — можно определить шаблон внутри компонента, вызывающего попап, можно сделать отдельный компонент попапа для переиспользования (например, просто запрос на Да/Нет от пользователя). Вызовы бывают из сервисов, где шаблонов вообще нет.
    4) Частный пример — компонент отображения ошибки. У нас он получает словарь для отображения типовых ошибок через DI. Встроенный валидатор Angular на максимальную длину создаёт ошибку вида `maxlength: { requiredLength: 12 }` — для отображения таких ошибок достаточно просто использовать функцию вида:
    (context: {requiredLength}) => `Превышена максимальная длина — ${context.requiredLength}`;
    А наши собственные валидаторы могут возвращать шаблоны или компоненты для стилизации сообщений, добавления к ним ссылок, подсказок и т.д.
  • Компоненты-агностики в Angular
    6
    0
    Можно заморочиться как угодно :) Описанный тут подход, по сути, полагается полностью на механизмы ангуляра и предоставляет необходимую гибкость. Мне его хватает, но посмотрю на предложенные реализации, спасибо!
  • Компоненты-агностики в Angular
    6
    0

    Статья и так получилась довольно большая, старался, как мог компактно и понятно всё разложить :-) с радостью подробнее расскажу про то, что вызвало вопросы. О чём бы хотелось больше пояснений?

  • «WARNING: sanitizing HTML stripped some content» и как с ним правильно бороться
    2
    0
    Если ты именно про собственную реализацию, то оно ничего не сломает у нас, так как это замкнутая система. Она не используется нигде извне, только внутри реализации `DomSanitizer`, так же, как и у самого Angular. Если они там у себя потом что-нибудь добавят, то это отразится только на их собственной имплементации `DomSanitizerImpl`. Мы просто подсмотрели механизм, по которому они различают обработанное и необработанное значение.

    А если ты про сам `SafeValue` интерфейс, то он публичный и если команда Angular в него потом что-нибудь добавит, то это будет breaking change и работать с ним нужно как с любым другим ломающим изменением публичного API фреймворка — перерабатывать код и выпускать новую версию своей библиотеки.
  • Как организовать работу над библиотекой общих компонентов
    16
    0
    Привет. По статистике Юля ответила ниже, просто промахнулась, похоже :) По поводу документации — в статье есть гифки с нашей интерактивной витриной. Мы вынесли её в отдельный пакет и продолжаем увеличивать её автоматизацию, пишем схематики для генерации и тому подобное. Но в корне своём она всё-таки собирается руками. Она состоит обычно из 3 вкладок:

    1. Примеры, которые уж точно не автоматизировать. Там мы показываем несколько особенных примеров использования, покрывающие основные нужды пользователей. Часто, разработчик копирует оттуда код, как отправную точку, близкую к тому, что ему нужно.
    2. Интерактивная документация. Тут лежит компонент и показаны все его инпуты, значения которых можно покрутить и сразу увидеть эффект.
    3. Инструкция по подключению. Тут для большинства страниц примерно одно и то же, подключаем модуль, вставляем в шаблон.

    У разработчиков такая витрина пользуется большой популярностью. В ней есть разделы и поиск, кроме того «натыканные» входные данные со страницы документации сохраняются в URL так что можно передавать друг другу ссылки сразу на готовое состояние компонентов. Кроме разработчиков, витрина полезна технологам и дизайнерам проектов, чтобы видеть что уже можно переиспользовать и какие возможности уже есть у тех или иных компонентов.
  • ControlValueAccessor и contenteditable в Angular
    2
    0
    К сожалению, это событие отловит только ввод текста. Изменения в HTML, такие, как переносы строк или жирный шрифт по Ctrl + B его не испускают.
  • Оптимизация обработки событий в Angular
    6
    0
    Спасибо! Прочитал твою статью — я подумывал добавить модификатор `.silent` к своему плагину, чтобы запускать обработчик вне зоны, но пока у меня в библиотеке не было реальных кейсов, требующих такие обработчики, так что решил отложить до появления необходимости :) DnD пока не делал, в 7-ом ангуляре в CDK появились для этого инструменты. Интересно было бы посмотреть на их производительность в масштабах твоего случая.
  • Оптимизация обработки событий в Angular
    6
    +1
    Интересная идея! Но как при этом по пункту кликнуть? :)

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

Info

  • Rating 94–th
  • Date of birth March 13, 1989
  • Works in Tinkoff
  • Activity 8/4/20, 5:49 PM
  • Registered July 16, 2015

Contribution to hubs

Your account

Sections

Info

Services

© 2006 – 2020 «Habr»
Language settings
About
Support
Mobile version