Angular у нас нет, а вот встраиваемые приложения есть, но на Preact. Теоретически можем перейти на svelte, но пока по бюджетированию бандла проходим, поэтому живем как есть)
Можно, мы как раз используем некоторые готовые UI библиотеки для наших внутренних проектов. А для основного продукта не можем, потому что он постоянно развивается. У нас десятки фичей летят на прод каждую неделю. Каждая из которых может как добавить что-то, так и поменять внешний/вид концепцию. Если использовать готовое решение как есть, то мы будем сильно ограничены.
Есть вариант с добавлением абстракции поверх готового решения, чтобы можно было подсунуть другую библиотеку. Вариант ок, но мы не знаем куда, как часто и как долго будет это готовое решение развиваться. А на полноценное участие в развитии готовой библиотеки, в рамках open source, у нас пока нет возможностей, да и если бы был, у нас продукт технологически развивается медленее.
Остается вариант с форком. Форкнуть ради того, чтобы все выпилить. Все-равно надо передизайнить под себя.
Крутая статья, увидел себя со стороны. У меня последняя, 5-я встреча, тоже состояла из решения алогритмических задач. Дело было до пандемии, этапы с 2 по 5 шли оффлайн. Но все время было ощущение, что собеседование != реальные задачи на работе и такой упор на алогритмы сделан, чтобы как-то можно было отсеять нескольких из большого количества соискателей.
Если честно, после этого думал натренировать алогритмы и ехать, но после прочтения статьи как у них происходит повышение (не помню ссылку) подумал, что мы с Яндексом можем хорошо сосуществовать раздельно.
Веб-компоненты с контекстом напрямую не связаны. Нужен какой-то HOC, либо просто компонент, который уже из контекста передаст данные в веб-компонент через атрибуты. Веб-компоненты это же по сути обычный HTML, только подправленный JS. Поэтому в теории должно сработать.
Мне будет интересно почитать результаты использования Stencil в SSR в вашем примере на практике :)
Подскажите, насколько удобно использовать веб компоненты 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 (на момент публикации еще не писали о нем в документации на сайте).
Верно, вы попали в точку. Мы используем Figma API для получения информации с доски, которую преобразуем в нужный формат и подключаем в библиотеку. Далее создаем Pull Request в репозитории с изменениями и подключаем людей к проверке/внесению дополнительных изменений. На стороне Figma мы также версионируем доску, чтобы избежать случайных изменений.
Думаю реализация будет интересна, поэтому в следующей части я рассмотрю флоу и используемые инструменты подробнее.
После прочтения статей типа Turning Design Mockups Into Code With Deep Learning я уже не до конца уверен, что это невозможно.
В частности, если у вас был опыт этой/смежной области было бы интересно узнать ваше мнение, как бы вы решали подобную задачу и какие технологии выбрали. Заранее спасибо.
Да, наполнение UI-кита можно автоматизировать. Например, с помощью нейронных сетей можно распознавать изображения в Figma и генерировать их верстку. Но останется вопрос с интерактивностью, логику компонент все-равно придется писать.
Сейчас для наполнения UI-кита нужно минимум два сотрудника: дизайнер, программист. Первый рисует, а второй реализует. Если нейронки позволят полностью закрыть время хотя бы одного сотрудника, то, скорее всего, мы будем смотреть в этом направлении. Но, предварительно будем смотреть на целесообразность, ведь UI-кит конечен, он не будет постоянно расти.
Angular у нас нет, а вот встраиваемые приложения есть, но на Preact. Теоретически можем перейти на svelte, но пока по бюджетированию бандла проходим, поэтому живем как есть)
Можно, мы как раз используем некоторые готовые UI библиотеки для наших внутренних проектов.
А для основного продукта не можем, потому что он постоянно развивается. У нас десятки фичей летят на прод каждую неделю. Каждая из которых может как добавить что-то, так и поменять внешний/вид концепцию. Если использовать готовое решение как есть, то мы будем сильно ограничены.
Есть вариант с добавлением абстракции поверх готового решения, чтобы можно было подсунуть другую библиотеку. Вариант ок, но мы не знаем куда, как часто и как долго будет это готовое решение развиваться. А на полноценное участие в развитии готовой библиотеки, в рамках open source, у нас пока нет возможностей, да и если бы был, у нас продукт технологически развивается медленее.
Остается вариант с форком. Форкнуть ради того, чтобы все выпилить. Все-равно надо передизайнить под себя.
Если негде будет работать, то и нулевая ставка по ипотеке не поможет)
Крутая статья, увидел себя со стороны. У меня последняя, 5-я встреча, тоже состояла из решения алогритмических задач. Дело было до пандемии, этапы с 2 по 5 шли оффлайн. Но все время было ощущение, что собеседование != реальные задачи на работе и такой упор на алогритмы сделан, чтобы как-то можно было отсеять нескольких из большого количества соискателей.
Если честно, после этого думал натренировать алогритмы и ехать, но после прочтения статьи как у них происходит повышение (не помню ссылку) подумал, что мы с Яндексом можем хорошо сосуществовать раздельно.
Да, это очень похоже на решение. Надеюсь, результат будет успешным :)
Мне будет интересно почитать результаты использования Stencil в SSR в вашем примере на практике :)
Использование веб-компонентов в React похоже на оборачивание React компонента специальным HTML тэгом. Который уже будет отрендерен браузером.
Stencil расширяет поведение за счет плагинов, предоставляет возможность сделать для веб-компонентов обертку, чтобы работать с каждым как с React компонентом. Это очень удобно, например, если в вашем стеке TypeScript. При подключении компонента из обертки визуально отличить обычный от веб-компонента нельзя :)
Да, конечно. Например, у нас есть компонент для типографии и для сетки. Если компонент типографии подключается 1 раз в самом вехнем узле, то компонент сетки может быть вложен, например, если нужно сформировать вложенную сетку. А внутри этих компонентов могут быть как обычные React компоненты, так и из UI-кита, например, кнопка.
SSR для нас важная фича, но не критичная, так как мы в первую очередь ориентированы на CSR. В целом, у Stencil'а поддержка есть, но нужно будет настраивать.
По CSR могу сказать, что ограничений вложенности не обнаружили и контекст передается без проблем. Посмотрите на первый сайт в новой парадигме. Все HTML тэги, которые начинаются с
dino-это веб-компоненты.Конечно есть и то, что сейчас может и не заработать. Например, можно сделать расширение (через extend) компонента из UI-кита в проекте на React, но не факт что будет работать. Мы не делаем extend'ы компонент из UI-кита, чтобы гарантировать, что во всех подключаемых проектах будет внешний вид и поведение таким, как в дизайне. Но, если это важно, этот вопрос можно решить, все зависит от того как сделаете обертку.
Основное — веб-компоненты позволяют не привязываться к конкретному фреймворку. Что особенно актуально, когда команды используют разные фреймворки. А у нас именно так :) И этот плюс очень сильно перевешивает все минусы.
На данный момент Stencil, кроме HTML, поддерживает фреймворки: Angular, Vue, React, Ember, есть еще плагин для Svelte (на момент публикации еще не писали о нем в документации на сайте).
Думаю реализация будет интересна, поэтому в следующей части я рассмотрю флоу и используемые инструменты подробнее.
В частности, если у вас был опыт этой/смежной области было бы интересно узнать ваше мнение, как бы вы решали подобную задачу и какие технологии выбрали. Заранее спасибо.
Сейчас для наполнения UI-кита нужно минимум два сотрудника: дизайнер, программист. Первый рисует, а второй реализует. Если нейронки позволят полностью закрыть время хотя бы одного сотрудника, то, скорее всего, мы будем смотреть в этом направлении. Но, предварительно будем смотреть на целесообразность, ведь UI-кит конечен, он не будет постоянно расти.