Анонс открытого туалета

Рекомендации по открытым веб-компонентам

Всем привет! 👋

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

Многие веб-разработчики испытали ужасную «усталость от Javascript». Мы надеемся, что наши рекомендации обеспечат вам душевное спокойствие благодаря тому, что у вас есть хорошо известное решение по умолчанию почти для всего. От IDE до CI, open-wc поможет вам.

Мы хотим, чтобы разработка веб-компонентов была доступной и доступной для всех, независимо от вашего фона или предыдущего опыта. Таким образом, наши рекомендации направлены на то, чтобы быть простыми в использовании, быть готовыми к использованию и обеспечивать «просто работающий» опыт разработчиков, которого мы все жаждем в различных аспектах разработки веб-компонентов.

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

Почему веб-компоненты

За последние несколько лет была популяризирована компонентная модель разработки веб-приложений, а сообщество JavaScript расцвело большим разнообразием библиотек и подходов. Работа по стандартизации нативной модели веб-компонентов началась в Google в 2012 году и после нескольких лет открытой разработки была успешно реализована во всех основных браузерах в 2019 году. На момент написания более 10% всех просмотров страниц содержали веб-компоненты.

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

В `open-wc` вы найдете все, что вам может понадобиться для начала разработки веб-компонентов.

Разработка

В нашем разделе [разработка](https://open-wc.org/developing/) вы найдете все, что вам нужно знать о написании кода; от практических демонстраций кода до доступности, миксинов, руководств и сообщений в блогах.

У нас есть широкий выбор интерактивных демонстраций, которые помогут вам быстро приступить к написанию кода:

демо

Если вы хотите сначала узнать больше о веб-компонентах, мы рекомендуем следующие записи в блоге, чтобы дать вам прочную основу для начала разработки веб-компонентов:

- Давайте создавать веб-компоненты! Бенни Пауэрс
- Веб-компоненты: от нуля до героя, Паскаль Шилп

Тестирование

Мы не только предоставляем установку для тестирования с Karma, Browserstack и Wallaby, но также предоставляем набор помощников по тестированию, которые помогут вам:

Сделать приспособления:

Сравнить DOM:

Управление временем:

Определить несколько пользовательских элементов:

Стартер приложений

Многие разработчики испытали то, что часто называют «усталостью от JavaScript», непреодолимое чувство необходимости идти в ногу с каждой новой технологией в экосистеме JavaScript. Инструменты JavaScript могут иметь пугающую кривую обучения и часто могут вызывать разочарование при настройке. Каковы правильные инструменты? Какие инструменты я должен использовать? Как работают эти инструменты?

Наши рекомендации направлены на то, чтобы избавить вас от этой болезненной настройки, чтобы вы могли сразу перейти к веселой части; разработка. Так что, если вы хотите сразу приступить к разработке с мощной настройкой, которая использует лучшие из стандартов браузера в кратчайшие сроки, наш open-wc-app-starter может быть для вас!

Наш open-wc-app-starter настроит вам полную конфигурацию со следующими функциями:

  • Разрешение модуля
  • Автоматический выбор типа модуля
  • Минимизация HTML, JS и CSS
  • Выход es2015 и es5

Используя webpack-babel-multi-target-plugin, наша сборка выводит версию вашего приложения es5 и es2015. Используя уловку nomodule, мы можем обслуживать код es2015 в современных браузерах и es5 в старых браузерах (в частности, IE11). Это значительно уменьшает размер вашего приложения в современных браузерах.

  • Нет времени выполнения/преобразования регенератора
  • Полифилы по использованию

Языковые полифиллы добавляются в зависимости от поддержки и использования браузера. Это приводит к значительно меньшему первоначальному пакету вашего приложения.

  • Синтаксис и JavaScript API

Наша конфигурация поддерживает только стандартный синтаксис javascript и API браузера. Мы поддерживаем предложения этапа 3, когда они приносят значительную пользу и их легко поддерживать без серьезных потерь производительности. Вот некоторые из предложений, которые мы поддерживаем: Динамический импорт, import.meta.url.

  • Набор для тестирования с Karma
  • Линтинг с помощью ESLint, Prettier и commitlint

Вы можете найти дополнительную документацию по нашему `open-wc-app-starter` здесь. Мы стараемся предоставить лучшую, удобную для пользователя настройку, и ваши отзывы чрезвычайно ценны для нас, поэтому, если вы чувствуете, что чего-то не хватает или у вас есть какие-либо отзывы, пожалуйста, не стесняйтесь создавать проблему в нашем репозитории.

И многое, многое другое

Другие рекомендации включают что-то среднее между: линтинг, демонстрация, сборка, публикация и автоматизация. У нас также есть парк генераторов, чтобы подключить и использовать любые наши установки в вашем текущем проекте.

Если вам интересно узнать больше о нашей философии и обосновании наших рекомендаций, вы можете сделать это здесь.

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

Присоединиться к разговору!

Мы будем рады услышать любые ваши отзывы или вопросы. Вы можете связаться с нами по адресу:

- Не стесняйтесь открывать вопрос на нашем Github, если у вас есть вопрос или отзыв.

- Вы также можете найти нас в Polymer slack в канале #open-wc.
Вы можете присоединиться к Polymer slack, перейдя по этой ссылке.

- Вы можете найти наши рекомендации и документацию по адресу: open-wc.

🚽 Сделано с любовью компанией open-wc.