Открыть список
Как стать автором
Обновить

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

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

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

Сейчас для наполнения UI-кита нужно минимум два сотрудника: дизайнер, программист. Первый рисует, а второй реализует. Если нейронки позволят полностью закрыть время хотя бы одного сотрудника, то, скорее всего, мы будем смотреть в этом направлении. Но, предварительно будем смотреть на целесообразность, ведь UI-кит конечен, он не будет постоянно расти.
Нейронки в данном случае ничем не помогут.
После прочтения статей типа Turning Design Mockups Into Code With Deep Learning я уже не до конца уверен, что это невозможно.
В частности, если у вас был опыт этой/смежной области было бы интересно узнать ваше мнение, как бы вы решали подобную задачу и какие технологии выбрали. Заранее спасибо.
Тут все зависит от способа привязки, если вы используете API и верстаете, все UI kit компоненты в одном месте тогда не вижу ничего другого как заставить дизайнера называть одинаково блоки, что-бы за них можно было зацепиться, но в любом случае при генерации новых компонентов нужно сначала что-бы первый раз их сверстал человек, а уже потом обновление стилей можно сделать скриптом.

Это если хочется что-бы в будущем эти компоненты использовали другие люди.
Спасибо за развернутый комментарий, идея хороша, будем думать.
А как именно у вас происходит «отправляется автоматическое уведомление мейнтейнерам, и они обновляют соответствующие элементы библиотеки»?
Вы пользуетесь у Figma API, или стили в компонентах обновляются вручную?
Верно, вы попали в точку. Мы используем Figma API для получения информации с доски, которую преобразуем в нужный формат и подключаем в библиотеку. Далее создаем Pull Request в репозитории с изменениями и подключаем людей к проверке/внесению дополнительных изменений. На стороне Figma мы также версионируем доску, чтобы избежать случайных изменений.

Думаю реализация будет интересна, поэтому в следующей части я рассмотрю флоу и используемые инструменты подробнее.

Привет!


Подскажите, насколько удобно использовать веб компоненты Stencil в React?


Например, я могу вложить один компонент Stencil в другой внутри React компонента?
Или вложить React компонент внутрь Stencil компонента (все внутри React компонента)?

Я как-то исследовал вопрос создания универсального UI-kit, и не смог подружить даже React с Preact, особенно при серверном рендеринге — слишком мало возможностей использования компонента остаётся, ограничения вложенности, плюс потеря context, и так далее

Привет!

Подскажите, насколько удобно использовать веб компоненты 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
Промазал, это к предыдущему треду(
Веб-компоненты с контекстом напрямую не связаны. Нужен какой-то HOC, либо просто компонент, который уже из контекста передаст данные в веб-компонент через атрибуты. Веб-компоненты это же по сути обычный HTML, только подправленный JS. Поэтому в теории должно сработать.

Мне будет интересно почитать результаты использования Stencil в SSR в вашем примере на практике :)
Приведу пример, когда у `BarComponent` не будет доступа к контексту `Provider` на сервере:

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` просто можно передать строку, которую отрендерил реакт. Прям надо попробовать)

Да, это очень похоже на решение. Надеюсь, результат будет успешным :)

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