MediaObserver и BreakpointObserver — в чем разница?

После некоторых поисков я понял, что должен использовать библиотеку Flex-Layout. чтобы сделать пользовательский интерфейс на тему материалов отзывчивым (как ответил здесь). Согласно документации, эта библиотека предоставляет класс MediaObserver для программного обнаружения активация медиа запроса.

Я использовал команду схемы материалов -

ng g @angular/material:navigation shell/layout

чтобы добавить компонент Sidenav, и заметил следующий сгенерированный код -

export class LayoutComponent {
    isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
        map(result => result.matches),
        shareReplay()
    );

    constructor(private breakpointObserver: BreakpointObserver) { } 
}

Он использует класс BreakpointObserver и предопределенный пакет Breakpoints из пакета @angular/cdk/layout для обнаружения изменений области просмотра. А в документации говорится:

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

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

Я хотел бы знать -

• С точки зрения использования, каковы различия между этими двумя библиотеками/пакетами, то есть когда что использовать?
• Использует ли MediaObserver BreakpointObserver под капотом?
• Если я использую Flex-Layout, должен ли я вообще избегать @angular/cdk/layout утилит? Существуют ли какие-либо передовые методы, которым следует следовать в этом отношении?

Редактировать: 2020.05.11
Согласно исходному коду MediaObserver, он не использует внутреннюю часть BreakpointObserver. Вместо этого он использует собственный Window.matchMedia() API.