Angular CDK: чем полезен и как применять

Редакция Highload разобралась, что такое Angular CDK (Component Dev Kit), а также для чего он применяется и какие у него преимущества. Попутно мы рассмотрели Angular CLI (на примере настройки инфраструктуры для Angular CDK). В статье мы расскажем, как и зачем создавать кастомизированные компоненты, и покажем это на примерах.

---

Содержание:
1. Angular vs AngularJS
2. Что такое Angular CDK
3. Angular CLI: настройка инфраструктуры
4. Работа с Angular CLI
5. Обзор компонентов Angular CDK
6. Преимущества и недостатки Angular CDK
7. Конкуренты
Заключение

1. Angular vs AngularJS

Прежде чем говорить про Angular CDK, нужно вспомнить, что такое Angular. Это фреймворк для frontend разработки. Чаще всего с Angular ассоциируется разработка одностраничных веб-приложений (или Single Page Application — SPA).

Во избежание путаницы, отметим, что в этой статье мы будем рассматривать CDK как часть фреймворка Angular, а не AngularJS. Angular написан с нуля, это новый фреймворк, с другой концепцией и архитектурой. Его предшественник, AngularJS,  считается устаревшим, и для разработки на нем нужно использовать язык программирования JavaScript. А основной язык Angular — это TypeScript.

Фреймворк имеет компонентную архитектуру: приложение делится на независимые части — компоненты. Их можно заменять и разбивать на более мелкие компоненты и использовать повторно.

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

Текущая версия фреймворка — 13.1.1 (от 15 декабря‎ ‎2021‎). Его исходный код хранится в этом GitHub-репозитории.

2. Что такое Angular CDK

Angular Component Dev Kit — это библиотека настраиваемых шаблонов и других абстракций для гибкой реализации элементов UI. CDK не привязан к конкретным стилям, определяющим финальную отрисовку элементов на экране. Это просто набор лучших практик, реализующих компонентный подход к разработке пользовательского интерфейса.

Библиотека состоит из набора примитивов (сервисов, классов, интерфейсов и так далее) для реализации полноценных кастомизированных UI-компонентов с уникальным поведением.

От Angular Material к Angular CDK

Angular Material — это библиотека компонентов, созданная разработчиками Angular в соответствии с принципами Material Design.

Material Design — это подход к созданию дизайна для веб- и мобильных приложений, который был разработан Google в 2014 году. Он позволяет реализовать многочисленные функции в ограниченном пространстве мобильных устройств, не перегружая пользователя сложным интерфейсом.

В процессе активного использования Angular Material разработчики видели много однотипных вариантов использования и задач по кастомизации готовых компонентов этой библиотеки:

• Создание и кастомизация всплывающей панели (меню, список, автозаполнение, всплывающая подсказка) для произвольного компонента.

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

Все чаще сталкиваясь с такими задачами, разработчики Angular постепенно начали создавать и повторно использовать более абстрактные типовые решения. И к 2017 году появилась библиотека Angular Component Dev Kit (CDK).

Важно отметить, что разработчикам CDK удалось «отвязаться» от использования компонентов и стилей из библиотеки Angular Material. CDK может работать независимо от нее.

Для чего используется Angular CDK?

Благодаря компонентной архитектуре Angular помогает разработчикам сделать оптимальную декомпозицию пользовательского интерфейса. Angular CDK позволяет качественно реализовать ровно то поведение компонентов, которое соответствует замыслу разработчика или, например, UI/UX-дизайнера. Библиотека Angular CDK включает хорошо протестированные решения с реализацией лучших шаблонов и практик UI/UX.

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

3. Angular CLI: настройка инфраструктуры

На вашей машине должен быть предварительно установлен сервер Node.js с пакетным менеджером npm. Чтобы не ошибиться с версиями, лучше установить то, что Angular гарантированно поддерживает.

Это касается как Node.js, так и npm: версия может быть чересчур старая или новая. Для работы с Angular лучше установить npm, которая поставляется с Node.js LTS.

Установку Node.js и npm (как тривиальное действо) здесь описывать не будем — да поможет вам гугл.

Angular CLI: настройка инфраструктуры для Angular CDK

Консольная утилита Angular CLI позволяет из командной строки установить все необходимые пакеты и инструменты для начала работы с Angular. Она также позволяет создать проект, собрать, протестировать приложение и даже подготовить его к развертыванию.

Angular CLI — это npm-пакет, который устанавливается простой командой:

npm install -g @angular/cli

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

Благодаря флагу -g пакет будет установлен как глобальный модуль. Это означает, что он будет всегда доступен из любой директории при создании нового Angular-проекта и не потребует повторной установки.

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

ng version

Ну и теперь, наконец-то, установка Angular CDK… Все так же просто:

npm install @angular/cdk

В данном случае эту установку нужно выполнять для каждого Angular-проекта, если вы хотите использовать в нем CDK.

тобы добавить какой-либо модуль (компонент) из CDK в ваш проект, нужно просто импортировать его. Например, код для добавления модуля CDK Drag and Drop внутри главного модуля app.module.ts может выглядеть так:

…..
import { DragDropModule } from '@angular/cdk/drag-drop';
…..

@NgModule({
….
  imports: [DragDropModule]
….
})

4. Работа с Angular CLI

Мы только что говорили про импорт модулей CDK, но что с ними делать дальше?

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

Сервисы
Сервисы в Angular CDK обычно выполняют узкоспециализированные задачи. Например:

• мониторинг состояния компонентов;
• работа с буфером обмена;
• передача данных между отдельными компонентами.

Сервисы не работают с HTML-разметкой напрямую.

Директивы 

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

У каждой директивы есть два варианта написания. Все зависит от того, где она используется — в HTML или в TS-коде. Например, для примитива Stepper директива CdkStep это <cdk-step>...</cdk-step> и CdkStep соответственно

Стоит отметить, что не у всех модулей в CDK есть директивы и сервисы: в каждом конкретном случае этот набор индивидуален. Кроме того, в модули включены вспомогательные классы, интерфейсы и константы. Их очень много, и в рамках данной статьи они заслуживают лишь упоминания.

Пример 1: кастомизированный Stepper

Stepper делит процесс отображения контента на последовательные этапы. Мы создадим кастомизированный компонент на основе CdkStepper и без использования стилей из библиотеки Angular Material. Вот что должно получиться в итоге:

Импортируем соответствующий модуль (как было показано в предыдущем разделе):

 import {CdkStepperModule} from '@angular/cdk/stepper';   и так далее…

Создадим новый класс-компонент, наследующий свойства примитива Stepper из Angular CDK:

@Component({
  selector: "app-custom-stepper",
  templateUrl: "./custom-stepper.component.html",
  styleUrls: ["./custom-stepper.component.css"],
  // This custom stepper provides itself as CdkStepper so that it can be recognized
  // by other components.
  providers: [{ provide: CdkStepper, useExisting: CustomStepperComponent }]
})
export class CustomStepperComponent extends CdkStepper {
  onClick(index: number): void {
    this.selectedIndex = index;
  }
}

custom-stepper.component.ts

Теперь мы имеем доступ ко всем свойствам исходного степпера (linear,selectedIndex,steps и так далее), описанным в документации к API CDK Stepper.

В данном случае мы по клику перезаписываем свойство selectedIndex, чтобы хранить актуальный номер этапа (Step 1 / Step 2). От него и будет зависеть, какой контент мы отобразим на странице.

Далее создадим HTML-шаблон, который будет отвечать за структуру отображаемой веб-страницы:

<section class="container">
  <header><h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2></header>

  <div [style.display]="selected ? 'block' : 'none'">
    <!-- Content from the CdkStep is projected here -->
    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
  </div>

  <footer class="step-navigation-bar">
    <button class="nav-button" cdkStepperPrevious>&larr;</button>
    <button
      class="step"
      *ngFor="let step of steps; let i = index;"
      [ngClass]="{'active': selectedIndex === i}"
      (click)="onClick(i)"
    >
      Step {{i + 1}}
    </button>
    <button class="nav-button" cdkStepperNext>&rarr;</button>
  </footer>
</section>

custom-stepper.component.html

В вышеприведенном примере в качестве атрибутов тегов мы также используем директивы и свойства из CDK Stepper — steps, selectedIndex, selected, cdkStepperPrevious, cdkStepperNext.

Все, кастомизированный компонент готов. Использовать его можно, например, вот так — что называется, в лоб:

<app-custom-stepper>
  <cdk-step><p>This is any content of "Step 1"</p></cdk-step>
  <cdk-step><p>This is any content of "Step 2"</p></cdk-step>
</app-custom-stepper>

app.component.html

Каждый из двух этапов (Step 1 и Step 2) обернут в тег <cdk-step>... </cdk-step>. Без этого работать не будет: коллекция steps не сформируется.

CSS-стили приводить не будем, они могут быть любыми.

Пример 2: на пути к адаптивному интерфейсу

В Angular CDK входит модуль Layout, он помогает сделать компоненты адаптивными, отслеживая изменения размеров экрана. Рассмотрим простой компонент:

import { Component, OnInit } from '@angular/core';
import {
  BreakpointObserver,
  Breakpoints,
  BreakpointState
} from '@angular/cdk/layout';

@Component({ 
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(public breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.breakpointObserver
      .observe([Breakpoints.Small, Breakpoints.HandsetPortrait])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          console.log(
            'Matches small viewport or handset in portrait mode'
          );
        }
      });
  }
}
 

При инициализации компонента запускается проверка размеров экрана: «соответствуют ли новые размеры заданному условию». Если да, то в консоль выводится сообщение ‘Matches small viewport or handset in portrait mode'.

Для этого мы используем сервис BreakpointObserver (и его метод observe) из модуля Layout. Мы также используем предопределенные значения точек перелома из перечисления Breakpoints (в данном случае — Breakpoints.Small и Breakpoints.HandsetPortrait), чтобы не задавать их вручную.

Метод observe возвращает объект типа BreakpointState, который мы записываем в переменную state и затем проверяем на соответствие размерам с помощью свойства matches.

Но можно пойти и другим путем, используя метод isMatched:

ngOnInit() {
    if (this.breakpointObserver.isMatched('(min-height: 40rem)')) {
      console.log('Viewport has a minimum height of 40rem!');
    }
  }

Если высота экрана не менее 40 rem, в консоль выводится соответствующее сообщение.

5. Обзор компонентов Angular CDK

Здесь мы очень быстро пробежимся по некоторым из них. Подробнее они описаны в документации.

• Accessibility: предоставляет такие инструменты для улучшения доступности элементов, как взаимодействие с клавиатурой, перехват фокуса, утилиты стилей и так далее
• Accordion: реализует логику работы с аккордеоном без привязки к стилям
• Bidirectionality: позволяет использовать LTR и RTL-стилизацию одновременно.
• Clipboard: позволяет работать с системным буфером обмена
• Collections: предоставляет набор утилит для работы с коллекциями.
• Drag and Drop предоставляет инструментарий для добавления  drag-and-drop к компонентам пользовательского интерфейса.
• Layout помогает реализовать принципы адаптивного дизайна
• Observers позволяет отслеживать изменения контента элементов
• Overlay позволяет создавать всплывающие панели для выбранного элемента
• Platform позволяет получать информацию о платформе, анализируя строку user-agent и другие параметры браузера
• Portal обеспечивает динамический рендеринг компонентов внутри других компонентов или DOM-элементов
• Scrolling предоставляет набор инструментов для реализации разных видов скроллинга.
• Stepper позволяет отображать контент в зависимости от пошагового изменения исходных значений.

6. Преимущества и недостатки Angular CDK

Своими преимуществами (да и некоторыми недостатками) эта библиотека обязана предшественнице — библиотеке Angular Material. Еще до создания Angular CDK она была одной из самых популярных. Но некоторые ее недостатки все же были исправлены в Angular CDK.

	Angular Material	Angular CDK
Преимущества
используется во многих проектах
является основой для других фреймворков
имеет много готовых компонентов
из коробки поддерживает стили Material Design
разбита на отдельные модули
поддержка популярных браузеров — Chrome (включая Android), Firefox, Safari (включая  iOS), Edge
Недостатки
сложная кастомизация
отрисовка элементов только в стиле Material Design
проблемы с обеспечением доступности элементов
недостаточно подробная документация

Зеленым цветом обозначено наличие преимущества или недостатка. А красным — отсутствие.

Сложно ли изучать Angular CDK?

При знакомстве с CDK может смутить тот факт, что он будто все еще прикреплен к Angular Material: они объединены на уровне документации и даже на уровне версионирования в репозитории.

Сама документация организована хорошо, содержит описание модулей, а также раздел с описанием их API и примеры того, как могут выглядеть кастомизированные компоненты. Жаль только, для многих модулей не хватает подробных объяснений и целостных примеров кода.

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

7. Конкуренты

Angular CDK не единственная UI-библиотека для Angular. Понятно, что она (так же, как и Angular Material) создана непосредственно разработчиками самого фреймворка Angular, но есть и сторонние решения, заслужившие свое место под солнцем.

Ngx-bootstrap

Это Bootstrap-фреймворк от Valor Software. Можно использовать Bootstrap 3, 4 и даже Bootstrap 5. У проекта развитая экосистема и короткий период обновления.

Преимущества

• Подробная документация.
• Модульная архитектура.

Недостатки

• Внешний вид компонентов слишком лаконичен и требует доработки с использованием CSS.

MDBootstrap

MDBootstrap может похвастаться огромным выбором компонентов на все случаи жизни.

С ним также поставляется набор готовых скриптов. У MDBootsrap есть также премиум-поддержка.

Преимущества

• Огромный набор компонентов
• Выглядит лучше самого фреймворка Bootstrap
• Есть свой хостинг, а также инструменты разработки
• Помимо Angular поддерживает React и Vue.js

Недостатки

• Перегружен деталями, которые мешают начинающим.
• Тяжело изучать.
• Не подходит для небольших веб-проектов.

Carbon Components

Корпоративный фреймворк от IBM. Carbon Components — это профессиональный инструмент.

Преимущества

• Подробная документация с множеством примеров.

Недостатки

• Избыточен для задач B2C.
• Мало востребован.
• Высокий порог входа.

Ng-Zorro

UI-фреймворк на базе Ant design. Имеет более 60-ти компонентов, написанных на TypeScript. Ng-Zorro поддерживает многоязычную локализацию.

Преимущества

• Подробная структурированная документация.
• Поддерживает Electron.
• Легко кастомизировать компоненты.

Недостатки

• Слабо продумана архитектура (местами неудачное разбиение на компоненты).
• Ant design не будет уместен в проектах, где уже используются material или bootstrap.

Если же вновь вспомнить про связку Angular Material + CDK, то вряд ли кто-то из конкурентов окажется абсолютным лидером. Как всегда — нужно смотреть по ситуации.

Заключение

Для тех, кто не потерял желание попробовать, напомним, что библиотека Angular CDK:

• в сочетании с Angular Material становится очень мощным инструментом;
• позволяет получить доступ к более низкоуровневым структурам элементов UI;
• имеет свои встроенные стили для отображения UI;
• ее можно использовать без Angular Material;
• ее можно использовать для тестирования (тут не упоминали, но это так).

В заключение ловите четкое видео про Порталы (CDK Portals). Это не только часть библиотеки, это реализация одного из важных принципов кастомизации компонентов: