스크립트
00:00:00Это Asterix, собственная версия ShadCN от Meta, построенная на базе нашего решения для стилизации, StyleX.
00:00:05Он полностью поддерживает темы, распространяется по лицензии MIT, и в Meta утверждают, что дорабатывали его внутри компании
00:00:09в течение 8 лет для 13 000 приложений. Если вам не нравятся Tailwind или ShadCN,
00:00:15этот вариант определенно должен вас заинтересовать, а если даже вам нравится ShadCN,
00:00:18давайте посмотрим, есть ли причины для перехода.
00:00:24Честно говоря, я очень впечатлен количеством компонентов и функций, с которыми он вышел,
00:00:29это доказывает, что они использовали его внутри компании годами.
00:00:32Здесь более 150 доступных компонентов на базе React, но вместо того чтобы перечислять их,
00:00:37лучше показать их на наших шаблонах, где видно, как они используются все вместе.
00:00:41У нас есть таблица групп с разделами статусов и выпадающими меню.
00:00:44У нас есть платежная форма, где можно увидеть все необходимые отдельные элементы форм,
00:00:48а также статусы формы для таких вещей, как сообщения об ошибках.
00:00:50Вы можете собрать Kanban-доску с функцией перетаскивания или создать IDE с вкладками и боковыми панелями.
00:00:56Сайты электронной коммерции — с этим он тоже справится.
00:00:58И даже чат с ИИ — это тоже возможно, в комплекте с Markdown-компонентом для отображения полученного ответа.
00:01:03Также здесь есть кнопка подписки.
00:01:05Минуточку, это же YouTube, но если вам нравится то, что мы делаем, нажмите “подписаться”, это очень помогает.
00:01:10Как видите, Asterix действительно закрывает практически все ваши потребности в компонентах,
00:01:14и все эти компоненты приходят из той же основной библиотеки.
00:01:16Так что использование ничем не отличается от работы с обычными компонентами, а в документации можно посмотреть все доступные опции.
00:01:23Например, у кнопки может быть иконка, контент в конце, размеры, варианты, в общем, практически всё, что нужно.
00:01:30Но давайте перейдем к тому, почему стоит его использовать.
00:01:32Аргумент Meta заключается в том, что системы дизайна всегда вынуждали выбирать из двух плохих вариантов.
00:01:36Вариант первый: вы берете крупную систему, например Material UI, и все ваши приложения выглядят как продукты Google с ограниченными возможностями настройки.
00:01:44Вариант второй: вы берете что-то вроде ShadCN, копируете и вставляете компоненты в свой проект, но теперь вы владеете кодом,
00:01:50поэтому у каждого проекта своя версия компонента, и исправления из исходного репозитория становится сложно применять, так как вы сами должны обновлять всё это.
00:01:57Некоторые не хотят отвечать за весь этот код компонентов, и Asterix обещает положить конец этому компромиссу.
00:02:03В Asterix система управляет поведением, доступностью и качеством, а темы — внешним видом,
00:02:08настраиваясь на уровне токенов для таких вещей, как цвет, шрифт, радиус скругления, анимация — всё, что может понадобиться, без необходимости переписывать компонент.
00:02:14Здесь у меня есть приложение, созданное с использованием некоторых шаблонов с сайта Asterix,
00:02:18и это стандартный вид всех компонентов, если вы не используете тему, так что базовая тема уже включена.
00:02:24Чтобы создать свою тему, мы можем использовать функцию define theme,
00:02:27и она обладает несколькими крутыми функциями.
00:02:29Первая — это выбор цвета.
00:02:31Иногда вы знаете, какой должен быть ваш основной брендовый цвет, в моем случае это ярко-зеленый,
00:02:35но вы не хотите генерировать цвет фона, акцентный цвет, вы не хотите думать обо всех этих отдельных элементах.
00:02:40Так что с Asterix, если я просто нажму “сохранить”, вы увидите, что он генерирует их за меня,
00:02:44так что я получаю отличную отправную точку на основе всего одного HEX-кода.
00:02:48После цвета у нас есть параметры типографики.
00:02:50Здесь всё довольно просто, мы используем шрифт, но у нас также есть масштаб.
00:02:54Базовый размер моего текста будет 14,
00:02:57но с коэффициентом 1.2.
00:02:59Это значит, что при каждом увеличении размера текста, например, если я выберу крупный размер,
00:03:03он берет базу и умножает ее на 1.2, и это будут наши отдельные размеры текста,
00:03:08так что он генерирует все эти токены за нас.
00:03:10После этого мы можем управлять радиусом.
00:03:12Это тоже самоочевидно.
00:03:14Если я хочу, чтобы кнопки были закругленными, я могу задать высокое число,
00:03:17а если хочу, чтобы все углы были острыми — задать ноль.
00:03:21Затем идет финальная вспомогательная опция — анимация (motion),
00:03:23она контролирует скорость анимации при наведении и нажатии.
00:03:27Так что можно далеко продвинуться в настройке темы, просто определив несколько переменных,
00:03:31и это сгенерирует все токены за вас.
00:03:34Но что, если вам не нравятся некоторые выбранные токены?
00:03:36Например, если я хочу изменить цвет моей вторичной кнопки,
00:03:40мы можем зайти в раздел токенов здесь,
00:03:42и крутая особенность темы и этого раздела токенов в том, что всё типизировано,
00:03:47так что он знает, какие токены мы можем определять,
00:03:49и именно поэтому лучше делать это в JavaScript или TypeScript файле, а не в CSS,
00:03:53так как мы получаем безопасность типов.
00:03:55Цвет фона этой вторичной кнопки определяется токеном нейтрального цвета,
00:03:58так что мне просто нужно задать массив, где один — для светлой темы, другой — для темной.
00:04:03Для меня это будет один и тот же цвет.
00:04:05Если я сохраню, вы увидите, что цвет вторичной кнопки изменился,
00:04:08но есть проблема: текст теперь выглядит неправильно,
00:04:11поскольку я изменил цвет.
00:04:12Поэтому я хочу изменить цвет текста на черный,
00:04:15но проблема в том, что он на самом деле определяется переменной "цвет основного текста",
00:04:18так что если я сохраню это,
00:04:19вы увидите, что много текста на экране стало черным,
00:04:22а не только в кнопке, как я хотел.
00:04:24Поэтому вместо изменения глобального токена,
00:04:26я могу изменить его только для конкретного компонента.
00:04:28Здесь мы используем раздел компонентов.
00:04:30Скажем, мы хотим изменить кнопку.
00:04:32Я указываю вариант, в моем случае secondary,
00:04:35затем я могу добавить сюда любые нужные мне CSS-переменные.
00:04:37Я хочу, чтобы цвет был черным.
00:04:39Теперь сохраняю,
00:04:40и видим, что у вторичной кнопки черный цвет текста,
00:04:42а больше ничего не изменилось.
00:04:44Это коснулось только этого компонента.
00:04:46Еще одна крутая вещь в разделе компонентов
00:04:47в том, что можно определять свои собственные варианты.
00:04:50Допустим, я хочу вариант кнопки под названием “my button”.
00:04:52Я задаю цвет текста черный, а фон красный,
00:04:56и когда я использую кнопку,
00:04:57всё типизировано,
00:04:58и система знает, что “my button” — допустимый вариант.
00:05:00Как видите здесь,
00:05:01у нас появилась кнопка подписки.
00:05:02Так что можно сделать очень многое с помощью конфигурации темы,
00:05:05полностью адаптируя каждую часть каждого компонента,
00:05:07или просто общий стиль приложения.
00:05:09Есть даже готовые темы,
00:05:10если хотите начать с хорошей базы.
00:05:12Видите, в этих файлах много настроек,
00:05:15и вы даже можете расширять темы,
00:05:16чтобы достраивать что-то поверх существующей,
00:05:18вместо того чтобы каждый раз создавать новую.
00:05:20Все эти темы могут быть собраны для продакшена.
00:05:23Они работают в SSR-приложениях, например Next.js.
00:05:26Он статически сгенерирует весь необходимый CSS и JavaScript.
00:05:28Одно из главных преимуществ того, что у вас есть единое место для тем,
00:05:31состоит в том, что это помогает поддерживать целостность бренда.
00:05:34Это аргумент, который я часто слышу против Tailwind,
00:05:36где, поскольку разработчик может написать любой класс,
00:05:38или ИИ может написать любой,
00:05:40иногда вы получаете компоненты, у которых немного плывет стиль,
00:05:42потому что кто-то решил использовать свой собственный класс Tailwind.
00:05:45Когда у вас есть заданная тема,
00:05:46за ней проще следить, так как всё происходит в одном месте.
00:05:49Можно легко увидеть, что изменилось в вашей теме,
00:05:53и ИИ не нужно думать о том, какие классы Tailwind использовать,
00:05:56он просто использует предоставленные токены и компоненты.
00:05:58Хотя должен сказать, что чего-то подобного можно добиться
00:06:00с помощью Tailwind и ShadCN,
00:06:01где вы определяете всё как токены,
00:06:03но это не типизировано,
00:06:05так что соблюдать это будет намного сложнее.
00:06:06Теперь, кроме тем,
00:06:07вы можете стилизовать компонент напрямую,
00:06:09если хотите внести изменения,
00:06:10и на самом деле есть несколько способов сделать это.
00:06:12Рекомендуемый способ, пожалуй, — использование X-Style,
00:06:14потому что он использует StyleX,
00:06:16на основе которого он построен,
00:06:17и который, очевидно, создала Meta.
00:06:19Вы также можете использовать другие библиотеки, например Tailwind,
00:06:21Panda и подобные вещи,
00:06:22или просто CSS через “class name”.
00:06:24Так что, видите,
00:06:25у меня есть переопределения в StyleX.
00:06:27У меня есть стили для первичной (Primary) кнопки,
00:06:29где я хочу цвет белый,
00:06:30а фон красный.
00:06:32Если я теперь хочу изменить только одну кнопку на этой странице,
00:06:34всё, что нужно сделать — это передать проп X-Style,
00:06:36и передать мои стили StyleX,
00:06:38и если я сохраню,
00:06:39видите, моя первичная кнопка применяет эти стили.
00:06:42Вот так стилизуется что-то,
00:06:43если это разовая правка,
00:06:45и вы не хотите менять это
00:06:46для всех первичных кнопок.
00:06:47В документации вы можете увидеть
00:06:48все разные способы стилизации компонента.
00:06:51Это очень гибко,
00:06:52но действительно крутая вещь, которую хочу отметить,
00:06:53это поддержка Tailwind.
00:06:55Они сделали это
00:06:56с помощью так называемого “Tailwind bridge”.
00:06:58Это позволяет продолжать использовать Tailwind,
00:07:00но он сопоставляет все токены дизайна
00:07:01из темы, настроенной в Asterix,
00:07:03с утилитарными классами Tailwind.
00:07:06Так что такие вещи, как цвета,
00:07:07радиус,
00:07:07размер шрифта,
00:07:08все они определяются темой из Asterix,
00:07:10но потом Tailwind может использовать их
00:07:11с именами классов Tailwind.
00:07:13Лично я бы,
00:07:13скорее всего, продолжил использовать StyleX,
00:07:15поскольку Asterix вокруг него и построен,
00:07:17и я думаю, что смешивание этих библиотек
00:07:18принесет больше путаницы, чем пользы.
00:07:20Переходя от стилей к другому,
00:07:21еще одна отличная фишка Asterix
00:07:22— это то, насколько хорошо он работает с ИИ.
00:07:24Есть CLI Asterix,
00:07:26но он по большей части не предназначен для людей,
00:07:28он предназначен для ИИ.
00:07:29Он содержит команды,
00:07:30чтобы получать всю документацию
00:07:31по каждому компоненту,
00:07:33загружать ее в контекст,
00:07:34просто чтобы помочь агентам работать с этим компонентом,
00:07:36и он даже может заполнить ваш agents.md,
00:07:38чтобы дать больше рекомендаций.
00:07:40Я обнаружил, когда использовал это
00:07:41во всех своих демо,
00:07:42что он делает это невероятно хорошо,
00:07:43и я нашел, что модели вроде Fable,
00:07:45GPT,
00:07:45все они могут работать с Asterix,
00:07:47несмотря на то, что это относительно новая библиотека.
00:07:49В целом,
00:07:49видите, Asterix — это просто
00:07:51набитая функциями система дизайна,
00:07:52и я разобрал только основы.
00:07:54Очень рекомендую ознакомиться с документацией,
00:07:55так как она действительно хорошо написана,
00:07:57и у большинства компонентов
00:07:58есть разделы с лучшими практиками,
00:08:00что будет очень полезно для LLM,
00:08:02а еще есть площадка (playground),
00:08:03если вы хотите попробовать это,
00:08:04не создавая проект.
00:08:06Вы бы использовали что-то подобное?
00:08:07Дайте знать в комментариях ниже,
00:08:08подождите, подпишитесь,
00:08:09и как всегда,
00:08:10увидимся в следующем видео.