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

С момента написания статьи позиция команды Angular поменялась на то, что markDirty они пока не планируют в публичный API выносить. Можно импортнуть как приватный API в виде ɵmarkDirty.

Taiga UI: год в Open Source

Пока точных планов о выходе реакт версии в opensource я назвать не могу.

Taiga UI: год в Open Source

Там всё на токенах глобальных объектов отсюда:

https://github.com/ng-web-apis/common

Под SSR нужно подключить вот это:

https://github.com/ng-web-apis/universal

Taiga UI: год в Open Source

Для пользователя всё будет очень прозрачно. Если потребуется добавить нативные атрибуты, то можно будет написать так:

<tui-input formControlName="email">
  Type an email
  <input tuiTextfield placeholder="[e-mail]" type="email" />
</tui-input>

Старый вариант также останется возможен, если ничего навешивать не нужно.

Подобный формат появится в следующем релизе 2.33.0, 7 февраля.

Телеграф на RxJS

Добавил blur на клик :)

Телеграф на RxJS

Сейчас попробовал и всё декодирует, даже если с нескольких пробелов начать. Звук сейчас идёт с нарастанием за 20мс — это контролируется пайпом waAudioParam:

[gain]="morse$ | async | waAudioParam : 0.02"

Примерно так обычно оно и звучит везде, но можно и удлинить наплыв, если кажется, что резковато. Поправил на 50мс в демке.

Ленивая подгрузка библиотек из CDN в Angular

Ага, я так и написал в начале второй части 🙂

Самосохраняющийся компонент выбора

Директива - один из способов подложить что-то в DI дерево. Да, на примере StackBlitz показано, как можно раскидать в разные места разную реализацию с помощью директив.

Самосохраняющийся компонент выбора

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

Ну и в статье всё именно так, как ты написал во втором абзаце :)

OnPush — ваш новый Default

Но ведь если компонент А никак не связан с компонентом Б — почему он должен обновляться? Связь сверху вниз можно осуществить через инпуты и OnPush это подхватит. Связь параллельных вьюх надо осуществлять через сервис. Уж точно не надо строить своё приложение, полагаясь на волшебную связь всего со всем.

OnPush — ваш новый Default

OnPush, по сути, что-то меняет только для асинхронных операций. Если они написаны через RxJS, без императивных подписок и ручного изменения внутренних состояний, то OnPush ничего не добавит. Мне комфортно так писать и поддерживать код. RxJS требует особой подстроки мышления. Если её нет, то может возникать много непонимания, фрустрации и неприязни. Тогда с OnPush будет тяжело. Самостоятельно заботиться об обновлении мне не приходится. Практически всегда я не подстраиваюсь под OnPush, а просто пишу так, что при его включении всё будет работать и так. Разбиение интерфейса, если это вдумчивая декомпозиция, приложению только на пользу. В какой-то степени OnPush похож на strict в TypeScript. Можно сказать, что без него проще что-то накидать и не нужен лишний код проверок, но кодовая база с ним становится более предсказуемая, более аккуратная и надёжная. Ну и мигрировать приложение на него, если он сразу не был включен тоже будет довольно трудно 🙂

OnPush — ваш новый Default

Иногда в проектах можно встретить очень странный RxJS код, приправленный сайдэффектами, tap`ами и перебрасываниями туда сюда в стор чего-либо, что иногда может сказаться. Я не имел ввиду какой-то термин :)

OnPush — ваш новый Default

События, которые стреляют очень часто, например scroll, mousemove, dragmove могут быть хорошими кандидатами на запуск вне зоны. Но чаще всего это всё же requestAnimationFrame.

OnPush — ваш новый Default

У нас в компании используются и React, и Angular. Но почти все статьи, в том числе и про библиотеку компонентов, это был Angular (1389 против 231 местных очков вклада в хаб). Так что не знаю, откуда вы взяли про "все прошлые статьи были про React" :)

Небинарный *ngIf

Спасибо, поправил!

Bindon: малоизвестные фишки шаблонов Angular

strictInputTypes отключит везде, а не точечно :)

RxJS Challenge: Неделя 1

Не, deprecated конкретная перегрузка, на которую он по ошибке проваливается, если писать startWith(null).

Учим HostBinding работать с Observable

console.log прописан в стриме test. Он дёргается 2 раза, потому что мы байндим его на data-test и style.height.px. Так же мы от него создаём стрим active, ведь мы его пайпим. Там ещё 2 подписки — на class._active и disabled. Если test записать вот так, то console.log будет один:

  readonly test = interval(1000).pipe(
    tap(console.log),
    startWith(0),
    share(), // <--- Добавим
  );

Проблем тут будет не больше, чем при любом другом использовании RxJS :)

Учим HostBinding работать с Observable

1) Так можно указывать более общий тип, чтобы, если что, подменять реализацию — в первой строчке Observable<void> а не TuiDestroyService. Даже надо бы <unknown> написать :)
2) Раньше без этого нельзя было собирать проект без метаданных, что усложняло работу с Universal
3) Токены без этого не подрубишь, а мне нравится единообразие — поэтому пишу всегда одинаково, не думая, токен там или сервис

Учим HostBinding работать с Observable

Да, там 4 разных байндинга, соответственно, 4 разные подписки. Можно порулить через share, но вообще это довольно экстремальный кейс, когда тебе надо на несколько сущностей забайндить один и тот же стрим :)