Nearly Headless WordPress Theme: бойлерплейт для быстрого создания «почти headless» тем WordPress

Алекс Стэндифорд, WP-разработчик в AffiliateWP, выпустил бойлерплейт (заготовку) для создания так называемых «почти headless» WordPress-тем. В основе проекта лежат Underpin, Nicholas и AlpineJS. Все это используется для реализации сайта, напоминающего приложение. Рендеринг отдельных страниц в данном случае происходит с помощью PHP вместо Javascript.

В своей записи «Headless WordPress is Overrated: A Case for The Nearly-Headless Web App» («Headless WordPress переоценен: кейс по созданию веб-приложения с почти headless интерфейсом») Алекс описывает несколько недостатков «полностью headless» подхода.

«Одна из проблем ‘полностью headless’ WordPress – это маршрутизация. В WordPress встроено много логики для обработки маршрутов, и в случае с headless-подходом вам нужно будет создать что-то для обработки всего этого во фронтэнде. Получается, вы заново изобретаете колесо, теряя уйму времени на лишний код».

«Еще одна проблема headless WP становится очевидной при попытке использования большинства WordPress-плагинов. Вам снова придется переписывать кучу участков кода, чтобы плагин работал должным образом».

Подход Алекса под названием «почти headless» – это продукт переосмысления парадигмы headless WordPress. Алекс хотел сохранить ощущение работы с приложением, оставив все возможности WordPress – как встроенные в ядро, так и те, что доступны через систему плагинов.

Тема Nearly Headless использует для рендеринга AlpineJS, который, по словам Алекса, является легковесным, простым для понимания фреймворком, «прекрасно взаимодействующим с серверным рендерингом PHP». Тема привязана к тегам шаблонов, которые заполняются REST-ответами в WordPress для контента записей. Система использует хранилище сессий. Это существенно снижает количество вызовов REST API и позволяет сайту работать быстро.

Учебный сайт WP Dev Academy и сайт агентства DesignFrame Solutions основаны на бета-версиях этой «почти headless» системы. С момента создания этих сайтов Алекс полностью переписал систему и внес в нее существенные улучшения. Есть лайв-демо текущей версии бойлерплейта по адресу nearly-headless.dev.

Подход «почти headless» сопоставим с традиционным headless подходом с точки зрения производительности, что осуществляется за счет использования библиотеки Nicholas, которая включает клиентское кэширование и уровень маршрутизации для поддержания приложения.

«Nicholas будет загружать контент через REST, как это делает headless-сайт», – отметил Алекс. – «Потому время загрузки будет такое же, как и в случае с headless-подходом. В действительности они функционируют примерно одинаково. Ключ в том, что Nicholas также сохраняет данные в хранилище сессий после посещения страницы, и всякий раз, когда эта страница снова запрашивается, она появляется мгновенно».

«Бойлерплейт – это чистый лист. Вы можете рассматривать его как _s для ‘почти headless’ подхода. Все зависимости, скрипты и элементы, требуемые для запуска движка, включены в бойлерплейт. Зависимости упакованы в Composer или Node. В итоге ваша тема сможет обновляться по мере улучшения системы без переписывания всего кода», – отметил Алекс.

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

«Колоссальным улучшением будет отказ от режима совместимости для максимально возможного количества страниц», – рассказал Алекс. – «Многие библиотеки блоков, плагины форм и другие решения имеют определенные скрипты, которые должны загружаться на страницах. Приложение может не знать об этом, а потому некоторые плагины не будут работать без включения режима совместимости. Отказаться от режима совместимости реально, но мне потребуется помощь разработчиков плагинов. Они должны подсказать, какие стили / скрипты нужно включать при запуске приложения».

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

«Yoast и другие SEO-плагины, к примеру, задают SEO-информацию в области head каждой страницы, но сегодня это не получится сделать без написания еще одного промежуточного решения», – заметил Алекс. – «Конечно, добавить это не так уж и сложно, но лучше все же создать отдельный пакет вместо того, чтобы писать код вручную для каждой темы с подобным подходом».

Еще один пункт в дорожной карте проекта Nearly Headless WordPress Theme – улучшение компиляции зависимостей, чтобы избегать конфликтов плагинов и тем. Алекс считает, что это упростит распространение «почти headless» тем в каталоге WordPress.org или даже в магазинах тем.

Бойлерплейт для создания «почти headless» тем доступен на GitHub. Алекс также разрабатывает курс, который поможет разработчикам создавать сайты на базе этой парадигмы. Курс должен выйти в ноябре 2021 года.

Источник: wptavern.com

Источник: oddstyle.ru

Comments (0)
Add Comment