Быстрый старт с WebComponents

[1c80]

А в чем выгода по сравнению с применением какого-нибудь вью или реакта?
Там то же самое только еще и реактивно будет и кода меньше.

[syncro]

есть выгода в производительности, в поддержке всеми современными браузерами в отсутствии необходимости транспилировать код, в более мощных и доступных динамических возможностях, при этом вы не лишаетесь возможности использовать наследование и другие возможности языка и платформ. Вообще сама по себе склейка/сборка фронта от фреймворков из сотен модулей в условиях http/2 может стать несколько анахроничной и быстрее будет загрузить несколько небольших скриптов с мультиплексированием, чем один огромный или просто статичный бандл, но скорее всего будет некоторое разумное сочетание подходов.

[1c80]

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

[syncro]

бабель можно подключать как-то выборочно можно транспилировать онлайн прямо в браузере с помощью systemjs. И конечно все-таки с ИЕ рано или поздно что-то сделают, сейчас движок уже засунули в edge, и сам механизм браузеров микрософта позволяет в том числе программно переключать этот самый движок задав современный edge, в котором все стандарты реализованы, а теперь там будет еще и хромовский вебкит. Разница в скорости когда отключаешь полифилы очень хорошо заметна даже на глаз. Но вообще я не считаю это прямо краеугольным камнем. Ключевое — браузерное апи сейчас сделано сильно приличнее популярных и не очень фреймворков, у которых кроме преимущетсв полно недостатков. Кроме того, каждый фреймворк это считай изолированный от остальных мирок и разработки очень мало совместимы между собой. А если вы используете нативное апи, вы получаете более универсальный код. Есть фреймворки на основе вебкомпонентов, мне они не очень нравятся, но менее всех XTag, на webcomponents.org полно готовых компонентов и на самом деле в веб компоненты можно заворачивать ui виджетсеты, как старые так и новые. В этом сила и гибкость технологии, вы свои компоненты можете встраивать в чужой в т.ч. вендорный код и наоборот, завернуть в вебкомпоненты хоть jquery ui, не используя теневое дерево правда, хоть ant.design, популярный у ряктовиков. Главное, что это все совместимо с ООП, модулями es6, всякими ленивыми и асинхронными и динамическими загрузками кода, через те же простые .innerHTML и .appendChild

[vanxant]

Ну насчёт «будет меньше кода с реактом» можно спорить.
Что касается реактивности, то для vue ничего не мешает её использовать (для реакта мешает уродский jsx). При этом вы получаете скорость нативной реализации в браузере, а не тонн функционального интерпретируемого js в реакте.

[1c80]

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

[i360u]

Firefox умеет работать с модулями без сервера. Поэтому самый лайтовый тулчейн может выглядеть как браузер + текстовый редактор.

[syncro]

да, проверил и действительно все работает за просто так) но правда тесты так не запускаются с той же cross-origin блокировкой

[DonAlPAtino]

Уже не совсем
In response to CVE-2019-11730, Firefox 68 and later define the origin of a page opened using a file:/// URI as unique. Therefore, other resources in the same directory or its subdirectories no longer satisfy the CORS same-origin rule. This new behavior is enabled by default using the privacy.file_unique_origin preference.

[justboris]

* самый ламповый тулчейн

[justboris]

А зачем вы рекомендуете все npm-модули ставить глобально, да еще и с sudo? Можно же локально, и запускать через npm scripts

[syncro]

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

[justboris]

А в CI как вы штуки с sudo протаскивать будете?

[syncro]

вообще без sudo тоже может работать, у меня заваливалось из-за ошибки с EACCESS без ключа, я прежде чем докопаться до причины, пробовал и ставить все глобально, затем все очищал обновлял и снова ставил и оттуда этот sudo и остался. Под капотом там Selenium ChromeDriver, в случае невозможности использования глобального npm пакета в его сторону думаю и следует копать. Вообще, люди работающие с нодой должны уже попривыкнуть к тому, что у них и gcc будет что-то собирать, и какое-нибудь другое недоразумение будет самостоятельно выкачивать бинарники за просто так игнорируя все политики%)

[androidovshchik]

Может быть как вариант указать свой путь для глобальных пакетов?

[syncro]

по-моему там дело не собственно в пермишенах, судо ведь не помогало само по себе, а в переходе npm на плоскую иерархию пакетов, т.к. ошибка возникает где-то в собственных node_modules пакета-зависимости wct

[mayorovp]

Вариант 1. Поставить на хост билд-агента, и запускать эту штуку там.

Вариант 2. Сборка внутри контейнера.

[justboris]

Вариант 3. Взять нормальные инструменты, которые не требуют особых прав.

Я пользуюсь пакетом selenium-standalone, с ним таких проблем нет.

[AndyGrom]

Ставьте пакеты локально и пользуйтесь npx. Глобальные зависимости зло, не только js и npm касается.

[syncro]

можно даже в компоненте делать вот так:

        this.onclick = (event) => {
            this.showMessage(event);
        };

или так:

        this.onclick = this.showMessage.bind(this);

но когда пишешь в html как в статье, то среда подсвечивает если ошибся, а addEventLiseter это динамический несвязный биндинг со всеми вытекающими