Watch the video presentation or read the transcript below.
You’ll find accompanying material for this screencast available in a public GitHub repo — each screencast has a corresponding folder with a very simple theme that can be activated.
But if you look closely, you might notice something has changed. Our
changePost function has disappeared, and instead we are requiring the
changePost function. If we go back to the containing directory, you can see that we also have a changepost.js file. This file now contains the
changePost function. Note that at the bottom, we have a line that says
module.exports = changePost. This is the CommonJS convention for defining what the module actually is. So when we require it, this ensures that what we require is the
changePost function itself.
Let’s get concatenating. I’ve mentioned that we’re using Webpack, so let’s get that set up. First, you need to install Node.js. Fortunately, this is a lot easier than it used to be — simply go to nodejs.org and download the automatic installer for your system. Once node.js is installed, we can run a command to install Webpack:
npm install webpack -g
This gives us global command-line access to Webpack. With this done, we can now run the most basic Webpack command, which is to take a source file, and smoosh it into a compiled file. The command for this is:
webpack ./theme.js compiled.js
We can now view the compiled file and see that it contains the contents of both changepost.js and theme.js. An extra little bonus with Webpack is the
-p flag, which simply means that you want to minify the file – remove whitespace and remove all comments etc. You can see that even this simple example our compiled file is almost a third of the size it was unminified.
We can also add the
-w flag which means we want Webpack to watch the files and automatically recompile whenever we change anything.
With the file compiled, we can see everything in action working together.
The Route of All Evil
With everything we’ve looked at so far, you can probably imagine stringing together a theme that allows a user to browse through different chunks of content from their website. However, a major missing piece is routing, something that you may not have heard of. Routing broadly encompasses the way that we deal with URLs changing. Let’s say a user visits our site, clicks to a different post and wants to share the link. With the examples we’ve looked at so far, this isn’t possible. Routing also ties into our user’s history. If we have no routes, the user can’t press the back button. No routing also means we have little chance of anything meaningful being indexed by search engines. I’m sure you can now appreciate that routing is very important.
In PHP, WordPress deals with this for us. There is a rather large class called
Let’s look at something basic we can implement.
If you look closely at changepost.js, you’ll notice that I’ve added a new line since the last tutorial. As well as editing the document on success, I’ve added a line that redefines
window.location.hash. This is the most basic way of changing our user’s route. You’ve probably seen this used on other websites and it amounts to the same thing as using an anchor link to take the user to certain heading on a page.
Let’s look at this in action. Our eventListener has been added to the first link in the menu. If we click it, note that the route now changes.
So with some very basic routing, we now want to change what happens if the user clicks back.
If we go back to theme.js, the eagle-eyed among you may have noticed another line beneath my link listener:
window.onhashchange = changeRoute
We’re hooking a new function,
changeRoute function. Here, we say if the hash equals nothing — as in, we’re on the homepage — show the original post that we fetched in the first place. The code here is almost identical to
changePost, but it just gets the original post.
What About no-js?
Will Somebody Please Think About the Search Engines?!
This ties back into the search engine point, since we know that Google does take page-load times into account when ranking sites in search results. We really don’t want our load times to be three to four times longer than they need to be.
In the next part of this tutorial, we’ll look at how to move from our basic theme to something more advanced, building from an altogether more stable foundation.
- Introducing REST APIs
- Bringing React into our theme