1. Erik Joling

    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?

    • Justin Tadlock

      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.

      • Erik Joling

        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?

        • Justin Tadlock

          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.

          • Erik Joling

            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!

        • Justin Tadlock

          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. Jack Beauregard

    And for what in WordPress exactly do you learn JavaScript?

    • Justin Tadlock

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

    • Ernest Smuga

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

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

      • Jack Beauregard

        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.

    • Justin Tadlock

      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.

      • Jack Beauregard

        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.

        • Justin Tadlock

          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. Ernest Smuga

    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.

    • Justin Tadlock

      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. Dmitry

    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. Nicolas

    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.

    • Justin Tadlock

      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. Jack Beauregard

    I prefer the term Web”worker” 🙂

    But anyway, these are just terms.

Comments are closed.