
Сделать 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-разметку.