Raise your hand if you’ve ever used libraries like jQuery or Underscore.js 🙋. Don’t be shy, this is a safe space 😇… Besides, I know you’ve used them. Why wouldn’t you? All the utilities they include make our lives easier and they’re already included in WordPress Core, right? But think about the following question: does it make sense to use a library just because you can? Shouldn’t you be more mindful of what you use and why?
The goal of a library is to abstract a set of more or less complex operations and build an API with convenient, easy-to-use functions. For instance, with jQuery you can perform operations like manipulating the DOM, managing events, creating animations, and so on. To do this, jQuery exposes a clear and concise API that’s compatible with all major browsers.
Libraries are toolsets for developers—they help us be more efficient. In fact, you’ll find the perfect summary of what a library is in jQuery’s logo: “write less, do more”. That’s the goal: to make easy what, by definition, isn’t.
If you don’t already know this library (really?), Wikipedia’s article has a pretty good overview of its features and history. Then, you can move to the official docs or any online tutorial to learn the basics and get the most out of it.
Another common library (but not as famous as jQuery) is Underscore.js, which includes several utility functions. Some common examples are the functions
map (to convert one array in another by mapping each element into something different),
filter (to filter the elements that satisfy a certain condition), or
pluck (to convert an array of objects into an array of values extracted from a property of said objects), among many, many others.
One of the reasons for Underscore.js being “so” popular is its relationship with the MVC framework Backbone. Backbone offers all the required tools to create data models and views, and bind everything with its own event system. If you don’t know this framework, maybe you’ve heard of React, Angular, or Vue, all of which are Backbone alternatives. From our perspective, the main difference is the fact that Backbone and Underscore.js are included in WordPress Core.
So, if libraries are so great, if they ease our jobs that much… why wouldn’t we use them? Well, the main problem with libraries like jQuery, Underscore.js, or Backbone is their weight. For instance, jQuery is about 250kb (90kb if minified). Not that bad, huh? But, if you have 50,000 monthly visitors, jQuery will consume 4Gb! So I think you should ask yourself the following question: do I really need this library? Or am I using it only because I already know the technology?
I used to use jQuery everywhere. It didn’t matter how easy or complex the problem I was trying to solve was—using jQuery was just… convenient. For instance, if I wanted to change some text in my page, I’d load jQuery to retrieve the element and edit it easily (
$('.element').text('text')). Of course, this was a poor decision.
Sure, it’s slightly more verbose… but it’s not 90kb long, isn’t it? Moreover, using native operations is always faster than relying on a third-party library.
2. Traversing the DOM
3. Setting and Getting Attributes
4. Operating with Multiple Nodes from the DOM
One of the great features included in jQuery is command chains. For instance, you can select a set of elements and apply an operation (like adding a class) to the whole collection:
5. Working with Arrays
Finally, if you were wondering how we can use ECMAScript 6 functions and syntax to implement the chained command we saw in the previous section, here you have it:
Essentially, we select multiple elements using
querySelectorAll and apply a lambda function to all the elements in the result using the
forEach operator. As you can see, lambda functions in ECMAScript 6 got rid of all the syntax sugar and can be expressed more succinctly. Cool, huh?
6. Working with Objects
One of my favorite functions included in Underscore.js for working with arrays of objects is
pluck. This function extracts the value of a certain property from all the elements included in the array, creating a new array. If you compare the Underscore.js function and its vanilla JS counterpart (again, using ECMAScript 6), you’ll see that both alternatives take exactly the same number of characters, which is pretty cool: