From CMS to WAF: Combining WordPress JSON API and React

One of the many great things I love about X-Team besides the intrinsic developer camaraderie, philosophy of co-learning and self-improvement, bad ass X-Outposts, and super-hero culture (if that wasn't enough) is the diverse set of interests the nearly 200+ developers and engineers (who make up a big chunk of the company) have!

For instance, we have Haskell category theorists, Drupal gurus, great practitioners of React, Java genies, and so on.

As such, and since I'm currently trying to fairly cover a range of languages including (quantum) Python, CSS in JS, Angular 5, Ethereum, Java Spring WebFlux (forthcoming... hehe), I also want to give PHP and Wordpress, in particular, their fair share of the limelight and <3 emoji's!

PHP 7.x.x and WordPress

There's increasing buzz about how powerful the PHP 7.0 and WordPress 4.x.x are. The power duo resulting from these two admixed technologies has been in the works for several years but remains highly (and perhaps even more) relevant today since many sites are still prepping for the (potentially) huge migration. WordPress 4.1 and PHP 7.x.x nearly double the performance of WordPress 3.6 and PHP 5.x.x (check out some great benchmarks)!

I wanted to reacquaint myself WordPress (circa 2018) and see:

What's changed!
What's improved!

If you're down for a veritable Orphic journey, read on for the adventure below.

XAMPP and WordPress 4: A Tale of Two Installs

Wow, back when I was doing WordPress in-depth installation was A. CHORE. Now, great tools like XAMPP have come an even greater way toward streamlining the installation process. Here's how to get a WordPress instance up and running in under five minutes!

First, grab a copy of the executable distribution over on the official XAMPP website:

xmapp_install

Once you've chosen and downloaded the correct version for your machine go ahead and run the executable. You should see the following installation GUI:

xmapp_exec_install

Then, and here's the best part, the kind folks at XAMPP have even put a fantastic interface making it easy to spin up each element of our dev stack. We'll need at least Apache and MySQL:

xmapp_running

Then we can drop a fresh copy of the most recent WordPress right into the /htdocs directory like so (on Windows):

wordpress_folder

Lastly, we'll open up http://localhost:80/dashboard so that we can access phpMyAdmin:

xampp_localhost

We'll want to create a database table and user:

xmapp_sql_user

Before bringing up the url http://localhost:80/wordpress where we can enter the table and user information we created above to finish our install:

wordpress_setup

Pretty slick so far, right? I know I'm very impressed! I can see how far the technology has come! Mad kudo props to the good folk over at XAMPP for their fantastic work and for vastly simplifying this process (cross-platform I might add)!

WordPress as Web Application Framework

WordPress is a fantastic framework in many ways:

It represents a useful set of conventions and design patterns to easily customize WordPress to suit a specific use-case.
It organizes and simplifies configuration to make coding and creating in PHP much more organized!

Since version 4.7.x WordPress has also supported an in-build REST API!

I originally started out exploring the state of Timber, Twig, and Advanced Custom Fields within PHP 7.0 and WordPress 4.x.x!

Subsequently, I learned about the newish WordPress REST API that transforms WordPress from being a mere Content Management System (CMS) to a true, full-fledged, Web Application Framework (WAF). This allows us to use the great, handy, admin dashboard while fully decoupling our client and views from the PHP backend!

So, we'll combine React with WordPress 4.9.6 and decouple the client from the JSON API.

    https://demo.wp-api.org/wordpress/wp-json/
    https://demo.wp-api.org/wordpress/wp-json/wp/v2/pages
    https://demo.wp-api.org/wordpress/wp-json/wp/v2/posts

    https://localhost:443/wordpress/wp-json/
    https://localhost:443/wordpress/wp-json/wp/v2/pages
    https://localhost:443/wordpress/wp-json/wp/v2/posts

For a full list of endpoints - please see this official documentation!