Анонс открытого туалета
Рекомендации по открытым веб-компонентам
Всем привет! 👋
Мы `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.