Привет, разработчики Angular!

@Waterplea и я время от времени пишем статьи об Angular для inDepthDev. Мы написали почти все из них, основываясь на нашем опыте разработки большой библиотеки компонентов пользовательского интерфейса. Мы разрабатывали, рефакторинг и наращивали его в течение нескольких лет и тестировали наши идеи на большом количестве проектов в нашей компании.

Мы рады сообщить, что опубликовали нашу библиотеку с открытым исходным кодом!

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

Полностью модульный

Начнем с организации проекта. Пользовательский интерфейс Taiga включает несколько уровней абстракций в виде отдельных пакетов.

@ тайга-ui / cdk

Это фундаментальный пакет. Существует множество директив Angular, сервисов, токенов, базовых классов и утилит для более безопасной, абстрактной и простой работы с Angular. Этот пакет можно использовать как дополнительный мульти-инструмент для вашего Angular-приложения любой сложности. Это также может быть основой для создания вашего собственного UI Kit.

Примеры сущностей:

Наш «cdk» отличается от «@ angular / cdk». Использовать оба варианта не проблема, потому что это не альтернатива, а дополнение

@ тайга-ui / ядро

Этот пакет включает в себя основные компоненты для создания интерфейса и некоторые инструменты, упрощающие приложения. Здесь вы можете найти такие вещи, как корневые компоненты, порталы для диалогов и раскрывающихся списков, темы и анимации. Core - это основа для других пакетов с компонентами пользовательского интерфейса. Здесь начинаются дизайн и общие стили.

@ тайга-ui / комплект

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

@ тайга-ui / аддон- *

Аддоны - это несколько тематических пакетов, которые собираются с помощью cdk, core и kit. Есть, например, пакет диаграмм, коммерческий пакет для работы с валютами, деньгами и вводом карт. Существует также специальный пакет документации, который предоставляет инструменты для создания собственного демонстрационного портала, аналогичного нашему (ссылка будет ниже 🙂)

У нас есть следующая структура с пакетами высокого уровня, созданными из базовых пакетов:

Здесь возникает важный вопрос: зачем мне устанавливать несколько пакетов в качестве зависимостей, если мне нужна только пара компонентов? Какого их размера?

Что ж, несколько месяцев назад мы переписали структуру наших библиотек. Мы переместили все наши пакеты в концепцию вторичных точек входа.

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

Теперь все наши пакеты дают возможность импортировать сущности как из Primary Entry Point, так и любого уровня глубины.

Кстати, первого варианта вполне достаточно, потому что вложение может решаться компоновщиком автоматически. Вам не нужно думать о глубине импорта.

Такой способ организации дает нам много преимуществ:

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

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

Настраиваемый

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

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

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

Агностик

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

Мы не пытаемся представить себе все варианты использования. Вместо этого мы не ограничиваем внешний вид и используем универсальные шаблоны, поэтому компоненты не ограничиваются определенной моделью данных. Подробнее о таких концепциях вы можете прочитать в статье Алекса Инкина Агностические компоненты в Angular.

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

Хорошо спроектированный

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

Мы не боимся DI, все наши компоненты используют OnPush, а весь проект разработан в строгом режиме TypeScript (мы очень чувствительны к типизации). Если вы однажды захотите использовать SSR, наши компоненты будут работать правильно.

Вам не нужно беспокоиться о неожиданных значениях неправильных типов из наших компонентов или утилит. Наши компоненты даже выводят утверждения в режиме разработки, если вы передаете им неверные данные :)

Читайте больше советов и приемов Angular в моем твиттере: @marsibarsi

Оно большое!

У нас более 130 компонентов, более 100 директив, десятки токенов, утилит и инструментов.

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

Как начать пользоваться Тайгой

Посетите наш официальный сайт с документацией. Здесь вы можете увидеть демонстрацию наших компонентов, узнать о наших библиотеках и найти инструкции по их добавлению в свой проект: taiga-ui.dev

Если вы хотите поддержать нас или увидеть наш прогресс, поставьте нам звезду и подпишитесь на Taiga UI на Github. Там вы можете задать любые вопросы, предложить идею или внести свой вклад в наш код.

Еще у нас есть канал в Angular Discord. Не стесняйтесь связаться с нами там!

Это не прощание

Мы хотим писать больше статей о том, как мы организуем и развиваем наши библиотеки. Такие статьи могут помочь вам лучше понять, как работает наш UI Kit. Они также объяснят все наши приемы и методы разработки легко повторно используемых компонентов на Angular, которые также очень полезны при разработке приложений.

Расскажите нам свое мнение о Taiga UI и поделитесь своими идеями о том, какие компоненты, инструменты или процессы вы хотите прочитать в первую очередь