Комментарии 17
Например, в случае смены цвета или шрифта отправляется автоматическое уведомление мейнтейнерам, и они обновляют соответствующие элементы библиотеки. Эта часть работы происходит вручную — мы пока не стремимся к полной автоматизации, а то пришлось бы создавать нейронные сети для генерации кода.
При чем тут нейронки?
Да, наполнение UI-кита можно автоматизировать. Например, с помощью нейронных сетей можно распознавать изображения в Figma и генерировать их верстку. Но останется вопрос с интерактивностью, логику компонент все-равно придется писать.
Сейчас для наполнения UI-кита нужно минимум два сотрудника: дизайнер, программист. Первый рисует, а второй реализует. Если нейронки позволят полностью закрыть время хотя бы одного сотрудника, то, скорее всего, мы будем смотреть в этом направлении. Но, предварительно будем смотреть на целесообразность, ведь UI-кит конечен, он не будет постоянно расти.
Сейчас для наполнения UI-кита нужно минимум два сотрудника: дизайнер, программист. Первый рисует, а второй реализует. Если нейронки позволят полностью закрыть время хотя бы одного сотрудника, то, скорее всего, мы будем смотреть в этом направлении. Но, предварительно будем смотреть на целесообразность, ведь UI-кит конечен, он не будет постоянно расти.
Нейронки в данном случае ничем не помогут.
После прочтения статей типа Turning Design Mockups Into Code With Deep Learning я уже не до конца уверен, что это невозможно.
В частности, если у вас был опыт этой/смежной области было бы интересно узнать ваше мнение, как бы вы решали подобную задачу и какие технологии выбрали. Заранее спасибо.
В частности, если у вас был опыт этой/смежной области было бы интересно узнать ваше мнение, как бы вы решали подобную задачу и какие технологии выбрали. Заранее спасибо.
Тут все зависит от способа привязки, если вы используете API и верстаете, все UI kit компоненты в одном месте тогда не вижу ничего другого как заставить дизайнера называть одинаково блоки, что-бы за них можно было зацепиться, но в любом случае при генерации новых компонентов нужно сначала что-бы первый раз их сверстал человек, а уже потом обновление стилей можно сделать скриптом.
Это если хочется что-бы в будущем эти компоненты использовали другие люди.
Это если хочется что-бы в будущем эти компоненты использовали другие люди.
А как именно у вас происходит «отправляется автоматическое уведомление мейнтейнерам, и они обновляют соответствующие элементы библиотеки»?
Вы пользуетесь у Figma API, или стили в компонентах обновляются вручную?
Вы пользуетесь у Figma API, или стили в компонентах обновляются вручную?
Верно, вы попали в точку. Мы используем Figma API для получения информации с доски, которую преобразуем в нужный формат и подключаем в библиотеку. Далее создаем Pull Request в репозитории с изменениями и подключаем людей к проверке/внесению дополнительных изменений. На стороне Figma мы также версионируем доску, чтобы избежать случайных изменений.
Думаю реализация будет интересна, поэтому в следующей части я рассмотрю флоу и используемые инструменты подробнее.
Думаю реализация будет интересна, поэтому в следующей части я рассмотрю флоу и используемые инструменты подробнее.
Привет!
Подскажите, насколько удобно использовать веб компоненты Stencil в React?
Например, я могу вложить один компонент Stencil в другой внутри React компонента?
Или вложить React компонент внутрь Stencil компонента (все внутри React компонента)?
Я как-то исследовал вопрос создания универсального UI-kit, и не смог подружить даже React с Preact, особенно при серверном рендеринге — слишком мало возможностей использования компонента остаётся, ограничения вложенности, плюс потеря context, и так далее
Привет!
Использование веб-компонентов в React похоже на оборачивание React компонента специальным HTML тэгом. Который уже будет отрендерен браузером.
Stencil расширяет поведение за счет плагинов, предоставляет возможность сделать для веб-компонентов обертку, чтобы работать с каждым как с React компонентом. Это очень удобно, например, если в вашем стеке TypeScript. При подключении компонента из обертки визуально отличить обычный от веб-компонента нельзя :)
Да, конечно. Например, у нас есть компонент для типографии и для сетки. Если компонент типографии подключается 1 раз в самом вехнем узле, то компонент сетки может быть вложен, например, если нужно сформировать вложенную сетку. А внутри этих компонентов могут быть как обычные React компоненты, так и из UI-кита, например, кнопка.
SSR для нас важная фича, но не критичная, так как мы в первую очередь ориентированы на CSR. В целом, у Stencil'а поддержка есть, но нужно будет настраивать.
По CSR могу сказать, что ограничений вложенности не обнаружили и контекст передается без проблем. Посмотрите на первый сайт в новой парадигме. Все HTML тэги, которые начинаются с
Конечно есть и то, что сейчас может и не заработать. Например, можно сделать расширение (через extend) компонента из UI-кита в проекте на React, но не факт что будет работать. Мы не делаем extend'ы компонент из UI-кита, чтобы гарантировать, что во всех подключаемых проектах будет внешний вид и поведение таким, как в дизайне. Но, если это важно, этот вопрос можно решить, все зависит от того как сделаете обертку.
Основное — веб-компоненты позволяют не привязываться к конкретному фреймворку. Что особенно актуально, когда команды используют разные фреймворки. А у нас именно так :) И этот плюс очень сильно перевешивает все минусы.
На данный момент Stencil, кроме HTML, поддерживает фреймворки: Angular, Vue, React, Ember, есть еще плагин для Svelte (на момент публикации еще не писали о нем в документации на сайте).
Подскажите, насколько удобно использовать веб компоненты Stencil в React
Использование веб-компонентов в React похоже на оборачивание React компонента специальным HTML тэгом. Который уже будет отрендерен браузером.
Stencil расширяет поведение за счет плагинов, предоставляет возможность сделать для веб-компонентов обертку, чтобы работать с каждым как с React компонентом. Это очень удобно, например, если в вашем стеке TypeScript. При подключении компонента из обертки визуально отличить обычный от веб-компонента нельзя :)
Например, я могу вложить один компонент Stencil в другой внутри React компонента?
Или вложить React компонент внутрь Stencil компонента (все внутри React компонента)?
Да, конечно. Например, у нас есть компонент для типографии и для сетки. Если компонент типографии подключается 1 раз в самом вехнем узле, то компонент сетки может быть вложен, например, если нужно сформировать вложенную сетку. А внутри этих компонентов могут быть как обычные React компоненты, так и из UI-кита, например, кнопка.
Я как-то исследовал вопрос создания универсального UI-kit, и не смог подружить даже React с Preact, особенно при серверном рендеринге — слишком мало возможностей использования компонента остаётся, ограничения вложенности, плюс потеря context, и так далее
SSR для нас важная фича, но не критичная, так как мы в первую очередь ориентированы на CSR. В целом, у Stencil'а поддержка есть, но нужно будет настраивать.
По CSR могу сказать, что ограничений вложенности не обнаружили и контекст передается без проблем. Посмотрите на первый сайт в новой парадигме. Все HTML тэги, которые начинаются с
dino- это веб-компоненты. Конечно есть и то, что сейчас может и не заработать. Например, можно сделать расширение (через extend) компонента из UI-кита в проекте на React, но не факт что будет работать. Мы не делаем extend'ы компонент из UI-кита, чтобы гарантировать, что во всех подключаемых проектах будет внешний вид и поведение таким, как в дизайне. Но, если это важно, этот вопрос можно решить, все зависит от того как сделаете обертку.
Основное — веб-компоненты позволяют не привязываться к конкретному фреймворку. Что особенно актуально, когда команды используют разные фреймворки. А у нас именно так :) И этот плюс очень сильно перевешивает все минусы.
На данный момент Stencil, кроме HTML, поддерживает фреймворки: Angular, Vue, React, Ember, есть еще плагин для Svelte (на момент публикации еще не писали о нем в документации на сайте).
Контекст у меня терялся, т.к. для React компонентов, которые внутри Preact, приходилось делать отдельный hydrate
А с веб компонентами получается проблемы нет, так как их не нужно как-то отдельно рендерить на клиенте, это делает браузер, и у нас останется единое React дерево.
На сервере похоже эта проблема останется, т.к. надо отдельно рендерить компоненты через апи stencil/hydrate, и не обойтись без dangerouslySetInnerHtml
А с веб компонентами получается проблемы нет, так как их не нужно как-то отдельно рендерить на клиенте, это делает браузер, и у нас останется единое React дерево.
На сервере похоже эта проблема останется, т.к. надо отдельно рендерить компоненты через апи stencil/hydrate, и не обойтись без dangerouslySetInnerHtml
Промазал, это к предыдущему треду(
Веб-компоненты с контекстом напрямую не связаны. Нужен какой-то HOC, либо просто компонент, который уже из контекста передаст данные в веб-компонент через атрибуты. Веб-компоненты это же по сути обычный HTML, только подправленный JS. Поэтому в теории должно сработать.
Мне будет интересно почитать результаты использования Stencil в SSR в вашем примере на практике :)
Мне будет интересно почитать результаты использования Stencil в SSR в вашем примере на практике :)
Приведу пример, когда у `BarComponent` не будет доступа к контексту `Provider` на сервере:
Тут нужно будет отрендерить в строку `stencil-web-component` силами Stencil, затем передать его в `dangerouslySetInnerHTML` родительского тега.
На самом деле, тут даже не понятно, как `BarComponent` отрендерить внутри `stencil-web-component`, ведь аналога `dangerouslySetInnerHTML` у Stencil нет)
Но пока писал, понял что можно делать немного по другому — делать `ReactDOMServer.renderToString` на все приложение, без модификации веб компонентов, а потом парсить полученную строку, и реплейсить каждый веб компонент через `renderToString` Stencil.
Нашел пример с next js, кажется все еще проще — в `stencil.renderToString` просто можно передать строку, которую отрендерил реакт. Прям надо попробовать)
const App = () => {
return (
<Provider>
<FooComponent>
<stencil-web-component>
<BarComponent />
<button ... />
</stencil-web-component>
</FooComponent>
</Provider>
)
}
Тут нужно будет отрендерить в строку `stencil-web-component` силами Stencil, затем передать его в `dangerouslySetInnerHTML` родительского тега.
На самом деле, тут даже не понятно, как `BarComponent` отрендерить внутри `stencil-web-component`, ведь аналога `dangerouslySetInnerHTML` у Stencil нет)
Но пока писал, понял что можно делать немного по другому — делать `ReactDOMServer.renderToString` на все приложение, без модификации веб компонентов, а потом парсить полученную строку, и реплейсить каждый веб компонент через `renderToString` Stencil.
Нашел пример с next js, кажется все еще проще — в `stencil.renderToString` просто можно передать строку, которую отрендерил реакт. Прям надо попробовать)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Единый UI-кит и синхронизация дизайна в Учи.ру. Часть 1