Как Computed Properties в Angular помогают пропускать титры

[miscusi]

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

[kubk]

get isShowSkipHead(): boolean {
   const currentTime = Math.ceil(this.currentTime / 1000);
   const currentChapter = this.durationSeconds[currentTime];
   if (currentChapter && currentChapter.title === ChapterTitleEnum.HEAD_CREDIT) {
       return true;
   }
   return false;
}

Вот минимальное количество кода. Так бы это выглядело на Mobx. Обратите внимание - в коде нет ничего нового специфичного для библиотеки, в отличии от RxJS с его combineLatest. Более того Mobx ещё и закеширует computed значение, а в RxJS для этого нужно добавлять distinctUntilChanged.

[dopusteam]

А как он закэширует, если тут нет параметров, но есть зависимости и функция не чистая?

Понял, но выглядит как придирка, явно distinct лучше может быть, чем неявный

Обратите внимание - в коде нет ничего нового специфичного для библиотеки, в отличии от RxJS с его combineLatest

А чем это хорошо? Так хотя бы явно, в отличие от декорированных свойств.

[kubk]

Хороший вопрос. Это называется transparent reactivity. Подробности.
Похожая система, к примеру, реализована во Vue. Идея в том, что библиотека может сама запоминать зависимости наблюдаемых и вычисляемых значений. Это даёт такие преимущества:
- Не нужно указывать зависимости вручную, библиотека определит за вас. Как следствие более удобный рефакторинг - нельзя забыть добавить зависимость, нельзя забыть убрать зависимость когда она уже не требуется для вычисления
- Можно работать с объектами большой вложенности как есть, без необходимости нормализовывать состояние.
- Отписка автоматическая, невозможно забыть отписаться как в RxJS и получить утечки памяти: https://www.youtube.com/watch?v=7806msvJ1HE&t=2s

Примерный принцип работы (в очень упрощённом виде) описан в этой статье.

Ну и Mobx отлично подходит к Angular с его ООП и DI.

[miscusi]

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

из минусов это необходимость разобраться с rx, многим это дается трудно или используют просто подход "подписался-отписался", без операторов вовсе. Впрочем в основе ангуляра и используется либа, поэтому нужно знать. Да и сложно применима в других реактоподобных UI библиотеках

и да, вовсе необязательно подписываться или завершать потоки открытые потоки, это все делает пайп async или сборщик мусора автоматически. Точнее в 90% случаев можно отказаться от подписок, а при ревью везде где есть subscribe очень легко обнаружить потенциальную утечку

[obenjiro]

На самом деле исследовал этот вопрос еще со времен Angular RC. Не нашел хороших wrappers для Mobx. Самый популярный, что есть (mobx-angular) увы имеет свои проблемы https://github.com/mobxjs/mobx-angular/issues/38 и это только 1 пример (проблем на самом деле больше если капнуть)

Mobx очень крут, но у меня лично так и не хватило времени написать свой wrapper :/

[siandreev]

Используемая в RxJS решении сигнатура combineLatest -- deprecated
https://github.com/ReactiveX/rxjs/blob/881cacdc99a7ebae219b595004c632f7358f730d/src/internal/observable/combineLatest.ts#L33

Лучше передавать в combineLatest массив Observable-ов, а дальше использовать pipe(map(...))