WordPress is a very popular but rather old Web platform, built on server-side PHP. Today’s developers like to put a lot of power into the browser side, letting pages be more interactive with less need to access the server. The emphasis in WordPress is inexorably moving toward JavaScript. Matt Mullenweg, the founder of WordPress, has advised developers to “learn JavaScript deeply.”
As of version 4.4, WordPress has a built-in REST API, which has a revolutionary implication. The pages on a WordPress site don’t have to follow the traditional page model. They don’t even have to be written in PHP! It’s now possible to create a “headless” site which uses WordPress literally as just a content management system. The developer can create a front end where JavaScript pulls up all the content through RESTful calls.
Plugins can extend the API. Plugin authors need to follow the API’s standards, and they shouldn’t assume the client is using HTTP or JSON. If the front end uses React or other JavaScript, the calls will use JSON formatted data, but the API is more general than that. Endpoint code that works like regular plugin functions and doesn’t write the global state will satisfy this requirement.
The ReactJS Front End
Several developers have looked at ReactJS as the new front end for WordPress. React is designed to create highly interactive pages that work with a server-side API. We most often hear about it in connection with a full JavaScript stack. It works well with a Node.js server, but it can use any server with a RESTful API.
Most browser-side frameworks work directly with the Document Object Model (DOM), but React adds several forms of abstraction. The virtual DOM provides more efficiency and less browser dependency than direct DOM operations. Components represent pieces of the user interface and can be dynamically updated. A React page generally has a minimum of HTML; the JavaScript generates all its content. The usefulness of this approach for responsive pages is obvious.
Ways to Use React
People are looking at many ways to combine WordPress and React, ranging from cautious enhancements to completely replacing the front end:
- The website at ustwo.com is a single-page site build on React and back-end WordPress.
- An experimental Web application, Twentysixteen-RR, uses React in a traditional WordPress way, emulating the Twenty Sixteen theme. It’s a proof of concept rather than a way to give a site new capabilities.
- The BeesWax theme is built on React and aims to pre-cache content for faster response.
- The WAMU.org news site is built on React and the WordPress API.
- NodeifyWP uses PHP to execute Node.js code on the server using V8Js which is a PHP extension for Google’s V8 engine.
Project Calypso
Automattic has unveiled Calypso as the future technology of its WordPress.com. It uses Node.js to build the initial page and makes heavy use of React. Pages communicate with the server entirely through the REST API. Self-hosted sites can use Jetpack to add Calypso-based tools for editing and management. This isn’t the radical, headless approach which others are looking at, but focuses on the administrative side rather than the content. It’s available as a MacOS application and has been worked into the WordPress.com administrative pages.
Closing Thoughts
Not everyone likes the direction WordPress is going. Calypso for self-hosted WordPress requires JetPack, a plugin which many people consider bloated. JetPack also requires a WordPress.com account. The one-page sites which React advocates favor are hard to bookmark. There are many ways to use React in a site, though. They can certainly include a traditional multipage structure with more flexibility and faster responses than the old-style PHP pages.
Learning React and the new API is a significant project for WordPress developers, even if they’re already fluent in JavaScript. If it’s the future of WordPress, though, it’s worth the time.
