Сделать 43% веб-страниц более динамичными с помощью интерактивного API WordPress
Попробуйте: новый интерактивный API WordPress предоставляет разработчикам стандартизированный способ создания интерактивных, динамичных элементов на своих веб-сайтах.
Создание насыщенного, привлекательного и интерактивного интерфейса веб-сайта – это простой способ удивить, порадовать и привлечь внимание читателей и пользователей веб-сайта. Динамическая интерактивность, такая как мгновенный поиск, обработка форм и навигация на стороне клиента “по типу приложения”, где элементы могут сохраняться на разных маршрутах, и все это без полной перезагрузки страницы, может сделать Интернет более эффективным и интересным местом для всех.
Но создание такого интерфейса на WordPress не всегда было самым простым и понятным, часто требовалась сложная настройка и обслуживание JavaScript-фреймворка.
Теперь, благодаря API интерактивности, у разработчиков WordPress есть стандартизированный способ сделать это, встроенный непосредственно в core.
Interactivity API начинался как, стал и, наконец, был реализован. Он предоставляет разработчикам WordPress более простой и стандартизированный способ создания насыщенных интерактивных пользовательских интерфейсов с помощью своих блоков во внешнем интерфейсе.
ELI5: Interactivity API и графический блок
Несколько основных блоков WordPress, включая цикл запросов, графические блоки и блоки поиска, уже используют интерактивный API. В частности, это отличный способ продемонстрировать интерактивный API в действии.
По своей сути, графические блоки позволяют добавлять изображение в публикацию или на страницу. Когда пользователь нажимает на изображение в публикации или на странице, отображается версия изображения в высоком разрешении.
Рендеринг графического блока выполняется на стороне сервера. Интерактивность на стороне клиента, управление изменением размера и открытием лайтбокса теперь осуществляется с помощью нового API, который поставляется в комплекте с WordPress. Вы можете привязать интерактивность на стороне клиента, просто добавив директиву wp-on--click к элементу image, ссылаясь на действие showLightbox в view.js.
Вы можете сказать: “Но я мог бы легко сделать это с помощью JavaScript!” С помощью Interactivity API код является компактным и декларативным, и вы получаете контекст (локальное состояние) для обработки лайтбокса, изменения размера, побочных эффектов и всей другой необходимой работы.
действия: _BOS_showLightbox() _BOS_const ctx = getContext();// Отключается, если изображение еще не загружено.if ( ! ctx.imageRef?.complete ) _BOS_return;}// Сохраняет положения прокрутки, чтобы исправить это, пока оверлей не будет закрыт.state.scrollTopReset = document.documentElement.scrollTop;state.scrollLeftReset = document.documentElement.scrollLeft;// Перемещает информацию о развернутом изображении в состояние.ctx.currentSrc = ctx.imageRef.currentSrc;imageRef = ctx.imageRef;buttonRef = ctx.buttonRef;state.currentImage = ctx;state.overlayEnabled = true;// Вычисляет стили наложения для анимации.обратные вызовы.setOverlayStyles();},...
Детали реализации более низкого уровня, такие как синхронизация серверной и клиентской сторон, просто работают; разработчикам больше не нужно их учитывать.
Эта функциональность возможна с помощью простого JavaScript, путем выбора элемента с помощью селектора запросов, чтения атрибутов данных и манипулирования DOM. Но это гораздо менее элегантно, и до сих пор в WordPress не было стандартизированного способа обработки интерактивных событий, подобных этим.
С помощью Interactivity API у разработчиков есть предсказуемый способ обеспечения интерактивности для пользователей на интерфейсе. Вам не нужно беспокоиться о коде более низкого уровня для добавления интерактивности; он есть в WordPress, и вы можете начать использовать его уже сегодня. Батарейки входят в комплект поставки.
Чем API интерактивности отличается от Alpine, React или Vue?
До внедрения интерактивного API в ядро WordPress разработчики, как правило, использовали JavaScript-фреймворк для добавления динамических функций в те части веб-сайтов, с которыми сталкивается пользователь. Этот подход отлично работал, так почему же возникла необходимость в его стандартизации?
По своей сути Interactivity API – это облегченная библиотека JavaScript, которая стандартизирует способ создания разработчиками интерактивных HTML-элементов на сайтах WordPress.
Марио Сантос (Mario Santos), разработчик из основной команды WordPress, сказал, что “благодаря стандарту WordPress может максимально упростить задачу разработчика, потому что он справится с большей частью того, что необходимо для создания интерактивного блока”.
Команда увидела, что разрыв между возможным и практичным растет по мере усложнения сайтов. Чем сложнее был пользовательский опыт, который хотели создать разработчики, тем больше блоков требовалось для взаимодействия друг с другом и тем сложнее становилось создавать и поддерживать сайты. Разработчики потратили бы много времени на то, чтобы убедиться, что клиентский и серверный код хорошо сочетаются друг с другом.
Для крупного проекта с открытым исходным кодом, в котором участвуют несколько разработчиков, наличие согласованного стандартного и встроенного способа обеспечения интерактивности на стороне клиента ускоряет разработку и значительно улучшает качество работы разработчиков.
как они создавали API:
- Block-first и PHP-first: Приоритезация блоков для создания сайтов и рендеринга на стороне сервера для улучшения SEO и производительности. Сочетание наилучшего опыта для пользователей и разработчиков.
- Обратная совместимость: обеспечивает совместимость как с классическими, так и с блочными темами и, при необходимости, с другими фреймворками JavaScript, хотя рекомендуется использовать API в качестве основного метода. Он также работает с перехватчиками и интернационализацией.
- Декларативный и реактивный: использование декларативного кода для определения взаимодействий, отслеживание изменений в данных и соответствующее обновление только соответствующих частей DOM.
- Производительность: Оптимизация производительности во время выполнения для обеспечения быстрого и легкого взаимодействия с пользователем.
- Отправляйте меньше JavaScript: Сократите общий объем JavaScript, отправляемого на страницу, за счет создания общей платформы, которую блоки могут использовать повторно. Таким образом, чем больше блоки используют интерактивный API, тем меньше JavaScript будет отправляться в целом.
На горизонте виднеются и другие цели, включая улучшение навигации на стороне клиента, насколько это возможно.
Интерактивность API по сравнению с Альпийский
Interactivity API имеет несколько общих черт с облегченной библиотекой JavaScript, которая позволяет разработчикам встраивать взаимодействия в свои веб—проекты, часто используемой в WordPress и других проектах.
Как и в Alpine, Interactivity API использует директивы непосредственно в HTML, и оба они прекрасно сочетаются с PHP. В отличие от Alpine, Interactivity API разработан таким образом, чтобы легко интегрироваться с WordPress и поддерживать рендеринг своих директив на стороне сервера.
С помощью interactivity API вы можете легко сгенерировать представление с сервера на PHP, а затем добавить интерактивность на стороне клиента. Это приводит к меньшему дублированию, а его поддержка в ядре WordPress приведет к меньшему количеству архитектурных решений, которые в настоящее время требуются разработчикам.
Таким образом, хотя Alpine и Interactivity API преследуют в целом схожую цель — упростить веб—разработчикам добавление интерактивных элементов на веб-страницу, Interactivity API еще более удобен для разработчиков WordPress.
API интерактивности в сравнении с React и Vue
Многие разработчики при добавлении интерактивности на сайты WordPress выбирают React, потому что в современном стеке веб-разработки React – это универсальное решение для декларативной обработки интерактивности DOM. Это знакомая область, и мы привыкли использовать React и JSX при добавлении пользовательских блоков для Gutenberg.
Загрузить React на стороне клиента можно, но это ставит перед вами множество задач: “Как мне управлять маршрутизацией? Как мне работать с контекстом между PHP и React? Как насчет рендеринга на стороне сервера?”
Одной из целей разработки Interactivity API была необходимость писать как можно меньше JavaScript, оставляя основную работу на PHP и предоставляя JavaScript только при необходимости.
Основная команда также столкнулась с проблемами в работе этих фреймворков в сочетании с WordPress. Разработчики могут использовать JavaScript-фреймворки, такие как React, и рендерить блок на интерфейсе, который они рендерят на сервере, например, на PHP, но это требует дублирования логики и чревато проблемами с перехватчиками WordPress.
По этим причинам основная команда предпочла меньший фреймворк пользовательского интерфейса, который требует меньше JavaScript для загрузки и выполнения без ущерба для производительности. Представьте, что в React меньше калорий.
Луис Херранц, основной автор WordPress из Automattic, описывает более подробную информацию об использовании Preact в Alpine vs the Interactivity API с помощью тонкого слоя директив поверх него.
Preact загружается только в том случае, если исходный код страницы содержит интерактивный блок, что означает, что он не загружается до тех пор, пока в нем нет необходимости, что согласуется с идеей доставки как можно меньшего количества JavaScript (и отсутствия JavaScript по умолчанию).
В первоначальном предложении Interactivity API вы можете увидеть, почему Preact был выбран среди других.
Что новый Interactivity API предоставляет разработчикам WordPress?
В дополнение к стандартизированному способу отображения интерактивных элементов на стороне клиента, Interactivity API также предоставляет разработчикам директивы и более простой способ создания объекта хранилища для обработки состояния, побочных эффектов и действий.
Директивы
Директивы, представляющие собой специальный набор атрибутов данных, позволяют расширить HTML-разметку.
