JavaScript and the WordPress REST API: Understanding the Jargon

JavaScript and the WordPress REST API: Understanding the Jargon

JavaScript is the hot thing in WordPress circles this year. The REST API has encouraged developers not only to learn how to interact with it but also to develop their use of JavaScript to enhance the front-end of the sites they build.

But if you’re new to JavaScript, you could be forgiven for being confused by all the new terminology and jargon. A grunt might be the sound you make when trying to debug a particularly tricky bit of jQuery, AJAX could be the washing powder you use to clean up your dodgy JavaScript, and a REST might be what you need when it’s all over.

So in this post I’ll debunk some of the jargon and terminologies around JavaScript, hopefully helping you to make sense of it all and get a feel for just how to wade through the JavaScript lexicon.

I’m going to cover terminology that comes under a few headings:

  • Core Concepts
  • Libraries
  • Frameworks
  • Templating Systems
  • Development Tools

So let’s start with the core concepts you need to understand if you’re going to make sense of all those libraries and frameworks.

javascript.com website
Learn more about JavaScript at javascript.com

Core Concepts

Let’s start with the most fundamental concept – that of JavaScript itself. JavaScript is a front-end programming language, which means it runs on the client (i.e. your website user’s machine or device) rather than the server (where your site is hosted). Javascript can be used for all sorts of fun things: adding interactions to your site, pulling in data (which is where the REST API comes in), and making things pop. Don’t be tempted to overdo it once you realize how many jazzy effects you can add, though – we don’t want to return to the glory days of the animated gif after all…..

A library is a repository of code that you can make use of in your sites. It adds to an existing programming language (i.e. JavaScript), either giving you extra code you can use to do things the underlying language doesn’t do, or giving you shorthand that you can use to avoid having to write lines and lines of JavaScript. In a way, a library is to JavaScript a bit like WordPress is to PHP.

A framework is similar to a library but instead of being a standalone set of tools you can use to create code, it will provide you with a framework to hang your code on. Sometimes you’ll need to install a library in order to use a specific framework.

Javascript templating systems (or templating engines) help you avoid repetition, and adhere to the Don’t Repeat Yourself (DRY) principle. They relate to the view part of the MVC model (see next paragraph) and let you use the same chunks of code repeatedly without writing the same code again and again. A bit like a theme template file or template part when you’re building WordPress themes. Templates look like regular HTML but have extra expressions added that are provided by the templating system.

The MVC model is something the documentation for libraries and frameworks will refer to when describing how they work; each library tends to focus on one of the three elements of it. It stands for Model-View-Controller. The model is the underlying structure of the data (in WordPress, your database tables); the view is the elements of the user interface, such as text, buttons, images, animations etc.; and the controller is the connection between the model and the view – the code you write to get the elements on the page to interact with the data.

reuters.tv website
Reuters.tv is an example of a Single Page Application

A single page web application is a single page site, which behaves a lot like one with multiple pages but instead of going to a new URL when you click a link, the page will refresh or expand using JavaScript, and the URL will stay the same. This means everything is pre-loaded and the site doesn’t have to keep interacting with the server.

It can have SEO drawbacks however as you don’t have the benefits of multiple URLs.

API stands for Application Programming Interface. It’s a set of code (functions, hooks etc.) provided by a system that lets other systems interact with it. If you’ve ever added a twitter widget to your site, for example, you’ve interacted with the twitter API. WordPress has multiple APIs, most of which are designed to let your themes and plugins interact with WordPress’s core code. The REST API is different as it lets other languages and systems interact with WordPress.

feelingRESTful website for A day of REST
The FeelingRESTful website for A Day of REST was built with the WordPress REST API

REST stands for Representational State Transfer (snappy, yes?). It uses decoupled architecture, which means that the various components of a site or app are separate from each other (or decoupled). So your site can be stored in one place while the data that powers it is stored completely separately.

AJAX stands for Asynchronous JavaScript and XML. It’s a technique for making changes on a web page without refreshing the page. The WordPress admin screens use AJAX as do social media sites like twitter when you scroll down to see more tweets. Despite the name, you don’t need to write XML to use AJAX.

JSON stands for JavaScript Object Notation. It lets you pull data into your JavaScript-powered web app and then manipulate that data. If in the past you used XML to store and manipulate data in web pages, JSON is the way you’d do that now. In the MVC model, it relates to the controller, because it’s all about interactions between the interface and the data.

Libraries

There are lots of JavaScript libraries out there, and it can be difficult to decide which one to use. I’m just going to cover some of the most popular ones. Sometimes you’ll choose one over another; other times you’ll use two together, as they’ll relate to different parts of the MVC model.

All of the libraries below are open source and free to use.

jQuery website
jQuery is a hugely popular JavaScript library

jQuery is probably the most well-known of all JavaScript libraries. Most sites using Javascript for front-end effects will be doing it via jQuery. It’s a library of code that makes adding JavaScript to your site easier and also gives you access to extra functionality. jQuery is packaged with WordPress so you can use it in your themes right out of the box.

It’s normally used for effects and interactions that don’t interact with data that will change over time and relates to the view in the MVC model.

React is a Javascript library developed and maintained by Facebook and hosted by them as a Github repository. It relates to view in the MVC model. React is a popular library for creating a user interface that then uses JSON to interact with the REST API.

Angular (or AngularJS) is a library maintained and used by Google. Angular does a similar job to React (it’s the view in MVC), so you can use it to interact with the REST API again. So if you’re using React, you probably won’t use Angular, and vice versa. Pick one, and get to know it.

Bootstrap isn’t strictly a JavaScript library, but it is a library that includes JavaScript as well as HTML and CSS. Developed by twitter, it’s often used as a starting point for creating responsive WordPress themes. It doesn’t interact with data: it’s all about the view.

underscore.js website
Underscore.js can make your JavaScript development more efficient

Underscore.js is another library designed to help with the view part of the MVC model. Don’t confuse it with underscores, the starter theme developed by Automattic.

Underscore adds extra functionality and speeds up your JavaScript development in a way that’s similar in some ways to jQuery.

The website says that ‘It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?”’

Frameworks

The backbone.js framework is dependent on the Underscore and jQuery libraries. It’s designed for building Single Page Web Applications and links the three elements of the MVP structure together (hence its name).

Node.js is a JavaScript framework that runs on Windows, OSX and Linux, so it’s used for app development rather than web development.

handlebars website
Handlebars is a JavaScript tempting engine that will help you avoid repetition of your work

Templating Systems

Mustache gives you templates you can use with vanilla JavaScript or with frameworks such as node.js. It’s described as logicless because it doesn’t include conditional statements such as if and else for loops.

Handlebars is based on Mustache and can render Mustache templates as well as adding its own.

Development Tools

As well as frameworks, libraries, and templating systems, there are other tools you might come across when you start working with JavaScript.

Grunt is a JavaScript runner – a tool you can use to speed up your development and testing. It’s a command line tool that provides you with a set of commands you can use to automate JavaScript processes such as concatenating files, running tests, or minifying your scripts. For more about Grunt, check out our guide Using Grunt to Speed Up WordPress Development.

Gulp is another tool that automates website build tasks for you, in a similar way to Grunt. Again it’s a command line tool, and you’ll need to have Node.js installed in order to use it. You can read more about Gulp in our guide Using Gulp to Speed Up WordPress Development.

grunt website
Use grunt to automate common JavaScript development tasks

Putting It All Together

I’ve listed some tools you can use for your own JavaScript development, and there are plenty more out there. But you don’t need to use all of them. Many of them will do a similar job to each other, so the best approach is to identify the one that works best for you (not just the one that’s cool right now) and get to know it well, so it can enhance and streamline your development with JavaScript.

It’s likely you’ll need one of each of:

  • A library, or possibly a couple of them if you can’t find one that meets all your needs. Find ones that complement each other and provide the tools you need for your projects.
  • A framework (optional). You might choose to use a framework on top of your chosen library or libraries, or you might not. If you’re building web apps and standalone apps you’ll need two frameworks.
  • A templating system to make your coding more efficient and avoid repetition (again, optional but helpful).
  • A development tool (optional) to automate processes you run a lot.

Spend some time investigating the options and hopefully you’ll find your own unique suite of tools that helps you to start developing with JavaScript.

What tools do you use for JavaScript development? Do you have a favorite that not many people have heard of? Let us know in the comments below.