Понимание фреймворка Frontity React, настроенного для WordPress

Frontity - это новый популярный интерфейсный фреймворк для создания быстрых веб-сайтов на WordPress.

WordPress уже долгое время является самой популярной системой управления контентом. Он не только обслуживает более 30% веб-сайтов в Интернете, но также может похвастаться огромным сообществом участников, которые поддерживают жизнеспособность и устойчивость экосистемы WordPress.

WordPress - это в первую очередь серверное программное обеспечение на основе PHP. В WordPress есть тысячи пользовательских улучшений и расширений, которые в основном представлены в виде плагинов на основе PHP. Таким образом, неудивительно, что было много попыток интегрировать фреймворки, отличные от PHP, с WordPress, особенно фреймворки Javascript, которые быстро захватывают пространство Frontend в веб-разработке.

Одним из таких фреймворков, который действительно набирает обороты, является фреймворк React.js для WordPress под названием Frontity. Он разработан стартапом из Испании. Разработка Frontity длилась пару лет. Тем не менее, недавно он попал в новости, когда он собрал 1 миллион евро во главе с компанией, стоящей за WordPress, Автомат и венчурная компания KFund. Чтобы понять причину этого, сначала важно понять, что такое фреймворк Frontity и какие преимущества он приносит.

Что такое Frontity?

Прежде чем мы узнаем о Frontity, важно знать базовую архитектуру WordPress. Как вы, возможно, знаете, WordPress - это серверное программное обеспечение на основе PHP. Для обслуживания запросов требуется серверное программное обеспечение, такое как Apache или Nginx, и программное обеспечение базы данных, такое как MySQL, для хранения данных (сообщения, страницы, пользователи и т. Д.).

Архитектура WordPress

Когда вы откроете, скажем, главную страницу веб-сайта WordPress, он вызовет index.php файл в серверной части, который вернет HTML, CSS и JS для домашней страницы, которая затем будет отображаться в браузере. Таким образом, PHP действует как общий интерфейс шлюза (CGI) для веб-сайта, и поэтому любые улучшения внешнего интерфейса должны быть основаны на PHP.

Фронтальная Архитектура

Поскольку Frontity - это React-based framework, давайте сначала поговорим о React JS. React - это интерфейсный Javascript-фреймворк, разработанный и опубликованный Facebook. Он чрезвычайно популярен благодаря удобству создания быстрых, стабильных и отзывчивых пользовательских интерфейсов. React работает как модуль Node JS, и, следовательно, веб-сайт, использующий React, должен быть основан на сервере Node JS.

Теперь, если вы хотите использовать чисто Javascript-фреймворк, такой как React, для улучшения внешнего интерфейса, то есть для создания пользовательских тем, это будет обременительно. Причина в том, что такой фреймворк, как React, работает вместе с Node, который запускает собственный сервер. И, как мы упоминали ранее, WordPress работает с сервером PHP CGI на бэкэнде. Таким образом, не существует простого способа создания пользовательских тем и пользовательских интерфейсов с помощью React для WordPress.

Однако есть способ получить данные из базы данных WordPress удаленно. Это можно сделать с помощью WordPress REST API, который полностью интегрирован в ядро ​​WordPress, начиная с версии WP 4.7 и выше. Если мы можем получить данные WordPress удаленно, это означает, что теперь мы можем отображать полученные данные так, как захотим. Пользователи уже давно используют REST API для разработки пользовательских приложений, веб-страниц для доступа к данным WordPress непосредственно из базы данных. Этот тип систем управления контентом (CMS) также называется без головы CMS.

Frontity основана именно на этой концепции. Он подключается к базе данных WordPress через REST API, занимается анализом и организацией полученных данных. Вам остается только выбрать тему, которую вы хотите использовать для отображения веб-сайта. Поскольку он основан на React, для веб-сайта можно использовать любую тему React. Вы также можете разработать свою собственную тему, если захотите. Внешний интерфейс WordPress на основе PHP будет по-прежнему использоваться создателями / администраторами для создания контента или изменения настроек. Но интерфейс на основе Frontity будет использоваться в качестве главной страницы сайта.

Таким образом, в настройке Frontity потребуются два сервера: один - это сервер WordPress, на котором запущен REST API и который возвращает данные WordPress, а второй - это сервер Node JS, который запускает Frontity для вызова REST API и отображения данных с помощью React. .

Путь вперед?

Поскольку компания, стоящая за WordPress, собрала 1 миллион евро, а React привнесла в WordPress богатый пользовательский опыт, не будет преувеличением сказать, что Frontity - это путь вперед для современных веб-сайтов, работающих на WordPress. Пользовательский интерфейс WordPress будет по-прежнему использоваться в качестве панели управления для создания контента, в то время как часть отображения будет перенесена на сервер Frontity.

Вы можете узнать больше о Frontity здесь. Если у вас есть веб-сайт WordPress и вы хотите опробовать Frontity, вы можете выполнить описанные здесь шаги, чтобы сделать это.