Web Components
Тут остановимся подробнее. 42.9% использовали Custom Elements, а 32.5% определяли свои элементы (
customElements.define()). То есть часть разработчиков потребляет готовые компоненты, но не создаёт свои. Среди библиотек готовых веб-компонентов отметили Material 3 (Material Web Components). Также в списке есть мой фаворит — Shoelace.К болям использования веб-компонентов относят: стилизацию, поддержку фреймворков, образовательные материалы, SSR, Shadow DOM, зависимость от Javascript, сложность, доступность и несовместимость.
Боли, связанные с разработкой веб-компонентов: образовательные материалы, браузерная поддержка, Shadow DOM, стилизация, сложность, зависимость от Javascript, бойлерплейт, SSR, доступность и многословность.
Доступность
Радует, что разработчики в целом используют различные техники доступности. Даже новый элемент
<search> уже использовало 11.8%. Ещё более интересно, что предложенный группой OpenUI атрибут focusgroup, который нигде не реализован, использовало 7.4%. Я сам очень жду этот атрибут и подробнее о нём расскажу.Другие техники доступности, которые применяют разработчики:
alt, информативная структура контента, лейблы для полей форм, осмысленный текст в ссылках, контрастные цвета, клавиатурная навигация, видимая рамка фокуса, альтернатива для цветов и курсора мыши, <fieldset> + <legend> и Skip-link. Неплохо.Боли с разработкой доступных интерфейсов следующие: технические проблемы, образовательные материалы, проблемы на уровне бизнеса, проблемы реализации, проблемы со скринридерами, недостаток инструментов, браузерная поддержка, недоработки WCAG, проблемы с элементами HTML и зависимость от Javascript.
Веб-приложения
В этом разделе речь идёт, в основном, о PWA. Я сильно в этом не разбираюсь, поэтому сказать особо нечего.
Боли при разработке веб-приложений (PWA): проблемы на iOS, проблемы с PWA, браузерная поддержка, проблемы с UX, образовательные материалы, Service Workers, проблемы реализации, доступ к нативным API, производительность и уведомления.
Инструменты и другие фичи
Наиболее часто для генерации разметки используются Next.js, Astro и Nuxt. Не смотря на падение популярности, Gatsby всё ещё активно используется. Приятно видеть в списке Eleventy. Всё ещё используют статические генераторы Jekyll и Hugo. Замыкает топ SvelteKit.
Люди используют AI для написания разметки: ChatGPT, Copilot и Bard. Мой опыт использования AI для генерации разметки оказался не очень хорошим.
Некоторые разработчики всё ещё применяют старые элементы:
<center>, <marquee>, <font>, <frameset> + <frame>, <blink>, <applet>, <plaintext>, <isindex> и <nextid>.Выводы
Много болей разработчиков связаны с стилизацией и кастомизацией. Но сдвиги в этом направлении есть, что хорошо. Спасибо проектам Interop и ребятам из OpenUI.
Также достаточно распространённой болью является недостаток образовательных материалов. Разработчики не могут получить информацию, как правильно использовать тот или иной API. Для меня это сигнал, на что стоит обратить внимание при выборе тем для публикации.
Веб-компоненты продолжают развиваться и набирать популярность. Это видно как из цифр опроса, так и по информационному полю.
Растёт и внимание к доступности. Возможно, это связано с ужесточением законов в некоторых странах и грядущим European Accessibility Act. Или же улучшилась ситуация с информацией о том, как лучше разрабатывать интерфейсы. Скорее всего, и то, и другое.