But what made jQuery so good?
jQuery has brought a revolution to the web. One of the more interesting programming patterns it used was functionality chaining (or function chaining). It made your code looked like magic.
It transformed code chunks like this:
var node = document.createElement("p");
var textnode = document.createTextNode("Test");
But it didn’t end there. When I first started Web Development. jQuery did magic things that left me baffled. Things like this:
What’s happened here? We wrote something which looks plain and clear to everyone who reads it. No more spaghetti.
Let’s describe the code in plain English:
.myClass elements. Add a new class name to them called
bird . Make them all appear. And finally apply some cool animation as soon as the user sees them.
Awesome right? The flow is very clear, and we know exactly what’s happening.
Element -> action on element -> action on element -> action on element.
That’s really cool, but how does jQuery do that?
This concept allows us to write code like this:
We don’t have to cast the result of the function to a variable before using it. Here’s a weirder example with a function returning an array.
How it may be related to chaining your might ask? Well, because ‘Apple’ is a string, we can chain another operation or function at the end of it.
How might we use this in our daily code? An ‘Apple’ string is an object that contains the
substr methods that allows us to use the magic we above. Why not create our own unique object for our purposes?
First, here’s a mini-jquery mock we can write using this method:
This will take the
.example DOM and turn it into a red 100x100 square with the text ‘hello world’ in it, run the code here.
This is a very clean way to write an object that will manipulate the DOM, especially because all the commands run top to bottom and are in simple reading order.
The only minor caveat is the constant
wrap(el) return in the ‘wrap’ function. We have to do this in order to return an object that contains all the functions. This code can be optimized further (See at the end of the post), but it serves the purpose of this post.
Now let’s see another example which is not related the the DOM. We’ll create a student object with student functionality.
I have a
newStudent function which receives a name and returns a default student object. The
wrap function contains all the actions the student can perform like
Now we can tell the heart breaking story of a student named Josh using only chaining:
It’s top to bottom in a clear order. We give the user some homework, he tries to do them only to realize he misses a pencil to do his home work. Josh takes a ruler and some coffee, goes to do his home work again, still missing a pencil. Finally Josh takes a pencil and does this home work.
jQuery has dropped in popularity in favor for newer frameworks like React, Angular, Inferno, Preact, and Vue. The main reason is that direct DOM manipulations are hard and rarely necessary. Despite that we can learn a great deal from jQuery.
Better Student implementation
If you are interested in implementing the above in your code, read the following.
I tried to keep the examples simple. The following pattern will run faster due to use of
prototype functions ( class functions ) and is Immutable, so use it instead:
Using external libraries is not necessary, but is helpful, especially when dealing with nested objects. Consider Immutable and/or Ramda to maintain Immutable state.
Also notice the implementation of the
map function, which makes our student into a functor as well.