company_banner

Taiga UI — библиотека компонентов под Angular, которую вам стоит попробовать

    Привет!

    Саша Инкин и я регулярно пишем на Хабр статьи по Angular. Почти все они основаны на нашем опыте разработки большой библиотеки компонентов.

    Эту библиотеку мы развиваем, перерабатываем и дополняем уже несколько лет, а свои идеи проверяем на нескольких десятках проектов Тинькофф Бизнеса и внутренних систем компании. Мы рады сообщить: выложили нашу библиотеку в открытый доступ!

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

    Как развивался наш UI Kit и как он организован

    Если вам интересно узнать, зачем нам понадобилась отдельная библиотека компонентов и как она исторически развивалась, то сначала рекомендую прочитать крутейшую статью Юли Царевой — «Как организовать работу над библиотекой общих компонентов».

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

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

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

    Эта часть обзавелась собственным дизайном и полной независимостью от контекста, а недавно оправдала свое название переездом в опенсорс. Давайте познакомимся с нашим UI Kit поближе!

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

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

    @taiga-ui/cdk

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

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

    • TuiDestroyService для избавления от постоянного создания сабжектов destroy$ в компонентах.

    • TuiFilterPipe и TuiMapperPipe для обработки значений в шаблонах без лишних вызовов ChangeDetection.

    • Декоратор tuiPure для мемоизации значений геттеров и методов класса.

    @taiga-ui/core

    Пакет с базовыми компонентами для построения интерфейсов, а также с инструментами для основы веб-приложения. Это инструменты вроде рутового компонента, порталов для диалогов и выпадашек, настройки темизации и анимаций. Core задает вектор остальным пакетам c UI-элементами. На этом уровне появляется дизайн и все общие стили лежат тут.

    @taiga-ui/kit

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

    @taiga-ui/addon-*

    Ряд тематических пакетов, которые основаны на первых трех. Например, есть пакет charts для графиков, commerce для работы с валютами, деньгами и вводом карт или даже отдельный пакет doc для построения собственной витрины аналогично нашей (ссылка на нее будет дальше).

    Получается вот такая иерархия, при которой пакеты более высокого уровня строятся на базовых пакетах:

    Вопрос: зачем тянуть в зависимости несколько пакетов, если я хочу лишь пару компонентов? Сколько они весят?

    Несколько месяцев назад мы перешли от концепции единых точек входа в каждый пакет к полной разбивке всех пакетов на Secondary Entry Points. Чтобы сохранить удобный и привычный контракт импортов, мы устроили все пакеты по уникальной схеме, когда каждый последующий уровень вложенности является Secondary-поинтом к текущему, но Primary — к сущностям своего содержимого.

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

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

    Такой подход к работе с Secondary Entry Points дает целый ряд плюсов в организации библиотек:

    • Бандл-приложений меньше, библиотека становится максимально tree shakable.

    • Любые циклические зависимости отлавливаются на этапе сборки.

    • Больше структурности в проекте, нет лишних связей между сущностями.

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

    Кастомизируемый

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

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

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

    Агностичный

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

    Мы не завязываемся на интерфейсы, не ограничиваем визуальное отображение и думаем о том, как сделать компонент максимально гибким в использовании, а не продумываем все возможные юзкейсы. Подробнее о таких подходах можно почитать в статье Саши Инкина «Компоненты-агностики в Angular».

    Тем не менее мы контролируем базовый UX, чтобы вам не приходилось о нем думать: например, при фокусировке инпута с клавиатуры тултип покажет подсказку через секунду автоматически, чтобы screen reader прочитал ее:

    Технологичный

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

    Мы не боимся работать с DI, все наши компоненты в OnPush, а на всем проекте включен strict-режим TypeScript’а — к типизации мы тоже относимся трепетно. Одним днем вы решите перейти на SSR, и наши компоненты в нем не сломаются.

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

    Многообразный

    Наш кит очень большой, в нем больше 130 UI-компонентов, десятки директив, токенов и различных инструментов. 

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

    Как начать использовать

    Заходите на официальный сайт и в документацию библиотеки. Смотрите, изучайте и следуйте инструкциям:

    taiga-ui.dev

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

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

    Хотите узнать больше?

    В ближайший четверг, 14 января, мы проведем стрим на нашем новом Twich канале. Начнем в 19-00 по МСК.

    Расскажем больше про проект, презентуем его структуру, основные части и особенности. Постараемся ответить на любые ваши вопросы про Taiga UI, Angular или разработку библиотек компонентов.

    Не прощаемся

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

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

    TINKOFF
    IT’s Tinkoff — просто о сложном

    Комментарии 26

      0

      Так нет ответа на вопрос — какая цель, кроме как "запилим библиотеку над фреймворком, который настройка над JS со своим блэкддеком и компонентами"?

        +2
        Цель и история о том, как мы пришли к библиотеке, хорошо описаны в статье, которую я приводил в начале, «Как организовать работу над библиотекой общих компонентов». Там же можно почитать о плюсах библиотеки с выделенной командой.

        Если вкратце, то было много команд и различных проектов, которым были нужны одинаковые компоненты в собственной дизайн системе. Чтобы не верстать одни и те же элементы интерфейса десятки раз, они сложены в библиотеку компонентов, обновляются в ней отдельной командой и легко переиспользуются всеми проектам
        +2
        Спасибо! Как раз вовремя.
          0
          А @taiga-ui/core используется «Как есть» в проектах тинькоффа? Или имеющийся в нём дизайн — это такой мок, чтоб можно было понять про что вообще речь в компоненте, а под конкретные проекты всегда создаёте кастомный контент?
            0
            Проекты используют эти же компоненты, но с другой дизайн темой — там корпоративные шрифты, цвета, скругления, тени и все такое. Если говорить о дизайне, то проекты его не кастомизируют — мы закладываем визуал в теме библиотеки, а проектные команды вставляют компоненты и завязывают на них свою бизнес логику. Это позволяет юзерам проще ориентироваться по приложению, потому что во всех его частях используются те же компоненты с одинаковым поведением :)
            0
            Понравился InputNumber. То что нужно для ввода сумм. Только не нашел выравнивания в поле ввода. Суммы часто принято выводить с выравниванием по правому краю.
              0
              Спасибо! Изначально это закладывалось, чтобы можно было просто повесить нативный CSS'ный `direction: rtl;`, но в текущей версии там есть некоторые проблемы с отображением постфикса и плейсхолдера в таком режиме. На это уже заведен issue, надеюсь скоро получится доработать этот момент
                +1

                Имеется ввиду не rtl, а именно выравнивание. По дизайну было задумано такое поведение в табличном представлении, но в будущем добавим возможность задания выравнивания. Так же был запрос от англоязычных пользователей, чтобы знак валюты можно было ставить до суммы. Если у вас есть ещё какие-то конкретные предложения и замечания — забегайте в наш гитхаб :)

              +1
              Прекрасная работа! Довольно интересно поизучать, спасибо!
              А на чем сделан сам сайт с демо? Что то похожее на сторибук, своя разработка? Оно есть в оперсурс?
                0
                Спасибо за фидбек и важный вопрос!

                Демо сделано полностью с помощью пакета @taiga-ui/addon-doc. Это один из аддонов, в котором собран сет из компонентов и инструментов для сборки такой витрины. Документация пока не очень подробная по нему, но к нам всегда можно прийти с вопросом — подскажем и расширим ее. Еще ее можно полностью интернационализировать токенами на любой язык.
                0

                Обязательно ли оборочивать страницу приложения в tui-root?


                Можно ли использовать некоторые компоненты, например календарь или number input, без этого внутри Ionic приложения?

                  +2
                  Не обязательно, root позволяет работать с порталами — выпадашками, диалогами, нотификациями и т.п. Компоненты вроде отдельной простой кнопки, полей ввода или календря будут работать и без него.

                  По поводу Ionic подсказать не могу — у нас совсем нет пользователей на нем и нам с Сашей никогда не приходилось его использовать. Хотя теоретически должно завестись. Если попробуете и получится, пожалуйста, дайте знать. Если сломается, то обязательно пишите — постараемся решить проблемы
                    +3
                    А еще про root можно будет узнать подробнее буквально через одну-две недели. Саша выложит статью о принципах его работы и причинах появления (на английском уже, кстати, есть)
                      +1

                      Root ещё подключает наши плагины (подробнее о них тут). Некоторые компоненты на это полагаются, так что лучше root подрубить, всё-таки, хотя бы модуль :)

                      +1
                      Привет! Хорошие новости, подняли Ionic с Тайгой. Полет нормальный: stackblitz.com/edit/taiga-ui-ionic
                        +1
                        Выпадающий список с мультивыбором разве что болен эпилепсией. PS и в оригинале так же. Похоже проблема с анимацией.
                          0

                          О, спасибо! Попробую как будет время.


                          Демо очень достойно выглядит. Особо времени не было потыкать, но календарь похоже зачётный!

                        0
                        Большое спасибо за статью!
                        Что вы думаете о Лерне и версионировании покомпонентно, а не всей библиотеки в целом?
                          +1
                          Нам подход с версионированием по компонентам показался тяжелее — с таким количеством компонентов можно будет сойти с ума, когда начнутся конфликты версий и зависимости одного компонента от другого.

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

                          В целом, наши addon'ы можно вести отдельно, потому что мы их нечасто обновляем. Но вот связку cdk/core/kit лучше синхронизировать
                          0

                          А где можно посмотреть пример для @taiga-ui/addon-table?

                            0
                            Привет! Пока там только два компонента:
                            taiga-ui.dev/tui-resizable-column
                            taiga-ui.dev/tui-table-pagination

                            Но у нас в планах на этот квартал доработать аддон до полноценного инструмента для работы со сложными таблицами со всякими перетаскиваниями, фильтраиями и прочим
                            0
                            В Figma community планируете что-то выложить?
                              0
                              Да, однажды дизайн основной темы Тайги выложим и в фигму
                              0

                              Роман, спасибо за статью и библиотеку компонентов! Если не сложно, скажите почему вы выбрали Angular? В текущий момент принимаем решение какой framework использовать Angular/React/Vue.

                                +1
                                Спасибо! Если вопрос к компании, то так исторически сложилось, что сервисы для физических лиц стали делать на реакте, а сервисы для юр. лиц на ангуляре.

                                Если лично ко мне, то я входил во фронтенд в начале 2018 года: тогда мне очень понравился TypeScript и в связке с Angular всё это выглядело серьезными и интересными технологиями (в дальнейшем оправдалось). После открыл для себя множество возможностей в ангуляре, подробно его изучил и открыл много отличных практик, которыми обычно и делюсь в статьях. Ангуляр мне очень удобен и позволяет быстро собрать интерфейс любой сложности, поэтому персонально меня всё более чем устраивает :)

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

                            Самое читаемое