Remkus de Vries

Curiously Questioning Everything

Menu

Learning JavaScript in WordPress, Deeply

wrote on

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:

  1. Get yourself a copy of JavaScript: The Definitive Guide
  2. Get yourself an account on Codecademy

Weeks 1 and 2 (Introduction, Data Types, Expressions, and Operators

  1. If you do not already know HTML and CSS very well, complete the Web Fundamentals Track on Codecademy.
  2. Read the Preface and Chapters 1 and 2 of JavaScript: The Definitive Guide.
  3. Work through the Introduction to JavaScript section of the JavaScript Track on Codecademy.
  4. Read chapters 3 and 4 of JavaScript: The Definitive Guide.
  5. Read chapter 5 of JavaScript: The Definitive Guide.
  6. And work through sections 2 to 5 of the JavaScript Track on Codecademy.

Weeks 3 and 4 (Objects, Arrays, Functions, DOM, jQuery)

  1. Read JavaScript Objects in Detail and read chapter 6 of JavaScript: The Definitive Guide.
  2. Read chapters 7 and 8 of JavaScript: The Definitive Guide
  3. 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.
  4. Return to Codecademy and complete the JavaScript track by working through sections 6, 7, and 8 (Data Structures to Object 2).
  5. 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.
  6. Read chapters 13, 15, 16, and 19 of JavaScript: The Definitive Guide.
  7. 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.
  8. Work through the entire jQuery course at http://try.jquery.com/

Weeks 5 and 6 (Regular Expressions, Window Object, Events, jQuery)

  1. Read chapters 10, 14, 17, and 20 of JavaScript: The Definitive Guide.
  2. 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)

  1. Read chapters 9, 18, 21, and 22 of JavaScript the Definitive Guide and read OOP In JavaScript: What You NEED to Know.
  2. 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.
  3. 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?
  4. 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

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?

Reader Interactions

ABOUT THIS SITE

This site is hosted by Servebolt – running on state of the art hardware, making it really lightning fast. If you’re serious about fast sites, free tests are available!

See what other WordPress related products I recommend.

Comments

  2. Scott Bolinger says

    These are some great resources Remkus. I kind of disagree with the approach personally, because I cannot learn from reading books about code. I have to learn by doing a project and breaking stuff in real life. It’s only after I have some experience with the language that reading a book helps me.

    If you read books about code, I would encourage people to always be building something at the same time. That’s the way I’ve learned Javascript anyways 🙂

    • Remkus says

      Thanks for taking the time to comment Scott, much appreciated. Very solid advise and I guess this goes for more people. I’ll think about how I can integrate your feedback. Any suggestions on what kind of stuff would be easy enough to start building?

    • xavier says

      I have to agree with you: need to get their hands dirty in order to actually learn — books tend to take you from point A to point B in a risk-free (“hey, I’ll read that during my train commute!”). That’s why I think Remkus did well to include online interactive courses such as Codeacademy. Codeschool is another, for instance.

  3. xavier says

    I’m unsure about suggesting the Definitive Guide book for beginners. It’s great as a reference, but not so much as a learning book in my opinion. You might want to direct people towards such sources as Eloquent JavaScript (http://eloquentjavascript.net/), and the “JavaScript: The Good Parts” book.

    There’s a host of great resources online (MDN, YUI Theater,, but I feel these two should be part of every list 🙂

    And: stay away from w3schools! 🙂

    • Remkus says

      I’ve read through a lot of resources and you’re right, Xavier, there are many other good books about JavaScript out there. There does seem to be some sort of consensus about the Definitive Guide as being quite thorough. That’s the reason I choose to pick just one book.

      Added Eloquent JavaScript to the extra resources, thanks!

  5. Michelle Schulp says

    For people who are coming at this from a more visual perspective (maybe they’re like me and are primarily theme/frontend developers) I’ve actually found this book to be a fantastic starter resource for vanilla JavaScript plus jQuery (read front-to-back as an introduction) plus a great reference guide.

    http://www.javascriptbook.com/

    • Remkus says

      Thanks for taking the time to comment Michelle. I’ll add this to a “alternative books” section once I have some more feedback.

  7. David Schwartz says

    As a professional programmer who’s probably forgotten more languages than most people will ever learn, I can say this: every imperative programming language, like Javascript, is structured similarly. You have variables (simple, arrays, structures, etc), control structures (while and for loops), conditionals (if … then … else, case/switch, etc), and some kind of I/O (read, write, print, format, etc).

    Javascript happens to be an interpreted language, so there’s no compile/link step like with Java, C#, and Delphi. There’s an interesting implication of this, which is the language can be self-modifying — meaning you can write code fragments, stuff them into strings and arrays, and then submit those to the interpreter to be evaluated. This is not considered to be “good programming practice”, but it’s done a lot anyway because the people writing the code don’t have computer science degrees and they don’t realize the long-term consequences of maintaining self-modifying code. Oh, well.

    The thing that gets most people stuck is not the language, per se, but they myriad of run-time libraries that have sprung up around things. There are also some pretty massive data stores that you need to learn as well, like the DOM. So-called “frameworks” are growing like weeds these days, and they’re all designed to address slightly different perspectives.

    There’s on thing that isn’t emphasized enough that I’ve often found quite helpful when learning a new language. That is, spend some time reading over existing code libraries. Look for IDIOMS. These are the coding equivalents of running into someone in the hallway and they say, “Wazzup?” Code initially looks like a huge mess of stuff. As you keep looking at enough of it, you’ll start to see patterns — the same kinds of code fragments — showing up all over the place. Code that processes a keystroke, a word or phrase, a command, a mouse-click, certain events like roll-overs, testing if a resource is exhausted or not, swapping variables,

    Each library will have their own idiomatic phrases as well. So if you’re learning a new library, spend some time reading code that uses it, because there’s a good chance your code will look very similar when you’re doing similar things.

    Unfortunately, we’re not at a point yet where we’ve figured out how to make all of these common code patterns more abstract, which is one of the things this proliferation of frameworks is attempting to resolve. In the mean time, the best thing to do is learn to recognize these idioms and apply them, rather than reinventing the wheel. (And stay away from self-modifying code!)

  8. Jon Lman says

    I feel like some of the best programmers that have built the biggest tech companies like bill gates, zuckerberg and programming legends from the 70’s 80’s learned how to program as kids or teenagers in a very piecemeal fashion, basically by just hacking until they achieved some mastery. I myself decided to learn to program from scratch. I blasted through the codecademy javascript track and realized that at the end of it I still couldn’t build anything I wanted. How to make a simple to -list in javascript on a web page? No idea. BUT what codecademy DID do was give me a good sense of what things are, variables, functions, arrays, loops etc and this enabled me to dive into tutorials and understand what was going on. Seriously just from a few tutorials after codecademy I am beginning to see how things work and how to put things together. When I run up against a wall I go to the Mozilla JS documentation and it’s great. I can totally see myself building complex applications in pure javascript in the next few months. I do plan on reading eloquent javascript very soon, but meanwhile I’m mostly trying to build stuff ASAP. And it’s working. After Codecademy I suggest learning about event listeners through Adam Khoury on Youtube. The guy is a master. learn about eventlisteners, practice writing your own functions, understand how to loop through arrays and store/retrieve information from arrays, (build little apps that use different loops for different reasons) and of course drill into Objects. Rmember StackOverflow is your best friend 🙂

    • Remkus says

      Thanks for taking the time to comment Jon. I agree, StackOverflow is always your best friend when it comes to coding 🙂

  9. Roy says

    JavaScript: The Definitive Guide: Activate Your Web Pages, 6th edition is now available. The 6th edition covers HTML5 and ECMAScript 5. Many chapters have been completely rewritten to bring them in line with today’s best web development practices. New chapters in this edition document jQuery and server side JavaScript. Amazon link.

  10. Evan says

    Thanks for the awesome write up Remkus!

    As Roy had mentioned in the comments above, I see an updated version of “JavaScript: The Definitive Guide” is available.

    Do you recommend we acquire a copy of this updated version? Is there a specific reason you link to the older edition in your article?

    • Remkus says

      My pleasure Evan, and no, no particular preference. I have adjusted the Amazon link to the latest version now, though.

  12. Reme says

    Remkus!

    Thanks for this very helpful post.

    I have a question; the JavaScript is Sexy program recommends Beginning Javascript as the reading material while you are using JavaScript: The Definitive Guide. Just curious as to the reason you prefer the latter over the former?

    Once again, thanks for taking the time to post this.

  14. Shameem Reza says

    This is just what I was looking for last few days. Already refer this to all of my friends who are working on WordPress and Bookmark it to share in future too. Thank you so much Remkus for sharing such an awesome guide with us.

  16. Tom McFarlin says

    Such a good post – love how you broke it down into steps, too. So much easier than just handing off a massive amount of material and saying “Here, good luck!”

    Way to go, Remkus :).

  19. kirsten cassidy says

    Thanks for the write up Remkus. It sounds like a good program. Personally I prefer Kyle Simpson’s (You don’t know Javascript series)[https://github.com/getify/You-Dont-Know-JS/blob/master/README.md#you-dont-know-js-book-series] but I like the approach of using online tools and book learning together. One of the biggest problems is setting aside the time to really sit down and learn something fully. Glad WordPress is giving us all the push to use more Javascript in our daily work as WordPress developers.

    • Remkus says

      Thanks Kirsten. I think mixing both the book and the online courses is the perfect mix, which book you use is indeed a preference. I’ve done a lot of research and the general consensus seems to be that The Definitive Guide is the best to start with.

  21. AJ Clarke says

    Wow, great post. I feel a bit behind since my javascript skills aren’t that great – definitely bookmarked to take on the challenge and learn the right way. Thanks!

  22. Ismael says

    very usefull information, javascript is the present and the future, but for the news programmers i suggest that they must learn C++, when you know this language the world is very easy

  25. Ramón Balsas says

    A really interesting article. Even today it is still useful information, especially the learning system that you mention so as not to incur errors, bad habits or long-term problems when writing our code.

    Regards!

Trackbacks

  13. […] Make sure to get a working knowledge of the components involved such as the web server and it’s configuration, make sure you understand the impact of queries to the database and how they work so you could, at least, debug a simple SQL statement. Writing intelligent code and not just the first thing that comes to mind as a working solution will help you with all the other elements such as caching, scalability & security. Get comfortable with the underlying technologies of your trade, I once made the mistake to learn jQuery first, now I’m still having a hard time getting better at Javascript. […]