With the WordPress JSON REST API (or the WP-API) slated to be included in core by the end of 2015, there are lots of different ways people are planning to use it to build cool things.
This article takes a closer look at client side applications using the WordPress JSON REST API, and explains exactly why you should be excited about them.
Web Applications and MVC
The difference between a web application and a traditional website is confusing as the line is often blurred. I won’t get too much into detail, but this article on Vision Mobile can help you better differentiate the two.
You can’t talk about web applications without discussing MVC (Model View Controller) frameworks. Although WordPress is not technically an MVC framework, it can come pretty close. The ability to decouple the three layers means that each layer can be independent and very powerful.
JavaScript
JavaScript is one of the most sought after tech skills; and with website development in high demand right now, it also has proven to be one of the most lucrative development languages.
This very useful infographic on tech.co shows that, although JavaScript isn’t the highest paying technology, it is still higher than PHP—the scripting language used to build WordPress. JavaScript is also the highest paid language that deals with front-end and client-side application building.
JavaScript frameworks have become increasingly more popular over the past few years. Some as PHP replacements, like node.js, can be the backend behind powerful web applications; while other frameworks are built to be a very powerful view layer for web applications.
Client vs. Server Side
WordPress renders what you see server side. The client (browser) sends a request to the server, the server looks through the code, and then parses HTML to send back to the browser. For a traditional web page, a browser will send an http request to the server with the page that it wants. The server will then look at the request, grab data from the database, and parse through the PHP loops and conditionals. Once it completes that process, it sends the finished HTML back to the browser.
But what if you could offload all of the HTML parsing to the client, and just have the server send back the data that you need for that view, and have the client render out the HTML, CSS, etc. based on the data? This is called ‘loading Client Side’ and it’s something that the WP-API allows you to do.
On the right is what the server responds with—nothing more than text in a JSON format—which you can use to display the data. So what can you do with that data? Well, you can use any JavaScript framework or library to display it.
The code above uses jQuery to grab the data. In this case I am only grabbing post type “pages.” I then take that data and create an article element for each “page” and append it to the content-wrapper.
Why Not Just Do It Server Side?
Server Load
Think about what I mentioned earlier: with a server-side request, the response is fully parsed HTML, but when using the API the response is just text JSON. The server’s response offloads nothing more than text and parsing to the client, so there is much less load on the server.
Templates in HTML powered by JavaScript
HTML and JavaScript are what powers client-side applications. Depending on the framework, your entire theme could be mainly HTML files with JavaScript powering the templates to send and receive data using the API.
What can you do with primarily HTML and JavaScript files? Well, you can cache them, minify them, and they are completely static. During WordCamp San Diego I had an interesting conversation with someone from MaxCDN, a content delivery network provider,. They told me that by using their tool, you can basically CDN your entire theme and application. That’s pretty amazing, right?
Thinking Outside the Box
It is not hard to see that this is not the traditional WordPress thought process that typically includes a directory full of PHP templates. But that is the best part. Client Side Applications powered by the JSON REST API and WordPress is a very creative idea, which goes to show you that with a little outside-of-the-box thinking, you can create something pretty amazing.
Ultimately, A Very Scalable Application Solution
Let’s take everything I said and put it together. With the WordPress API you have a faux MVC structure to really decouple the view (what people see) from the database, from the logic connecting the two. Three decoupled layers. You now have a server response that is much faster and lighter, so you can easily have more simultaneous users.
Finally, the view cannot just be cached and minimized, but moved to load entirely via CDN, reducing bandwidth and bottleneck on your hosting server.
Examples
Is Anyone Doing This Already? Short answer, yes, and in a lot of cool different ways. Here are a few that specifically focus on web applications using client side technologies powered by the JSON REST API
Reactor & Appresser
While this is not a web application, they use all the technologies that I am excited about. They use Ionic framework, which is AngularJS, to build native mobile apps. Ionic’s data is powered from the API in WordPress, so overall it pulls all of these exciting technologies together to build something awesome.
CodeCavalry
CodeCavalry.com is a website that helps users who need code help get coding help from experts instantly. It was launched in March 2015, and is built with AngularJS and the API. CodeCavalry is a single page application, and is another example of something really exciting.
Josh Pollock wrote an awesome article on some of the applications being built on WordPress—while not all of them using the same technology stack that I am excited about, he definitely points out some great examples.
So what are you excited to use the JSON REST API for?
3 Comments