Thinking in JavaScript

Two years ago, Matt Mullenweg gave the WordPress community a homework assignment: learn JavaScript, deeply.

Since then, I’ve dabbled more and more with JavaScript. Before that, my only real experience was copying and pasting jQuery snippets to handle trivial things here and there. I had no real understanding of JavaScript at all. And, the jQuery that I’d learned over the years made it harder to grasp some of the underlying concepts. It was a crutch for bad habits.

To understand a programming language, you must be able to think in that language. That means being able to read code and have some basic idea of what it does. More importantly, it means being able to see in your mind potential solutions in that language before ever writing a character of code. It should come as naturally as any other language you know.

That simply comes with practice and real-world usage.

There was a point last week where I realized I’d crossed that barrier with JavaScript. Instead of searching online for code examples, I was writing my own JavaScript without much thought. Granted, the code I was writing was relatively simple, but I was the one writing it.

The biggest step I took in being able to think in JavaScript was dropping jQuery. I challenged myself to write any code that I needed in vanilla JavaScript. This helped me grasp some of the basic concepts that jQuery hides from developers.

I’m not writing this to knock jQuery (though it’s an unnecessary library nowadays). I do want to encourage other developers in the WordPress community to start writing vanilla JS. Gain a solid understanding of JavaScript before using a library built upon it. I think you’ll find that you probably don’t need a 95 kb library for most use cases and that you have a deeper understanding of the language in the end.

Another huge help for me has been our developer community here at Theme Hybrid. In our Slack channel, we’ve been sharing a lot of awesome JavaScript resources in the past year. We’re becoming more and more comfortable sharing JavaScript code and talking about it. So, find a community of like-minded people willing to help out in your journey (I hope you’ll join us).

19 Comments


  1. ·Reply

    Hi Justin,

    Thanks for your insight and I totally agree with you!

    I’m working on a project where I try to avoid jQuery as much as I can. This, and some tutorials on scotch.io made me see how much of the basics of javascript I just didn’t understand.

    But now and then I also see the simplicity jQuery provides. Do you use other libraries, polyfills or codebases to provide this?


    1. ·Reply

      I kind of look at it like this: jQuery is 95 kb, minified. If I’m not going to write anywhere near 95 kb of vanilla JS, then jQuery isn’t really helping me optimize the code that’s output. It might take a few more lines of code to do a few things, but the overall code is smaller. And, while I’d argue that jQuery is simpler to write, I’d argue that vanilla JS is easier to read.

      For those times when vanilla JS doesn’t cut it because of the lack of browser suport, I have used pollyfills. Primarily, those have been from the JavaScript section from Mozilla.

      1. In reply to Justin Tadlock
        ·Reply

        I see it the same way. Coding is also more sane like that, because it removes an unnecessary dependency. But I use a couple of plugins on my websites (like gravityforms) which rely on jQuery. So until I change these plugins or these plugins change themselves jQuery gets loaded anyway.

        Which browsers do you support regarding your polyfills? And what do you think about new syntax like template strings/literals?

        1. In reply to Erik Joling
          ·Reply

          I’m super excited about template literals. Using them is going to be a huge part aspect of JS development in the coming years.

          As for browser support, it depends on the project. Generally speaking, I follow a rule to support the latest version of each browser and the latest 2 versions of IE.

          1. In reply to Justin Tadlock

            That’s why I brought up template literals. IE doesn’t support them at all according to MDN. It’s such a shame to miss out on some great javascript improvements for that reason.

            Are you working around this or are you waiting to drop IE support somewhere in the future? In the latter case, please share it when the time is there!

        2. In reply to Erik Joling
          ·Reply

          I’m not actually using template literals at the moment. I’m just excited about them. 🙂

          I’ll cross the IE bridge when I come to it. I’m not quite there on my JS journey just yet.


  2. ·Reply

    And for what in WordPress exactly do you learn JavaScript?


    1. ·Reply

      I’m not sure I understand the question. Could you elaborate?


    2. ·Reply

      I think he meant where is vanilla JS used in WP.

      New rest API interaction, media library interface, Gutenburg editor, and frontend theme customizer.

      1. In reply to Ernest Smuga
        ·Reply

        New rest API interaction, media library interface, Gutenburg editor, and frontend theme customizer.

        As a simple Webdesigner (who actually makes some WP installs with Plugins, Theme etc.) I would say, this is the frontline where the Devs separate from the overwhelming majority of WordPress users. For, lets say, 99% of my clients programming is a black box full of magic and they don’t care, if there is JavaScript, PHP or Klingon working.
        So I have to decide, if dealing with JS is crucial for me or should I rely on the Devs and just buy their products or services.


    3. ·Reply

      If you’re a Web designer, you should absolutely be familiar with all aspects of Web design, which includes JavaScript. This is even more so if you have clients who rely on you to build and/or maintain their sites.

      The Web design landscape is shifting massively toward JavaScript. You’ll want to be familiar with the language or risk being left behind.

      1. In reply to Justin Tadlock
        ·Reply

        you should absolutely be familiar with all aspects of Web design

        all aspects? You know what that means?

        Do what you can best and leave the other stuff to the rest …

        Will it become impossible to use WordPress (and I mean using it as it is supposed to: a tool for the majority of users out there) without being a Master in JS programming? I don’t think so. Of course, it helps and knowledge can’t be overrated – … anyway, we will see.

        1. In reply to Jack Beauregard
          ·Reply

          You don’t need to know anything about design and development to use WordPress. That’s something completely different than being a Web designer, which is a job description that encompasses more than just knowing how to use a content management system.

          A Web designer should absolutely have some basic understanding of HTML, CSS, and JS. And, in the realm of WordPress, they’d need to understand some PHP too.

          Web designers (and I prefer the term “developers”) can have areas that they focus on. For example, I know dozens of great designers who primarily just do design. However, they, at least the ones who are great at their job, understand the fundamentals of HTML, CSS, JS, and PHP.

          We’re getting way off topic though. This is a post about JavaScript development for other developers in the WP community.


  3. ·Reply

    During WordPress development, I find that most plugins and themes load jQuery anyway. Writing anything vanilla JS to save on 95kb in WP would be useless because it will load anyway in the frontend and back end. Most images are in the 500 to 1000s kb range and will trump such a small library.

    Now the reason vanilla JS is SOOOO important has nothing to do with load times. It has everything to do with the future. WP is currently being set up to start using new technologies. Here are two example of why you need to learn Vanilla JS ASAP!

    The Rest API was invented so that we can use WordPress as a data and authentication server. We can create a standalone theme (HTML/CSS/JS) that makes rest calls to WordPress to get data and update itself. Once this start to become more popular you will see an influx of frontend Devs that use react.js, vue.js, and the like to create sites. This means the theme only loads once then the calls to update the theme in the frontend becomes lighting fast even when the user is logged and caching is limited.
    WP backend is already being transformed using Gutenberg as the first step which is JS heavy. In a couple years time to make the backend more user-friendly(competition is increasing for WP) it will become JS heavy with Rest API calls.

    WP has this habit to load WAY too much on every page load and it can be hard to scale especially when plugins and themes are heavy.

    If you just rely on jQuery which I love to this day and still use EVERY day then once the ball starts rolling with new technologies it will be quite overwhelming. Also building plugin/themes at the right time using JS and Rest API when the market is ripe for them will give you a great advantage to scale up fast and take some older theme/plugin companies that rely on page reloads out of the game. Time here would be crucial. Once WP decides on its JS technologies we can start creating amazingly fast and interactive website/applications.


    1. ·Reply

      I didn’t mean to imply that learning vanilla JS had anything to do with load times and probably should’ve just left that bit out. Although, I’d still argue that an unnecessary 95 kb should be avoided where possible. I wouldn’t even bother trying to get rid of jQuery on the backend for that reason. On the front end, I only use one plugin that loads jQuery, and I’m thinking of rewriting that myself just for my own edification.

      Nevertheless, my point is to learn and understand JavaScript itself. Why? For all the reasons you’ve so eloquently laid out. 🙂

      The game is changing; we’ve got to change with it.


  4. ·Reply

    Inspiring post. Until that time, I was hesitant to go too deeply into JS, and restrict yourself copy & paste with a bit of experimentation and creativity, but now, I’ll be brave. This is especially true in connection with some changes in the Customizer from WordPress 4.9


  5. ·Reply

    Great post Justin 🙂
    I’m also thinking of removing jQuery for my theme.
    The only thing I find hard to do with Vanilla JS is the effects, slide in/out, fade in/out, toggle, etc…
    Except that, it is possible to do almost anything that jQuery does.


    1. ·Reply

      For most effects, I’m not even relying much on JavaScript. Basically, I’m just using JavaScript to toggle a class. That’s as simple as:

      element.classList.toggle( 'state-class' );
      

      Or, something along those lines. Then, use CSS to handle the “effect” aspect of that. With CSS transition, you can make some cool things happen with little work.

      Check out the mobile menu button here on this site (shrink your browser window if on desktop). That’s all handled by toggling a few classes in JS. The rest is just pure CSS.

      I’m sure there’s some more complex issues that I haven’t gotten around to yet though. Those will be an interesting learning experience.


  6. ·Reply

    I prefer the term Web”worker” 🙂

    But anyway, these are just terms.

Leave a Reply to Jack Beauregard Cancel reply

Your email address will not be published. Required fields are marked *