Custom Front-end With Wordpress as Back-end

My opinion on using REST API to communicate with Wordpress from a custom front-end.

563 views
d

By. Jacob

Edited: 2019-05-25 15:34

Doing my studies at KEA, one way to create a website teachers introduced us to, was to use Wordpress as a type of back-end, and then create our own front-end in basic HTML, CSS and JavaScript (maybe even Jquery).

The way we would do this, was by using REST API end-points to fetch data from Wordpress in the JSON format. While this was very simple and easy, it is also a method I dislike. For several reasons.

The main reason being technical. It is simply not the right way to create a website, especially not if you are using JavaScript to communicate with REST.

The fact that something can be done, does not automatically mean you should do it – there are technical considerations to keep in mind.

Wasting time with REST API

For one, communicating with REST API is done over HTTP, which means you will waste time performing these HTTP requests, and this can actually significantly slow down the loading of a website. In my experience, you often end up performing a lot of HTTP requests to fill out a HTML template, and while you can somewhat limit this by loading more data, and looping through the contents, it is still a clumsy way to make a website.

The correct way to make a site, would be to query the database directly from the server-side. At least when you are working locally. If using Wordpress, you would probably be looking at plugin and template development.

I do recognize that REST API has it uses for cross-site development, but this probably belong to a minority of cases. People might simply use REST API due to lack of knowledge or skill using server-sided technologies.

I do not like dividing developers up into front-end and back-end, because every so often, we will run into something where a broader understanding is needed. Either for optimization, security, or because of technical limitations. Designers have a tendency to desire full control over presentation, but this is usually not ideal for technical reasons, and nor is it really necessary to create a good website.

I also have the impression that many independent web-developers do not have the resources to serve their clients interests. Using REST API to quickly deliver a functional website, might just be another symptom of this. What you need to have in place, is an automated way to take regular backups, and preferably, update all of your client websites at once. How many solo web-developers have that? How many front-enders?

Using PHP instead of JavaScript

Personally, I prefer to use a combination of server-side and client-sided scripting, as this ensures a high degree of optimization and overall quality. If a search engine does not run JavaScript, content will still be available. In my opinion, you only want to use JavaScript to dynamically update the content on a page – not to load everything.

Caching of resources are also more traditionally implemented when using PHP. I am not sure if you can tell a browser to utilize caching with a purely JavaScript written application. My guess is that you might be limited to using technologies such as cookies and session storage. This may very well be enough, but how do you tell a search engine when your page was last updated, without setting server timestamps?

Another benefit of using PHP is the 100% compatibility with browsers it provides. Since you do not have to test in all browsers, to make sure your JavaScript is working. For instance, I had one JS based site that would not show in Safari on mobile devices, but worked in all other browsers. It is still a mystery to me why. I ended up porting the JavaScript to PHP, which only took me a few hours, and then everything was working as I intended.

Benefits from using REST API

There are also obvious benefits to using REST API. Sometimes those might out-weight the downs – but, I would still highly recommend you do things properly, rather than resorting to rushing out a product.

If you are working with Wordpress as a front-end developer, REST API provides you with an easy way to fetch data from the Wordpress back-end.

It can also be fine in situations where you only need to update a part of the HTML dynamically from the client-side with JavaScript. This can either be for on-site stuff, or for cross-site communication. One example of cross-site use, would be syndication of content such as blog posts or videos.

The final thing I would mention, is the powerful tools available through the Wordpress platform. Using Wordpress only for the back-end, frees up your time to focus, mostly, on the front-end development of the website. This alone may be enough for some, to live with the side effects of using REST API.

Tell us what you think:

  1. How to insert code right after body opening tag, and creating a wrapper around the code in a page using PHP output buffering and the Wordpress shutdown hook.
  2. How to properly remove the title from a Wordpress post, and how to do it for specific post types.
  3. There is no function to select a post by slug name (post name), but we can create our own function to do it; find out how in this tutorial.
  4. How to properly customize Wordpress based website, where to add your own code, and how to override existing functionality.
  5. How to manually move a Wordpress website to another domain name, and copy the database and the files from the old site.

More in: WordPress Tutorials