Мы рады, наконец, представить наш новый проект: Современная сеть.
Что такое современная сеть?
Несколько лет назад мы начали Открытые веб-компоненты проект. Наша цель состояла в том, чтобы помочь людям разрабатывать веб-компоненты, и мы создали гиды и инструменты, чтобы помочь людям сделать это. Работая над этим проектом, мы поняли, что многие вещи, которые мы делаем, не обязательно были специфически для веб-компонентов.
Чтобы поддерживать фокус в рамках проекта открытых веб-компонентов, и поделиться нашей работой с более крупным сообществом разработчика, мы решили разделить проект и создать современную сеть. Не волнуйтесь, открытые веб-компоненты не уходят! Он получит возобновленный фокус для конкретных темов веб-компонента, в то время как в современной сети мы будем работать над универсальными инструментами и направляющими для веб-разработки.
Цель для современной сети
Наша цель – предоставить разработчикам с руководствами и инструментами, которые им нужно для создания современной сети. Мы стремимся работать тесно с браузером и избежать сложных абстракций.
Современные браузеры – это мощная платформа для строительных сайтов и приложений. Мы стараемся работать с тем, что доступно в браузере первым до достижения пользовательских решений.
Когда вы работаете с браузер, а не против IT, код, навыки и знания остаются актуальными в течение более длительного времени. Развитие становится быстрее и отладка легче, потому что есть меньше слоев абстракции.
В то же время мы осознаем о том, что не все проблемы могут быть решаемыми элегантно браузером сегодня. Мы поддерживаем разработчиков, принимая информированные решения о введении инструментов и настроек их проектам, таким образом, чтобы разработчики могли улучшаться позже, когда улучшается поддержка браузера.
Наш план на будущее
Это объявление отмечает официальный выпуск современной сети. Наш сайт живет в Modern-web.dev И наши пакеты доступны на NPM под @Web пространство имен. Наш код – это открытый источник и публично доступно в github.com/modernweb-dev/web Отказ
Для обновлений вы можете следовать нам на Twitter И если вам нравится то, что вы видите, пожалуйста, рассмотрите возможность спонсировать проект на Открытый коллектив Отказ
Мы работаем над большим количеством различных проектов за последние пару лет. В этом посте мы будем проходить вас через некоторые из наших проектов и о том, как мы планируем вписать их в современный веб-проект.
Руководства
На нашем новом Сайт У нас есть посвященный Гиды раздел. Это предназначено, чтобы помочь вам стать уверенным в здании для современной сети. Он включает в себя шаг за шагом руководства для работы с нашими инструментами, и мы документируем общих проблем, разработчики вступают в бесконечное развитие.
Этот раздел представляет собой работу в процессе, мы стремимся добавить больше времени и полюбили ваши отзывы и улучшения. Не стесняйтесь ударить Отредактируйте эту страницу на Github! ” , Открытые проблемы или Присоединяйтесь к обсуждениям Отказ
Веб-тестовый бегун
Мы очень рады объявить Веб-тестовый бегун Одним из основных проектов, над которыми мы работали в течение последних месяцев.
Там уже есть много исследований решений сегодня. К сожалению, все они управляют тестами в Node.js и Mock Browser APIS, используя что-то вроде JSDOD, или они не поддерживают собственные модули ES из коробки.
Мы считаем, что создание кода браузера, совместимого для тестирования в узле, является излишне сложным. Запуск тестов в реальных браузерах дают большую уверенность в совместимости (кросс-браузера) и делает запись и отладки тесты более доступными.
Вот почему мы создали веб-тестовый бегун.
Основные моменты
Некоторые из основных моментов нашего тестового бегуна:
- Тестирование без головы, используя Кукла , Драматург или Селен Отказ
- Отчеты о журналах, 404S и ошибки из браузера.
- Отладка открывает настоящее окно браузера с devtools.
- Mock ES модули через Импортные карты Отказ
- Раскрывает свойства браузера, как размер просмотра и темный режим.
- Пробует тесты параллельно и изоляции.
- Интерактивный режим часов.
- Быстрое развитие, перезаряжая только измененные тесты.
- Работает на esbuild. а также Рулонные плагины Отказ
Начиная
Существует бета-версия тестового бегуна, доступной сегодня на NPM AS @ Веб/тест-бегун Отказ Это почти полностью, у нас будет выпуск V1 в ближайшее время!
Если вы хотите, начните, теперь посмотрите на наш веб-тестовый бегун Начало работы Руководство Отказ
Web dev server.
es-dev-server Является самым популярным пакетом на открытых веб-компонентах, но он не специфичен только для веб-компонентов. Вот почему мы работаем над своим духовным преемником в современном веб-проекте. Мы будем называть это веб-сервером Web DEV, и он будет опубликован как @ web/dev-server Отказ
Если вы занимаетесь бессмысленным развитием, вы можете использовать любой веб-сервер для разработки. Наш SEV Server помогает, предоставляя возможности продуктивности разработчика и сделать ваш код, совместимый с более старыми браузерами.
Основные моменты
- Действует, как настоящий веб-сервер, без каких-либо флагов он обслуживает код безрансформированного в браузер.
- Эффективное кэширование неизменных файлов между перезагрузками.
- Разрешить голый модуль импорт с использованием
- ПротиворечиеОтказ - Авто перезагрузка на файл изменения с
- УчетОтказ - Совместимость со более старыми браузерами, использующими
--esbuild-targetОтказ - Обширный система плагинов Отказ
- Интеграция с Эсбулд Для быстрой трансформации JS, TS и JSX.
- Повторно использовать большинство Рулонные плагины на сервере dev.
- Плагин для полифиллирования Импортные карты во время развития.
Наш веб-сервер Dev не совсем закончен И все же С Но мы уже построили основные части для питания нашего веб-тестового бегуна. Это означает, что многие из перечисленных функций и плагинов также применяются к нашему бегуну.
Мы усердно работаем над завершением открытых задач на веб-сервере Web DEV, поэтому оставайтесь на месте для дальнейших обновлений.
Здание для производства
Хотя мы стараемся избежать сложных сборки во время развития, они все еще являются требованием для оптимизации производства. Вот тоже все могут получить довольно сложный. Через плагины и направляющие мы сделаем легче интеграцию производства сборки с бесконечными рабочими процессами развития.
Хороший пример здесь @ Open-WC/Rollup-Plugin-HTML который мы перейдем в @Web пространство имен. Этот плагин позволяет запустить выпуску на существующую страницу HTML. Rollup будет пакет и оптимизировать любые сценарии модулей, найденные в HTML. Работает с одним страницами, но также с несколькими страницами, разделением кода и общим кодом между страницами.
Мы планируем дальше расширить этот плагин, добавляя поддержку оптимизации активов, таких как изображения и CSS.
Прогрессивные веб-приложения
Когда мы говорим о современных веб-приложениях, мы также говорим о прогрессивный Веб-приложения (PWA). PWA – отличный способ обеспечить привлекательный и удобный опыт для вашего пользователя, позволяя вашему приложению работать в автономном режиме и возможность установить ваше веб-приложение на главном экране пользователя, среди многих других преимуществ.
К сожалению, работники обслуживания близки к ракетному науке, а также реализация функций PWA не всегда так же простой, как это может быть. Вот почему мы предоставим технические гиды и инструменты, чтобы облегчить вашу жизнь как разработчик.
Мы не только отправляем Rollup-Plugin-Workbox Чтобы помочь вам генерировать свой сервисный работник в скоррее время, в будущем у нас также будет набор нулевой зависимости PWA-помощников как веб-компоненты и функции Vanilla JavaScript, а также коделабы, которые помогут вам начать создание вашей современной, прогрессивной сети Программы.
Документация (ракета)
В последние годы мы использовали разные рамки и инструменты для создания наших веб-сайтов. Недавно мы стали большими поклонниками 11tty. . Это просто в использовании, работает с Markdown и генерирует просто простой HTML. Не существует JavaScript Runtime для отображения содержимого страницы, что делает его супер быстро.
Чтобы добавить интерактивность на нашу страницу, мы начали использовать веб-компоненты и прилагаемый свернут с нашими плагинами для HTML и Workbox Отказ
Таким образом, наш JavaScript оптимизирован, и между страницами общего кода. Workbox добавляет сервисный работник, что делает наш веб-сайт в автономном режиме и страницах Pastaches, что приводит к супер быстрой навигацией.
Для отличного авторского опыта контента мы интегрировали 11ь с нашим сервером Dev. Это добавляет функции, такие как разрешение голого импорта и перезагрузка браузера при изменении файлов.
Объединяя существующие инструменты таким образом, мы думаем, что мы сделали что-то очень мощное, что также будет полезно для других людей. Вот почему мы начали дочерний проект в современной веб-семействе, которую мы подковываем ракету.
Это все еще на ранних этапах, но мы уже используем прототип для наших Веб-сайт . Мы все еще отсутствуем на некоторых функциях, но мы будем продолжать его развиваться, и объявление будет следовать, как только он закончится. Так что следите за этим!
Современная сеть семейства
WELP, это было много информации для первого объявления поста – мы понимаем, но многие из этих проектов были годы в составе, и, наконец, находят свой правый дом. Как мы упоминали ранее, современная веб-сайт проще, что облегчает жизнь застройщиков, уменьшая сложность инструментов и оставаясь рядом с браузером.
Хотя мы теперь распространились на множественные репозитории, такие как открытые веб-компоненты, современные сети и ракета, мы хотели бы заверить вас, что все эти проекты подпадают под той же современной веб-семьей, и стремиться помочь сделать вашу жизнь как разработчики проще Отказ
Спасибо за прочтение
Мы невероятно гордимся тем, что мы добились до сих пор, и направление, которое мы направляем, и мы приглашаем вас присоединиться к нам на нашем пути вперед.
Есть много, намного больше, чтобы прийти, так что следуйте нами на Twitter И если вам нравится то, что вы видите, пожалуйста, рассмотрите возможность спонсировать проект на Открытый коллектив Отказ
Написано с ♥ ️ на современной веб-сердечной команде
фото Владислав Клапин на Бессмысленно
Оригинал: “https://dev.to/modern-web/introducing-modern-web-ab1”