Почему веб-компоненты сделают Интернет лучше для наших пользователей

Веб-компоненты tl; dr v1 - это основа, которая поможет нам создавать более совершенные библиотеки компонентов, позволяя разработчикам обеспечивать улучшенное, удобное в обслуживании и единообразное взаимодействие с пользователем во всех продуктах.

В прошлую субботу я посетил конференцию Edge в лондонском офисе Facebook. Edge - это мощный форум для обсуждения между разработчиками, поставщиками браузеров и разработчиками стандартов.

На панели компонентов мы обсудили проблемы, создаваемые веб-компонентами, такие как производительность и загрузка модуля. Это был увлекательный разговор (в сочетании с очень оживленным чатом на канале Slack), но я чувствовал, что в этом обсуждении не хватало одной стороны: а что насчет наших пользователей? Какую выгоду они получат от веб-компонентов?

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

Стандарты не смогли предоставить нам повсеместные, практичные и переносимые способы решения простого вопроса: «как повторно использовать компоненты пользовательского интерфейса на всех моих сайтах?».

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

Что, если бы веб-стандарты помогли нам решить эту проблему? И да, «вы уже можете решить эту проблему с помощью JavaScript». Я вернусь к этому .

Мы понятия не имеем, из чего будем строить наши будущие продукты

Интернет - это очень разнообразная экосистема: простые HTML-документы, одностраничные приложения, CMS, блоги WordPress, размещенные сайты, интрасети (включая приложения Salesforce…), веб-просмотры… но, что самое главное, мы понятия не имеем, что мы будем строить наши будущие продукты с.

Как обеспечить согласованность в текущих и будущих условиях?

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

Здесь я хотел бы ответить на аргумент, что «мы уже можем решить эту проблему с помощью JavaScript»:

Мы должны устать перестраивать наши компоненты для каждой новой версии Angular, которую мы портировали с Rails, и можем перейти на React.

Нам нужны инструменты, чтобы решить эту проблему удобными для будущего способами.

Веб-компоненты спешат на помощь

Идея веб-компонентов была представлена ​​в 2011 году Алексом Расселом, и с тех пор веб-сообщество много обсуждает эту концепцию (127 000 000 результатов в поиске Google по запросу веб-компоненты). Несмотря на этот интерес, браузеры еще не полностью реализовали веб-компоненты и не согласовали спецификации; и, насколько мне известно, ни один крупный игрок не использовал их в продакшене на крупных веб-сайтах.

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

К счастью, ожидание почти закончилось: первая версия спецификации веб-компонентов выходит в этом году. Обратите внимание, что эта v1 довольно проста и не объединяет все функции веб-компонентов, о которых вы, возможно, слышали за последние 4 года. Чтобы узнать об этом больше, я рекомендую эту статью Уилсона Пейджа: Состояние веб-компонентов.

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

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

Давайте вернемся к преимуществам, которые веб-компоненты принесут нашим пользователям…

Путь к отличному пользовательскому опыту

Как внедрение веб-компонентов повлияет на работу пользователей в Интернете? Вероятно, потребуются годы и много усилий, чтобы этот процесс созрел. Я разбил это на 5 шагов:

  1. Для решения наших нынешних и будущих сценариев использования нам нужна основа, встроенная в веб-платформу: Веб-компоненты v1.
  2. Принципы, изложенные в этом фундаменте, внесут столь необходимую ясность при создании и распространении компонентов.
  3. Со временем веб-сообщество пойдет по этому пути вместе, сосредоточившись на разработке универсальных инструментов дизайна, рабочего процесса и повышения производительности.
  4. Обладая этими инструментами, мы можем создавать устойчивые, масштабируемые и технологически независимые библиотеки компонентов. Создавайте один раз, используйте везде.
  5. Только в этом случае мы сможем обеспечить единообразное взаимодействие с пользователем.

Что это значит на практике?

Мы уже видим инициативы, но позвольте мне предсказать еще несколько, используя свои экстрасенсорные способности.

Прежде всего, нам нужно, чтобы крупные компании лидировали и внушали доверие более мелким, развертывая ориентированные на пользователя продукты с использованием веб-компонентов.

Google, Mozilla и IBM уже используют веб-компоненты, и их код имеет открытый исходный код (Polymer Elements, Gaia, Deliteful). Я надеюсь прочитать о том, как это помогло им развернуть компоненты пользовательского интерфейса в нескольких средах для достижения согласованности дизайна.

Bootstrap, Foundation и другие фреймворки HTML / CSS / JS также перейдут и сделают веб-компоненты повсеместными для всех веб-разработчиков.

Новые задачи Grunt и Gulp помогут интегрировать веб-компоненты в текущие приложения без ущерба для производительности. Мы уже можем использовать вулканизацию для объединения нескольких импортов HTML в один файл.

Загрузчики модулей и сборщики (WebPack, jspm…) будут адаптированы для использования компонентов стандартного типа, что упростит создание высокопроизводительных сложных веб-приложений.

Google рассматривает возможность подключения веб-компонентов к Angular 2.0 с помощью Polymer 1.0. Следите за обновлениями, смотрите Поликасты на Youtube. В недалеком будущем мы также увидим интерфейс React, Ember и Knockout с веб-компонентами.

Мне не терпится увидеть темы WordPress с использованием веб-компонентов, и, возможно, я стану свидетелем чего-то, что в настоящий момент невозможно: общих элементов пользовательского интерфейса между WordPress, Drupal, Ghost…

В конечном итоге компоненты будут доступны на всех наших веб-сайтах.

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

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

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

Изображение предоставлено: красивая фотография Лондона вверху (где вы можете увидеть офис Financial Times) была сделана Луисом Ллерена. Снимок панели компонентов в Edge сделан моим другом Romain Huet.