If you’ve followed the development of WordPress the last couple of years, you couldn’t help but notice that more and more parts of WordPress, such as the Customizer, are using primarily JavaScript instead of PHP. With WordPress 4.4, the latest version available currently, the amount of JavaScript used has increased once again.
During the State of the Word 2015, Matt Mullenweg made it very clear that this trend will continue to grow in the years to come and urged every single WordPress developer out there to start learning JavaScript. I’ve been thinking about learning JavaScript properly, deeply, for quite a few years now, but not knowing where to start made the first step so big that I actually never got around to it.
The purpose of this post
For a couple of months, I’ve been carefully preparing to dive into JavaScript and the purpose of this post is to outline the steps I’m going to take, which books I’m going to read and which sites I’m going to use to start learning Javascript.
With the REST API being scaffolded into WordPress in 4.4 and with live examples such as Calypso demonstrating how we can build applications on top of WordPress in new ways with JavaScript libraries such as React, we really have no other choice but to embrace what JavaScript can bring to the table.
Now, I’m going to be the first to admit that my JavaScript skills are really poor, but I think that will be the case for a lot of you out there. You may have come across a JavaScript script here and there in your projects, but if you’ve never really taken the step to actually build something from scratch with JavaScript (and WordPress), then you’re exactly where I am at this moment.
A lot of the recommendations you’ll see further down are gathered from various blog posts I’ve seen around the subject. So, even though I haven’t taken all the steps myself just yet, I do consider the recommendations outlined to be solid.
WordPress Already Uses a LOT of JavaScript
So, for starters, it’s good to know that WordPress right now already uses a ton of JavaScript. Particularly through libraries such as jQuery, Backbone or Masonry. But really, that’s just scratching the surface. Go ahead and open up a WordPress folder in your favorite IDE and look up the /js/ folder inside of /wp-admin/ and /wp-includes/. You’ll quickly find that WordPress is already using JavaScript a great deal, but particularly in the Customizer and themes.php for instance.
Navigating in JavaScript Land
They say learning JavaScript is actually not that hard, especially if you’re already familiar with another language, but that doesn’t mean it’s going to be that easy either. JJJ said it best when he tweeted the following during WordCamp US:
One of the tallest hurdles is probably going to be more about familiarizing yourself with the complexity of an unfamiliar stack. This is because, if we take the React library as an example, for instance, you’re not just going to have to learn JavaScript first, React second, but you’re also going to have to know which React add-on/plugins – yes, they’ve got “plugins” as well – you should be using to build your project.
How NOT to learn JavaScript
One of the most important rules for learning JavaScript, or any other programming language for that matter, is to not try to learn JavaScript from bits of unrelated or related JavaScript tutorials online. All experts agree that this is the worst way to learn a programming language.
Trying to learn it in such a fashion is an incredibly inefficient process that lacks the proper hierarchical structure needed for learning JavaScript deeply. This, in turn, will most likely lead you to be stuck quite frequently and I suspect that to become very frustrating going forward.
Also, do not try to learn the language by just using online tools such as Treehouse or Codecademy. Even though those will help you to learn how to program bits of small JavaScript tasks, they are not suited for larger projects. It is critically important that you know (and keep practicing) how to code independently (without help from Codecademy) in your browser.
A 10 step program
JavaScript is Sexy is a site dedicated to helping you understand JavaScript. They have a program that I have adapted into a more condensed version here, but do feel free to go for the more complete version should you feel the urge. I’ve mostly removed the variations and extra text and brought it down to a more simple program.
Prerequisites
You don’t need a lot to get started, but you do need the following:
- Get yourself a copy of JavaScript: The Definitive Guide
- Get yourself an account on Codecademy
Weeks 1 and 2 (Introduction, Data Types, Expressions, and Operators
- If you do not already know HTML and CSS very well, complete the Web Fundamentals Track on Codecademy.
- Read the Preface and Chapters 1 and 2 of JavaScript: The Definitive Guide.
- Work through the Introduction to JavaScript section of the JavaScript Track on Codecademy.
- Read chapters 3 and 4 of JavaScript: The Definitive Guide.
- Read chapter 5 of JavaScript: The Definitive Guide.
- And work through sections 2 to 5 of the JavaScript Track on Codecademy.
Weeks 3 and 4 (Objects, Arrays, Functions, DOM, jQuery)
- Read JavaScript Objects in Detail and read chapter 6 of JavaScript: The Definitive Guide.
- Read chapters 7 and 8 of JavaScript: The Definitive Guide
- Right about now you should be spending a lot of time writing code in your browser’s console and testing if-else statements, for loops, Arrays, Functions, Objects, and more.
- Return to Codecademy and complete the JavaScript track by working through sections 6, 7, and 8 (Data Structures to Object 2).
- While you are on Codecademy, go ahead and build the 5 little Basic Projects on the Projects track. After this, you are done with Codecademy. The more you work on your own, the faster you will learn and the better prepared you will be to start programming on your own.
- Read chapters 13, 15, 16, and 19 of JavaScript: The Definitive Guide.
- Follow this free jQuery course: http://try.jquery.com/ And you can read chapter 19 of JavaScript: The Definitive Guide, if you have the book, for more on jQuery.
- Work through the entire jQuery course at http://try.jquery.com/
Weeks 5 and 6 (Regular Expressions, Window Object, Events, jQuery)
- Read chapters 10, 14, 17, and 20 of JavaScript: The Definitive Guide.
- Remember to keep typing out all the example codes in your browser’s console and tweak each piece of code to experiment with it to really understand how it works and what it does.
Weeks 7 and, if necessary 8 (Classes, Inheritance, more HTML5)
- Read chapters 9, 18, 21, and 22 of JavaScript the Definitive Guide and read OOP In JavaScript: What You NEED to Know.
- Learn Backbone.js Completely, It’s one of the JavaScript libraries WordPress already relies heavily on and you should really understand it if you want to take this WordPress & JavaScript thing seriously.
- Learn React.js. Check out how Calypso is built and see what you can improve or change. Maybe even turn it into a bespoke version for yourself?
- Next: Decide on a personal project to build, and start building your project promptly (while everything is fresh in your mind).
Back to WordPress
By now you should start to feel really comfortable with JavaScript. You’ve gotten to know Backbone, jQuery and React intimately and you should be ready to create some badass JavaScript projects. The next step will create a JavaScript-based solution to your WordPress project. The only thing left to do for you is to make sure you add your JavaScript to WordPress the right way.
Extra Resources
- JavaScript: The Definitive Guide (you’ll need it for this program)
- You Don’t Know JavaScript
- Super Hero JavaScript
- Eloquent Javascript
- Write Better JavaScript
So, there you have it. An extensive 10-week program that will turn you from JavaScript n00b to JavaScript developer. I think it’s safe to say you can not NOT know JavaScript anymore if you still want to call yourself a WordPress specialist by the end of next year. So, I know what I’m going to be doing for the next three months. What about you?
