А еще, плеер можно завернуть в нативный Custom Element и сильно упростить себе жизнь, опираясь на нативные колбеки жизненного цикла, которые браузер вызовет сам, при необходимости. Но осторожнее с этим, есть риск перестать быть "реакт-разработчиком" и познать дзен.
Объясняю. Хабр - это сообщество. Он существует, благодаря авторам и комментаторам, которые тут активно пишут. Поэтому, это ваше "вам сделали" отнесите в какое-нибудь другое место. Все что тут пишут - это обратная связь от этого самого сообщества, и попытки обесценивать ее, называя нытьем, бесят не меньше.
ЗЫ: На мой вкус, темная тема сделана реально плохо (слишком контрастно) бьет по глазам. Выключил почти сразу (спросите меня как), хотя у меня даркмод почти везде. Мне кажется, вам стоит глянуть на то, как устроены самые популярные темные темы для IDE. И такие жирные шрифты для больших блоков текста не очень уместны в темных темах, глазам от них больно.
Тут все сильно от личности зависит. В целом, эйджизм в айти - оправдан, как бы это не казалось, кому-то, несправедливым. С возрастом, у многих теряется "гибкость ума", необходимая для решения творческих задач и приоритеты смещаются от карьеры в сторону семьи и хобби. Однако, лично мне 45, и многих коллег по индустрии, моложе меня лет на 15, мне самому хочется назвать старперами... Они застряли в прошлом, не хотят учиться новому и со снисходительностью поучают "молодых"... В нашем деле очень ценен опыт, но накапливать в голове мусор, считая его "полезным опытом" тоже не стоит. Я думаю, что если вам нужен игрок в команду со специальными навыками - рассматривать кандидатов 40+, среди прочих, нужно обязательно, иначе можно упустить редкого и очень ценного человека, который молод душой но и успел набить шишек во многих вопросах.
Нормально. У BMW давно поворотники работают только по подписке.
А если серьезно, то даже на УАЗ Патриот подписка на дистанционный запуск через приложение уже несколько лет. Никто ей не пользуется, но зато ребята в тренде.
Призыв выкинуть реакт и юзать htmx - поддерживаю. А вот противопоставление SSR и CSR - это ерунда какая-то. Одно другому не мешает и никак не противоречит. Можно использовать гибридный подход, как все нормальные люди сейчас и делают.
То есть, они сами внесли фактор расовой предвзятости в эксперимент (когда подбирали имена), и получили его обратно на выходе? Гениально. А главное, вывод то какой?
О, мантра про маркетологов. Вот только совсем мимо. Кибертрак - это отличный инженерный эксперимент на тему сокращения издержек на очень затратных тех-процессах - формовке кузовных панелей и окраске. Насколько этот эксперимент успешен - еще рано судить, но презрительно называть его авторов "маркетологами" и "смузихлебами" - это значит расписаться в собственной неспособности смотреть на вопрос немного глубже и шире.
Кибертраку ржавчина к лицу, от нее он будет выглядеть еще брутальнее. Это вообще довольно занимательный арт-объект, к которому общепринятые, в автомире, мерки не вполне применимы. И это не сарказм, я вполне серьезно. Кому нужна просто большая мощная машина - купят Тундру или F150. Меня лично, в Кибертраке больше смущает то, что в Тесла побоялись навалить больше брутализма в салоне, сделав его значительно более "гражданским" чем экстерьер.
Однако пока мне не понятна практическая область применения этой фичи. Обычно компоненту не нужно стилизовать что-то на уровне выше себя. Но, возможно, есть какие-то узкие кейсы.
Все просто: лишние shadow root для каждого интерфейсного примитива (типа кнопки или иконки) - это лишний оверхед. Создание Shadow DOM - штука не бесплатная, можете попробовать создать в цикле много элементов с Shadow DOM и без, увидите очевидную разницу в скорости и потреблении памяти на страницу. Помимо этого, это вносит свои нюансы в сами подходы к стилизации. Однако, если у ваших примитивов не создается Shadow DOM, это не значит, что их нет выше. Более того, абстрактные библиотечные элементы не знают в каком именно контексте документа они используются и что там выше по иерархии. Если вы делаете UI-kit, виджет или микрофронт - вам понадобится изоляция, но только "по верхней границе". Соответственно, у вас должна быть возможность добавить стили только в соответствующий изолированный скоуп. Селектор :root в этом случае, не может быть использован для этих целей в общих стилях документа. Не думаю, что это очень узкие кейсы.
Примерно так же работает и Lit, он тоже создаёт виртуальный <template> под капотом. Тут лишь разница в реализации.
Да, но формат самого темплейта - это разница принципиальная, в одном случае вы можете использовать HTML вне, непосредственно, JS рантайма, а в другом - нет.
Потому что вынести разметку в отдельные файлы можно и в Lit при помощи дополнительных лоадеров, я думаю. А гидрация разметки с сервера возможна благодаря Declarative Shadow DOM (с тонким полифиллом на 20 строк для Firefox). Говоря о стандартах, я имел ввиду, что со временем это будет возможно в браузере нативно, без дополнительных обвязок.
Declarative Shadow DOM это не совсем та гидрация. Гидрация - это когда браузер создает DOM на этапе парсинга HTML-документа, и с уже созданными элементами вы взаимодействуете полноценно в рамках логики своих компонентов, без каких-либо лишних перерисовок. То есть, в очередной раз, речь идет о формате описания биндингов, основанном на атрибутах, для которых вообще не нужен JS-рантайм.
Когда все пропозалы станут стандартами и получат поддержку в браузерах - наступит прекрасное время, но с Symbiote.js вы можете использовать эти принципы уже сейчас.
Если Symbiote использует какую-то свою реализацию, то не факт, что он сможет без проблем с неё переехать на стандартную реализацию.
Symbiote - это не полифил, у него нет цели ранней адаптации черновиков стандартов. Но при этом, вы имеете почти 100%-ю гарантию, что сможете использовать как нативные возможности так и симбиотовские API, как по отдельности так и одновременно.
Мне кажется, что в комплексных приложениях для этого будут использоваться менеджеры состояний или разные Pub-Sub, шины событий и т.д.
В Symbiote.js встроенный Pub/Sub для этих целей и используется. Как для локальных данных компонентов так и для любых абстрактных. Вполне достаточно для сложных приложений, где структура данных представляет собой динамической граф, например.
Интересно, минусующие могут как-то пояснить свои минусы? Похожий коммент ниже набирает плюсы...
Может я как-то неясно выразился, но вторая часть моего коммента это не какой-то совет автору или попытка экстраполяции своего опыта, а просто наблюдение в ответ на комменты с такими-же наблюдениями.
Дополню про :host-context() : это очень похоже на то, как работает интерфейс rootStyles в Symbiote.js. Отличие в том, что `rootStyles`, может работать без Shadow DOM, как основной метод стилизации, в общем случае. И поддерживается во всех современных браузерах, а не только в Chrome.
Я же говорю, НЕ В БАНКЕ. В банк, особенно в рф, я не пойду работать из принципа. Я понимаю, что у всех людей принципы разные, но если область интересов СБ, относительно моей скромной персоны, явно выходит за рамки здоровых трудовых отношений, и приоритеты при оценке меня, как специалиста, выходят за рамки моих профессиональных навыков, то мне такой работодатель - не интересен.
Не до конца понял мысль. Но если речь про добавление стилей на элемент, который содержит теневой корень
Нет, речь о добавлении стилей в родительский, по отношению к элементу скоуп. Это может быть как верхнеуровневый shadow root так и сам документ. Симбиот умеет работать с изолированными и внешними, по отношению к точке интеграции, стилями одновременно, и под капотом, как и Lit, использует adoptedStyleSheets.
В Lit этот объект создаётся для хранения информации и точечного обновления DOM
Symbiote, конечно-же, тоже не использует VDOM, он создает виртуальный элемент template из строки при создании самого класса компонента, и потом уже создает подписки на свойства при его репликации (создании экземпляра). То есть, все изменения вносятся максимально эффективно, без каких-либо лишних перерисовок. Проверить это можно в песочнице, открыв девтулз: https://symbiotejs.org/2x/playground/basic/ - в этом примере, меняется только содержимое текстовой ноды.
У рабочей группы веб-компонентов как раз есть идеи HTML Module Script и DOM Parts
Пока у рабочей группы есть идеи, Симбот уже поддерживает это из коробки. Не сам черновик спецификации конечно, а вещи концептуально очень похожие. То есть, буквально, поддерживает шаблоны переданные в общем документе, как HTML. Когда появится поддержка нативного API, Симбиот на него переедет.
Если я ничего не путаю, то у Lit для этого есть пакет @lit/context
С Симбиотом такого рода взаимосвязи задаются просто в шаблоне, с помощью одного-единственного токена `^`, определяющего, что свойство определено в каскадном контексте. Напрмер:
let template = html`
<button ${{onclick: '^upperLevelClickHandler'}}>Click me!</button>
`;
Никакие дополнительные пакеты не нужны. Установка связей между компонентами, причем сложных связей, даже между компонентами от разных поставщиков - это и есть смысл существования этой библиотеки.
А еще, плеер можно завернуть в нативный Custom Element и сильно упростить себе жизнь, опираясь на нативные колбеки жизненного цикла, которые браузер вызовет сам, при необходимости. Но осторожнее с этим, есть риск перестать быть "реакт-разработчиком" и познать дзен.
Объясняю. Хабр - это сообщество. Он существует, благодаря авторам и комментаторам, которые тут активно пишут. Поэтому, это ваше "вам сделали" отнесите в какое-нибудь другое место. Все что тут пишут - это обратная связь от этого самого сообщества, и попытки обесценивать ее, называя нытьем, бесят не меньше.
ЗЫ: На мой вкус, темная тема сделана реально плохо (слишком контрастно) бьет по глазам. Выключил почти сразу (спросите меня как), хотя у меня даркмод почти везде. Мне кажется, вам стоит глянуть на то, как устроены самые популярные темные темы для IDE. И такие жирные шрифты для больших блоков текста не очень уместны в темных темах, глазам от них больно.
А можно было не тратить мое время на ерунду а сразу показать кнопку в настройках? Фейспалм.
Такой вот еще мем про $мол.
Русский язык хорош тем, что он гостеприимно и радушно принимает в себя новые слова из других языков.
Тут все сильно от личности зависит. В целом, эйджизм в айти - оправдан, как бы это не казалось, кому-то, несправедливым. С возрастом, у многих теряется "гибкость ума", необходимая для решения творческих задач и приоритеты смещаются от карьеры в сторону семьи и хобби. Однако, лично мне 45, и многих коллег по индустрии, моложе меня лет на 15, мне самому хочется назвать старперами... Они застряли в прошлом, не хотят учиться новому и со снисходительностью поучают "молодых"... В нашем деле очень ценен опыт, но накапливать в голове мусор, считая его "полезным опытом" тоже не стоит. Я думаю, что если вам нужен игрок в команду со специальными навыками - рассматривать кандидатов 40+, среди прочих, нужно обязательно, иначе можно упустить редкого и очень ценного человека, который молод душой но и успел набить шишек во многих вопросах.
Нормально. У BMW давно поворотники работают только по подписке.
А если серьезно, то даже на УАЗ Патриот подписка на дистанционный запуск через приложение уже несколько лет. Никто ей не пользуется, но зато ребята в тренде.
Призыв выкинуть реакт и юзать htmx - поддерживаю. А вот противопоставление SSR и CSR - это ерунда какая-то. Одно другому не мешает и никак не противоречит. Можно использовать гибридный подход, как все нормальные люди сейчас и делают.
То есть, они сами внесли фактор расовой предвзятости в эксперимент (когда подбирали имена), и получили его обратно на выходе? Гениально. А главное, вывод то какой?
Раньше, почему-то, эту страну особо не интересовали ваши тестикулы, но что-то, наверное, произошло... Интересно, что именно?
Зато отлично ассоциируется с экспериментом.
О, мантра про маркетологов. Вот только совсем мимо. Кибертрак - это отличный инженерный эксперимент на тему сокращения издержек на очень затратных тех-процессах - формовке кузовных панелей и окраске. Насколько этот эксперимент успешен - еще рано судить, но презрительно называть его авторов "маркетологами" и "смузихлебами" - это значит расписаться в собственной неспособности смотреть на вопрос немного глубже и шире.
Кибертраку ржавчина к лицу, от нее он будет выглядеть еще брутальнее. Это вообще довольно занимательный арт-объект, к которому общепринятые, в автомире, мерки не вполне применимы. И это не сарказм, я вполне серьезно. Кому нужна просто большая мощная машина - купят Тундру или F150. Меня лично, в Кибертраке больше смущает то, что в Тесла побоялись навалить больше брутализма в салоне, сделав его значительно более "гражданским" чем экстерьер.
Все просто: лишние shadow root для каждого интерфейсного примитива (типа кнопки или иконки) - это лишний оверхед. Создание Shadow DOM - штука не бесплатная, можете попробовать создать в цикле много элементов с Shadow DOM и без, увидите очевидную разницу в скорости и потреблении памяти на страницу. Помимо этого, это вносит свои нюансы в сами подходы к стилизации. Однако, если у ваших примитивов не создается Shadow DOM, это не значит, что их нет выше. Более того, абстрактные библиотечные элементы не знают в каком именно контексте документа они используются и что там выше по иерархии. Если вы делаете UI-kit, виджет или микрофронт - вам понадобится изоляция, но только "по верхней границе". Соответственно, у вас должна быть возможность добавить стили только в соответствующий изолированный скоуп. Селектор
:rootв этом случае, не может быть использован для этих целей в общих стилях документа. Не думаю, что это очень узкие кейсы.Да, но формат самого темплейта - это разница принципиальная, в одном случае вы можете использовать HTML вне, непосредственно, JS рантайма, а в другом - нет.
Declarative Shadow DOM это не совсем та гидрация. Гидрация - это когда браузер создает DOM на этапе парсинга HTML-документа, и с уже созданными элементами вы взаимодействуете полноценно в рамках логики своих компонентов, без каких-либо лишних перерисовок. То есть, в очередной раз, речь идет о формате описания биндингов, основанном на атрибутах, для которых вообще не нужен JS-рантайм.
Когда все пропозалы станут стандартами и получат поддержку в браузерах - наступит прекрасное время, но с Symbiote.js вы можете использовать эти принципы уже сейчас.
Symbiote - это не полифил, у него нет цели ранней адаптации черновиков стандартов. Но при этом, вы имеете почти 100%-ю гарантию, что сможете использовать как нативные возможности так и симбиотовские API, как по отдельности так и одновременно.
В Symbiote.js встроенный Pub/Sub для этих целей и используется. Как для локальных данных компонентов так и для любых абстрактных. Вполне достаточно для сложных приложений, где структура данных представляет собой динамической граф, например.
Интересно, минусующие могут как-то пояснить свои минусы? Похожий коммент ниже набирает плюсы...
Может я как-то неясно выразился, но вторая часть моего коммента это не какой-то совет автору или попытка экстраполяции своего опыта, а просто наблюдение в ответ на комменты с такими-же наблюдениями.
Не пойму, что здесь такого необычного. Они же не технические собеседования проводят. Одно из интервью в серии. Точнее, финальное, перед офером.
Дополню про
:host-context(): это очень похоже на то, как работает интерфейсrootStylesв Symbiote.js. Отличие в том, что `rootStyles`, может работать без Shadow DOM, как основной метод стилизации, в общем случае. И поддерживается во всех современных браузерах, а не только в Chrome.Я же говорю, НЕ В БАНКЕ. В банк, особенно в рф, я не пойду работать из принципа. Я понимаю, что у всех людей принципы разные, но если область интересов СБ, относительно моей скромной персоны, явно выходит за рамки здоровых трудовых отношений, и приоритеты при оценке меня, как специалиста, выходят за рамки моих профессиональных навыков, то мне такой работодатель - не интересен.
Нет, речь о добавлении стилей в родительский, по отношению к элементу скоуп. Это может быть как верхнеуровневый shadow root так и сам документ. Симбиот умеет работать с изолированными и внешними, по отношению к точке интеграции, стилями одновременно, и под капотом, как и Lit, использует
adoptedStyleSheets.Symbiote, конечно-же, тоже не использует VDOM, он создает виртуальный элемент
templateиз строки при создании самого класса компонента, и потом уже создает подписки на свойства при его репликации (создании экземпляра). То есть, все изменения вносятся максимально эффективно, без каких-либо лишних перерисовок. Проверить это можно в песочнице, открыв девтулз: https://symbiotejs.org/2x/playground/basic/ - в этом примере, меняется только содержимое текстовой ноды.Пока у рабочей группы есть идеи, Симбот уже поддерживает это из коробки. Не сам черновик спецификации конечно, а вещи концептуально очень похожие. То есть, буквально, поддерживает шаблоны переданные в общем документе, как HTML. Когда появится поддержка нативного API, Симбиот на него переедет.
Да, например, можно делать вот так: https://symbiotejs.org/2x/playground/css-data/
С Симбиотом такого рода взаимосвязи задаются просто в шаблоне, с помощью одного-единственного токена `^`, определяющего, что свойство определено в каскадном контексте. Напрмер:
Или, аналогично, в HTML:
Никакие дополнительные пакеты не нужны. Установка связей между компонентами, причем сложных связей, даже между компонентами от разных поставщиков - это и есть смысл существования этой библиотеки.