Leveling Up in JavaScript for WordPress Developers

Or How I Learned JavaScript.

When I started building websites, I used Notepad, and wrote pages in plain HTML and a little CSS. After a couple of years giving that a go, I moved to WordPress, and found out all about web standards. I’ve certainly written my fair share of PHP, but my primary skill set is the front-end. I was never trained in computer science, and programming has been a slowly acquired skills. Only in the last few years have I truly become serious about JavaScript development. In that time, I’ve picked up a few resources that I wish somebody had told me about when I first started out. Hopefully, a couple of these will help.

The JavaScript / jQuery debate

I’ll cop to it. I learned jQuery first. Some will say that’s wrong. In my opinion, it abstracts away annoying browser quirks and makes diving into code a lot easier. The trick is to avoid simply writing a mess of chained spaghetti right from the get go.

If you really want to understand how jQuery works, I’ll give you the secret sauce. Learn jQuery in 30 Days, from Jeffrey Way. In about 8 hours you’ll learn about how forgiving JavaScript really is, and why you need to fight against that to write maintainable code.

When you’re done with that, follow it up with a real deep dive. An oldie but goodie from Addy Osmani about building large-scale jQuery applications. A lot of the tools he mentions have been abandoned, or are very different these days, but the fundamental concepts are essential.

Structuring JavaScript

To me, the easiest way to start getting better with JavaScript was to learn how to structure code properly. For instance, let’s say you have a set of jQuery events and click handlers throughout your app. How can you organize events to keep things DRY?

One option is to use the module pattern, expertly explained by Chris Coyer over on CSS-Tricks. Modules start simple, a plain JavaScript object that stores your jQuery handlers and delegates events, like so.

[snippet slug=simple-javascript-module lang=js]

Modules, and design patterns generally, help you understand how JavaScript really works. There’s almost nothing more important than wrapping your head around Objects and scope. One trick here is to declare the global variable s and then call it in init(), assigning it to this.el.

Why? Because this is incredibly tricky in JavaScript, and binding it to a global variable from the get-go makes it easier to access in your entire module.

If you’re looking for the next level up, try Rebecca Murphy’s description of using objects to organize JavaScript. Of course, there’s also an entire book by Addy Osmani about JavaScript design patterns if you’re interested.

Understanding JavaScript

Here’s one thing you’ll hear, oh, all the time.

Everything in JavaScript is an object.

Of course, that’s not entirely true. But it’s also absolutely true. Yes, there are primitives like booleans and strings that aren’t technically Objects, but they are usually transformed into Objects as they’re interpolated. And everything else, functions, arrays, etc. are prototypical Objects free to be mutated and extended. Why is that important? I can tell you one reason.

JavaScript provides a technique that gets us the best of both worlds. We can specify properties that, from the outside, look like normal properties but secretly have methods associated with them.

That’s a quote from Marijn Haverbeke, who wrote a free online book called Eloquent JavaScript. It is, by far, the most in-depth discussion of the why behind JavaScript and how we as developers can use it to our advantage. At the end of the day, you can do just about anything with JavaScript. Eloquent JavaScript will help you understand why you shouldn’t.

Still not convinced? Pick up a copy of JavaScript: The Good Parts. Douglas Crockford is a prophet.

I’ve also heard great things about the You Don’t Know JS series, though I haven’t fully dived in yet.

Learning Frameworks, Learning Always

Ok, but you want to build an application with WordPress as the base, and JavaScript as the client. That’s where I’m at. And for the past year or so, I’ve been doing just that. I’m hoping to share a good amount of those learnings here from time to time, but here’s the thing I’ve learned about all these frameworks: They come and go. Many take fundamentally different ideological approaches, but the underlying foundation remains pretty similar. Learn a library, and you can use it. Bully for you. But, learn basic JavaScript MVC (MV*) principles and you can pick up just about any framework or library in a couple of days.

I know many of you are just looking for comparisons. Here’s a decent one.

But for those that want to understand the right use case for frameworks, WP Sessions has an excellent course on using Backbone and WordPress. The presenters really dive into why using a front-end framework / library like Backbone is important and discuss piratical ways to layer it into existing projects.

Another great introduction into the “why” of MVC is Developing Backbone Applications, again by Addy Osmani. Osmani doesn’t simply walk you through how to create an application in Backbone, he gets to the core of application frameworks, and how they can help you get the job done.

And then there’s React. Which, and I can’t state this enough, is just one of many tools available to you. It’s the new hotness, and I understand why it feels imperative to learn. If you’re a functional PHP programmer, it actually probably makes a lot of sense. What really brought React into view for me was an article called “ReactJS For Stupid People“. I recommend you read it. I can also recommend an excellent tutorial about React + WordPress over on Rastislav Lamo’s site. And of course, Calypso is being written in React.

But always remember, you don’t need a framework.

Just Give Me the Links

Fine.

Jay Hoffmann