Год Тигра в Taiga UI

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

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

Еще один год в Open Source

Разработка библиотеки идет уже несколько лет, два из которых — в Open Source. Мы с удовольствием делимся нашим продуктом с сообществом, а исходный код и вовсе лежит в открытом доступе.

Саша Инкин уже подводил итоги за первый год жизни проекта в Open Source. Он рассказал, как мы успели выстроить процессы, чтобы любой внешний контрибьютор мог с легкостью внести вклад в развитие нашего продукта. Подробности прошлогодних успехов читайте в статье:

У библиотеки Taiga UI есть выделенная core-команда, которая улучшает кодовую базу проекта. Но внушительная доля улучшений приходится на внешних контрибьюторов. К концу 2022 года их количество превысило сотню человек! Примечательно не только разнообразие компаний, в которых работают внешние контрибьюторы, но и география разработчиков: продуктом активно пользуются в разных странах. Кроме России, чаще всего к документации обращаются из Вьетнама, Беларуси, США, Индии и Франции.

За 2022 год внешние контрибьюторы принесли свыше двухсот Pull Request, а это ~15% от всех открытых PR за весь год. Спасибо большое всем нашим контрибьюторам за такое активное участие в проекте!

В октябре проходил международный онлайн-фестиваль, посвященный Open Source, — Hacktoberfest. Наша команда не могла его пропустить и подготовила Taiga UI к участию в этом мероприятии! Подробнее про фестиваль писал в предыдущей статье, там же есть аргументы в пользу участия в Open Source:

Еще один крупный релиз

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

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

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

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

Обновление Angular. У фреймворка Angular есть правило: если библиотека публикуется под какой-либо из старых версий Angular, то она без проблем может использоваться в приложениях с более современными версиями фреймворка. Но не наоборот! Если библиотека публиковалась под современной версией Angular, например, 14.x.x, то использовать ее в приложениях с более старой версией фреймворка уже не получится — в нашем примере это 13.x.x и ниже. 

В Тинькофф огромное количество проектов используют Taiga UI. Есть среди них те, что применяют только самые современные версии всех технологий. Но есть и проекты с более низким приоритетом, которые не успевают так стремительно обновляться и могут использовать не самые актуальные версии Angular. 

Поэтому мы в Taiga UI не спешили с поднятием версии Angular, все это время использовали девятую версию и публиковались под легаси-движком ViewEngine. Но в 3.0 мы не только подняли Angular до 12-й версии, но и стали публиковаться под современным движком Ivy. Теперь пользователи нашей библиотеки могут наконец-то ощутить все преимущества современного движка.

Отказались от поддержки древних браузеров. Каждый фронтенд-разработчик знает, насколько это приятное чувство. Мы давно не поддерживаем Internet Explorer, но вот пришло время для версий Edge, которые базируются на древнем движке EdgeHTML. Поддержка этого браузера доставляла немало хлопот, хотя количество пользователей измеряется в десятых процента. 

Кроме этого, мы подняли минимальную планку поддержки капризного браузера Safari — теперь это 12.1+. Если польза этих решений очевидна для разработчиков Taiga UI, то хорошо ли это для наших пользователей библиотеки? 

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

Набор глобальных стилей стал опциональным. В третьей версии Taiga UI все глобальные стили переехали из <code>@taiga‑ui/core</code> в <code>@taiga‑ui/styles</code></p>" data-abbr="в отдельный пакет ">в отдельный пакет и стали опциональными в использовании. Taiga UI стала еще более гибкой в использовании!

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

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

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

Мы заинтересованы, чтобы как можно больше команд скорее обновилось до самой актуальной версии, поэтому уделили огромное внимание схематикам по миграции. Разработчику, использующему в своем приложении Taiga UI второй версии, достаточно написать в консоли ng update @taiga-ui/cdk, чтобы не только обновились версии всех пакетов Taiga UI до третьей версии, но и автоматически устранилась большая часть ломающих изменений. Такие скрипты-схематики автоматически проходят по всем HTML-, TypeScript- и Less-файлам проекта, находят в нем устаревший API и подменяют его на современный аналог. 

Если хотите узнать больше деталей про изменения релиза — переходите на страницу с Changelog этого релиза.

Еще больше интересных фич

Кроме крупного мажорного релиза весь год наша Taiga UI постоянно улучшалась. За это время было закрыто больше 500 issues и вмержено больше 1500 Pull Request. Задачи были самые разные, расскажу про основные направления.

Локализация. Наша команда большое внимание уделяет интернационализации и локализации своих библиотек. С самого старта Taiga UI поддерживала несколько языков, а благодаря активной помощи сообщества к концу 2022 года поддержка расширилась до 13 языков. Для удобства их динамического переключения в рантайме мы добавили готовые утилиты. Но одного перевода мало, страны имеют гораздо больше отличительных особенностей. 

В конце 2021 года мы обозначали цели расширять i18n продукта и добавили поддержку rtl‑языков для большинства инпутов. Но на этом мы не остановились и продолжили расширять возможности локализации в 2022 году. Теперь пользователи нашей библиотеки могут задавать желаемый формат даты, день начала недели, например воскресенье, понедельник или вовсе другой день, то, какие дни в календаре помечать выходными, формат отображения чисел и другие важные мелочи.

Больше кастомизации компонентов. Многие любят Angular за его гибкую и удобную реализацию паттерна Dependency Injection. Мы в Taiga UI стараемся использовать DI по максимуму. С помощью Injection Token мы позволяем кастомизировать дефолтное поведение множества наших компонентов. Такие токены имеют нейминг, состоящий из названия компонента и постфикса OPTIONS, например TUI_EDITOR_OPTIONS. В 2022 году список таких доступных токенов значительно расширился.

Вынесение нативных инпутов наружу. В начале 2022 года мы добавили возможность проекции нативных инпутов через <ng-content /> внутрь компонентов-инпутов Taiga UI. Более подробно концепция изложена в разделе Best practices официальной документации Angular.

Разберем на примере. Раньше, чтобы создать Input с placeholder и определенным типом, приходилось применять такой код:

<tui-input
  formControlName="email"
  tuiTextfieldType="email"
  tuiTextfieldExampleText="mail@mail.ru"
>
  Type an email
</tui-input>

А теперь можно сделать вот так:

<tui-input formControlName="email">
  Type an email
  <input
    tuiTextfield
    placeholder="mail@mail.ru"
    type="email"
  />
</tui-input>

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

Кастомные нотификации. Значительно переработали сервисы показа уведомлений. Теперь созданные абстракции позволяют с легкостью создавать кастомные нотификации и использовать несколько видов уведомлений на одном проекте. Новый компонент Push — хорошая демонстрация новых возможностей.

Улучшение редактора. Весь год мы улучшали наш новый WYSIWYG, который базируются на Open Source решении Tiptap. Появился целый список полезных расширений:

• Поддержка Accordion. Теперь при работе с текстом вы можете добавить скрываемый контент.

• Добавлены инструменты для работы с якорными ссылками.

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

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

• Добавлена поддержка Dark Mode.

• Стабилизирована работа с таблицами.

Component Harnesses. С помощью сообщества начали активно разрабатывать пакет для тестирования компонентов с Harness и 19 декабря опубликовали первую версию.

Улучшение процессов и повышение DX. Кроме улучшения кодовой базы, мы постоянно стараемся улучшать процесс ее разработки. Нам важно, чтобы все члены core-команды и все внешние контрибьюторы имели высокий уровень Developer Experience. Ведь чем комфортнее условия для разработчика, тем быстрее происходит доставка новых фич. В 2022 году мы достигли новых успехов в этом направлении:

• Сменили тестовый фреймворк для unit-тестирования с Jasmine + Karma на Jest. Теперь тестовое окружение запускается в считаные секунды, а упавшие тесты дают более детализированные отчеты. Для интеграционного и скриншотного тестирования мы используем Cypress 11-й версии, который позволяет проверять работоспособность наших компонентов в настоящем DOM. 

• Решили проблему слишком длительного исполнения всех тестов. Мы распараллелили все тесты на множество отдельных Github-job: теперь при открытии PR запускаются 14 джоб с Cypress-тестами и 12 джоб с unit-тестами.

• Стали пользоваться фичами npm 8 и применять в работе workspaces.

• Стали активно использовать Github Projects для планирования и трекинга задач.

• Прикрутили ботов BundleMon и Codecov, которые позволяет отслеживать изменения размера пакетов и степень покрытия их тестами.

StackBlitz workflow. В конце года мы добавили интеграции нашего репозитория с новой фичой от команды StackBlitz — Codeflow. Теперь любому нашему внешнему контрибьютору не нужно иметь мощного компьютера с предустановленной IDE. Пользователю достаточно нажать на кнопку из нашего корневого README:

Вместо заключения

Год был непростой во всех смыслах, но команда Taiga UI продолжает развивать продукт. Выбирая нашу библиотеку для своих проектов, вы получаете не только удобный и современный UI Kit, но и уверенность, что поддержка и развитие будут продолжаться — ведь Taiga UI активно используется в сотне продуктах нашей компании. Хотите попробовать? Просто напишите в консоли:

ng add taiga-ui