Как сократить время разработки при переходе с устаревшего UI на Asterix

Сосуществование старого UI и Asterix

Внедрение новой дизайн-системы в существующий проект целиком — задача, чреватая проблемами. Макеты часто «едут», а функционал начинает работать некорректно. Используя движок StyleX, разработанный Meta для управления более чем 13 000 приложений за 8 лет, вы можете безопасно сосуществовать со старым CSS-in-JS.

Разделите пространства имен, чтобы стили не перемешивались:

Измените настройки @astryxdesign/build так, чтобы исходный код библиотеки компилировался с префиксом .astryx-, а существующий код — с префиксом .x-.
Используйте @layer в CSS: разместите layers.css в самом верху и установите приоритет в порядке [reset, astryx-base, astryx-theme, product].
Составьте матрицу с определением границ перехода, начиная с атомарных UI-элементов, затем макетов и в конце — сложных модулей.

Использование этой структуры изоляции позволяет сэкономить 40% времени разработки по сравнению с полным рефакторингом.

Синхронизация токенов с дизайнерами

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

Разместите в корне репозитория JSON-схему, определяющую цвета, типографику и отступы.
Настройте CI/CD так, чтобы GitHub Actions автоматически пересоздавал theme.ts, как только дизайнер пушит изменения в токены Figma.
Настройте @stylexjs/eslint-plugin, чтобы запретить ввод числовых значений напрямую (inline).

После этого процесса разработчики вместо хардкодинга будут использовать только переменные токенов, такие как var(--spacing-3). Фрагментация UI исчезнет, а благодаря автодополнению риск ошибок значительно снизится.

Автоматизация доменных компонентов

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

Управляйте получением данных и состоянием отдельно, используя чистые хуки React.
Используйте команду swizzle в Asterix CLI, чтобы вынести ключевые компоненты в локальную директорию и получить над ними полный контроль.
Свяжите шаблоны CLI с пользовательскими скриптами, чтобы разметка страниц и хуки создавались автоматически в соответствии со спецификацией API.

Это позволит сокращать время на создание каждого нового компонента на 2 часа.

Управление производительностью во время сборки

Способ внедрения стилей в рантайме снижает производительность по мере роста количества компонентов. StyleX извлекает атомарный CSS во время сборки, уменьшая размер бандла. Согласно данным команды разработчиков Meta, после перехода на статическую компиляцию объем бандла стилей сократился на 80%, а эффективность рендеринга улучшилась на 30%.

В файле vite.config.ts в опциях astryxStylex установите runtimeInjection: false, чтобы принудительно извлекать статический CSS.
В rollupOptions разделите @astryxdesign и @stylexjs на отдельные чанки.
Проверяйте показатель INP на панели Performance в Chrome DevTools, чтобы находить узкие места вычислений стилей, занимающие более 50 мс.

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

Сосуществование старого UI и Asterix

Разделите пространства имен, чтобы стили не перемешивались:

Измените настройки @astryxdesign/build так, чтобы исходный код библиотеки компилировался с префиксом .astryx-, а существующий код — с префиксом .x-.

Используйте @layer в CSS: разместите layers.css в самом верху и установите приоритет в порядке [reset, astryx-base, astryx-theme, product].

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

Синхронизация токенов с дизайнерами

Разместите в корне репозитория JSON-схему, определяющую цвета, типографику и отступы.

Настройте CI/CD так, чтобы GitHub Actions автоматически пересоздавал theme.ts, как только дизайнер пушит изменения в токены Figma.

Настройте @stylexjs/eslint-plugin, чтобы запретить ввод числовых значений напрямую (inline).

Автоматизация доменных компонентов

Управляйте получением данных и состоянием отдельно, используя чистые хуки React.

Используйте команду swizzle в Asterix CLI, чтобы вынести ключевые компоненты в локальную директорию и получить над ними полный контроль.

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

Это позволит сокращать время на создание каждого нового компонента на 2 часа.

Управление производительностью во время сборки

В файле vite.config.ts в опциях astryxStylex установите runtimeInjection: false, чтобы принудительно извлекать статический CSS.

В rollupOptions разделите @astryxdesign и @stylexjs на отдельные чанки.

Проверяйте показатель INP на панели Performance в Chrome DevTools, чтобы находить узкие места вычислений стилей, занимающие более 50 мс.

Как сократить время разработки при переходе с устаревшего UI на Asterix

Related Video

Meta создали свой собственный shadcn (Astryx)

Как сократить время разработки при переходе с устаревшего UI на Asterix

Сосуществование старого UI и Asterix

Синхронизация токенов с дизайнерами

Автоматизация доменных компонентов

Управление производительностью во время сборки

More from the community

사내 시스템에 llm api 붙일 때 마주하는 현실적인 한계와 대응법

레거시 백엔드에 GPT-6 Astra 붙일 때 예산 승인과 보안 통과를 먼저 끝내는 법이 있습니다

에이전트끼리 대화하다 6천만 원 청구서가 나오는 이유

사내 RAG 벡터 검색에 Okta 권한 필터를 직접 거는 방법

브라우저 에이전트에게 내 구글 계정을 통째로 넘기면 안 되는 이유

Apple Won the AI Race

Comments (0)

Как сократить время разработки при переходе с устаревшего UI на Asterix

Сосуществование старого UI и Asterix

Синхронизация токенов с дизайнерами

Автоматизация доменных компонентов

Управление производительностью во время сборки